導入

React Native は、JavaScript と React を使用してモバイル アプリケーションを構築するための強力なフレームワークです。 React Native を使用した開発に取り組む際には、典型的な React Native プロジェクトの構造を理解することが不可欠です。各フォルダーとファイルには特定の目的があり、それらの役割を理解すると、プロジェクトをより効率的に管理およびナビゲートするのに役立ちます。この記事では、メイン ディレクトリ (ルート ディレクトリ、android/ フォルダ、ios/ フォルダ) の内容と目的に焦点を当て、React Native アプリのフォルダ構造の包括的な概要を説明します。

ルートディレクトリ

React Native プロジェクトのルート ディレクトリには、プロジェクトの依存関係、構成、エントリ ポイントを管理する重要なファイルとフォルダーが含まれています。

主要なファイルとフォルダー

• node_modules/: npm または Yarn 経由でインストールされたすべての依存関係とサブ依存関係が含まれます。通常、このフォルダーに直接触れる必要はありません。
• package.json: プロジェクトの依存関係、スクリプト、その他のメタデータをリストします。これは、プロジェクトの依存関係とスクリプトを管理するために非常に重要です。
• package-lock.json またはyarn.lock: インストールされている依存関係のバージョンをロックし、異なる環境間での一貫性を確保します。
• index.js: React Native アプリのエントリ ポイント。通常はアプリのメイン コンポーネントを登録します。

コアフォルダー

• android/: ネイティブ Android コードを作成または変更する必要がある場合に必要な、ネイティブ Android コードと構成ファイルが含まれています。
• ios/: ネイティブ iOS コードの作成または変更に不可欠な、ネイティブ iOS コードと構成ファイルが含まれています。
• app/ または src/: 多くの場合、コンポーネント、画面、サービスなどの JavaScript/TypeScript コードのメイン フォルダーです。ここには、アプリのコードの大部分が存在します。

共通のサブフォルダー (app/ または src/ 内)

• components/: 再利用可能な UI コンポーネント。アプリのさまざまな部分で UI 要素を整理して再利用するのに役立ちます。
• screens/: さまざまな画面またはビューを表すコンポーネント。ナビゲーションや個々の画面の管理が容易になります。
• navigations/: ナビゲーション構成とコンポーネント。アプリのナビゲーション構造を定義するために使用されます。
• assets/: 画像、フォント、その他の静的アセット。すべての静的リソースを整理します。
• redux/ (状態管理に Redux を使用している場合): アプリケーションのグローバルな状態を管理するためのアクション、リデューサー、およびストア構成。
• styles/: コンポーネントと画面全体で使用される共通のスタイル。一貫したデザインを維持し、スタイル管理を簡素化します。

設定ファイルとユーティリティ ファイル

• .babelrc または babel.config.js: Babel がコードをトランスパイルする方法を定義する Babel 構成ファイル。
• .eslintrc.js: ESLint 構成ファイル。プロジェクトの lint ルールを設定します。
• .prettierrc: Prettier 構成ファイル、コードフォーマットルールを構成します。
• metro.config.js: React Native で使用される JavaScript バンドラーである Metro バンドラーの構成ファイル。
• .gitignore: git リポジトリで無視するファイルとディレクトリを指定します。

android/フォルダー

android/ フォルダーには、Android デバイスまたはエミュレーター上で React Native アプリを構築して実行するために必要なすべてのネイティブ Android コードと構成ファイルが含まれています。

主要なファイルとフォルダー

• build.gradle: すべてのサブプロジェクト/モジュールに共通の構成オプションを追加できるトップレベルのビルド ファイル。
• gradle.properties: Gradle ビルド システムの構成プロパティ。
• gradlew および gradlew.bat: Unix ベースのシステムと Windows システムでそれぞれ Gradle コマンドを実行するスクリプト。
• settings.gradle: プロジェクトが依存する可能性のある外部ライブラリや追加モジュールを含む、プロジェクトのモジュールを指定します。

サブフォルダー

アプリ/

• build.gradle: アプリ固有の構成と依存関係を含む、アプリ モジュールのビルド ファイル。
• src/: アプリの Android 部分のソース コードが含まれます。
  • 主要/：
  • AndroidManifest.xml: Android ビルド ツール、Android オペレーティング システム、Google Play に対するアプリに関する重要な情報を説明します。
  • java/: アプリのエントリ ポイントである MainActivity.java または MainActivity.kt を含む Java または Kotlin ソース ファイルが含まれます。
  • res/: レイアウト、ドローアブル ファイル (画像)、文字列、アプリで使用されるその他の XML ファイルなどのアプリ リソースが含まれます。
  • assets/: フォントやその他のバイナリ ファイルなど、アプリに必要な生のアセット ファイルを保存します。
  • jniLibs/: アプリが依存するプリコンパイルされたネイティブ ライブラリ (.so ファイル) が含まれています。

グラドル/

• wrapper/: Gradle ビルド システムに役立つファイルが含まれています。
  • gradle-wrapper.jar: Gradle ラッパーの JAR ファイル。ユーザーが Gradle をインストールしなくてもプロジェクトをビルドできます。
  • gradle-wrapper.properties: 使用する Gradle のバージョンとその他のプロパティを指定します。

ios/フォルダー

ios/ フォルダーには、iOS デバイスまたはシミュレーター上で React Native アプリを構築して実行するために必要なすべてのネイティブ iOS コードと構成ファイルが含まれています。

主要なファイルとフォルダー

• Podfile: CocoaPods によって管理される、React Native アプリの iOS 部分の依存関係を指定します。
• Podfile.lock: Podfile で指定された依存関係のバージョンをロックし、さまざまな環境間での一貫性を確保します。
• .xcworkspace: Xcode でプロジェクトを開くために使用する CocoaPods によって生成されたワークスペース ファイル。
• .xcodeproj: アプリのプロジェクト設定と情報を含む Xcode プロジェクト ファイル。

サブフォルダー

/

• AppDelegate.m または AppDelegate.swift: iOS アプリのエントリ ポイントであるアプリケーション レベルのイベントと状態を管理します。
• Info.plist: バンドル識別子、アプリ名、権限、その他の設定など、アプリの構成情報が含まれます。
• Assets.xcassets/: アプリの画像とアイコンのアセットが含まれます。
• Base.lproj/: メインのストーリーボードまたは起動画面ファイル (LaunchScreen.storyboard) が含まれます。
• main.m または main.swift: アプリケーション オブジェクトとアプリケーション デリゲートを設定する、アプリのメイン エントリ ポイント。
• Supporting Files/: 資格やブリッジング ヘッダー (Swift を使用している場合) などの追加のリソースと構成が含まれます。

結論

React Native アプリのフォルダー構造を理解することは、プロジェクトの管理と開発を効率的に行うために重要です。各フォルダーとファイルには、依存関係や構成の管理から、Android と iOS の両方のプラットフォームのコードとリソースの格納まで、特定の役割があります。