完成と次のステップ
fleama が完成しました
62 レッスンかけて作ってきたものを並べると、こうなります。
- 型の付いた部品 — props も state もイベントも型で守られている
- API からのデータ取得 — 読み込み中とエラーと空を全部持っている
- カスタムフック — 取得もフォームも画面から切り離してある
- Context — テーマとログイン中のユーザーがどこからでも読める
- useReducer — カートの操作が型で網羅されている
- ルーティング — 5つの画面が URL で分かれている
これは「React が書ける」と言ってよい範囲です。求人票に並ぶ言葉のうち、React まわりのものはだいたい入っています。手元に残ったこのアプリは、そのままポートフォリオになります。
1つだけ本物ではないもの
まだ本物ではないところが1つあります。データです。mock-api.json はブラウザの中だけで動く偽物なので、画面を閉じれば出品したものは消えます。
ここを本物にするのが Node.js入門 です。同じ /api/items を、今度はサーバー側で書きます。仕様は今のままでよいので、fleama の画面は1行も変えずに、データが残るようになります。作りかけを本物にする作業なので、達成感で言えばこちらが大きいはずです。
もう1つの進み方
Next.js入門 は、React の書き方をそのまま使えるフレームワークです。fleama では、画面を開いてから商品を取りに行っていました。Next.js は先にサーバー側で画面を組み立てておけるので、最初の表示が速くなり、検索にも載りやすくなります。人に見せるアプリを公開するところまで行きたいなら、こちらです。
どちらから進んでも構いません。データを残したいなら Node.js入門、公開して人に見せたいなら Next.js入門です。
演習
完成した fleama のトップに、作った人の名前とひとことを出します。次に学ぶことも書き出しておきます。