Expo UI SwiftUI 基礎コース

Day 1

Expo UI SwiftUIの全体像

React Native / Expo で iOS 向けSwiftUIコンポーネントを扱う @expo/ui/swift-ui の学習方針を整理し、3画面サンプルで何を作りながら学ぶかを紹介します。

Day 2

Expo UI SwiftUIのプロジェクト準備

Expo の教材用プロジェクトを作成し、@expo/ui/swift-ui の Host と Text を使って iOS で SwiftUI component を表示する最小構成を作ります。

Day 3

Expo UI SwiftUIで3画面タブを作る

@expo/ui/swift-ui の Host と TabView を使い、Today、Tasks、Settings の3画面を切り替えられる最小構成を作ります。各画面では Text を使って、どの画面か分かる状態にします。

Day 4

Today画面の基本レイアウトを作る

@expo/ui/swift-ui の Text、Label、VStack、HStack、Spacer を使って、Today 画面のヘッダーと基本レイアウトを作ります。

Day 5

Today画面にサマリーカードを作る

@expo/ui/swift-ui の ZStack、Group、Divider、Image を使って、Today 画面に進捗や予定をまとめて表示するサマリーカードを作ります。

Day 6

Today画面に操作ボタンを作る

@expo/ui/swift-ui の Button、ControlGroup、Link を使って、Today 画面に操作ボタンと関連リンクを追加します。

Day 7

Tasks画面に入力フォームを作る

@expo/ui/swift-ui の TextField、SecureField を使って、Tasks 画面にタスク入力フォームを作ります。

Day 8

Tasks画面に一覧を作る

@expo/ui/swift-ui の List、ScrollView、LazyVStack、LazyHStack を使って、Tasks 画面にサンプルタスク一覧を作ります。

Day 9

Tasks画面に行操作を追加する

@expo/ui/swift-ui の SwipeActions、Menu、ContextMenu、Alert、ConfirmationDialog を使って、Tasks 画面に行操作UIと確認UIを追加します。

Day 10

Settings画面にフォームを作る

@expo/ui/swift-ui の Form、Section、Toggle、Slider を使って、Settings 画面に通知設定と集中時間設定のフォームUIを作ります。

Day 11

Settings画面に選択UIを作る

@expo/ui/swift-ui の Picker、DatePicker、ColorPicker、DisclosureGroup を使って、Settings 画面に週の開始日、通知時刻、テーマカラー、詳細設定の選択UIを追加します。

Day 12

3画面サンプルを仕上げる

@expo/ui/swift-ui の Popover、BottomSheet、ProgressView、Gauge を使って、Today 画面に詳細表示と進捗表示を追加し、3画面サンプル全体の表示状態を確認します。