初めてスマホアプリを開発してみる ~ その2：expoのパッケージ構成について ~

はじめに

前回の記事でexpoでの開発の初期構築の解説をしました。
お時間あればこちらもご覧ください。

今回の目標

• expoでのデフォルトのパッケージ構成を何となく理解する
  → どこを触れば何ができるか理解する

注意
あくまでも初心者の意見です。ここはこうなのでは？みたいなところがありましたら、是非ともコメント等お願いします。

解説

test-project のディレクトリ構成と、それぞれの役割、どのような時に編集すべきかを解説します。

全体構成

test-project/
  ├── .expo
  ├── app/
      ├── (tabs)/
  ├── assets/
      ├── images/
  ├── components/
  ├── constants/
  ├── hooks/
  ├── scripts/ 
  ├── app.json
  ├── eslint.config.js
  ├── expo-env.d.ts
  ├── package-lock.js
  ├── package.json
  ├── README.md
  └── tsconfig.json

各ディレクトリの詳細

1. app/ (アプリケーションの画面)

• 役割:
  • アプリの「ページ」や「ナビゲーション」を定義します。
    このフォルダの構造がそのままURLや画面遷移の構造になります。
• いつ編集する？:
  • 新しい画面を作りたいとき。
  • タブやスタックなどのナビゲーション構造を変えたいとき。
• 主なファイル:
  • _layout.tsx: 共通のレイアウトやナビゲーション（ヘッダー、タブバーなど）を設定します。
  • index.tsx: そのディレクトリのトップページ。
  • (tabs)/: タブナビゲーション用のグループ。この中のファイルはタブ切り替えで表示されます。

2. components/ (UIコンポーネント)

• 役割:
  • 画面の一部を構成する「部品」を置きます。app/内の各画面から呼び出して使います。
• いつ編集する？:
  • 複数の画面で使う共通のボタンやカードを作りたいとき。
  • 画面のファイル（app/内）が大きくなりすぎたので、表示部分を切り出したいとき。

3. constants/ (定数)

• 役割:
  • アプリ全体で使う固定値を置きます。
    一般的にはカラーパレット（Colors.ts）などが置かれます。
• いつ編集する？:
  • アプリのテーマカラーを変更したいとき。
  • APIのエンドポイントURLなどを一箇所で管理したいとき。

4. hooks/ (カスタムフック)

• 役割:
  • Reactのロジック（機能）を再利用可能な形にまとめたもの。
• いつ編集する？:
  • 特定のデータ取得処理や、複雑な状態管理ロジックをコンポーネントから分離したいとき。

5. context/ (状態管理)

• 役割:
  • アプリ全体で共有したいデータ（ログイン情報、ユーザー設定など）を管理します。
• いつ編集する？:
  • どの画面からでもアクセスできるデータを追加したいとき。

6. assets/ (素材)

• 役割:
  • 画像ファイルやカスタムフォントファイルなどを置きます。

7. scripts/ (開発用スクリプト)

• 役割:
  • 開発を補助するためのスクリプト置き場です。
• いつ編集する？:
  • 独自のビルドスクリプトや、自動化ツールを追加したいとき。
• 主なファイル:
  • reset-project.js:プロジェクトを初期状態にリセットするスクリプト。

ルート直下の設定ファイル解説

プロジェクトのルート（一番上の階層）にあるファイルは、アプリ全体の設定や構成を管理する重要なファイルです。

📜 app.json

• 役割
  • Expoアプリ全体の設定ファイルです。
• 内容:
  • アプリ名（name）、アイコンのパス、起動時のスプラッシュ画面、対応OS（iOS/Android/Web）の設定など。
• いつ編集する？:
  • アプリ名を変更したい時や、アプリアイコンを差し替えた時。

🛠 package.json

• 役割:
  • プロジェクトの「名札」兼「設計図」です。
• 内容:
  • インストールされているライブラリ（dependencies）や、実行可能なコマンド（scripts）が書かれています。
• いつ編集する？:
  • npm install コマンドを使うと自動的に更新されます。手動で編集することはあまりありませんが、scripts に新しいコマンドを追加することはあります。

🔒 package-lock.json

• 役割:
  • package.json で指定されたライブラリの「正確なバージョン」を記録するファイルです。
  • npm install 時に自動生成されます。これにより、チーム全員が全く同じバージョンのライブラリを使えるようになります。

注意: 絶対に手動で編集しないでください。

📘 README.md

• 役割:
  • プロジェクトの説明書です。通常、Markdown形式で書かれます。
• いつ編集する？:
  • プロジェクトの概要、起動方法、開発ルールなどをチームメンバーに共有したいとき。

⚙️ tsconfig.json

• 役割:
  • TypeScriptの設定ファイルです。
• 内容:
  • TypeScriptをどのようにJavaScriptに変換するか、どの程度の厳しさで型チェックを行うかなどのルール。
• いつ編集する？:
  • 「パスエイリアス」（~/componentsのようなショートカット）を設定したい時や、型チェックのルールを変えたい時。

🧹 eslint.config.js

• 役割:
  • コードの品質を保つための「校正ルール」設定ファイルです。
• 内容:
  • 「未使用の変数はエラーにする」「セミコロンを必須にする」などのルール。
• いつ編集する？:
  • チームのコーディング規約を変更したい時。

🦕 expo-env.d.ts

• 役割:
  • TypeScriptにExpo特有の型情報を教えるためのファイルです。
• 内容:
  • Expoが自動的に管理します。.gitignoreに含まれることもありますが、プロジェクトによっては含まれていることもあります。

注意: 基本的には編集不要です。

開発フローの例

1. 画面を作る: app/ に新しいファイル（例: details.tsx）を作る。
2. 見た目を整える: その画面で使うUIパーツを components/ に切り出す。
3. ロジックを書く: 複雑な処理があれば hooks/ に書く。
4. 色を変える: constants/Colors.ts を修正して全体の色味を調整する。

このように役割分担することで、コードが見やすく、修正しやすくなります。

終わりに

expoでプロジェクトを生成した際に初期で生成されるディレクトリ/ファイルについて概ね解説しました。
これを見れば、何かの変更をしたい際にどこを編集すればいいかがわかるようになるかと思います。

次回はカウントアップを行う簡単なアプリの作成を行おうかと思います。
(Antigravityを使って生成AIに任せて作ってみたい)