Zenn
📱

Expoではじめる！スマホアプリ開発の完全ステップバイステップガイド

に公開
JavaScript
React Native
React
初心者
Expo
tech

はじめに

「スマホアプリを作ってみたいけど、何から始めたらいいかわからない...」
そんな方のために、React Nativeフレームワークである Expo を使って、iOSとAndroidの両方で動作するスマホアプリを開発する手順を、ステップバイステップで丁寧に解説します。Expoを使えば、複雑な環境構築なしで、すぐにアプリ開発を始めることができます。

1. 開発環境の準備

まず、アプリ開発に必要なツールをPCにインストールします。

Node.jsのインストール

ExpoはNode.jsという実行環境の上で動作します。公式サイトからLTS（Long Term Support）版をダウンロードしてインストールしてください。

Node.js公式サイト

インストール後、ターミナル（WindowsではコマンドプロンプトやPowerShell）で以下のコマンドを実行し、バージョンが表示されれば成功です。

node -v
npm -v

Expo CLIのインストール

次に、Expoを操作するためのコマンドラインツール（CLI）をインストールします。ターミナルで以下のコマンドを実行してください。

npm install -g expo-cli

2. Expoプロジェクトの作成

開発環境が整ったら、いよいよプロジェクトを作成します。

プロジェクトの初期化

任意の作業ディレクトリに移動し、以下のコマンドを実行します。my-first-app の部分は好きなプロジェクト名に変更してください。

expo init my-first-app

プロジェクトテンプレートの選択

コマンドを実行すると、どのテンプレートを元にプロジェクトを作成するか尋ねられます。
今回は、最もシンプルな blank を選択しましょう。カーソルキーで選択し、Enterキーで決定します。

しばらく待つと、プロジェクトの作成が完了します。

3. 開発サーバーの起動と実機確認

プロジェクトが作成できたら、実際に動かしてみましょう。

開発サーバーの起動

まず、作成したプロジェクトのディレクトリに移動します。

cd my-first-app

そして、以下のコマンドで開発サーバーを起動します。

npm start

成功すると、ターミナルにQRコードが表示されます。

Expo Goアプリのインストール

次に、お手持ちのスマートフォンに Expo Go というアプリをインストールします。App StoreまたはGoogle Playで検索してください。

実機でアプリを表示

Expo Goアプリを起動し、「Scan QR Code」をタップして、PCのターミナルに表示されているQRコードを読み取ります。
すると、自動的にアプリがビルドされ、スマホの画面に「Open up App.js to start working on your app!」というテキストが表示されるはずです。

4. はじめてのコーディング

いよいよコードを書いていきます。

App.jsの編集

エディタでプロジェクト内の App.js ファイルを開いてください。これがアプリのメイン画面となります。
初期状態では、以下のようなコードが書かれています。

App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

テキストを編集してみる

<Text> コンポーネントの中身を書き換えてみましょう。

App.js
// ...
      <Text>こんにちは、Expo！</Text>
// ...

ファイルを保存すると、即座にスマホアプリの表示が更新されます。この手軽さがExpoの魅力です。

5. UIコンポーネントの利用

View や Text 以外にも、様々なコンポーネントが用意されています。

基本的なレイアウト

StyleSheet を使うことで、見た目を整えることができます。flex: 1 は画面全体を使う設定、justifyContent: 'center' と alignItems: 'center' は中身を中央揃えにする設定です。

ボタンを追加してみる

Button コンポーネントを react-native からインポートして追加してみましょう。

App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert } from 'react-native'; // Button, Alert を追加

export default function App() {
  const onButtonPress = () => {
    Alert.alert('ボタンが押されました！');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>こんにちは、Expo！</Text>
      <Button title="押してみて" onPress={onButtonPress} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16, // 要素間のスペース
  },
  text: {
    fontSize: 24, // 文字サイズ
    fontWeight: 'bold', // 太字
  }
});

Button を追加し、onPress プロパティに関数を渡すことで、タップされたときの動作を定義できます。

6. デバッグの基本

開発中にエラーが出た場合や、変数の値を確認したい場合はデバッグを行います。

  • コンソールログ: console.log('確認したい値') をコード内に追加すると、開発サーバーを起動しているターミナルにその値が出力されます。
  • 開発者メニュー: Expo Goアプリでデバイスを振るか、ターミナルで m キーを押すと開発者メニューが開きます。ここからリロードやデバッグツールの起動ができます。

7. アプリのビルド

開発が完了したら、アプリをビルドしてApp StoreやGoogle Playに公開できるファイル（.ipa / .aab）を作成します。
現在は EAS (Expo Application Services) を使うのが一般的です。

  1. EAS CLIのインストール: npm install -g eas-cli
  2. Expoアカウントでログイン: eas login
  3. プロジェクトの設定: eas build:configure
  4. ビルドの実行: eas build --platform all

コマンドを実行すると、Expoのサーバー上でビルドが実行され、完了するとダウンロードURLが発行されます。

EASの利用にはExpoアカウントの作成が必要です。また、ビルドには無料枠がありますが、超えると料金が発生します。

8. ストア公開 (概要)

ビルドして作成されたファイルを、各ストアにアップロードします。

  • iOS: Apple Developer Program (年間12,980円) への登録が必要です。
  • Android: Google Play Console (初回$25) への登録が必要です。

各ストアの審査を経て、無事に通過すれば全世界にアプリが公開されます。

まとめ

この記事では、Expoを使ったスマホアプリ開発の基本的な流れを解説しました。
環境構築からビルドまで、非常にスムーズに進められるのがExpoの大きな利点です。ここからさらに、画面遷移（React Navigation）や状態管理（Redux, Zustandなど）を学んでいくことで、より高機能なアプリを開発できるようになります。

ぜひ、あなただけのオリジナルアプリ開発に挑戦してみてください！

Discussion