完成形を触る

これから作るもの

このコースで作るのは、フリマアプリ fleama です。商品を出品して、一覧から探して、カートに入れて、購入する。メルカリのような売り買いのアプリを、62 レッスンかけて一つずつ組み立てます。

先に完成形を見ておくと、途中のレッスンが何のためのものか分かります。今日書くコードは小さいですが、ここで見た画面がゴールです。

fleama にある画面

完成した fleama には、次の画面があります。

• 商品一覧 — 出品されている商品が並ぶ。カテゴリで絞り込め、キーワードで検索できる
• 商品詳細 — 1つの商品を大きく見る。ここからカートに入れる
• 出品フォーム — 商品名と価格とカテゴリを入れて出品する
• カート — 入れた商品と合計金額。ここから購入する
• マイページ — 自分が出品したものと購入したものを見る

画面が5つあるということは、URL も5つあるということです。第7章でページに分けるまでは、1つの画面の中で切り替えながら作っていきます。

データはどこから来るか

商品のデータは、本物のサーバーではなくモック API から来ます。モックとは「本物のふりをした偽物」という意味です。

第2章で詳しく触りますが、教材の中に mock-api.json というファイルがあり、そこに書かれたとおりに応答が返ります。外に出ていかないので、通信が遅い日でも教材が止まりません。仕様は本物の API と同じ形なので、あとで Node.js で本物のサーバーを書けば、そのまま差し替えられます。

全編 TypeScript で書く

React入門では .jsx に書いていましたが、このコースのファイルは .tsx です。TypeScript で書くので、props の受け取り方を間違えると、動かす前に気付けます。

第1章はその型付けだけを扱います。新しい React の機能は出てきません。TypeScript入門で覚えた型を、React の部品にどう当てるかだけを覚えます。

演習

これから作る画面を書き出して、ゴールを自分の言葉で確かめます。