React/TypeScript + Vite + Supabase + Chakra UI で学習記録アプリを作ってみた
はじめに
React と TypeScript の学習を進める中で、シンプルな CRUD アプリを作ってみたくなり、学習記録アプリを作成しました。
今回作ったアプリでは、学習内容と学習時間を記録して、一覧で確認できるようにしています。
新規登録、更新、削除まで一通り入れているので、フロントエンドの画面実装だけでなく、データ保存やフォーム処理までまとめて試せる題材になりました。
作ったもの
学習記録を管理するための Web アプリです。
できることは以下のような内容です。
- 学習記録の一覧表示
- 学習内容と学習時間の新規登録
- 登録済みデータの更新
- 学習記録の削除
- フォーム入力のバリデーション
使用技術
- React
- TypeScript
- Vite
- Chakra UI
- React Hook Form
- React Router
- Supabase
- Vitest
- Testing Library
技術選定の理由
React + TypeScript
画面をコンポーネント単位で組み立てながら、型安全も意識して実装したかったのでこの組み合わせにしました。
特にフォームや props の受け渡しが増えてくると、TypeScript があることで安心感がかなり違うと感じました。
Vite
開発サーバーの起動が速く、ちょっとした修正確認のテンポが良いので、学習用の個人開発と相性が良いと思って選びました。
Chakra UI
フォーム、ボタン、モーダルなどを比較的少ないコードで組み立てられるので、デザイン調整に時間をかけすぎず、機能実装に集中しやすかったです。
Supabase
バックエンドを大きく作り込まなくても、データ保存を含んだアプリを試せるのが魅力でした。
フロントエンドから実際のデータベースに接続する体験ができるので、単なるモックデータ表示よりも学びが大きかったです。
環境変数
Supabase に接続するために、.env に以下の値を設定します。
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
Vite ではクライアント側で利用する環境変数に VITE_ プレフィックスが必要なので、この形式で定義しています。
やってみた感想
シンプルなアプリではありますが、実際に作ってみると学べることがかなり多かったです。
- 画面表示だけでなく、登録・更新・削除までつなぐ流れを体験できた
- フォームバリデーションの扱いに慣れることができた
- UI の共通化を通して、コンポーネント設計を見直す練習になった
- テストを書くことで、修正時の安心感が増した
まとめ
今回は、React / TypeScript / Vite / Supabase / Chakra UI を使って学習記録アプリを作ってみました。
機能としてはシンプルですが、CRUD、フォーム、モーダル、外部サービス連携、テストまで一通り触れることができて、学習用の題材としてちょうどよかったです。