チュートリアル：React Native と Expo を使う

ページを編集

Expo、Expo Router、Expo UI を使って Android、iOS、web で動作するユニバーサルアプリを作るための React Native チュートリアル入門。

これからユニバーサルアプリを作る旅に出発しましょう。このチュートリアルでは、Android、iOS、web で動作する Expo アプリを、ひとつのコードベースで作成します。さっそく始めましょう！

プログラミングが初めてですか？コードを自分で書く代わりに、AI コーディングエージェントにプロンプトを与えて同じアプリを作ることもできます。AI を使って作るチュートリアルに従ってください。環境構築をゼロから解説しています。

React Native と Expo チュートリアルについて

このチュートリアルの目的は、Expo を始めて Expo SDK に慣れることです。以下のトピックを扱います。

TypeScript を有効にしたデフォルトテンプレートでアプリを作成する
Expo Router のネイティブタブで 2 画面のレイアウトを実装する
アプリのレイアウトを分解して flexbox で実装する
Expo UI でネイティブボタンを作成し、Android、iOS、web 向けにプラットフォーム固有のファイルを使う
各プラットフォームのシステム UI を使ってメディアライブラリから画像を選択する
Expo UI のボトムシートと React Native の <FlatList> コンポーネントを使って絵文字ピッカーを作成する
ステッカーを操作するためのタッチジェスチャーを追加する
サードパーティライブラリを使ってスクリーンショットを撮影し、Android と iOS ではメディアライブラリに保存し、web ではダウンロードする
最後に、ステータスバー、スプラッシュスクリーン、アイコンを設定してアプリを完成させる

これらのトピックは、Expo アプリ作成の基礎を学ぶための土台になります。このチュートリアルは自分のペースで進められ、完了までに最大 2 時間ほどかかります。

このアプリは、各プラットフォームのネイティブ UI を使用します。Expo UI は Jetpack Compose と SwiftUI のコンポーネントを React Native にもたらし、Expo Go で動作します。Android では、タブバー、ボタン、ボトムシートが Material 3 を使用します。iOS 26 以降では、タブバーが Liquid Glass を使用します。web では、アプリは React Native のコンポーネントを使用します。

初心者にも取り組みやすいように、チュートリアルは 8 章に分けています。続けて進めることも、いったん中断して後で戻ってくることもできます。各章にはステップを完了するために必要なコードスニペットが含まれているため、ゼロからコードを書きながら進めても、スニペットをコピー＆ペーストして進めても構いません。

始める前に、これから作るものを見てみましょう。Android、iOS、web で動作する StickerSmash という名前のアプリです。

このチュートリアルの完全なソースコードは GitHub で公開されています。

このチュートリアルの使い方

このチュートリアルは実践による学習を重視しており、説明よりも実際に作ることに重きを置いています。ゼロからアプリを作りながら、アプリ構築の流れを体験できます。

チュートリアル全体を通して、重要なコードや前のサンプルから変更された箇所は緑色でハイライトされます。デスクトップではハイライト部分にマウスを重ねる、モバイルではタップすることで、変更内容の詳細を確認できます。たとえば、以下のスニペットでハイライトされたコードは、その役割を説明しています。

Hello World

import { StyleSheet, Text, View } from 'react-native';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text>Hello world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

次のステップ

アプリの作成を始める準備が整いました。

始める

まずは新しい Expo アプリを作成しましょう。