プロジェクト雛形(テンプレート)の中身
まず全体像:プロジェクト構成
app/
├── .expo/ (Expoが裏で使っている設定ファイル群。基本的に触らない)
├── app/ (画面(Screen)をまとめるフォルダ)
├── assets/ (画像、アイコン、フォントなど静的ファイルを保存)
├── components/ (アプリ内で使いまわせる小さなパーツたち)
├── constants/ (アプリ共通の定数を管理。テーマカラー、フォントサイズ、APIのエンドポイントなど)
├── hooks/ (自作のカスタムフックを置く)
├── node_modules/ (npm installやyarnで入れたライブラリたちの本体。基本的に触らない)
├── scripts/ (プロジェクト管理を助ける自動化スクリプト。リセットスクリプトが入っている)
├── .gitignore
├── app.json(Expoプロジェクトの設定ファイル。アプリ名、アイコン画像、スプラッシュ画面など)
├── expo-env.d.ts(Expo専用の型定義ファイル(TypeScript用))
├── package-lock.json(使ってるライブラリのバージョンを固定するファイル。自動生成される。基本的に触らない)
├── package.json(プロジェクトの設定ファイル。使用ライブラリ一覧など)
├── README.md
└── tsconfig.json(TypeScriptの細かい設定ファイル)
基本的に触るところ(ここを抑えていたら大丈夫)
📄 基本的によく触る場所
app/
画面(Screen)を作る場所
ルーティング(ページ遷移)もここで管理
例:トップ画面ならapp/index.tsxを編集
components/
再利用できるパーツを作る場所
例:共通ボタン、日記カード、カスタムモーダルなど
constants/
色、フォントサイズ、APIエンドポイントなどアプリ共通の設定値
デザインや値の統一感を出すために使う
hooks/
ロジックを切り出した自作フック
例:認証管理のuseAuth、データ取得のuseDiaryなど
複雑になりがちな処理を分けてスッキリ書ける!
assets/
画像やフォントなどの素材を置く場所
例:ロゴ、アイコン、カスタムフォントなどをここに保存
⚙️ たまに触るかも?な設定系ファイル
app.json
アプリの基本設定
例:アプリ名、アイコン、スプラッシュ画面など
package.json
使うライブラリ管理とスクリプト管理
ライブラリ追加 (npm installとか) したらここに反映される
tsconfig.json
TypeScriptの設定
基本はほぼ触らないけど、環境によってちょっといじることもある
まとめ
「基本は app/
と components/
を触って、たまに constants/
や hooks/
を追加する感じです。
ここを押さえておけば、React Native × Expoアプリ開発は怖くないです