フレームワーク プログラミング ソフトウェア 2026.05.15 27 shadcn/ui とは何か？コピペ前提の UI コンポーネント集が React UI の流儀を変えた理由 shadcn/ui は 「npm の依存パッケージではなく、CLI で自分のコードベースに直接コピーする UI コンポーネント集」 という新しい思想で広まった React 向け UI です。Radix UI + Tailwind の上に作られ、改変も自由。MUI / Chakra UI など 「npm に依存するライブラリ」 との根本的な違い、採用判断軸を整理します。 # React # Tailwind # shadcn/ui
プログラミング フレームワーク ソフトウェア 2026.05.15 23 TanStack Query(旧 React Query)とは何か？非同期データ取得とキャッシュの標準ライブラリ TanStack Query(旧 React Query)は、「サーバから取ったデータをキャッシュし、適切に同期する」 ためのライブラリで、React / Solid / Vue / Svelte で使えます。「useState + useEffect + fetch」 で苦労していた多くの場面を 「useQuery」 1行で置き換えられる、現代フロントエンドのデファクトです。 # React # 状態管理 # キャッシュ
フレームワーク プログラミング ソフトウェア 2026.05.15 18 Server Actions とは何か？Next.js / React で 「フォームから関数を直接呼ぶ」 仕組みと API Routes との違い Server Actions は Next.js / React の新しい仕組みで、「サーバで実行される関数をクライアントから直接呼べる」 機能です。「use server」 宣言とフォームの action 属性を組み合わせて、API Routes を書かずにサーバ処理を呼べるため、フォーム送信や CRUD が大幅にシンプルになります。仕組み、API Routes / tRPC との使い分けを整理します。 # Next.js # React # App Router
プログラミング フレームワーク ソフトウェア 2026.05.15 16 Storybook とは何か？UI コンポーネントを単体で開発・カタログ化する定番ツールの使いどころ Storybook は 「UI コンポーネントをアプリケーションから切り離して、単体で開発・確認・テストする」 ためのツールです。React / Vue / Svelte / Angular など主要 UI フレームワークに対応し、デザインシステムの中核、Visual Regression テストの基盤としても定着しています。何ができるか、いつ使うか、AI 時代に向けた現状を整理します。 # React # Storybook # コンポーネント
フレームワーク プログラミング ソフトウェア 2026.05.15 16 Svelte / SvelteKit とは何か？コンパイル型 UI フレームワークの特徴と React との使い分け Svelte は 「仮想 DOM ではなくコンパイル時に最適化された JS を出力する UI フレームワーク」 で、Svelte 5 では新しい 「Runes API」 によりリアクティビティが大きく刷新されました。SvelteKit はそれを土台にしたフルスタックフレームワークで、SSR / SSG / Edge をサポート。React との違い、書き味、採用判断軸を整理します。 # TypeScript # React # フロントエンド
フレームワーク プログラミング ソフトウェア 2026.05.15 15 React Compiler とは何か？useMemo / useCallback を自動化する公式コンパイラの仕組みと採用判断 React Compiler は Meta が開発する React 公式のコンパイラで、「useMemo / useCallback / memo を書かなくても、必要な箇所だけ自動でメモ化」 してくれます。「Rules of React に準拠していれば手動最適化が不要になる」 という大きな変化で、Next.js / Vite / Babel から導入できます。仕組み、Rules of React、採用判断軸を整理します。 # React # パフォーマンス # React Compiler
フレームワーク プログラミング ソフトウェア 2026.05.15 15 Solid.js とは何か？シグナル駆動・仮想 DOM なしで動く高速 UI フレームワークと React との使い分け Solid.js は 「JSX で書くが仮想 DOM を使わず、シグナル駆動の細かいリアクティビティで動く」 高速 UI フレームワークです。React に書き味は近いものの、「関数コンポーネントは1度しか実行されず、変更検知は依存単位」 という設計で、パフォーマンスとシンプルさを両立しています。React との違い、SolidStart、採用判断軸を整理します。 # React # JSX # Solid.js
プログラミング ソフトウェア 2026.05.15 19 Zod とは何か？TypeScript のスキーマバリデーションが事実上の標準になった理由と使い方 Zod は TypeScript のスキーマ宣言とバリデーションを統合したライブラリで、「スキーマから型を自動推論」 + 「実行時の検証」を1つの定義で済ませられるのが特徴です。API 入力検証、フォームバリデーション、環境変数の検査、tRPC との連携など、TS エコシステムの事実上の標準として広く使われる理由と基本的な使い方を整理します。 # TypeScript # React # Zod
フレームワーク プログラミング ソフトウェア 2026.05.15 19 React Server Components(RSC)とは何か？仕組み・Client Components との違い・Next.js App Router での使い方 React Server Components(RSC)は、サーバ側で実行され HTML として返ってくる新しい React コンポーネントの種類です。クライアント JS を出力せず DB や API を直接叩ける一方で、「useState」 等は使えません。Client Components との違い、「use client」 境界、Next.js App Router での使い方、データ取得・キャッシュの考え方を整理します。 # Next.js # React # App Router
