React初心者の次のステップ：実践的ダッシュボード開発演習

Reactの公式チュートリアルを終わった後に、少し実践的なReactと実務に近い課題があればいいなと思ったので、作ってみました。

この記事では、React19、TypeScript、Tailwind CSS v3を使った実践的なダッシュボード開発の演習問題となります。段階的に機能を追加していくことで、フロントエンド開発の基本的なスキルを身につけることができますので、お楽しみください。

※内容は課題とヒントという構成になっており、正解を用意しているわけではありません。
　検索をしたり、AIを頼りにしながら進める課題となっております。

対象読者

この記事は主に以下を対象としています：

• Reactの基本を学んだけど実践的な課題が欲しい方
• TypeScriptとReactを組み合わせた開発経験を積みたい方

開発フロー

実践的な開発フローを体験するために、以下のようなGitブランチ戦略を取ります：

1. GitHubリポジトリを作成し、
   (いれば、レビュー用に協力者をコラボレーターとして追加する。これをベースにAIと対話するのも良いですが、間違った方向を正すのは難しいため、その点を考慮した上で使用する。)

2. 各フェーズごとに以下のブランチ戦略で開発を進める：

   • feature/phase-1 ブランチを作成して第1フェーズを実装
   • 実装完了後、main へのプルリクエストを作成
   • レビュー後、main にマージ
   • main から feature/phase-2 を作成して次のフェーズへ進む
   • 以降同様に進める

環境構築

まずは開発環境のセットアップから始めましょう。

課題：開発環境のセットアップ

要件：

• Node.js v20以上とnpmが入っていることを確認する
• Vite を使用して新しいプロジェクトを作成する
• プロジェクトディレクトリに移動
• 必要なパッケージをインストールする:

  # React Routerのインストール
  npm install react-router-dom
  
  # SWRのインストール
  npm install swr
  

• Tailwind CSS v3を適切に設定する
• プロジェクトが正常に起動することを確認する
• GitHubリポジトリを作成し、コラボレーターを追加する

確認ポイント：

• プロジェクトが正常に起動すること(npm run dev)
• Tailwind CSSが正常に機能しているか
• 作成したプロジェクトが正常にブラウザで表示されるか

第1フェーズ: 基本レイアウト構築

管理ダッシュボードの基本的なレイアウトを作成します。

課題1：管理ダッシュボードの基本レイアウトを作成

要件：

• サイドバーには以下のメニュー項目を含める
  • ダッシュボード（ホーム）
  • ユーザー管理
  • 設定
• 画面幅が1000px以下になると、サイドバーは折りたたまれる仕様とする
• サイドバーの開閉を制御するボタンを実装する
• コンポーネントには適切な型定義を付ける（typeキーワードを使用）
• スタイリングには Tailwind CSS を使用する
• サイドバーコンポーネントとメインコンテンツコンポーネントを適切に分割してレイアウトを行う

ヒント：

• Tailwind CSSのflex、grid、hidden等のクラスを活用する
• レスポンシブデザインにはTailwindのブレークポイント（sm:, md:, lg:等）を利用する
• Reactの親と子のツリー構造から状態の渡し方を考える

第2フェーズ: ルーティングと状態管理

各ページのルーティングと基本的な状態管理を実装します。

課題2：ルーティングと状態管理の実装

要件：

• React Routerを使用して、各メニュー項目に対応するページコンポーネントを作成する
• Linkとnavigationの作成
• 現在アクティブなメニュー項目を視覚的に区別できるようにする（Tailwind CSSで適切にスタイリング）
• すべての状態には適切な型定義を行うこと（typeキーワードを使用）
• サイドバーとメインコンテンツエリアを持つレイアウト

ヒント：

• useStateを適切に使い分ける
• ルーティングはReact Router v6のBrowserRouterとRoutesコンポーネントを使用する

第3フェーズ: データ取得と表示

APIからデータを取得し、ダッシュボードに表示します。

課題3：APIデータの取得と表示

要件：

• JSONPlaceholder API (https://jsonplaceholder.typicode.com/) からデータを取得する
  • ダッシュボードページでは /posts データを使用
  • ユーザー管理ページでは /users データを詳細に表示
• データ取得には useSWR を使用すること
• データ取得中はローディングインジケータを表示する
• エラー発生時は適切なエラーメッセージを表示する
• 「ダッシュボード」ページには概要データを表示（投稿数など）
• 「ユーザー管理」ページには詳細データを表形式で表示
• APIレスポンスデータには必ず type キーワードを使って型定義を行うこと

ヒント：

# useSWRのインストール
npm install swr

• 基本的な使い方:

const { data, error, isLoading } = useSWR(url, fetcher)

• 型定義の例:

type Post = { 
  id: number; 
  title: string;
  // ... 
}

第4フェーズ: FormとUser管理のための環境構築

フォーム管理のための環境を整えます。

課題4：フォーム管理環境のセットアップ

要件：

• 必要なパッケージのインストール

# フォーム関連パッケージのインストール
npm install react-hook-form zod @hookform/resolvers/zod

• react-hook-formとZodのドキュメントを確認し、役割について理解する

ヒント：

• react-hook-formは、Reactでフォームを扱うためのライブラリで、不要な再レンダリングを防ぎパフォーマンスを向上させます
• zodは型安全なバリデーションスキーマビルダーで、TypeScriptと強力に連携します
• @hookform/resolversは、zodなどのバリデーションライブラリをreact-hook-formに統合するためのアダプターです
• zod.objectで作成したスキーマから型を自動生成できることがポイント:

type FormData = z.infer<typeof formSchema>

第5フェーズ: Formの作成

ログインフォームを作成します。

課題5：ログインフォームの実装

要件：

• /login ルートを設定
• react-hook-formとzodを使用した基本的なフォームを
  login pageに作成(メールとパスワードとログインボタン)
• Zodを利用したバリデーションとエラー表示の実装

ヒント：

• register, handleSubmit, formStateなどのreact-hook-formの機能を確認しながら使う

第6フェーズ: Context APIで認証状態の管理

Context APIを使って認証状態を管理します。

課題6：認証状態管理の実装

要件：

• AuthContextの作成
• ユーザー情報の管理（モックデータで実装）
• localStorage での状態保持(学習のため使用。実務ではセキュリティ要件を満たすようにしてください)
• ログインしたuserだけがdashboard pageを開けるように変更する
• ログイン・ログアウト機能の実装

ヒント：

• contextAPIでuserの状態をアプリ内で使えるようにGlobalで管理する

まとめ

この演習を通じて、以下のスキルの一部を身につけることができたかとお思います。

• React + TypeScriptでのフロントエンド開発
• コンポーネント設計と状態管理
• Tailwind CSSを使ったスタイリング
• API連携とデータ取得
• フォーム管理とバリデーション
• 認証処理の実装

実際の開発現場では、これらのスキルを組み合わせて使うことが多いので、ぜひ実践的な経験を積んでみてください。質問やフィードバックがあれば、コメント欄までお願いします！できる範囲で返答させていただきます。

この記事で紹介した演習問題は、実際の業務で必要となるフロントエンド開発のスキルを効率よく身につけられるように設計されています。ぜひ挑戦してみてください。完成したプロジェクトをポートフォリオの一部として活用するのもおすすめです。