Expo入門：ディレクトリ構造・Expo Router・セットアップ手順

project-root/
│
├── app/                       # ページやレイアウトを管理
│   ├── index.js               # ホームページ（ルートページ）
│   ├── about.js               # Aboutページ
│   ├── [userId].js            # 動的ルーティング例
│   └── _layout.js              # 共通レイアウト（例: ナビゲーションバーやフッター）
│
├── assets/                    # 静的ファイル（画像やフォントなど）
│   ├── icon.png               # アプリアイコン
│   ├── splash.png             # スプラッシュスクリーン画像
│   └── fonts/                 # カスタムフォント
│       ├── OpenSans-Regular.ttf
│       └── OpenSans-Bold.ttf
│
├── components/                # 再利用可能なUIコンポーネント
│   ├── Button.js              # カスタムボタンコンポーネント
│   ├── Header.js              # ヘッダーコンポーネント
│   └── Footer.js              # フッターコンポーネント
│
├── hooks/                     # カスタムフック（コンポーネントに特化したロジック）
│   ├── useFetch.js            # データ取得用のカスタムフック
│   ├── useAuth.js             # 認証状態の管理フック
│   └── useWindowSize.js       # ウィンドウサイズ取得のフック
│
├── services/                  # API通信やビジネスロジックを管理
│   ├── api.js                 # サーバーとの通信ロジック
│   ├── auth.js                # 認証関連の処理
│   ├── user.js                # ユーザー情報の取得・更新ロジック
│   └── utils.js               # 汎用的なヘルパーロジック
│
├── scripts/                   # シェルスクリプト（補助スクリプト）
│   ├── deploy.sh              # デプロイ用スクリプト
│   └── setup.sh               # プロジェクト初期設定スクリプト
│
├── node_modules/              # npmでインストールした依存パッケージ
│   └── ...                    # 自動生成されるため触る必要なし
│
├── .gitignore                 # Gitで追跡しないファイルやディレクトリを指定
├── app.json                   # Expoアプリの設定ファイル
├── babel.config.js            # Babelの設定ファイル
├── package.json               # プロジェクトの依存関係やスクリプトを管理
├── metro.config.js            # Metroバンドラーの設定ファイル（必要に応じて作成）
└── README.md                  # プロジェクトの概要やセットアップ手順

app/
  index.js         // ホームページ
  about.js         // "about"ページ
  [userId].js      // 動的ルーティング（例: "/user/123"）

import { Image } from 'react-native';
import logo from './assets/logo.png';

<Image source={logo} style={{ width: 100, height: 100 }} />;

components/
  Button.js       // 再利用可能なカスタムボタン
  Header.js       // ヘッダーコンポーネント

// hooks/useFetch.js
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetch;

// api.js：API通信を管理

import axios from 'axios';

// Axiosインスタンスを作成
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// GETリクエスト例
export const fetchData = async (endpoint) => {
  try {
    const response = await apiClient.get(endpoint);
    return response.data;
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
};

// POSTリクエスト例
export const postData = async (endpoint, data) => {
  try {
    const response = await apiClient.post(endpoint, data);
    return response.data;
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
};

scripts/
  deploy.sh       // デプロイの自動化スクリプト
  setup.sh        // 初期セットアップスクリプト

{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "platforms": ["ios", "android", "web"]
  }
}

module.exports = function (api) {
  api.cache(true); //Babelの設定をキャッシュして、ビルドの高速化を図る
  return {
    presets: ['babel-preset-expo'], //Babelの変換ルールをまとめたセット
  };
};

const App = () => <Text>Hello, React Native!</Text>;

const App = () => React.createElement(Text, null, 'Hello, React Native!');

{
  "dependencies": {
    "react": "18.0.0",
    "react-native": "0.72.0",
    "expo": "^49.0.0",
    "axios": "^1.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "eslint": "^8.40.0"
  }
}

node -v
npm -v

npm install -g expo-cli

npx create-expo-app my-app

cd my-app
npx expo start

npm run ios
npm run android

// package.json
{
  "name": "my-app",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
}