React Nativeプロジェクトはどのように構成されていますか？

Question

Accepted Answer

React Nativeプロジェクトは、**JavaScript/TypeScriptコード**と**ネイティブiOS/Androidプロジェクト**と設定を組み合わせた構造を持っています。構造と重要なファイルを理解することは、React Nativeアプリをナビゲートし、構築するのに役立ちます。

## 構造の重要な部分

```text
my-app/
  App.js / App.tsx       → the root component (app entry point)
  src/ (or app/)         → your JS/TS code (components, screens, etc.) — organize here
  package.json           → dependencies and scripts (npm/yarn) — like any JS project
  node_modules/          → installed npm dependencies
  ios/                   → the native iOS project (Xcode) — for bare RN
  android/               → the native Android project (Gradle) — for bare RN
  index.js               → registers the root component
  app.json / app.config  → app config (name, icon) — especially in Expo
  (Expo projects hide ios/android; managed by Expo)
```

## JavaScriptエコシステム

```text
→ package.json → dependencies (React Native, navigation, libraries) + scripts
→ npm / yarn → install packages (npm install); the huge npm ecosystem is available
→ Metro → React Native's JavaScript bundler (bundles your JS for the app)
→ Babel → transpiles modern JS/JSX/TypeScript
```

## コードの整理

```text
→ Organize src/ into folders (common):
  src/components/ (reusable UI), src/screens/ (screen components),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Keep code organized as the app grows (separation by feature or type).
```

## なぜ重要なのか

React Nativeプロジェクトの構造を理解することは、React Nativeアプリをナビゲート、構築、整理するために必要な実践的な知識であり、有用な基礎知識です。

**重要な部分**を知ること — **App.js/App.tsxはルートコンポーネント**（エントリーポイント）、**JS/TSコードは`src/`に存在**（ほとんどの時間を費やす場所）、**package.json**が依存関係とスクリプト（JavaScriptプロジェクトと同様）を管理し、**ネイティブ`ios/`と`android/`プロジェクト**が存在する（ベアReact Nativeの場合、Expoはこれらを管理）— これはReact Nativeプロジェクトをナビゲートするために必要であり、JavaScriptコードとネイティブプロジェクトを組み合わせています。

**JavaScriptエコシステム**の側面を理解することは重要です：React Nativeプロジェクトは**package.jsonとnpm/yarn**を依存関係に使用し（巨大なnpmエコシステムが利用可能 — 大きな利点）、**Metro**（React Nativeのバンドラー）とBabelを使用します — これはReact Native開発がJavaScript開発であり、なじみのあるツールを使用していることを反映しています。これはWebディベロッパーにとって価値があります。

**コード整理**方法を理解すること（`src/`をフィーチャーまたはタイプ別にフォルダに構成 — コンポーネント、スクリーン、ナビゲーション、サービス、フック、ユーティリティ、ストア）は、成長するにつれてプロジェクトを保守しやすくするための良い慣行を反映しています。

React Nativeで作業するにはプロジェクト構造をナビゲートし（JSコードとネイティブプロジェクト）、package.jsonを介して依存関係を管理し、バンドラーを理解し、コードを整理する必要があるため、またこの知識はあらゆるReact Native開発のために必要な実践的な基礎であるため、React Nativeプロジェクトがどのように構成されているか理解すること — 重要なファイル、JavaScriptエコシステム、コード整理 — はReact Nativeプロジェクトで作業するための価値のある、基礎的な実践的知識であり、アプリの構築と保守に必要であり、特にJavaScript/npmエコシステムに精通したディベロッパーにとってアプローチしやすい基本的な適性です。