コース目次 / 第1章
持ち帰り準備 — 手元にプロジェクトを作る
Expo Go をスマホに入れて、パソコンに Expo SDK 54 のプロジェクトを作ります。
ここからはあなたのパソコンの中の話です。Xcode も Android Studio も使いません。
今日のゴール
tabi-roulette というフォルダができて、エディタで開けていること。動かすのは次の章です。
このコースはコース2の修了(Node が入っていること)を前提にしています。まだの方は、コース2の第0章「準備」で Node を入れてから戻ってきてください。ここで Node から入れると、2〜4時間には収まりません。
1. スマホに Expo Go を入れる
App Store(iPhone)または Google Play(Android)で Expo Go を検索して入れます。無料です。試食章で入れた方は、そのままで構いません。
2. Node があるか確かめる
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
v20.19.0 以上の数字が出れば大丈夫です。Expo SDK 54 が必要とするのは Node 20.19 以上です。
数字が小さいときや command not found のときは、コース2の第0章に戻って Node を入れ直してください。ここだけは避けて通れません。
3. プロジェクトを作る
デスクトップに移動してから、1行打ちます。少し長いですが、意味は下で説明します。
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
数分かかります。終わると tabi-roulette フォルダができています。
| 部分 | 意味 |
|---|---|
npx create-expo-app |
Expo のプロジェクトを作る道具を、その場だけ借りて実行する |
tabi-roulette |
作るフォルダの名前 |
-t blank-typescript |
まっさらなTypeScriptの雛形から始める(画面が1枚だけの、いちばん小さい形) |
@sdk-54 |
Expo SDK のバージョンを 54 に固定する |
なぜバージョンを固定するのか
ここはこのコースでいちばん大事な決めごとなので、正直に書きます。
App Store と Google Play で配られている Expo Go は、SDK 54 対応のまま止まっています。Expo の新しいSDKは出続けていますが、ストア版の Expo Go はそれに追いついていません(Expo自身が「App Store の審査待ちで、いつになるか分からない」と公式に書いています)。
つまり、何も指定せずにプロジェクトを作ると、いちばん新しいSDKで作られてしまい、スマホの Expo Go では開けません。
この一手間が、このコースを「Xcodeなしで実機まで行ける」ものにしています。新しいSDKを使いたい場合は、開発ビルド(EAS)や TestFlight という道がありますが、どちらもApple Developer Program(有料)や長いビルド待ちが要ります。このコースでは扱いません。
将来ストア版の Expo Go が新しいSDKに対応したら、@sdk-54 の数字を上げてください。先に Expo Go 側が対応していることを確かめてから上げるのが順番です。
4. フォルダの中を見る
VS Code をお使いの方
VS Code で tabi-roulette フォルダを開いてください(「ファイル」→「フォルダーを開く」)。
ターミナル派の方
行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。
いろいろ入っていますが、最初に見るのは1つだけです。
| ファイル / フォルダ | 何のためのもの |
|---|---|
App.tsx |
画面そのもの。この章から先、ほとんどここだけを書きます |
app.json |
アプリの名前やアイコンの設定 |
package.json |
使っている部品の一覧。SDKのバージョンもここ |
assets/ |
アイコンなどの画像 |
index.ts |
アプリの起動口。触りません |
node_modules/ |
部品の実物。数百MBあります。触りません。消しても npm install で戻ります |
package.json を開いて、"expo": "~54.0... の行があることだけ確かめてください。ここが 54 なら、スマホの Expo Go で開けます。
うまくいかないときは
「npx: command not found」と出る
Node が入っていません(npx は Node に付いてきます)。コース2の第0章に戻って Node を入れてください。
Windows で「このシステムではスクリプトの実行が無効になっています」と出る
PowerShell の実行ポリシーに引っかかっています。PowerShell を管理者として実行して、次の1行を打ってから閉じ、ふつうの PowerShell を開き直してください。
Set-ExecutionPolicy -Scope CurrentUser RemoteSignedこれは「自分が書いたスクリプトは動かしてよい」という設定で、Node を使う作業では一般的なものです。
途中で止まった / エラーで終わった
できかけの tabi-roulette フォルダをまるごと削除してから、もう一度同じコマンドを打ってください。途中まで作られたフォルダが残っていると、作り直しに失敗します。
こうなっていればOK
卒業まであと3章です。
この章はまだ完了していません。
保存できませんでした(プライベートブラウズ中かもしれません)。この端末に進捗は残りませんが、先へは進めます。