ReactNativeどうも、佐藤大生です。マリクルのReactNativeエンジニアです。Nativeで開発を始める時、フォルダ構成について悩むと思います。これが正解!といったものは残念ながらありません。試行錯誤の繰り返しです。一度フォルダ構成を決めてしまうと、後から直すのは大変です。開発を始める前にしっかり決めてから実装しなければなりません。ググって見てもなかなか情報がない。いうことで、これがベストではないか!?というものを今日は書いていきます。下記を導入している時のフォルダ構成です。Designとは簡単にいうと、「要素の大きいもの、中くらいのもの、小さいものをフォルダごとに分けていく」というやり方です。Atoms・・・・これ以上細かく分けれない粒子レベルMolecules・・・中くらいのサイズOrganisms・・・大きいサイズTemplatesPages・・・Screen5つのフォルダに分けて書くことを推奨されています。AtomsとPagesだけ採用しているプロジェクトや、Atoms、Molecules、Organisms、Pagesの4つを使うプロジェクトなどいろいろ見てきました。ここは、プロジェクトごとに異なっている印象があります。弊社では、Pageはscreensの中に入れております。それ以外はcomponentsの下に、atoms、molecules、organismsと3つに分けています。実際に運用する上で、MoleculesとOrganismsの分け方は難しいです。明確なルール分けがなく直感に頼っているところがあります。再利用をしやすくするという観点で実装すると、うまく分けれるようになるかと思います。ComponentとContainerは分ける弊社では、最初はComponentとContainerを分けずに実装していました。1つのComponentファイルにまとめて書いていましたが、途中で全て切り分けて書き直しました。コードが読みやすくなるのと、メンテナンスが楽になります。最初から分けておいた方が無難です。containersの下にatoms、molecules、organismsフォルダを作り、componentのものをおくとしていくと分かりやすいです。Containerとしています。TypeScriptは絶対に導入するこちらも弊社では最初導入していませんでした。全てJSで作成していました。現在では型も全て定義した形で書き直しました。完全にはTypeScript化できていませんが。引数に間違った型を設定していると、ワーニングが出るので、「エラー検知がしやすくなること、コードが追いやすくなる」といったメリットがあります。型の定義はtypes配下にまとめて置いております。まとめ私自身個人アプリも作っておりますし、4つプロジェクトにジョインした経験があります。今のところこのフォルダ構成が一番実装しやすいです。アプリを作り始める前にぜひ検討してしてみてください。Expoでプッシュ通知を送る方法をご紹介します。FirebaseのSNSログイン機能の実装(GoogleとFacebook)月別アーカイブ検索リンクmaricuru運営会社スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。