ReactNativeのフォルダ構成はどうするべきか？
どうも、佐藤大生です。マリクルのReactNativeエンジニアです。
React Nativeで開発を始める時、フォルダ構成について悩むと思います。
これが正解！といったものは残念ながらありません。試行錯誤の繰り返しです。しかし、一度フォルダ構成を決めてしまうと、後から直すのは大変です。開発を始める前にしっかり決めてから実装しなければなりません。ググって見てもなかなか情報がない。。。
ということで、これがベストではないか！？というものを今日は書いていきます。
条件
下記を導入している時のフォルダ構成です。
・Expo
・TypeScriptで書く
・状態管理はRedux
・ナビゲーションはReact Navigation
フォルダ構成
まずは結論から
- src
- components
- atoms
- LikeButton.tsx
- molecules
- UserHeader.tsx
- organisms
- UserInfo.tsx
- atoms
- containers
- atoms
- molecules
- UserHeaderContainer.tsx
- organisms
- UserInfoContainer.tsx
- SecondeScreeenContainer.tsx
- navigations // ナビゲーション
- screens // ページ
- FirstScreeen.tsx
- SecondeScreeen.tsx
- stores // Redux関連
- actions
- reducers
- styles // 共通のStyle
- types // TypeScriptの型
- utlis // 汎用処理
- App.tsx
- components
- images // アプリ内で使う画像
- App.tsx // 初めに参照されるファイル
ポイント① Atomic Designを使う
Atomic Designとは簡単にいうと、「要素の大きいもの、中くらいのもの、小さいものをフォルダごとに分けていく」というやり方です。
- Atoms・・・・これ以上細かく分けれない粒子レベル
- Molecules・・・中くらいのサイズ
- Organisms・・・大きいサイズ
- Templates
- Pages・・・Screen
5つのフォルダに分けて書くことを推奨されています。AtomsとPagesだけ採用しているプロジェクトや、Atoms、Molecules、Organisms、Pagesの4つを使うプロジェクトなどいろいろ見てきました。ここは、プロジェクトごとに異なっている印象があります。
弊社では、Pageはscreensの中に入れております。それ以外はcomponentsの下に、atoms、molecules、organismsと3つに分けています。実際に運用する上で、MoleculesとOrganismsの分け方は難しいです。明確なルール分けがなく直感に頼っているところがあります。
再利用をしやすくするという観点で実装すると、うまく分けれるようになるかと思います。
参考サイト bradfrost.com
ポイント② ComponentとContainerは分ける
弊社では、最初はComponentとContainerを分けずに実装していました。1つのComponentファイルにまとめて書いていましたが、途中で全て切り分けて書き直しました。
コードが読みやすくなるのと、メンテナンスが楽になります。最初から分けておいた方が無難です。
フォルダ構成は、
- containersの下にpagesのものをおく
- containersの下にatoms、molecules、organismsフォルダを作り、componentのものをおく
としていくと分かりやすいです。
またファイル名ですが、Component/Screen名 + Containerとしています。
ポイント③ TypeScriptは絶対に導入する
こちらも弊社では最初導入していませんでした。全てJSで作成していました。現在では型も全て定義した形で書き直しました。まだ完全にはTypeScript化できていませんが。。。
引数に間違った型を設定していると、ワーニングが出るので、「エラー検知がしやすくなること、コードが追いやすくなる」といったメリットがあります。
型の定義はtypes配下にまとめて置いております。
まとめ
私自身個人アプリも作っておりますし、４つプロジェクトにジョインした経験があります。
今のところこのフォルダ構成が一番実装しやすいです。アプリを作り始める前にぜひ検討してしてみてください。ではまた。
