React Native Course

第1弾

Expo UI SwiftUI iOS 30日学習コース

@expo/ui/swift-ui を iOS 向けに体系的に学び、Daily Setup というミニアプリを少しずつ作っていく30日コースです。

React Native / Expo30日Daily Setup9分

このコースで作るもの

このコースでは、@expo/ui/swift-ui を使って Daily Setup という小さな iOS アプリを作ります。

Daily Setup は、1日の予定、集中時間、タスク、通知設定を扱うミニアプリです。通信や複雑な永続化は入れず、Expo UI SwiftUI の component と React state の接続に集中します。

画面は3つです。

画面役割
Today今日の進捗、集中時間、予定シート
Tasksタスク一覧、追加、完了、削除確認
Settings通知、集中時間、週の開始日、テーマ、リセット確認

学習方針

主対象は @expo/ui/swift-ui です。

  • Jetpack Compose は対象外
  • Universal component は必要に応じた補助扱い
  • Drop-in replacements は後半に既存 React Native ライブラリとの比較として扱う
  • Day 2 で Daily Setup プロジェクトを作り、以後は毎日そのプロジェクトへ学習成果を統合する

30日ロードマップ

Dayテーマ成果物
1Expo UI の位置づけ学習メモ「Expo UI で何を学ぶか」
2環境構築空の Daily Setup
3HostToday タブの最小土台
4Text / LabelToday ヘッダー
5VStack / HStack / SpacerToday 基本レイアウト
6ZStack / Group / Divider区切り付き Today サマリー
7Imageアイコン付き Today
8ButtonView Plan ボタン
9TextField / SecureFieldTasks の追加フォーム原型
10Toggle / SliderSettings の通知・集中時間セクション
11Picker / DatePicker / ColorPicker入力部品サンプル
12FormSettings フォーム
13Sectionセクション分割された Settings
14List / ScrollView静的なタスク一覧
15LazyVStack / LazyHStack / SwipeActionsスワイプ操作付きタスク行
16Menu / ContextMenuメニュー操作付き Tasks
17DisclosureGroup / Overlay折りたたみ付き Settings
18Popover / BottomSheet今日の予定シート
19Alert / ConfirmationDialog確認 UI
20TabView3タブのアプリ土台
21Link / ControlGroup操作グループ付き画面
22ProgressView / Gauge進捗付き Today
23RNHostViewRN 混在サンプル
24Namespace / useNativeState状態同期メモ
25state 復習state 設計メモ
26replacement 比較 1入力系比較メモ
27replacement 比較 2選択・ページング比較メモ
28BottomSheet 比較BottomSheet 比較メモ
29Daily Setup 仕上げ 1Today / Settings が動くアプリ
30Daily Setup 仕上げ 2Daily Setup 完成版

毎日の進め方

  1. 公式 docs で対象 component を読む。
  2. 小さな単体サンプルで動かす。
  3. Daily Setup の該当画面に組み込む。
  4. component 学習メモを書く。
  5. iOS シミュレータで表示と操作を確認する。

Day 別ページ

Day 1 から Day 30 まで、各日の教材ページに分けています。各ページでは、その日に確認する component / 概念、単体サンプル、Daily Setup への組み込み、完了条件を整理します。

Day 一覧

  1. Day 1

    Expo UI の位置づけ

    @expo/ui、@expo/ui/swift-ui、Universal、Drop-in replacements の違いを整理します。

    無料公開13分

  2. Day 2

    環境構築

    Expo Router 前提の新規アプリを作り、@expo/ui を導入して Daily Setup の土台を作ります。

    無料公開13分

  3. Day 3

    Host

    Host を使い、SwiftUI component を React Native 画面内に置く境界を確認します。

    ログインして読む16分

  4. Day 4

    Text / Label

    Text と Label を使い、Today 画面の見出し、日付、アイコン付き見出しを作ります。

    ログインして読む16分

  5. Day 5

    VStack / HStack / Spacer

    VStack、HStack、Spacer を使い、Today 画面の基本レイアウトを作ります。

    ログインして読む16分

  6. Day 6

    ZStack / Group / Divider

    ZStack、Group、Divider を使い、重なり、論理グループ、区切りを確認します。

    ログインして読む16分

  7. Day 7

    Image

    Image を使い、Today 画面のアイコン表現と Label との使い分けを確認します。

    ログインして読む15分

  8. Day 8

    Button

    Button を使い、押下イベントを React state と接続します。

    ログインして読む16分

  9. Day 9

    TextField / SecureField

    TextField と SecureField を使い、Tasks の追加フォーム原型を作ります。

    ログインして読む17分

  10. Day 10

    Toggle / Slider

    Toggle と Slider を使い、Settings の通知と集中時間を state に接続します。

    ログインして読む16分

  11. Day 11

    Picker / DatePicker / ColorPicker

    Picker、DatePicker、ColorPicker を使い、選択系入力を確認します。

    ログインして読む17分

  12. Day 12

    Form

    Form を使い、Settings 画面の土台を作ります。

    ログインして読む15分

  13. Day 13

    Section

    Section を使い、Settings を Notifications、Focus、Appearance に分割します。

    ログインして読む15分

  14. Day 14

    List / ScrollView

    List と ScrollView を比較し、Tasks の静的なタスク一覧を作ります。

    ログインして読む16分

  15. Day 15

    LazyVStack / LazyHStack / SwipeActions

    LazyVStack、LazyHStack、SwipeActions を使い、遅延リストとスワイプ操作を確認します。

    ログインして読む16分

  16. Day 16

    Menu / ContextMenu

    Menu と ContextMenu を使い、優先度変更と長押し操作を確認します。

    ログインして読む15分

  17. Day 17

    DisclosureGroup / Overlay

    DisclosureGroup と Overlay を使い、折りたたみ表示とバッジ表現を確認します。

    ログインして読む15分

  18. Day 18

    Popover / BottomSheet

    Popover と BottomSheet を使い、一時的な補助情報と今日の予定シートを作ります。

    ログインして読む16分

  19. Day 19

    Alert / ConfirmationDialog

    Alert と ConfirmationDialog を使い、削除確認と設定リセット確認を作ります。

    ログインして読む15分

  20. Day 20

    TabView

    TabView を使い、Today、Tasks、Settings を3タブのアプリ土台へ統合します。

    ログインして読む16分

  21. Day 21

    Link / ControlGroup

    Link と ControlGroup を使い、関連導線と複数操作のまとまりを確認します。

    ログインして読む16分

  22. Day 22

    ProgressView / Gauge

    ProgressView と Gauge を使い、タスク完了率と集中進捗を表示します。

    ログインして読む16分

  23. Day 23

    RNHostView

    RNHostView を使い、SwiftUI 画面内に React Native view を混ぜる方法を確認します。

    ログインして読む15分

  24. Day 24

    Namespace / useNativeState

    Namespace と useNativeState の役割を調べ、React と native state の接続を整理します。

    ログインして読む15分

  25. Day 25

    state 復習

    入力 component と useState の接続を整理し、Daily Setup の state 設計を見直します。

    ログインして読む16分

  26. Day 26

    replacement 比較 1

    DateTimePicker、Picker、Slider を Drop-in replacements と SwiftUI component の観点で比較します。

    ログインして読む15分

  27. Day 27

    replacement 比較 2

    Menu、SegmentedControl、PagerView を比較し、選択操作とページング UI の使いどころを整理します。

    ログインして読む15分

  28. Day 28

    BottomSheet 比較

    Drop-in replacement と SwiftUI 版の BottomSheet を比較し、Daily Setup での使い分けを整理します。

    ログインして読む15分

  29. Day 29

    Daily Setup 仕上げ 1

    Today と Settings を静的データで完成させ、Daily Setup の土台を仕上げます。

    ログインして読む17分

  30. Day 30

    Daily Setup 仕上げ 2

    Tasks の追加、完了、削除を完成させ、Daily Setup と学習メモを仕上げます。

    ログインして読む17分