使用ライブラリ一覧
UI Memo で使用しているライブラリの一覧です。カテゴリ別に整理しています。
「最新バージョン」はnpm registryから自動取得し、毎日自動更新しています。最終確認日時はページ上部に表示されます。
「デモ実装バージョン」は掲載時点での動作確認バージョンです。
このページでわかること
- UI Memo で使用している全ライブラリのバージョンと対応UIパターン
- npm registry から毎日自動取得する最新バージョンと、デモ実装バージョンの差分
- 用途別の選定基準と、複数ライブラリを併用するときの考え方
- メジャーアップデートの傾向と、本サイトの更新方針
ライブラリの選び方
React + TypeScript 環境で使う UI ライブラリは、大きく3層に分けて考えると整理しやすい。
1. 総合UIライブラリ（コンポーネント数が多く、統一感のあるデザインシステム）
Mantine / Ant Design / Chakra UI / MUI / shadcn/ui / PrimeReact など
2. 特化型ライブラリ（特定UIに最適化）
- データ可視化: Recharts / Nivo / ECharts / Plotly / Chart.js
- アニメーション: Framer Motion / GSAP / React Spring
- カルーセル: Swiper / Embla Carousel / Keen Slider
- フォーム: React Hook Form / Formik + Zod / Yup
3. ユーティリティ系
- 日付処理: date-fns
- シンタックスハイライト: Shiki / Prism / highlight.js
総合ライブラリを1つに統一すると保守が楽だが、特化型と組み合わせる構成も実務では多い（例: Mantine + Recharts、shadcn/ui + Framer Motion）。
目的別おすすめライブラリ
やりたいことから逆引きで選ぶ場合の指針。
| やりたいこと | 第一候補 | 代替候補 |
|---|---|---|
| 統合UIで素早く組み立てたい | Mantine | Ant Design / Chakra UI |
| デザインを完全制御したい | shadcn/ui | Tailwind CSS のみ |
| エンタープライズUIを作りたい | Ant Design | MUI |
| データダッシュボードを作りたい | Recharts | ECharts / Plotly |
| 物理アニメーションを実装したい | Framer Motion | React Spring |
| ScrollTrigger・MorphSVG など複雑アニメ | GSAP | − |
| フォームバリデーション | React Hook Form + Zod | Formik + Yup |
| カルーセル（軽量・高速） | Embla Carousel | Keen Slider |
| カルーセル（多機能・豊富なエフェクト） | Swiper | − |
| データグリッド（大量行） | @mui/x-data-grid / ag-grid | @tanstack/react-table |
UIコンポーネント
Material Design準拠のReact UIコンポーネントライブラリ。Button・TextField・Dialogなど豊富なコンポーネントを提供
- 最新バージョン
- –
- デモ実装バージョン
- v9.0.0
- デモ実装日
- 2026-04-12
Material UIと統合されたデータグリッド。ソート・フィルタ・ページネーション・インライン編集が標準装備
- 最新バージョン
- –
- デモ実装バージョン
- v9.0.1
- デモ実装日
- 2026-04-11
アクセシビリティ重視のReact UIライブラリ。colorPalette propでカラーテーマを柔軟に制御できる
- 最新バージョン
- –
- デモ実装バージョン
- v3.34.0
- デモ実装日
- 2026-04-16
コピー&ペーストで使えるReact UIコンポーネント集。Radix UI + Tailwind CSSベース
- 最新バージョン
- –
- デモ実装バージョン
- v4.2.0
- デモ実装日
- 2026-04-08
Embla Carousel ベースの Mantine 公式カルーセルコンポーネント
- 最新バージョン
- –
- デモ実装バージョン
- v9.2.1
- デモ実装日
- 2026-05-20
最も人気のカルーセル・スライダーライブラリ。モジュラー設計で豊富なエフェクトに対応。v14でランタイム依存ゼロに
- 最新バージョン
- –
- デモ実装バージョン
- v14.0.1
- デモ実装日
- 2026-07-05
依存ゼロ・超軽量のヘッドレスカルーセルライブラリ。Mantine・shadcn/uiの内部エンジン
- 最新バージョン
- –
- デモ実装バージョン
- v8.6.0
- デモ実装日
- 2026-05-20
React Hooks ベースの軽量カルーセルライブラリ。タッチ操作・カスタムプラグイン対応
- 最新バージョン
- –
- デモ実装バージョン
- v6.8.6
- デモ実装日
- 2026-05-20
UIライブラリ非依存のスケルトンスクリーン専用ライブラリ。count・circle・SkeletonThemeで複数行や円形プレースホルダを手軽に実装できる
- 最新バージョン
- –
- デモ実装バージョン
- v3.5.0
- デモ実装日
- 2026-05-26
データ可視化
Chart.js 用の箱ひげ図プラグイン
- 最新バージョン
- –
- デモ実装バージョン
- v4.4.5
- デモ実装日
- 2026-03-21
Plotly.jsの軽量ビルド。ズーム・パン・ホバーなどのインタラクティブ機能が標準装備で科学系・統計系グラフに強い
- 最新バージョン
- –
- デモ実装バージョン
- v3.7.0
- デモ実装日
- 2026-07-06
Plotly.jsのReactラッパー。dynamic importでSSR非対応に対応して使用する
- 最新バージョン
- –
- デモ実装バージョン
- v4.0.0
- デモ実装日
- 2026-07-06
Baiduが開発した高機能チャートライブラリ。JSONベースの設定で直感的に記述でき、カスタマイズ性が非常に高い
- 最新バージョン
- –
- デモ実装バージョン
- v6.0.0
- デモ実装日
- 2026-04-29
Apache EChartsのReactラッパー。dynamic importでSSR非対応に対応して使用する
- 最新バージョン
- –
- デモ実装バージョン
- v3.0.6
- デモ実装日
- 2026-04-29
20種類以上のチャートタイプを持つモダンなJavaScriptチャートライブラリ。JSONベースの設定で直感的に記述でき、ズーム・パン・ツールチップが標準装備
- 最新バージョン
- –
- デモ実装バージョン
- v5.10.6
- デモ実装日
- 2026-04-22
ApexChartsのReactラッパー。dynamic importでSSR非対応に対応して使用する
- 最新バージョン
- –
- デモ実装バージョン
- v2.1.0
- デモ実装日
- 2026-04-22
GitHub のコントリビューショングラフ風カレンダーヒートマップ
- 最新バージョン
- –
- デモ実装バージョン
- v1.10.0
- デモ実装日
- 2026-03-21
force-graph を使った 2D/3D ネットワークグラフ React コンポーネント
- 最新バージョン
- –
- デモ実装バージョン
- v1.48.2
- デモ実装日
- 2026-03-21
Canvas ベースの 2D ネットワークグラフ React コンポーネント
- 最新バージョン
- –
- デモ実装バージョン
- v1.29.1
- デモ実装日
- 2026-03-21
Mantineと統合されたチャートライブラリ。Treemap・棒グラフ・折れ線グラフなどを提供
- 最新バージョン
- –
- デモ実装バージョン
- v9.1.1
- デモ実装日
- 2026-05-01
アニメーション
物理ベースのアニメーションライブラリ。バネ物理学に基づいた自然な動きを宣言的に記述でき、useSpring / useTransition / useTrail / useChain で多彩なアニメーションパターンに対応
- 最新バージョン
- –
- デモ実装バージョン
- v10.0.3
- デモ実装日
- 2026-04-24
業界標準のJavaScriptアニメーションライブラリ。高パフォーマンス・豊富なイージング・ScrollTriggerなどのプラグインで多彩なアニメーションを実現
- 最新バージョン
- –
- デモ実装バージョン
- v3.15.0
- デモ実装日
- 2026-04-24
GSAPのReact統合フック。useGSAPでコンテキストスコープとクリーンアップを自動管理し、contextSafeでイベントハンドラ内のアニメーションも安全に作成できる
- 最新バージョン
- –
- デモ実装バージョン
- v2.1.2
- デモ実装日
- 2026-04-24
タッチ・ジェスチャー
データ入力・フォーム
React 向けのチャット UI コンポーネントキット
- 最新バージョン
- –
- デモ実装バージョン
- v2.1.1
- デモ実装日
- 2026-03-21
Reactで最も広く使われるセレクトボックスライブラリ。単一選択・複数選択・検索・グループ化・非同期読み込みに対応
- 最新バージョン
- –
- デモ実装バージョン
- v5.10.2
- デモ実装日
- 2026-04-15
パフォーマンス重視のReactフォームライブラリ。再レンダリングを最小限に抑えたバリデーション管理
- 最新バージョン
- –
- デモ実装バージョン
- v7.72.1
- デモ実装日
- 2026-04-11
react-hook-formにZod・Yupなどのバリデーションライブラリを接続するリゾルバー集
- 最新バージョン
- –
- デモ実装バージョン
- v5.2.2
- デモ実装日
- 2026-04-11
シンプルなAPIのReactフォーム管理ライブラリ。values・errors・handleChangeを一括管理
- 最新バージョン
- –
- デモ実装バージョン
- v2.4.9
- デモ実装日
- 2026-04-11
JavaScriptオブジェクトのスキーマバリデーションライブラリ。FormikやRHFと組み合わせて使用
- 最新バージョン
- –
- デモ実装バージョン
- v1.7.1
- デモ実装日
- 2026-04-11
レイアウト
シンタックスハイライト
Python製UI
その他ユーティリティ
アップデート傾向と運用方針
React UIライブラリは、半年〜1年に一度のペースでメジャーアップデートが入ることが多い。破壊的変更を含むケースもあるため、デモ実装バージョンを即座に追従させると保守コストが急増する。
本サイトでは各ライブラリの最新バージョンを npm registry から毎日自動取得し、デモ実装バージョンとの差を可視化している。判定基準は次の通り:
- ✅ 最新確認済み: デモ実装バージョンが最新と一致
- ⚠️ 旧バージョン確認済み: マイナー・パッチアップデート差あり（動作影響は通常なし）
- 🚨 メジャーアップデートあり: 破壊的変更の可能性あり、再検証対象
- 🚧 正式リリース前バージョン: alpha / beta / RC 等
- 🌙 npm長期未更新: 最新版公開から365日以上経過
更新状況サマリー
メジャーバージョンの差異で分類。npm長期未更新の判定基準は最新版公開から365日以上。
メジャーアップデートあり
集計中...
最新・ほぼ最新
集計中...
npm長期未更新
集計中...
※ Anthropic公式スキルはこのライブラリ一覧の対象外（npm/pypiパッケージではないため）。更新状況は別ページで管理しています。📅 2026-06-21 確認 — Claude公式スキルを見る →
よくある質問
複数のUIライブラリを併用していい？
可能だが、デザイントークン（色・タイポグラフィ・スペーシング）の衝突に注意する必要がある。理想は1つの総合ライブラリ + 必要な特化型の組み合わせ。CSS のスコープ管理（CSS Modules / Tailwind / CSS-in-JS）も併せて検討する。
shadcn/ui は npm パッケージじゃないのに、最新バージョンはどう判断する？
shadcn/ui はコピー&ペーストで使うコード集なので、厳密な「npm最新バージョン」は存在しない。公式リポジトリの最新リリースタグや、自分のプロジェクトに取り込んだ時点のバージョンを管理する形になる。本サイトでは取り込み時点のリリースを記録している。
ライブラリ選定で失敗しないコツは？
「公式の更新頻度」「GitHub スター数の伸び」「ドキュメントの充実度」「TypeScript 対応の質」「日本語情報の量」を確認するのが基本。一度採用すると差し替えコストが高くなりやすいので、小規模な画面から試して感触を掴むのが安全。
古いバージョンのままデモを置く理由は？
メジャーアップデートで破壊的変更が入った場合、移行コストが高いため即座には更新しない方針。学習目的では「動くコード」が最優先で、最新追従より検証済みのバージョンを置く方が有用と判断している。バージョン差は本ページで可視化している。
ライブラリを追加リクエストできる？
サイト下部の「Buy Me a Coffee」リンクなどから連絡可能。比較対象として有用そうなライブラリがあれば検討する。
Zenn