「react」タグのついた53記事

Button で学んだデザイントークン・cva・cn・Slot・型のパターンを、デザイントークン / プリミティブ / パターンの 3 階層からなる 1 つのデザインシステムとしてまとめる最終章。チーム運用のポイントと次のステップも紹介します。

shadcn/ui の cn 関数を構成する clsx と tailwind-merge の内部挙動を、実際の動作結果とともに解説する章。falsy の除外、conflict group による競合解決、clsx → twMerge の順序の理由を学びます。

cva（class-variance-authority）でスタイルバリアントを宣言的に管理する章。cva が内部で何をしているのか、競合解決を「やらないこと」まで解説します。

Reactを学ぶ前に、モダンJavaScript（ES6以降）の重要な機能を確認しましょう。これらの知識はReact開発で頻繁に使用します。

この章では、ReactのUIを記述するための構文であるJSXを学びます。

この章では、NestJSとPrismaを使用して、React SPAのためのバックエンドAPIを構築します。

この章では、Reactのフルスタックフレームワークである Next.js について学びます。

この章では、ReactのcreatePortalを使用したモーダルの実装について学びます。

この章では、コンポーネントにデータを渡すためのPropsについて学びます。

radix-ui の Slot と asChild パターンを扱う章。スタイルを保ったままレンダリングされる HTML 要素を差し替える「合成（composition）」の考え方を解説します。

この章では、ReactとTypeScriptを組み合わせた型安全なフロントエンド開発について学びます。

モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ全 30 章のガイド。JavaScript の前提から Hooks・状態管理・パフォーマンス・Next.js・フルスタック実装までステップを踏んで進められます。

ref で DOM 要素にアクセスする方法を扱う章。React 19 で ref が通常の prop になった新しい書き方を本筋に、従来の forwardRef も押さえます。

React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応。Button を題材に、デザイントークン・cva・cn・Radix Slot を通じて、デザインシステムに沿った再利用可能なコンポーネント設計を学ぶ全 13 章のガイド。

この章では、シングルページアプリケーション（SPA）における認証の設計と実装について学びます。

この章では、コンポーネントの状態を管理するStateについて学びます。

React 開発でデファクトとなった Tailwind CSS を React で実用するための章。セットアップと基本は別ガイドに任せ、本章は variants 設計・clsx / tailwind-merge / cn ユーティリティ・shadcn/ui との連携など React 統合特化のパターンを扱います。

Tailwind CSS のユーティリティファーストの考え方を、shadcn/ui Button の実クラス列を分解しながら学ぶ章。レイアウト・状態修飾子 (hover / focus-visible / disabled)・スペーシングスケール・デザイントークンの入り口を解説します。

テストを先に書くと設計がどう変わるかを、PHP と React の両方で追う全 14 章のガイド。Red-Green-Refactor のサイクル、テストダブルの 5 分類、テストが書きにくいコードの直し方から、レガシーコードへの後付けと TDD が効かない場面までを扱います。

shadcn/ui の Button を支える TypeScript の型を扱う章。React.ComponentProps・VariantProps・交差型による props 定義と、React 19 で forwardRef のジェネリクスが不要になった理由を解説します。

この章では、コンポーネントツリー全体でデータを共有するための`useContext`フックについて学びます。

この章では、副作用（Side Effect）を扱う`useEffect`フックについて学びます。

この章では、複雑な状態ロジックを管理するための`useReducer`フックについて学びます。

この章では、DOMへの直接アクセスや値の保持に使用する`useRef`フックと、関連するAPIについて学びます。

Zod でスキーマを定義し、型推論・React Hook Form 連携・API レスポンスの実行時検証までを学びます。

この章では、Reactでのイベント処理について学びます。

この章では、ロジックを再利用可能な形で抽出するカスタムフックについて学びます。

この章では、Reactのクラスコンポーネントについて学びます。現在のReact開発では関数コンポーネントが主流ですが、既存のコードベースの理解やError Boundaryの実装のために知識が必要です。

本書は、モダンな React 開発を基礎から体系的に学ぶための入門書です。JavaScriptの基礎からReactの高度なトピックまで、実践的なスキルを段階的に身につけることができます。

この章では、Reactの基本単位であるコンポーネントについて学びます。

この章では、Reactにおけるスタイリング手法の全体像を把握し、各アプローチの特徴と使い分けを学びます。

この章では、サーバー状態管理のデファクトスタンダードである「TanStack Query」を学びます。

bg-primary の色がどこから来るのかを解説する章。デザイントークンの 2 階層（プリミティブ / セマンティック）、OKLCH カラー、Tailwind v4 の @theme inline によるトークン定義、ライト / ダークテーマの仕組みを学びます。

この章では、Reactアプリケーションのデバッグ手法とReact Developer Toolsの使い方を学びます。

この章では、Reactアプリケーションのパフォーマンスを最適化するための手法を学びます。

この章では、Reactでのフォームの扱い方を学びます。

この章では、これまで学んだすべての知識を統合し、React + NestJS + Prismaによるプロジェクト管理アプリ（Trelloライク）を構築します。

React・Vue・Tailwind CSS・shadcn/ui・Base UI などフロントエンド開発に関するノートをまとめるドメインのハブ。UI 構築・スタイリング・コンポーネント設計を扱います。

この章では、React RouterによるSPAのルーティングを学びます。

カスタムフックへ切り出すかどうかを、テストの書きにくさから判断します。切り出さないという判断も同じ重みで扱います。

本書で組み立てる shadcn/ui Button コンポーネントの完成形を先に確認する章。cva・cn・Radix Slot・デザイントークン・React 19 の ref など、使われている技術の全体像と基本的な使い方をつかみます。

この章では、これまで学んだ知識を活かして、実践的なタスク管理アプリを構築します。

素の button から始めて、Tailwind のデザイントークン・cva・cn・asChild (Slot)・TypeScript の型を 1 ステップずつ重ね、shadcn/ui 流の Button コンポーネントをゼロから完成させる実践演習の章。success バリアントやローディング状態の追加課題も扱います。

宣言的 UI と命令的 UI の違いを、同じ画面を 2 通りで書き比べながら解説します。なぜ宣言的 UI で状態と表示の不整合が減るのか、それでも DOM を直接触る必要が残るのはどこか、どんな代償を払っているのかを扱います。

利用者から見える振る舞いに対してテストを書きます。内部の状態やクラス名に依存したテストが、リファクタで落ちる様子を実際に見ます。

shadcn/ui の Button を題材にデザインシステム設計を学ぶガイドの導入章。本書の目的・対象読者・全 13 章の構成と、なぜ Button がコンポーネント設計の題材になるのかを説明します。

この章では、条件に応じたレンダリングと、配列データのリスト表示を学びます。

楽観的更新 (Optimistic Update) の仕組みを、成功を前提に UI を先へ進めてから失敗時にロールバックする流れで解説します。何が速くなり何は速くならないか、使ってよい場面と避けるべき場面、サーバー側バリデーションを省略できない理由を扱います。

この章では、React 開発で人気の状態管理ライブラリ「Zustand」を学びます。

Vite + React 19 + TypeScript + Tailwind CSS v4 で shadcn/ui Button 学習用の開発環境を構築する章。cva・clsx・tailwind-merge・radix-ui の導入、cn 関数の作成、パスエイリアスの設定までを手順で解説します。

Button で学んだ cva・cn・Slot・デザイントークンのパターンを Badge・Input・Card・Alert に応用する章。コンポーネントごとのパターン選択ガイドと設計のベストプラクティスをまとめます。

この章では、Vite + React + TypeScriptの開発環境を構築します。

08 章で形を決めた API を呼ぶ側を書きます。読み込み中と成功とエラーと空の 4 つの状態を、実装より先にテストで要求します。