ページのルーティング
必要なページを確認し、それぞれのページの切り替え時(コンポーネント変更)にURLが変わるようにする。
なぜ？
URLが変わらないと戻るボタンを押して一つ前の状態に戻ることができないし、一発で作業ページに飛ぶことができない
今回
Reactを利用しているので、react-router-domを使えば簡単にルーティングができる。
詳しくは以下参照
https://reactrouter.com/web/guides/quick-start
トップページ(/)にアクセスした際に指定のページに映るように変更
リダイレクトで指定のページに飛ぶように。
Reactではreact-router-domのRedirectを使えば簡単に実装できる。
ペライチの作成
細かいところを作っていくより先に、一ページにベタ書きして大枠を決める。
その後Atomic Designなどを意識してコンポーネントに分けていく。
cssはフレームワークを使いましょう
最初cssを自力で書いていましたが、どうしてもズレが直らない。
自力で書いていた理由は、デザイナーのデザイン通りにするにはフレームワークの制約があると難しいんじゃないかと思ったから。
自力cssの問題点
- ズレが直らない
- 同じコンポーネントで色や大きさだけ変えたい時にどのようにすればいいのかわからない
この辺りを綺麗に予め実装してくれているのがcssフレームワーク。やっぱりフレームを使うのが良さそうと判断。自力で実装する程度の制約はなさそう。(いろんなcssのプロパティ？を引数で与えられて変更できます。)
今回
実際、Reactのフレームワークに以前はmaterial-uiを使っていたが、結構重いみたい。
そこで今回はchakra-uiを利用。(https://chakra-ui.com/getting-started)
ナルトに影響されすぎてる？w
開始早々エラーが出てボタンが描画できない。それについては別記事にしています。(https://qiita.com/ryota_akiyama/items/daee80d7947d7079cb11)
一通りできたら、レスポンシブ対応しよう
今はpcでみるよりもスマホでみることが多いよね。
だから、必ずと言っていいほどレスポンシブ対応しなきゃならない。
レスポンシブ対応させる方法は大きく分けて三つ。
- cssに記述する(@media...)
- 別のコンポーネントを作成する(コンポーネントを切り替える)
- cssフレームワークのAPIを利用
今回
chakra-uiを使っているのだが、こういうcssフレームワークには大抵レスポンシブapiが備わっている。
chakra-uiの場合にはコンポーネントタグの属性にそれ用の記述をすればok
chakra-uiを使っているところはそのレスポンシブ対応を使って、それ以外のところは別のコンポーネントを利用するかcssに記述する書き方を選択。
ちなみにReactを使った別コンポーネントの利用にはmedia queryを使うと簡単にコンポーネントの使い分けができる。(https://www.ted027.com/post/react-mediaquery/#react%E3%81%A7%E3%81%AEmedia-query)