https://www.techpit.jp/courses/138
Reactの基礎になれるためにこちらの教材をやってみました。
以下、要点確認用のメモです。
1章 要件定義
1-1 構成
- 店舗一覧（/restaurants)
- レストランを一覧表示
- レストラン1をクリックするとレストラン1の商品一覧ページ（/restaurant/1/foods）に遷移
- 商品一覧（/restaurants/{id}/foods
- 販売してる商品を一覧表示
- 商品をクリックすると仮注文のモーダルが表示される
- 仮注文モーダル
- 数量の+-ボタン
- 数量に応じて金額を計算して表示
- 最初から購入数を選べるようにする（+-何回も押さなくて良いように）
- 注文確認画面
- 仮注文した複数商品の合計金額+配送料を計算、表示
- 注文確定のボタン
例外パターン
複数の店舗で仮注文しようとする可能性
解決策⇨別店舗で注文するかどうか確認するモーダルを表示する
- 店舗Aの仮注文がある状態でB店舗の商品を仮注文⇨モーダル表示
- 新規注文を承諾すると、店舗Aの仮注文した商品はキャンセルされる
前提
- サーバーサイド処理は簡潔なものだけ
- モデルの定義は最低限の動きにのみ対応
- ページ遷移：React Router
- ビュー：React（Rails側では作らない）
- 例外処理：最低限
（実装しないもの）
- サーバーサイド
- データを投入するAdmin画面(システム管理者用画面)
- データごとのユニークな画像
- テスト
- ユーザー登録/ログインの処理
- 本番デプロイ
- フロントエンド
- エラーの場合の例外処理（エラーメッセージの表示）
- テスト
- HTML/CSS
必要なもの
- サーバーサイド（データを用意⇨返す）
- 必要なデータのMigrationとModelの定義（Restaurant、Food）
- APIコントローラー（データ取得のため）
- API内で例外パターンと一致したらエラーを返す
- フロントエンド
- React Routerで画面遷移
- 最低限のレイアウト
1-3 データ・モデル設計
基本データ
- Restaurant
- 店舗名 name
- 配送料 shipping_fee
- 配送時間 shipping_time
- Food
- 店舗ID restaurant_id
- 商品名 name
- 価格 price
- 説明 description
注文に関するデータ
- Order
- 店舗ID restaurant_id
- 商品ID food_id
- 商品数 count
- 状態 active
- 注文ID id
- NewOrder
- 店舗ID restaurant_id
- 合計金額 total_price
1-4 フロントエンド設計
Reactでよく推奨されるコンポーネントの種類分け
- Container Component
- データをもつ
- 親コンポーネントとして子コンポーネントにデータを渡す
- ページごとのコンポーネント
- Presentational Component
- 単に受け取ったデータを表示する
- ボタン、モーダルなど子コンポーネント
子コンポーネントにデータを持たせてしまうと、複数ページで同じようなUIなのにデータが異なる場合でもデータが再利用出来なくて、結局コピペする羽目になる
子コンポーネントを再利用しやすくするためにも、データを持つのは親コンポーネントだけにする
コンポーネント設計
-
Parent (Container)
containers/Restaurants.jsxcontainers/Foods.jsxcontainers/Orders.jsx
-
Child (Presentational)
components/Buttons/HogeButton.jsxcomponents/Modals/FugaModal.jsxcomponents/Wrapper.jsx
複数種類ありうる子コンポーネントはcomponentsの１階層下に掘って配置するとわかりやすい
API叩く関数
apis/restaurants.jsapis/foods.jsapis/orders.js
＊関心はファイルごとに分散するのが一般的
API呼ぶやつもcomponentsとは別のファイルで管理する
カプセル化（useReducer）
reducers/restaurants.jsreducers/foods.jsreducers/orders.js
APIのURL
urls/index.js
urlを定数に格納してここで一元管理