こんにちは！このブログでは、スマホアプリ開発に初挑戦する方向けに、React Native と Expo を使ったフロントエンドの開発環境構築方法を、わかりやすくステップバイステップで解説します。
📌 このガイドでできること
- React Native と Expo を使ってアプリ開発をスタートできる
- Mac 上で開発環境を構築できる
- スマホで実機確認できるアプリを作成
✅ 事前準備
以下がインストールされていない場合は、最初に準備しておきましょう。
| ツール | インストール方法 |
|---|---|
| Node.js / npm | 公式サイト から最新版をインストール |
| Git | Git公式サイト または brew install git |
| Expo Go アプリ（スマホ） | App Store / Google Play で「Expo Go」をインストール |
🧰 Expo CLI を使ってプロジェクト作成
以下のコマンドを実行して、新しい Expo プロジェクトを作成します。
npx create-expo-app myplates
cd myplates
npm install💡 create-expo-app は Expo 推奨の最新CLIです。
▶️ 開発サーバーを起動してアプリを確認
npx expo start
✏️ App.tsx を編集してみよう
App.tsx を以下のように変更して、自分の表示が出せるか試してみましょう。
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
こんにちは、MyPlates アプリ！
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
text: { fontSize: 20 }
});
保存するだけで、自動的にスマホ画面が更新されます！
💡 よくあるエラーと対処法
| エラー | 対処方法 |
|---|---|
| Unable to find expo | npm install を忘れていないか確認 |
| expo-cli does not support Node >=17 | Node のバージョンを下げる or npx create-expo-app を使用 |
| QRコードが読めない | スマホとPCが同じWi-Fiネットワークに接続されているか確認 |
🧪 よく使う開発コマンド
npm start # 開発サーバーを起動（expo startと同じ）
npm run android # Androidエミュレータで起動（Android Studio 必要）
npm run ios # iOSシミュレータで起動（Mac + Xcode 必要）🗂️ ディレクトリ構成例
myplates/
├── app/ # ページごとの画面ファイルを格納（expo-router）
│ ├── (tabs)/ # タブナビゲーション配下の画面
│ │ ├── _layout.tsx # タブレイアウト設定
│ │ ├── index.tsx # ホーム画面
│ │ └── explore.tsx # その他の画面
│ ├── _layout.tsx # 全体ナビゲーション構成（Stack等）
│ └── +not-found.tsx # 404ページ
├── components/ # UI部品や共通コンポーネント
│ ├── ui/ # タブ背景やアイコン等のプラットフォーム別UI
│ └── 共通コンポーネント.tsx
├── assets/ # 画像やフォント等の静的リソース
│ ├── images/
│ └── fonts/
├── constants/ # 色などの定数定義
├── hooks/ # カスタムフック
├── .expo/ # Expoの内部キャッシュ・設定（自動生成）
├── scripts/ # プロジェクト用スクリプト（リセットなど）
├── app.json # Expoアプリのメタデータ設定
├── eslint.config.js # ESLint設定
├── expo-env.d.ts # Expo用の型定義
├── tsconfig.json # TypeScript設定
├── package.json # npm依存管理
└── README.md✅ まとめ
これで、React Native + Expo を使ったスマホアプリの開発環境が完成しました 🎉
実機確認もすぐにできるため、初心者でも安心してアプリを試作できます。
🔜 次回予告
次回は Spring Boot を使って、アプリのデータを保存する API サーバーを Docker で立ち上げる方法を解説します。
コメント