Day 2
環境構築
Expo Router 前提の新規アプリを作り、@expo/ui を導入して Daily Setup の土台を作ります。
今日のゴール
Daily Setup を作るための Expo プロジェクトを用意します。
今日の作業が終わると、iOS シミュレータでアプリを起動でき、@expo/ui を使う準備ができた状態になります。Day 3 以降は、このプロジェクトに毎日 component を追加していきます。
学ぶ component / 概念
- Expo Router 前提のプロジェクト構成
@expo/uiの導入- iOS シミュレータでの起動確認
app/ディレクトリと画面の対応
まず結論
今日は画面を作り込む日ではありません。
新規 Expo アプリを作り、Bun で依存関係とコマンド実行を扱い、@expo/ui を入れて iOS で起動できるところまで確認します。ここで詰まると Day 3 以降の component 学習に進めないため、見た目よりも起動確認を優先します。
公式 docs で確認すること
公式 docs では、次の3点を確認します。
@expo/uiのインストール方法- Expo UI が対応している platform
- SwiftUI component を使うときの import 元
読むときは、次の問いに答えられるかを確認してください。
@expo/uiはどの package 名で導入するか- iOS 向けの SwiftUI component はどこから import するか
- このコースで Android 向け component を触らなくてよい理由は何か
今日の作業手順
1. 新規 Expo アプリを作る
Expo Router を使う前提で、新しい Expo アプリを作ります。
bun create expo-app daily-setup作成できたら、プロジェクトに移動します。
cd daily-setup2. iOS で起動する
まずは初期状態のまま起動します。
bunx expo start起動後、iOS シミュレータで初期画面が表示されるか確認します。
この時点でエラーが出る場合は、@expo/ui を入れる前に解決します。依存関係を増やす前に、素の Expo アプリが動くことを確認するためです。
3. @expo/ui を導入する
Expo UI を使うために @expo/ui を追加します。
bunx expo install @expo/ui導入後、もう一度起動します。
bunx expo startここで起動できれば、Day 3 から SwiftUI component を表示する準備ができています。
4. 画面構成をメモする
今日の時点では実装しなくて構いません。次の3画面を作る前提だけメモします。
# Daily Setup 画面構成
## Today
今日の進捗、集中時間、予定を見る画面。
## Tasks
タスクの追加、完了、削除を扱う画面。
## Settings
通知、集中時間、週の開始日、テーマ、リセット確認を扱う画面。単体サンプルで試すこと
今日は単体 component のサンプルは作りません。
確認するのは、次の2つです。
- Expo アプリが起動すること
@expo/uiを導入しても起動が壊れないこと- Bun で Expo のコマンドを実行できること
Daily Setup に組み込むこと
daily-setup プロジェクトを、今後の作業場所として用意します。
Day 3 以降で Today、Tasks、Settings を作っていくため、今日は画面構成のメモまでで十分です。
学習メモ
今日のメモは、次のように残します。
Daily Setup 用の Expo アプリを作成した。
Bun で依存関係と Expo コマンドを扱う方針にした。
@expo/ui を導入した。
iOS シミュレータで起動確認した。
今後は Today、Tasks、Settings の3画面を作る。よくあるつまずき
@expo/ui を入れる前から起動しない
まず Expo アプリ単体の問題を解決します。初期状態で起動しない場合、Expo UI の問題ではありません。
どの import を使うのかわからない
iOS 向け SwiftUI component を使う日は、@expo/ui/swift-ui を見ます。@expo/ui は package 全体の名前です。
画面を今日作るべきか迷う
今日は土台作りの日です。画面の実装は Day 3 から進めます。
完了条件
- Expo アプリが作成できている
@expo/uiを導入している- iOS シミュレータで起動できる
Daily Setupの3画面をメモしている