React Native Course

Day 1

Expo UI の位置づけ

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

React Native / Expo13分

今日のゴール

Expo UI の全体像をつかみ、この30日コースで扱う範囲を整理します。

Expo UI には、iOS 向け、Android 向け、複数 platform 向け、既存ライブラリ置き換え向けの component 群があります。最初に分類を押さえておくと、Day 2 以降で見るべき docs を迷わず選べます。

今日は、次の3つを自分の言葉で説明できれば完了です。

  • Expo UI が何のためのものか
  • このコースで @expo/ui/swift-ui を主に見る理由
  • Daily Setup で作る3画面の役割

学ぶ component / 概念

  • @expo/ui
  • @expo/ui/swift-ui
  • Universal component
  • Drop-in replacements
  • SwiftUI component を React から扱う考え方

まず結論

このコースでは、@expo/ui/swift-ui を中心に学びます。

@expo/ui は、React Native から native UI component を使うための package です。その中に、iOS 向けの SwiftUI component、Android 向けの Jetpack Compose component、複数 platform 向けの Universal component、既存 React Native ライブラリを置き換えるための Drop-in replacements があります。

今回作るのは iOS 向けの小さなアプリなので、主役は @expo/ui/swift-ui です。

Jetpack Compose は Android 向けなので、このコースでは扱いません。Universal component は必要なときだけ補助的に見ます。Drop-in replacements は、後半で「既存ライブラリを置き換えるならどう判断するか」を考えるために比較します。

4つの分類を理解する

@expo/ui

@expo/ui は package 全体の名前です。

React Native のコードから、SwiftUI や Jetpack Compose などの native UI component を使えるようにします。

ざっくり言うと、React Native の画面の中で、iOS や Android の native らしい UI 部品を使うための入口です。

@expo/ui/swift-ui

@expo/ui/swift-ui は、iOS 向けの SwiftUI component を使うための import 先です。

このコースで主に見るのはここです。

たとえば、Text、Button、Form、Section、List、DatePicker、Alert など、iOS アプリでよく見る UI を React Native から扱う練習をします。

Universal component

Universal component は、Android、iOS、Web など、複数 platform で使うことを想定した component です。

便利ですが、このコースの主役ではありません。

今回の目的は「iOS らしい SwiftUI component を React Native から使うこと」なので、Universal component は必要になったときに補助として確認します。

Drop-in replacements

Drop-in replacements は、既存の React Native ライブラリを置き換えるための component 群です。

たとえば、日付選択、Picker、Slider、BottomSheet など、すでに広く使われている React Native ライブラリと近い API で使えるものがあります。

これは新しく画面を作るためだけでなく、既存アプリを Expo UI に寄せたいときの判断材料になります。このコースでは後半で比較対象として扱います。

公式 docs で確認すること

公式 docs は Expo UI を見ます。

すべてを読む必要はありません。今日は次の場所だけ見れば十分です。

  1. Expo UI の概要
  2. Available platforms
  3. Available components
  4. SwiftUI の component 一覧
  5. Drop-in replacements の component 一覧

読みながら、次の問いに答えてください。

  • Expo UI は何を React から使えるようにするものか
  • iOS 向けの component はどの分類にあるか
  • Android 向けの component はどの分類にあるか
  • Universal component は何が違うか
  • Drop-in replacements は何のためにあるか

今日の作業手順

1. Expo UI の分類をメモする

まず、次のテンプレートを自分のメモに写してください。

# Day 1 メモ

## @expo/ui

## @expo/ui/swift-ui

## Universal component

## Drop-in replacements

次に、公式 docs を見ながら、それぞれ1〜3文で説明を書きます。

完璧な説明にする必要はありません。あとで Day を進めながら修正してよいです。

2. このコースで見るもの、見ないものを決める

次のように、学習範囲をはっきり書きます。

## このコースの学習範囲

主に見るもの:
- @expo/ui/swift-ui

補助的に見るもの:
- Universal component
- Drop-in replacements

今回は扱わないもの:
- Jetpack Compose component

理由:
このコースでは iOS 向けの Daily Setup を作るため、SwiftUI component を中心に学ぶ。
Jetpack Compose は Android 向けなので、今回の主目的から外れる。

ここまで書けると、Day 2 以降で公式 docs を見るときに迷いにくくなります。

3. Daily Setup の3画面を決める

このコースでは、Daily Setup という小さな iOS アプリを作ります。

今日は実装しませんが、作る画面の役割だけ決めます。

# Daily Setup 仕様メモ

## Today
今日の進捗、集中時間、予定を見る画面。

## Tasks
タスクの追加、完了、削除を扱う画面。

## Settings
通知、集中時間、週の開始日、テーマ、リセット確認を扱う画面。

この3画面は、Day 2 以降で少しずつ作っていきます。

4. 最後に自分の言葉で答える

メモを作ったら、次の質問に答えてください。

Q. Expo UI とは何か？
A.

Q. このコースで主に見る import は何か？
A.

Q. なぜ Jetpack Compose は扱わないのか？
A.

Q. Universal component はこのコースでどう扱うか？
A.

Q. Drop-in replacements はこのコースでどう扱うか？
A.

Q. Daily Setup の3画面は何か？
A.

この質問に答えられれば、Day 1 は完了です。

単体サンプルで試すこと

今日はまだ実装しません。

Day 1 の単体サンプルはありません。代わりに、公式 docs を見ながら分類メモを作ります。

実装を始めるのは Day 2 からです。

Daily Setup に組み込むこと

今日はアプリには組み込みません。

代わりに、Daily Setup の仕様メモを作ります。画面は Today、Tasks、Settings の3つにします。

学習メモ

今日の学習メモは、次のように残せれば十分です。

Expo UI は、React Native から native UI component を使うための package。

このコースでは iOS 向けの Daily Setup を作るので、@expo/ui/swift-ui を主対象にする。

Universal component は複数 platform 向けなので補助として扱う。

Drop-in replacements は既存 React Native ライブラリを置き換えるための component 群なので、後半で比較対象として扱う。

Jetpack Compose は Android 向けなので、このコースでは扱わない。

よくあるつまずき

どの docs を見ればよいかわからない

Day 1 では、SwiftUI component 一覧を中心に見ます。

Android 向けの Jetpack Compose component は、今回は読み込まなくてよいです。

Universal component と SwiftUI component の違いがわからない

今は、次の理解で十分です。

  • SwiftUI component: iOS らしい UI を作るために使う
  • Universal component: 複数 platform で共通して使いやすい UI を作るために使う

このコースでは iOS を主対象にするので、SwiftUI component を優先します。

Drop-in replacements を今すぐ使うべきかわからない

Day 1 では使いません。

Drop-in replacements は、既存ライブラリを置き換える場面で重要になります。このコースでは Day 26 以降で比較します。

完了条件

  • Expo UI の分類を説明できる
  • このコースで Jetpack Compose を扱わない理由を書ける
  • Daily Setup の3画面を言える
  • Day 1 メモに @expo/ui、@expo/ui/swift-ui、Universal component、Drop-in replacements の説明を書いている
  • Daily Setup の仕様メモを作っている

← Expo UI SwiftUI iOS 30日学習コース に戻る