2020-10-01

Reactチュートリアルを弄って遊ぶ コード整理編

Reactチュートリアルは最初にReactを学ぶには最高の教材で、これやっておけば最低限コードを組むことはできるようになるはず
とはいえfunctionalコンポーネントとか、Reduxとか、適切なファイル分割とか、現場でよく見かける書き方は含まれていないので、公式チュートリアルを改変してこの辺の重要な要素も、今自分が知っている範囲で記録しておこうと思う

今回はindex.jsに全てのコードが書かれている状態を僕なりになんとかしていく
この記事はチュートリアルの終了時点からのお話なので、まだやったことない人は手元に環境作ってチュートリアルを完走してから読んでみてください

現在のコードの状態

チュートリアル終了時点でのコードはこんな感じ
別に動作に問題はないんだけど、index.jsに全てが書かれていてちょっと見通しが悪い
せっかくモジュールが使えるのに使わないのはもったいないので、適宜分割していく

ディレクトリ構造は以下の通り(必要なsrcディレクトリだけをのせてます)

└── src
    ├── index.css
    └── index.js

どうやって分割していくのかは結構好みとか、チームのルールとかがあるので、どれが最適なのか?とかはハッキリと言えないけど
1つの意見として参考にしていただければ幸いです
(もしもっといい方法があればTwitterとかで教えていただけるとさらにありがたいです)

エントリポイントとコンポーネントのファイル分割

まずは ReactDom.render する部分と、コンポーネントで分けていく
具体的には ReactDOM.render(<Game />, document.getElementById("root")) だけを残して、あとは components ディレクトリへ持って行ってしまう
手順としては以下の通り

  1. Componentsディレクトリを作成
  2. render部分とコンポーネント部分をファイル分割
  3. Squareコンポーネントをさらにファイル分割
  4. Boardコンポーネントをさらにファイル分割
  5. Components.jsをGame.jsにリネーム

ここまでの作業で

  • 全ての起点となる index.js にはルートコンポーネントのマウント部分しかなくなり、余計な情報が消えてわかりやすくなる
  • src/components/tutorialGame ディレクトリを作成することで「このディレクトリにはチュートリアルに関するコンポーネントのファイルが置かれる場所なんだな」と中身を確認しなくても理解できるようになる
  • さらにコンポーネントと、そのコンポーネントに必要なコードだけが各ファイルに配置されるので、コード修正による影響の範囲が明確になる

などのようないい影響があると考えています
ここまでのディレクトリ構造は以下の通り

└── src
    ├── components
    │   └── tutorialGame
    │       ├── Board.js
    │       ├── Game.js
    │       └── Square.js
    ├── index.css
    └── index.js

アプリが小さいのでこれ以上整理するところはなさそう
次はReact Hooksを使って全てのコンポーネントを関数コンポーネント化していく