React Nativeでアプリを作ってみようと思いました。
ところが、いざ始めようとしたらコードを書き始めるまでに何をすればいいのかが分からず、そこで止まってしまいました。
プロジェクトを作るコマンドは調べれば出てきます。
でも、そのあと何をnpmで入れるのか、gitに何を入れて何を入れないのか、作られたファイルのどれが自分で触るものなのか。
そのあたりが分からないまま進めていました。
実機に表示するところまでの細かい手順は別の記事にまとめてあるのですが、その前後を含めた全体の流れは自分でも整理できていませんでした。
なので今回は、Node.jsの確認からコードを書き始めるところまでを、順番に並べ直しています。
一部は前の記事と重なりますが、流れが切れると分かりにくいので、あえてそのまま入れています。
準備の全体像
先に流れだけ並べておきます。
細かい説明は、このあと1つずつ書いています。
- ① Node.jsが入っているか確認する
- ② プロジェクトを作る（
npx create-expo-app） - ③ SDKのバージョンをExpo Goに合わせる
- ④ ライブラリの追加方法を知っておく（
npx expo install） - ⑤ .gitignoreを確認する
- ⑥ どのファイルが何なのかを把握する
- ⑦ サンプル画面を消す
- ⑧ 起動して実機で確認する
- ⑨ コードを書き始める
体感として、①〜③までが一番つまずきやすいところでした。
ここを抜けると、あとは意外と素直に進みます。
① Node.jsが入っているか確認する
React Nativeの開発は、Node.jsの上で動きます。
npm（ライブラリを入れるためのコマンド）はNode.jsに付いてくるので、Node.jsが入っていれば別途インストールは不要です。
入っているかどうかは、ターミナルでこの2つを打つと分かります。
node -v
npm -vバージョン番号が返ってくれば入っています。
私の環境はNode.js v24系、npm 11系でした。
Expoは新しいSDK（詳細は下）になるほど古いNode.jsを切っていく傾向があるようなので、何年も前に入れたきりという場合は、先に新しくしておいたほうが後の作業が楽だと思います。
SDKとは
SDKは Software Development Kit の略で、日本語にすると「開発に必要な道具一式」です。
大事なのは、これがバラバラに選べるものではないという点です。
なぜExpo Goとバージョンを合わせる必要があるのか
Expo Goが持っている部品がSDK 54用で、自分のコードがSDK 57用の部品を前提に書かれていると、指示された部品が容れ物の中に存在しないことになります。
私は最初SDK 57にしていましたが、App Store で配布されている Expo Go は SDK 54 までしか対応していませんでした。
App Store側が遅れる理由
Expo Go自体もアプリなので、更新するにはAppleの審査を通す必要があります。
新しいSDKが公開されても、それに対応したExpo GoがApp Storeに並ぶまでには時間差があります。一方で create-expo-app は最新SDKでプロジェクトを作るので、何もしなければずれる、という状態が生まれます。
合わせないとエラーが出るためチェックしてください。
これらは後でまた説明します。
② プロジェクトを作る
プロジェクトを置きたいフォルダに移動して、このコマンドを打ちます。
npx create-expo-app@latest .最後の . は「今いるフォルダに作る」という意味です。
新しくフォルダを作りたい場合は、. の代わりにフォルダ名を書きます。
これだけで、必要なファイル一式と数百個のライブラリが自動で入ります。
1〜2分ほどかかりました。
ここで npm install を自分で打つ必要はありません。コマンドの中で一緒に走っています。
npx というコマンドについて
npm と npx は別物です。
npx は「パソコンにインストールせずに、1回だけ実行する」コマンドです。
create-expo-app はプロジェクトを作るときにしか使わないので、パソコンに常駐させておく必要がありません。
そういう使い捨てのツールを動かすのが npx の役割だと理解しています。
③ SDKのバージョンをExpo Goに合わせる
先ほども話しましたが、ここが大切。ここが一番ハマったところです。
create-expo-app は、常にその時点の最新SDKでプロジェクトを作ります。
一方で、実機確認に使うExpo Go（App Storeで配布されている無料アプリ）は、最新SDKに追いついていないことがあります。
この2つがずれていると、QRコードを読んだ瞬間に「Expo Goを最新版にしてください」というエラーが出ます。
でもApp Storeにはそれ以上新しいものが無いので、指示どおりにやっても解決しません。
対処としては、プロジェクト側のSDKをExpo Goに合わせて下げます。
自分のプロジェクトのSDKを確認する
package.json を開くと、こういう行があります。
"expo": "~54.0.0",この数字がプロジェクトのSDKバージョンです。頭の ~（チルダ）は「54.0系の中の細かい更新は許可する、55には上げない」という意味の記号です。
下げ方
# expo本体を目的のSDKに下げる（数字は合わせるバージョンに読み替え）
npm install expo@~54.0.0
# 他のライブラリもそのSDKに合わせて揃え直す
npx expo install --fixエラーメッセージの全文や、Expo Goが今どのSDKまで対応しているかの調べ方は、こちらの記事に書いています。
なお、Expo Goを使わずに開発ビルドで確認する場合は、この工程は関係ない話になります。
④ ライブラリの追加は npx expo install を使う
③とつながる話です。
あとからライブラリを追加するとき、npm install ライブラリ名 と打ちたくなります。
ただ、これだと常に最新版が入るので、使っているSDKと合わないバージョンが混ざります。
Expoが管理しているライブラリについては、こちらを使うのが安全だと思いました。
npx expo install ライブラリ名npx expo install は、今のSDKに合ったバージョンを自動で選んでくれます。
Expoが管理していない普通のライブラリの場合は、中で npm install を呼ぶだけなので、結果は同じになります。
つまり迷ったら全部 npx expo install でいい、ということのようです。
何を入れるかは作るアプリによって変わりますが、調べた範囲では、データを端末に保存するライブラリ、グラフを描くライブラリ、通知のライブラリあたりが最初に追加されることが多いようです。
最初から全部入れる必要はなくて、必要になった時点で1つずつ足していく形で問題ありませんでした。
⑤ .gitignoreは自分で書かなくていい
ここは身構えていたのですが、create-expo-app が最初から用意してくれます。
自分でゼロから書く必要はありませんでした。
中身はだいたいこういう形です。
# dependencies
node_modules/
# Expo
.expo/
dist/
web-build/
expo-env.d.ts
# Native
*.orig.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
# Metro
.metro-health-check*
# debug
npm-debug.*
yarn-debug.*
yarn-error.*
# macOS
.DS_Store
*.pem
# local env files
.env*.local
# typescript
*.tsbuildinfogitに入れないものと、その理由
node_modules/ はライブラリの本体です。
数百個のフォルダが入っていて容量も大きいのですが、package.json さえあれば npm install で復元できます。
なのでgitには入れません。
.expo/ は開発サーバーのキャッシュ、dist/ と web-build/ はビルドの結果、expo-env.d.ts は自動生成される型定義です。
どれも消しても作り直されるものなので、記録しておく意味がありません。
そして、個人的に一番大事だと思ったのがこの行です。
*.jks
*.p8
*.p12
*.key
*.mobileprovisionこれはアプリを配信するときに使う署名用の鍵ファイルです。
ここを外した状態で公開リポジトリに上げてしまうと、他人が自分名義でアプリを配信できてしまう可能性があります。
最初から入っているので普通は問題ないのですが、.gitignoreを自分で整理するときにうっかり消さないよう気をつけたい部分だと思いました。
逆に、gitに入れるもの
package.json、package-lock.json、app.json、tsconfig.json、そして自分が書いた画面のファイル。
これらは入れます。
特に package-lock.json は、どのライブラリのどのバージョンが入っているかを1つずつ固定した記録です。
これがあると、別のパソコンでも同じ環境を再現できます。
自動生成されるファイルなので消しがちですが、これはgitに入れておくものでした。
.envを使うなら1行足す
デフォルトの.gitignoreは .env*.local という書き方になっています。
これは .env.local や .env.production.local は無視しますが、.env というファイル名そのものは無視されません。
APIキーなどを .env に直接書く場合は、自分でこの1行を足しておく必要があります。
.env⑥ どのファイルが何なのかを把握する
作られたファイルの数に最初は圧倒されるのですが、自分で触るものはそれほど多くありません。
| ファイル・フォルダ | 役割 | 自分で触る？ |
|---|---|---|
| package.json | 使うライブラリの一覧と、アプリの入口の指定 | ほぼ自動 |
| app.json | アプリ名・アイコン・SDK・URLスキームなどの設定 | 触る |
| app/（またはsrc/app/） | 画面そのもの | ここがメイン |
| tsconfig.json | TypeScriptの設定 | ほぼ触らない |
| node_modules/ | ライブラリ本体 | 触らない |
| package-lock.json | バージョンの固定記録 | 触らない |
| .expo/ | 開発サーバーのキャッシュ | 触らない |
アプリが動くために本当に必要なのは、package.json・app.json・画面のフォルダの3つです。
残りは自動生成か設定ファイルなので、最初のうちは気にしなくて大丈夫でした。
app.jsonで先に直しておきたいところ
app.jsonはアプリの名札にあたるファイルです。
アプリ名、アイコンの場所、画面の向き、ダークモードに追従するかどうか、といった設定が入っています。
ここで1つ、あとから困る部分がありました。
scheme という項目です。
これはアプリ独自のURLのようなもので、通知をタップしてアプリを開くときなどに使われます。
create-expo-app はフォルダ名から自動でこの値を作るのですが、URLスキームは数字で始められません。
フォルダ名を数字から始めていると、そのまま数字始まりの値が入ってしまいます。
作った直後は何も起きないので気づかず、あとから原因不明のバグとして出てくる部類のものだと思います。
私は英字始まりに直しました。
⑦ サンプル画面を消す
create-expo-app は、Expoのロゴが動くデモ画面を一緒に作ります。
仕組みを見るには便利ですが、自分のアプリを作るなら消して構いません。
手で消していってもいいのですが、専用のコマンドが用意されていました。
npm run reset-projectこれを実行すると、サンプルのファイルが app-example というフォルダに移動して、空の画面フォルダが新しく作られます。
移動ではなく削除するか聞かれる場合もあるようです。
移動しておけば、あとから「あのサンプルどう書いてあったっけ」と見返せるので、私は残す方を選びました。
不要になったら app-example ごと消せば終わりです。
⑧ 起動して実機で確認する
ここまでできたら、開発サーバーを立ち上げます。
npx expo startターミナルにQRコードが出るので、iPhoneの標準カメラアプリで読み込むと、Expo Goの中でアプリが開きます。
ビルドも転送も要らず、コードを保存すると1秒ほどで画面に反映されます。
ここまで来ると、作業のスピードが一気に変わりました。
ただ、この工程にもいくつか引っかかりどころがあります。
iOSの「ローカルネットワーク」の許可が下りていないと、Wi-Fiは繋がっているのに「オフラインです」というエラーが出ます。
また、Expo Goを開くとログイン画面が大きく出てきますが、手元で開発する分にはログインは不要でした。
このあたりの詳細は、実機表示に絞った記事のほうにまとめています。
⑨ ここからコードを書き始める
準備の最後に、画面がどう作られるかだけ書いておきます。
Expoの標準構成では、画面のフォルダにファイルを置くだけで画面になります。
ルーティングの登録作業は要りません。
app/
├── _layout.tsx ← 全画面の一番外側の枠
└── (tabs)/
├── _layout.tsx ← タブバーの定義
├── index.tsx ← トップ画面
└── sample.tsx ← /sample という画面ファイル名がそのまま画面のURLになる仕組みです。
・index.tsx がトップ画面
・アンダースコアで始まる _layout.tsx は画面ではなく「枠」
・括弧付きのフォルダはURLに出ないグループ分け専用
この3つのルールだけ頭に入れておくと、フォルダの中身が読めるようになりました。
実際に書くコードの中身、HTMLのタグが何に置き換わるのか、CSSをどこに書くのかについては、まだ自分でも整理しきれていません。
そちらは次の記事で書いていきます。
つまずきやすいところのまとめ
・SDKのバージョン…create-expo-appは最新で作るが、App StoreのExpo Goは追いついていないことがある
・ライブラリの追加…npm installではなくnpx expo installを使う
・app.jsonのscheme…数字で始まっていると、通知タップでアプリが開かなくなる
・.env…デフォルトの.gitignoreでは無視されないので、1行足す
・package-lock.json…自動生成されるが、これはgitに入れる
まとめ
やることを並べ直してみると、準備そのものは長くありませんでした。
Node.jsを確認して、コマンドを1つ打って、SDKのバージョンを合わせて、サンプルを消す。
それだけです。
私が止まっていたのは、手順が多かったからではなく、作られたファイルのどれが何なのかが分からなかったからでした。
次は、実際に画面を書くところに入っていきます。
ここまで読んでくださりありがとうございました。
この記事のカテゴリー
開発ブログ の記事をもっと見る →