0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ReactNative × Expoの雛形ファイルの中身

Posted at

プロジェクト雛形(テンプレート)の中身

まず全体像:プロジェクト構成

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アプリ開発は怖くないです

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?