React Nativeは、JavaScriptでクロスプラットフォームのモバイルアプリを開発できる強力なツールとして、多くの開発者に利用されています。しかし、初めて取り組む際には、環境構築や設定が複雑に感じられることもあります。そこで役立つのが、React Nativeの簡易フレームワークであるExpoです。Expoを使うことで、複雑な設定を省き、数分でアプリ開発をスタートできます。本記事では、初心者でもわかりやすい手順で、Expoを利用したReact Native開発のセットアップ方法を解説します。この記事を読み終える頃には、React Nativeのプロジェクトを立ち上げ、基本的な操作を行えるようになるでしょう。
React NativeとExpoの概要
React NativeとExpoは、モバイルアプリ開発を効率的に行うためのツールですが、それぞれ独自の特徴があります。ここでは、両者の概要とその違いを解説します。
React Nativeとは
React Nativeは、Facebookが開発したオープンソースのフレームワークで、JavaScriptを使用してiOSとAndroidの両方で動作するアプリを構築できます。ネイティブコンポーネントを直接操作できるため、パフォーマンスの高いアプリを作成することが可能です。ただし、環境構築や設定がやや複雑で、初心者には敷居が高い面があります。
Expoとは
Expoは、React Nativeの上に構築されたプラットフォームで、開発プロセスを簡略化するためのツールやサービスを提供します。特に次の点で初心者に優しい設計になっています：
- 環境構築が簡単：Expo CLIを使うと、複雑な設定なしでプロジェクトを開始できます。
- ビルトインライブラリ：Expoにはカメラ、センサー、地図など、よく使う機能があらかじめ組み込まれています。
- クロスプラットフォーム：iOSとAndroidの両方でコードを変更せずに動作させることができます。
React NativeとExpoの違い
| 特徴 | React Native | Expo |
|---|---|---|
| 環境構築の難易度 | 手動で設定が必要 | 自動化されており初心者向け |
| ネイティブモジュール | 手動で追加可能 | 制限があるが多くの機能が内蔵されている |
| デバッグツール | 独自の設定が必要 | Expo Goアプリを使って簡単にデバッグ可能 |
| 柔軟性 | カスタマイズ性が高い | 一部制限があるが標準機能で十分な場合が多い |
ExpoはReact Nativeを簡単に利用できるようにしたプラットフォームで、特に初心者や迅速なプロトタイピングに適しています。React Nativeの直接操作が必要な場合は、Expoプロジェクトから分離することも可能です。
Expoの導入準備
Expoを利用してReact Native開発を始めるためには、まず開発環境を整える必要があります。以下では、Expoのセットアップに必要な準備を段階的に説明します。
必要なソフトウェア
Expoを使うには、以下のソフトウェアを事前にインストールする必要があります：
- Node.js：JavaScriptランタイム。公式サイトから最新版をダウンロードしてインストールしてください。
- npm または yarn：Node.jsをインストールするとnpm（Node Package Manager）も自動でインストールされます。代替としてyarnを利用することも可能です。
- Expo CLI：Expoプロジェクトを作成するためのコマンドラインツール。
Node.jsのインストール
公式サイト（Node.js公式ページ）から推奨バージョンをダウンロードし、インストールしてください。
インストール後、以下のコマンドでインストールが成功していることを確認できます：
node -v
npm -vExpo CLIのインストール
Expo CLIをインストールするには、以下のコマンドを実行します：
npm install -g expo-cliインストールが完了したら、バージョンを確認して正しくインストールされていることを確認します：
expo --versionスマートフォンアプリ「Expo Go」のインストール
開発したアプリを簡単に確認できる「Expo Go」をスマートフォンにインストールします。
- iOS: App Store
- Android: Google Play
推奨される開発環境
- テキストエディタ：Visual Studio Codeを推奨します。公式サイトからインストールしてください。
- エミュレータ：iOS Simulator（macOSのみ）やAndroid Emulatorを使用して、アプリの動作を確認することもできます。
準備が整ったら、次のステップでは実際にExpoプロジェクトを作成していきます。
新規プロジェクトの作成方法
Expoを利用してReact Nativeの新規プロジェクトを作成するのは非常に簡単です。以下の手順でプロジェクトを作成し、開発を開始しましょう。
Expoプロジェクトを作成する
ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します：
expo init my-first-projectここで、my-first-projectはプロジェクト名です。任意の名前を設定できます。
テンプレートの選択
コマンドを実行すると、使用するテンプレートを選択する画面が表示されます。以下から選択可能です：
- blank：空のプロジェクト。シンプルな構成。
- blank (TypeScript)：TypeScript対応の空のプロジェクト。
- tabs：タブナビゲーションを含むテンプレート。
必要に応じてテンプレートを選択し、Enterキーを押してください。
依存関係のインストール
プロジェクト作成が完了すると、必要な依存関係が自動的にインストールされます。インストール中はプロジェクトフォルダが作成され、必要なファイルとディレクトリが構成されます。
プロジェクトの起動
プロジェクトのフォルダに移動し、Expoの開発サーバーを起動します：
cd my-first-project
expo startコマンドを実行すると、ブラウザにExpoの開発ツール（Metro Bundler）が表示されます。
アプリのプレビュー
- スマートフォンでプレビュー
- スマートフォンのExpo Goアプリを起動します。
- Metro Bundlerに表示されたQRコードをスキャンするだけで、アプリが実行されます。
- エミュレータでプレビュー
- iOS SimulatorやAndroid Emulatorを使用して、アプリを確認できます。
- Metro Bundlerの画面で「Run on iOS Simulator」または「Run on Android Emulator」を選択します。
初期設定が完了したプロジェクト
初期状態では、「Welcome to React Native!」という画面が表示されます。この画面をカスタマイズしながら開発を進めていきます。
新規プロジェクトの作成はこれで完了です。次は、プロジェクトのディレクトリ構造を理解し、開発を進める準備を整えましょう。
エミュレータと実機でのテスト
作成したReact Nativeアプリを動作確認するには、エミュレータ（シミュレーター）や実際のスマートフォンでのテストが重要です。Expoを使用すれば、簡単にアプリのテストが可能です。
スマートフォンでのテスト
Expoの強力な特徴の一つが、実機での即時テストが可能な点です。
必要なアプリをインストール
- スマートフォンに「Expo Go」アプリをインストールします。
- iOS：App Store
- Android：Google Play
QRコードをスキャン
- ターミナルで以下を実行して、Expo開発サーバーを起動します：
expo start- 表示されたMetro BundlerのWeb画面にアクセスします。
- QRコードをスマートフォンのExpo Goアプリでスキャンすると、アプリが即座にスマートフォン上で動作します。
エミュレータでのテスト
エミュレータは、PC上でスマートフォン環境を再現し、開発中のアプリをテストするために使用します。
Android Emulatorでのテスト
- Android Studioのインストール
Android Studioをインストールし、エミュレータを設定します。 - Expoでエミュレータを起動
Metro Bundlerの画面で「Run on Android Emulator」をクリックします。 - エミュレータ上でアプリが起動し、動作確認が可能になります。
iOS Simulatorでのテスト（macOS限定）
- Xcodeのインストール
macOSを使用している場合、App StoreからXcodeをインストールします。 - Expoでシミュレーターを起動
Metro Bundlerの画面で「Run on iOS Simulator」をクリックします。 - シミュレーター上でアプリが起動します。
ホットリロードで効率的に開発
Expoでは、コードの変更を保存すると、自動的にアプリが更新される「ホットリロード」がサポートされています。これにより、効率的に開発を進めることが可能です。
動作確認の重要性
- 実機テストは、エミュレータでは検出できないデバイス固有の問題を発見するのに役立ちます。
- エミュレータは、特定の環境で迅速にデバッグするために便利です。
これでエミュレータや実機でのテスト方法を理解できました。次は、プロジェクトの内部構造を把握し、効率的な開発を進めましょう。
プロジェクトディレクトリの構造解説
Expoで作成したReact Nativeプロジェクトには、いくつかの重要なファイルとディレクトリがあります。それぞれの役割を理解することで、効率的に開発を進めることができます。
ディレクトリとファイルの全体構成
Expoプロジェクトを作成すると、以下のようなディレクトリ構造が生成されます：
my-first-project/
├── assets/
├── node_modules/
├── .expo/
├── App.js
├── app.json
├── babel.config.js
├── package.json
└── README.md各ディレクトリとファイルの役割
assets/
このフォルダには、アプリで使用する画像、フォント、サウンドなどの静的リソースが保存されます。
例：
- アイコン画像
- アプリ内で使用するカスタムフォント
node_modules/
プロジェクトにインストールされたすべての依存関係が含まれます。npmまたはyarnを使用して追加したライブラリがここに格納されます。このディレクトリは自分で編集する必要はありません。
.expo/
Expoに関連する一時データや設定ファイルが保存されるフォルダです。通常、このフォルダを手動で編集する必要はありません。
App.js
アプリケーションのエントリーポイントであり、最初に実行されるファイルです。Reactコンポーネントを定義し、画面を構築する中心的なファイルです。
例：
import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
return (
<View>
<Text>Welcome to React Native with Expo!</Text>
</View>
);
}app.json
Expoプロジェクトの設定ファイルです。アプリ名、アイコン、スプラッシュ画面、プラットフォーム固有の設定などを管理します。
例：
{
"expo": {
"name": "My First Project",
"slug": "my-first-project",
"version": "1.0.0"
}
}babel.config.js
Babel（JavaScriptトランスパイラ）の設定ファイルです。React Nativeのコードをブラウザやネイティブ環境で実行可能な形式に変換する役割を担います。
package.json
プロジェクトの依存関係やスクリプト、メタデータを管理するファイルです。新しいライブラリをインストールすると、このファイルに記録されます。
例：
{
"dependencies": {
"react": "18.2.0",
"react-native": "0.72.0",
"expo": "^49.0.0"
}
}README.md
プロジェクトの概要や使用方法を記載するドキュメントです。チームメンバーへの情報共有に役立ちます。
ディレクトリ構造のカスタマイズ
プロジェクトが大きくなると、独自のディレクトリ構造を追加することがあります。例えば：
- screens/: 画面コンポーネントを保存
- components/: 再利用可能なUIコンポーネントを保存
- utils/: ユーティリティ関数を保存
プロジェクトの基本構造を理解することで、作業がスムーズになり、コードの保守性が向上します。次は、この構造を活用してアプリのカスタマイズを進めましょう。
初期アプリのカスタマイズ
Expoで作成した初期状態のアプリには、「Welcome to React Native!」という画面が表示されます。この画面をカスタマイズして、自分のアプリに近づけていきましょう。
初期コードの確認
App.jsを開いて、デフォルトで用意されたコードを確認します。初期状態では次のようなコードになっています：
import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
return (
<View>
<Text>Welcome to React Native!</Text>
</View>
);
}このコードは、アプリの画面に「Welcome to React Native!」というテキストを表示するだけの非常にシンプルなものです。
画面デザインの変更
デザインを少し変更して、背景色を追加し、テキストを中央に配置してみましょう。
変更後のコード：
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, Expo World!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f8ff',
},
text: {
fontSize: 24,
color: '#333',
},
});コードのポイント
- StyleSheet: React Nativeでスタイリングを行うために
StyleSheet.createを利用します。 - flexbox:
justifyContentやalignItemsを使用して、テキストを画面中央に配置します。 - 背景色:
backgroundColorプロパティで画面全体の背景色を設定します。
新しいコンポーネントの追加
UIを拡張するために、ボタンを追加してみましょう。ボタンを押すとアラートを表示する簡単な機能を追加します。
追加コード：
import React from 'react';
import { Text, View, StyleSheet, Button, Alert } from 'react-native';
export default function App() {
const handlePress = () => {
Alert.alert('Button Pressed!', 'You clicked the button!');
};
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, Expo World!</Text>
<Button title="Click Me" onPress={handlePress} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f8ff',
},
text: {
fontSize: 24,
color: '#333',
marginBottom: 20,
},
});コードのポイント
- Buttonコンポーネント:
title属性でボタンのテキストを設定し、onPressイベントでアクションを指定します。 - Alert: ボタンを押したときにポップアップで通知を表示します。
変更内容のプレビュー
ファイルを保存すると、Expoのホットリロード機能によって変更が即座にアプリに反映されます。スマートフォンまたはエミュレータで確認してください。
カスタマイズのメリット
- アプリの見た目を自分好みに整えることで、開発のモチベーションが上がる。
- React NativeとExpoの使い方を実践的に学ぶことができる。
これで初期アプリのカスタマイズが完了しました。次は、アプリに便利なライブラリを導入して、さらに機能を強化しましょう。
必須ライブラリのインストール
React NativeとExpoでは、便利なライブラリを活用することで、アプリの開発が効率的になります。ここでは、Expo環境でよく使用されるライブラリとそのインストール方法について解説します。
ライブラリのインストール手順
Expoでは、以下の手順でライブラリをインストールします：
- ターミナルを開き、プロジェクトのルートディレクトリに移動します：
cd my-first-projectexpo installまたはnpm installを使用してライブラリをインストールします。
よく使用されるライブラリ一覧
1. React Navigation
React Navigationは、モバイルアプリにおける画面遷移を簡単に実装するためのライブラリです。
- インストールコマンド:
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons- 設定:
プロジェクトを再起動して、以下をApp.jsに追加：
import 'react-native-gesture-handler';2. Axios
Axiosは、API通信を簡単に実装できるHTTPクライアントです。
- インストールコマンド:
npm install axios- 使用例:
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => console.log(response.data))
.catch(error => console.error(error));3. Styled Components
スタイリングを簡潔に管理するためのライブラリです。
- インストールコマンド:
npm install styled-components- 使用例:
import styled from 'styled-components/native';
const Container = styled.View`
flex: 1;
justify-content: center;
align-items: center;
background-color: #f0f8ff;
`;
const App = () => (
<Container>
<Text>Hello, Styled Components!</Text>
</Container>
);
export default App;4. Expoの組み込みライブラリ
Expoには、特定の機能に特化したビルトインライブラリが多数あります：
- Expo Location: 位置情報を取得する。
- インストール:
bash expo install expo-location - 使用例:
import * as Location from 'expo-location'; const getLocation = async () => { const { status } = await Location.requestForegroundPermissionsAsync(); if (status === 'granted') { const location = await Location.getCurrentPositionAsync({}); console.log(location); } }; - Expo Camera: カメラ機能を追加。
- インストール:
bash expo install expo-camera
ライブラリの選択基準
以下の基準でライブラリを選ぶと効率的です：
- アプリに必要な機能をサポートしているか。
- ドキュメントが充実しているか。
- アクティブにメンテナンスされているか。
インストール後の確認
インストールしたライブラリが正しく動作しているか確認するには、以下を行います：
- プロジェクトを再起動します：
expo start- アプリ内で新しい機能をテストします。
これで、アプリに必要なライブラリをインストールする方法とその使い方を理解しました。次は、アプリのデプロイ方法を学びましょう。
アプリのデプロイ手順
Expoを利用したReact Nativeアプリの開発が完了したら、次は実際にアプリを公開します。Expoでは、開発者がアプリを簡単にデプロイできるよう、いくつかのツールとサービスが提供されています。
デプロイの選択肢
Expoを使ったデプロイには以下の方法があります：
- Expo Goを使った共有：デバッグやチームメンバーとの共有に最適。
- Expo Buildを使った本番環境用のビルド：iOSとAndroidのアプリストアに公開するための方法。
- EAS（Expo Application Services）を利用した高度なデプロイ：Expo Managed Workflowでもカスタムネイティブコードを含められる。
Expo Goを使った共有
Expoプロジェクトを他のユーザーと簡単に共有するためには、Expoアカウントにログインし、プロジェクトを公開します。
- Expo CLIにログイン:
expo login- プロジェクトの公開:
expo publishこのコマンドを実行すると、Expoのクラウド上にアプリが公開され、専用のURLが生成されます。そのURLを共有すれば、他の人がスマートフォンのExpo Goアプリを使ってアプリを試すことができます。
Expo Buildを使った本番環境用ビルド
アプリストアに公開するために、Expo Buildを使ってiOSとAndroidの実行ファイルを生成します。
- EAS CLIのインストール:
EAS（Expo Application Services）をインストールします：
npm install -g eas-cli- EASにログイン:
eas login- プロジェクトの構成:
EASプロジェクトを設定します：
eas build:configureこのコマンドで、iOSとAndroid用の設定がプロジェクトに追加されます。
- ビルドの実行:
- Androidビルド:
bash eas build --platform android - iOSビルド:
bash eas build --platform ios
ビルドが完了すると、Expoが生成した実行ファイル（APKまたはIPA）が提供されます。
- アプリストアへの提出:
- Androidの場合：Google Play Consoleを使用してAPKファイルをアップロードします。
- iOSの場合：Apple Developer Accountを使用してIPAファイルをApp Store Connectにアップロードします。
EASを利用した高度なデプロイ
Expo Managed Workflowの柔軟性を超えた機能が必要な場合、EASを活用して高度なビルドを行うことができます。例えば、ネイティブコードを追加したい場合やカスタムライブラリを組み込みたい場合に最適です。
EAS Submit
ビルド後のアプリをストアに提出するには、以下のコマンドを使用します：
eas submit --platform ios
eas submit --platform androidデプロイ時の注意点
- 証明書の準備：iOSアプリをデプロイするには、Apple Developer Programに登録し、適切な証明書を用意する必要があります。
- ストア要件の確認：Google PlayやApp Storeのガイドラインを遵守してください。
- テストの実施：本番環境での動作確認を十分に行い、不具合がないことを確認してください。
まとめ
Expoは、初心者でも簡単にアプリを公開できるツールを提供しています。必要に応じて、簡単な共有方法から本格的なストアデプロイまで、適切な手順を選んで進めましょう。次は、これまでの内容を振り返り、学びをまとめます。
まとめ
本記事では、Expoを使ったReact Native開発のセットアップ方法をステップバイステップで解説しました。React NativeとExpoの概要から、環境構築、新規プロジェクトの作成、カスタマイズ、便利なライブラリの導入、そしてアプリのデプロイまで、初心者でも理解しやすい形で紹介しました。
Expoを活用すれば、React Native開発の敷居を大幅に下げることができます。簡単なセットアップから本格的なアプリの構築、ストアへのデプロイまで、一連の流れをスムーズに進められるのがExpoの大きな利点です。このガイドを参考に、ぜひ自分のアイデアを形にして、モバイルアプリ開発を楽しんでください！
コメント