React Native Course

Day 1

Expo UI SwiftUIの全体像

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

React Native / Expo10分

動画では全体像を話しながら、これから作る3画面サンプルの方向性を確認します。 この記事では、教材全体の方針、扱うコンポーネント、12本のロードマップを整理します。

この教材で学ぶこと

この教材では、React Native / Expo から iOS 向けの SwiftUI コンポーネントを扱う @expo/ui/swift-ui を学びます。

@expo/ui/swift-ui の主要コンポーネントを、3つの画面に分けて確認し、それぞれの見た目、使いどころ、React state との最小限のつなぎ方を理解することです。

作るもの

この教材では、3画面のサンプルを作ります。

画面役割
Today表示、レイアウト、進捗、アクション
Tasks入力、一覧、行操作、確認UI
Settingsフォーム、セクション、選択系

3画面はタブで切り替えます。

@expo/ui/swift-ui のコンポーネントを確認するための教材用サンプルです。

対象読者

この教材は、以下のような方を想定しています。

  • React Native / Expo を触ったことがある
  • iOS 向けのネイティブらしいUIに興味がある
  • @expo/ui が気になっている
  • SwiftUI コンポーネントを React Native から使う感覚を知りたい
  • まずは小さなサンプルで全体像をつかみたい

逆に、以下を期待している場合は、この教材の主目的とは少し違います。

  • 本格的なタスク管理アプリを作りたい
  • Android / Jetpack Compose も同時に学びたい
  • 認証やDBまで含めたアプリを作りたい
  • 状態管理ライブラリまで含めて学びたい

扱うもの

この教材では、主に @expo/ui/swift-ui のコンポーネントを扱います。

代表的には以下です。

  • Host
  • TabView
  • Text
  • Label
  • VStack
  • HStack
  • Spacer
  • ZStack
  • Divider
  • Button
  • TextField
  • List
  • Form
  • Section
  • Toggle
  • Slider
  • Picker
  • DatePicker
  • ColorPicker
  • Popover
  • BottomSheet
  • Alert
  • ConfirmationDialog
  • ProgressView
  • Gauge

扱わないもの

この教材では、以下は扱いません。

  • Jetpack Compose
  • Universal component
  • Drop-in replacements
  • Daily Setup ミニアプリとしての完成
  • 通信
  • 永続化
  • 認証
  • 複雑なグローバル状態管理
  • RNHostView
  • Namespace
  • useNativeState

RNHostView、Namespace、useNativeState は、基礎編では扱わず、必要であれば応用編に回します。

全体のロードマップ

この教材は12本構成です。

#タイトル成果物
1Expo UI SwiftUIの全体像何を学ぶか理解する
2Expo UI SwiftUIのプロジェクト準備空の教材プロジェクト
3Expo UI SwiftUIで3画面タブを作る3画面タブ
4Today画面の基本レイアウトを作るTodayのヘッダー
5Today画面にサマリーカードを作るTodayのサマリー
6Today画面に操作ボタンを作るTodayの操作領域
7Tasks画面に入力フォームを作るタスク追加フォーム
8Tasks画面に一覧を作るサンプルタスク一覧
9Tasks画面に行操作を追加するスワイプ、メニュー、削除確認
10Settings画面にフォームを作る通知・集中設定
11Settings画面に選択UIを作るPicker / DatePicker / ColorPicker
123画面サンプルを仕上げる3画面サンプルの完成状態

この教材の進め方

各回では、以下の流れで進めます。

  1. 今回扱うコンポーネントを確認する
  2. 小さな画面に配置する
  3. 必要な state をつなぐ
  4. iOS Simulator で見た目と操作を確認する
  5. 補助記事でコードと注意点を見返す

動画では、実際に画面を作りながら流れを確認します。 記事では、あとから再現できるようにコマンド、コード、補足、エラー対応を残します。

まとめ

今回は、@expo/ui/swift-ui を学ぶ教材の全体像を整理しました。

この教材では、完成アプリではなく、3画面サンプルを通して SwiftUI コンポーネントを確認していきます。

次回は、教材用の Expo プロジェクトを作成し、iOS で動作確認できる状態にします。

← Expo UI SwiftUI 基礎コース に戻る