第3回まで無料

React Native & Expo 入門コース

Expo でのプロジェクト作成から、コアコンポーネントとスタイル・Flexbox と FlatList・Expo Router・カメラと位置情報と通知・保存・テスト・release ビルドまで。全30レッスンで「React の知識のまま、iOS と Android で動くメモアプリを作ってビルドできる」ところまで進みます。コードと出力はすべて Expo SDK 57.0.24 / React Native 0.86.3 / React 19.2.3 で実際に動かしたものです。

レッスン 1 からはじめる 全コースを解放する

カリキュラム

全30レッスンを6つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ JSX はブラウザ内で実行できないため、第2回で作る Expo のプロジェクトで試してください。前提は React の基本（必須）と TypeScript（推奨）です。第1〜3章は Web とシミュレータだけで進められます。

Chapter 1 — Web の React との違い（第1〜5回）

React の知識をそのまま持ち込み、描画先だけをネイティブに切り替えます。Expo でプロジェクトを作って iOS・Android・Web の 3 つで動かし、DOM の無い世界での部品とスタイルの書き方を覚えます。

1

React Native とは何か（React を知っている人の地図）

同じ React が、描画先を DOM からネイティブの View に替えただけ。react-dom と react-native の関係、Expo が引き受ける仕事、Flutter との使い分けを最初に整理する。

Free
2

Expo でプロジェクトを作って動かす

create-expo-app でひな形を作り、Web・iOS シミュレータ・Android エミュレータの 3 つで同じコードを動かす。それぞれで実際に出たバンドルの時間とログも見る。

Free
3

DOM が無いということ（div も CSS ファイルも無い）

window も document も CSS セレクタも無い世界で、何が使えて何が使えないかを整理する。文字は必ず Text の中、という一番よく踏む落とし穴も。

Free
4

コアコンポーネント（View・Text・Image・ScrollView・Pressable）

React Native が最初から持っている部品を、Web のタグとの対応で覚える。ScrollView と FlatList の使い分け、Pressable が Touchable 系より優れている理由まで。

🔒 ベーシック
5

StyleSheet とスタイルの当て方

StyleSheet.create の意味、CSS と違う既定値、単位の無い数値が何を指すか。実機で測った dp とピクセルの関係も確かめる。

🔒 ベーシック

Chapter 2 — 画面を組む（第6〜11回）

Flexbox・仮想化された一覧・画像・セーフエリア・プラットフォーム分岐で、アプリらしい画面を組み立てます。最後は追加と削除のできるメモ一覧を 1 本作ります。

6

Flexbox でレイアウトを組む

flex: 1 が何を意味するか、余白は margin ではなく gap で取る理由、はみ出しと潰れの直し方。画面いっぱいに広げる型を最初に覚える。

🔒 ベーシック
7

FlatList で一覧を出す（仮想化とは何か）

1000 件を ScrollView と FlatList で描き、実際に作られた行の数を数える。keyExtractor・getItemLayout・ListEmptyComponent の役割まで。

🔒 ベーシック
8

画像を出す（Image と expo-image）

require と uri の違い、@2x・@3x の選ばれ方、resizeMode の使い分け。キャッシュと placeholder が要るなら expo-image に替える。

🔒 ベーシック
9

セーフエリアとステータスバー

ノッチとホームバーに隠されない余白の取り方。useSafeAreaInsets の実測値を iOS と Android で比べ、SafeAreaView を使ってよい場所を決める。

🔒 ベーシック
10

プラットフォームで振る舞いを変える

Platform.OS と Platform.select、.ios.tsx / .android.tsx の分け方。分岐してよい場所と、分岐してはいけない場所の線引き。

🔒 ベーシック
11

【実践】メモ一覧の画面を組む

第1〜10回の部品を組み合わせて、追加・削除・0 件表示のあるメモ一覧を作る。行は状態を持たない部品に分け、表示用のデータは画面の外で作る。

🔒 ベーシック

Chapter 3 — ナビゲーション（第12〜17回）

Expo Router で、ファイルの場所をそのまま画面の住所にします。スタック・タブ・パラメータ・ディープリンクまで通し、一覧から詳細へつながるアプリの骨格を完成させます。

12

Expo Router（ファイルがそのまま画面になる）

app ディレクトリのファイル名が URL になる仕組み。_layout・グループ・動的セグメント・+not-found の読み方と、型が自動生成されることを確かめる。

🔒 ベーシック
13

Stack で画面を重ねる

_layout.tsx に置く Stack の役割、ヘッダーの出し方と消し方、画面ごとのタイトル。戻る操作が iOS と Android でどう違うかまで。

🔒 ベーシック
14

タブを並べる（グループとレイアウトの入れ子）

(tabs) グループと Tabs レイアウトでタブを作り、タブの上に詳細画面を重ねる。タブごとに履歴が分かれることと、その落とし穴。

🔒 ベーシック
15

画面に値を渡す・受け取る

動的セグメントと useLocalSearchParams。渡した値がすべて文字列になることと、渡してよいもの・渡してはいけないものの線引き。

🔒 ベーシック
16

ディープリンクとスキーム

memoapp:// で外から画面を開く。scheme の設定が iOS と Android の何になるか、Linking.createURL と parse の実測、エミュレータからの開き方まで。

🔒 ベーシック
17

【実践】一覧から詳細へつなぐ

第2章のメモ一覧に Expo Router を通し、行を押したら詳細へ移る形にする。詳細は id からデータを取り直し、見つからないときの表示まで作る。

🔒 ベーシック

Chapter 4 — 端末の機能を使う（第18〜23回）

権限・カメラ・位置情報・通知・保存を、実際に動かしながら押さえます。どれも「断られる・失敗する」前提で組み立て、最後は写真と場所を付けたメモを保存します。

18

権限の求め方（宣言と要求は別のこと）

app.json に書いた文言が Info.plist と AndroidManifest の何になるかを確かめ、status・granted・canAskAgain の 3 つで分岐する。端末の状態を adb から変えて試す方法も。

🔒 ベーシック
19

カメラと写真を扱う

CameraView で撮る道と、ImagePicker で選ぶ道。フックで権限を扱う書き方と、シミュレータでどこまで試せるかの線引き。

🔒 ベーシック
20

位置情報を取る

前景と背景で権限が分かれること、精度と待ち時間のつり合い、最後に分かっている場所を先に出す型。エミュレータの位置を動かして実測する。

🔒 ベーシック
21

通知を出す

ローカル通知の予約と取り消し、Android 13 以降の POST_NOTIFICATIONS、通知を押して画面を開く流れ。プッシュとの違いも整理する。

🔒 ベーシック
22

端末に保存する（AsyncStorage・SecureStore・SQLite）

3 つの保存先を、実際に書いて読んだ出力で比べる。何をどこに置くか、キーの設計、SQLite のトランザクションまで。

🔒 ベーシック
23

【実践】写真と場所を付けたメモを保存する

第18〜22回を 1 本につなぐ。権限・写真・場所・保存を、失敗しても進める形で組み立て、保存したデータを読み直して確かめる。

🔒 ベーシック

Chapter 5 — 仕上げる（第24〜27回）

状態の置き場所を決め、API とつなぎ、再レンダーを数えて減らします。型検査・テスト・ログで、原因を層ごとに切り分ける順番も身につけます。

24

状態管理（Context・外部ストア・サーバー状態）

画面をまたぐ状態を、種類で分けて置き場所を決める。Context の限界、useSyncExternalStore の小さなストア、サーバー状態を混ぜない理由。

🔒 ベーシック
25

API とつなぐ（読み込み中・失敗・再取得）

fetch はそのまま使える。タイムアウトと中断、失敗を型に畳む、開発中の localhost がエミュレータからどう見えるか。

🔒 ベーシック
26

再レンダーを減らす（実際に数えて確かめる）

親が更新されたときに子が何回描き直されるかを数え、memo を付けた場合と比べる。リストで効く順番と、測る前に手を出さないという原則。

🔒 ベーシック
27

デバッグの道具と、詰まったときの順番

開発メニュー・ログ・エラー画面・型検査・テスト。何がどこまで分かるかを整理し、原因を層で切り分ける順番を決める。

🔒 ベーシック

Chapter 6 — 出す（第28〜30回）

prebuild と release ビルドで、実際に出てくるファイルの大きさを測ります。アイコンとバージョンをそろえ、最後に Flutter との違いを数字で整理します。

28

ビルドの種類と、出すための道（ローカルと EAS Build）

prebuild で ios/ と android/ を持つ意味、debug と release の違い、実測したビルドの大きさ。EAS Build が引き受ける仕事と、このコースで実行していない範囲。

🔒 ベーシック
29

アイコン・スプラッシュ・アプリ名・バージョン

app.json の 1 か所から両 OS ぶんが作られる仕組み。Android のアダプティブアイコン、スプラッシュの設定、バージョンと番号の使い分け。

🔒 ベーシック
30

【実践】ストアに出す前にそろえるものと、Flutter との違いの整理

提出の前に確かめる項目を並べ、このコースで実測できた範囲を正直に区切る。最後に Flutter と React Native の選び方を、数字とともにまとめる。

🔒 ベーシック

全30レッスンを終えたら、次はネイティブ側から見直す Swift 入門コース や Kotlin & Android 入門コース、ゼロから始めるもう 1 つの道 Dart & Flutter 入門コース、アプリがつなぐ API を設計する API 設計入門コース へ。メンバーシップで全コースが解放されます。