Reactチュートリアルを弄って遊ぶ コード整理編
Reactチュートリアルは最初にReactを学ぶには最高の教材で、これやっておけば最低限コードを組むことはできるようになるはず
とはいえfunctionalコンポーネントとか、Reduxとか、適切なファイル分割とか、現場でよく見かける書き方は含まれていないので、公式チュートリアルを改変してこの辺の重要な要素も、今自分が知っている範囲で記録しておこうと思う
今回はindex.jsに全てのコードが書かれている状態を僕なりになんとかしていく
この記事はチュートリアルの終了時点からのお話なので、まだやったことない人は手元に環境作ってチュートリアルを完走してから読んでみてください
現在のコードの状態
チュートリアル終了時点でのコードはこんな感じ
別に動作に問題はないんだけど、index.jsに全てが書かれていてちょっと見通しが悪い
せっかくモジュールが使えるのに使わないのはもったいないので、適宜分割していく
ディレクトリ構造は以下の通り(必要なsrcディレクトリだけをのせてます)
└── src
├── index.css
└── index.js
どうやって分割していくのかは結構好みとか、チームのルールとかがあるので、どれが最適なのか？とかはハッキリと言えないけど
１つの意見として参考にしていただければ幸いです
(もしもっといい方法があればTwitterとかで教えていただけるとさらにありがたいです)
エントリポイントとコンポーネントのファイル分割
まずは ReactDom.render する部分と、コンポーネントで分けていく
具体的には ReactDOM.render(<Game />, document.getElementById("root")) だけを残して、あとは components ディレクトリへ持って行ってしまう
手順としては以下の通り
- Componentsディレクトリを作成
- render部分とコンポーネント部分をファイル分割
- Squareコンポーネントをさらにファイル分割
- Boardコンポーネントをさらにファイル分割
- Components.jsをGame.jsにリネーム
ここまでの作業で
- 全ての起点となる
index.jsにはルートコンポーネントのマウント部分しかなくなり、余計な情報が消えてわかりやすくなる src/components/tutorialGameディレクトリを作成することで「このディレクトリにはチュートリアルに関するコンポーネントのファイルが置かれる場所なんだな」と中身を確認しなくても理解できるようになる- さらにコンポーネントと、そのコンポーネントに必要なコードだけが各ファイルに配置されるので、コード修正による影響の範囲が明確になる
などのようないい影響があると考えています
ここまでのディレクトリ構造は以下の通り
└── src
├── components
│ └── tutorialGame
│ ├── Board.js
│ ├── Game.js
│ └── Square.js
├── index.css
└── index.js
アプリが小さいのでこれ以上整理するところはなさそう
次はReact Hooksを使って全てのコンポーネントを関数コンポーネント化していく