はじめに
初めて React を使って開発を行う初心者向けのコンテンツになります。
筆者は、これまで、フレームワークとは無縁でしたが、この度 React 始めて1ヶ月以上経過しましたので、
React についてのアプトプットします。
こちらのコンテンツのポイント
- React初学者向け
- 書き方などは内容として含まれていません
- 開発ベース作成についてが主な内容
- タイトルの通り、ディレクトリ構造が中心
これまでのフロントエンド 開発環境について
筆者自身、フロントエンドエンジニアとしては、まだ１年も経っていないのですが、これまでのJavaScriptライブラリを使った開発では以下のようなディレクトリ構造で開発を行っていました。
Project名
L dist（ビルド後のファイル格納先）
L assets（イメージファイルや、フォントファイル）
L images（イメージファイル）
L styles（ノーマライズcss、同じくwebpackなどでまとめた app.css など）
L scripts（JSライブラリや、webpackなどで一つにまとめた app.js など）
L src(ソースファイル格納先）
L assets（イメージファイルやフォントファイル）
L images（イメージファイル）
L styles（FLOCSSなど使って）
L scripts（JSファイル）
L vender
L fundation
L index.js
L ...
L index.html（ページファイル）
L ...
L webpack.config.js
L ...
（この辺は、webpackやgulpなど、プロジェクトによって変わってきますが、上記2つはだいたい使います。）
プロジェクトの規模によってももちろん変わってきますが、だいたいこんな感じです。
もっといい感じの構造などあるかと思いますので、「こんな感じにしているよ！」なんてご意見あったらコメントとかいただきたいです！
ご覧のように大体、マークアップファイルと、スタイルファイル、スクリプトファイルといった3つのファイルを分けた構造がセオリーになっているかと思います。
React について
React ではDOM要素をJSファイルに含めて書きます。
これが、まず筆者が驚いた最初のポイントになります。
React 公式のリファレンス にあるように、React の開発環境は簡単に作成できます。
それをベースに、まず、シンプルなディレクトリ構造を見てみましょう。
以下のコマンドを実行して、任意のフォルダーに React のスターターキットをダウンロードしてみましょう！
npx create-react-app my-app
以下のフォルダがダウンロードされると思います。 my-app を覗いてみましょう！
my-app
L src
L app.css
L app.js
L app.text.js
L index.css
L index.js
L logo.svg
L serviceWorker.js
（node 入れてあげればもうこれでローカルで動きます。）
React のディレクトリ構造について
公式のスターターキットは非常にシンプルで、全てフラットな状態でファイルが格納されています。
規模が大きくなると、ディレクトリ分けして開発を行いたいものです。
スタイルファイルとスクリプトファイル
まず、上記のディレクトリ構造は、以下の三つの要素がフラットな状態で格納されています。
- css（スタイルファイル）
- JS（スクリプトファイル）
- svg（イメージファイル）
これらをディレクトリとして分てみます。
src
L assets（スタイルファイル・イメージファイル）
L logo.svg
L app.css
L index.css
（スクリプトファイル）
L app.js
L index.js
L serviceWorker.js
コンポーネントのディレクトリ構造
Reactはコンポーネントベースの考え方が特徴です。
コンポーネントの組み合わせによって、ページを構成します。
汎用性を高めるためにどこまでコンポーネントを細かくするのか。個人的にこれが結構難しいなと感じていますが、以下を大きな指標にします。
- atom（原子 それ以上分解できない要素）
- molecules（分子 原子がいくつか組み合わさって構成された要素）
- component（ヘッダーなどページを構成するパーツ）
上記を意識した、ディレクトリ構造が以下です。
src
L assets（スタイルファイル・イメージファイル）
L logo.svg
L app.css
L index.css
L components（コンポーネント）
L atoms（原子要素）
L Text.js
L Button.js
L TableCell.js
L TableHead.js
L TableBody.js
L molecules（分子要素）
L Header.js
L Footer.js
L Table.js
L Form.js
L app.js
L index.js
L serviceWorker.js
atomsやmolecules内のファイルはあくまで例ですが、molecules内のファイルは、atoms内のファイルの組み合わせで構成されます。
components内のForm.jsは、moleculesの組み合わせによって構成されます。
component > molecules > atom
コーディングの基本として、同じ処理を何度も書かないというのは基本です。
コンポーネント構造によって、同じ要素を一ヶ所で管理することで汎用性を高めます。
しかし、atom要素や、molecul要素を 限定的なものにすると、汎用性が低下します。
まとめ
1. ディレクトリ構造は component を意識する。
2. サービスに合わせた適度な粒度で。
さいごに
今回は、最低限のディレクト構造を作成してみました。
あくまで一例です。様々な環境で開発された方の知見がございましたら、ご意見、コメントいただけますと嬉しいです！
Webサービスなどの場合には、データの受け渡しが必要になります。
その場合には、src配下に、apisや、store、actonsなどといったデータフローを構成するフォルダーが必要になります。
機会がありましたらその辺りを含めたディレクトリ構造についても記事を書いてみたいと思います。
蛇足
React は、デザイナーさんと、より密なコミュニケーションを測り、デザインルールを作成することで、運用性を向上することができます。
コンポーネント別に、仕様をしっかり固めることで矛盾を生む事なく、デザイン・開発が行えます。
筆者自身まだまだ未熟で、React のポテンシャルを発揮できずに苦しむ場面が多いですが、デザイナーさんとの意識レベルのすり合わせを行う事で運用サイクルのスピードアップが見込めるのではないかと思います。
この辺り、筆者が感じているところについて詳しく書いてみたいと思います。
（こういうのは note に書くかも。）