【アプリ公開➁】コード開発後に行うアプリの基本設定ガイド

Node.js / npm
2025.10.05

Expoで新規アプリを作成すると、すぐに動かせる雛形が生成されます。
ただし、公開や実際の利用に向けては、アプリ名・アイコン・バージョン情報などを正しく設定する作業が欠かせません。

この記事では、初期構成に含まれる設定ファイルを中心に、どこを編集すればよいかをわかりやすく解説します。

設定に使うファイルについて

Expoプロジェクトでは、主に以下のファイルで設定を行います。

  • app.json
    アプリ全体の基本設定（名前、バージョン、アイコン、公開用ID など）を管理するファイル。
  • package.json
    使用するライブラリやスクリプトの管理。アプリのバージョン番号などを反映させることも可能。
  • その他のリソースフォルダ（assets など）
    アイコンやスプラッシュ画面の画像を配置する場所。

app.json で設定する内容

アプリを作成すると自動で生成される app.json は、Expoの中核となる設定ファイルです。
ここで調整する主な項目は以下の通りです。

  • アプリ名（name）
    スマホ画面に表示されるアプリの名前を指定。
  • スラッグ（slug）
    プロジェクトの識別子。通常は作成時に決まります。
  • バージョン（version）
    ユーザーに表示されるアプリのバージョン番号。更新ごとに上げていきます。
  • アイコン（icon）
    ホーム画面に表示されるアプリアイコンを指定。
  • iOS関連の設定（ios）
    • bundleIdentifier … App Store登録に必要な固有ID。公開後は変更できないため注意。
    • supportsTablet … iPad対応の有無。
  • Android関連の設定（android）
    • package … Google Play登録用のアプリID。こちらも固定で管理する必要あり。
    • adaptiveIcon … Android用のアイコン設定。
  • スプラッシュ画面（expo-splash-screen）
    アプリ起動時に表示される画面を設定。
{
  "expo": {
    "name": "calc",
    "slug": "calc",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "calc",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#E6F4FE",
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "backgroundImage": "./assets/images/android-icon-background.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png"
      },
      "edgeToEdgeEnabled": true,
      "predictiveBackGestureEnabled": false
    },
    "web": {
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff",
          "dark": {
            "backgroundColor": "#000000"
          }
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true,
      "reactCompiler": true
    }
  }
}
Bash

{
  "expo": { // Expo設定のルート｜【自動】テンプレ生成
    "name": "calc", // 端末に表示されるアプリ名｜【必須】公開前に確定推奨（いつでも変更可だが再審査に影響）
    "slug": "calc", // Expo/プロジェクトのURL用スラッグ（expo.dev等）｜【後でもOK】公開運用で一貫性は保つ
    "version": "1.0.0", // アプリの表示用バージョン｜【必須】ストア提出ごとに更新（例: 1.0.1）
    "orientation": "portrait", // 画面の向き（portrait/landscape/default）｜【後でもOK】仕様に合わせて
    "icon": "./assets/images/icon.png", // 汎用アイコン（iOS/Android/Webの既定）｜【必須】自社アイコンに差し替え推奨
    "scheme": "calc", // URLスキーム（深いリンク）｜【後でもOK】必要時に決める
    "userInterfaceStyle": "automatic", // ライト/ダーク自動切替（light/dark/automatic）｜【後でもOK】
    "newArchEnabled": true, // 新アーキ（Fabric/JSI）有効化｜【自動】テンプレ既定／問題時はfalseに戻す
    "ios": {
      "supportsTablet": true // iPad対応UIの許可｜【後でもOK】デザイン方針で
      // ※実ストア提出時は "bundleIdentifier" が別途【必須】（このテンプレには未記載）
    },
    "android": {
      "adaptiveIcon": { // Androidアダプティブアイコン一式｜【必須】見た目整えるため差し替え推奨
        "backgroundColor": "#E6F4FE", // 背景色｜【後でもOK】ブランドに合わせる
        "foregroundImage": "./assets/images/android-icon-foreground.png", // 前景｜【必須】差し替え推奨
        "backgroundImage": "./assets/images/android-icon-background.png", // 背景画像（使う場合）｜【任意】
        "monochromeImage": "./assets/images/android-icon-monochrome.png" // モノクロ版（12L+で使用）｜【任意】
      },
      "edgeToEdgeEnabled": true, // システムバーとのエッジ到達描画｜【後でもOK】UI調整で
      "predictiveBackGestureEnabled": false // 予測バックジェスチャ対応｜【後でもOK】
      // ※実ストア提出時は "package" が別途【必須】（このテンプレには未記載）
    },
    "web": {
      "output": "static", // Web出力方式（static/server）｜【後でもOK】ホスティング要件で
      "favicon": "./assets/images/favicon.png" // Webサイトのファビコン｜【後でもOK】差し替え推奨
    },
    "plugins": [
      "expo-router", // Expo Router 有効化｜【自動】テンプレ既定
      [
        "expo-splash-screen", // スプラッシュ画面設定｜【自動】導入済／画像は差し替え推奨
        {
          "image": "./assets/images/splash-icon.png", // 表示画像｜【必須】ブランド画像に差し替え推奨
          "imageWidth": 200, // 画像幅のヒント｜【後でもOK】見た目で調整
          "resizeMode": "contain", // contain/cover｜【後でもOK】画像レイアウトで
          "backgroundColor": "#ffffff", // ライト時の背景色｜【後でもOK】
          "dark": {
            "backgroundColor": "#000000" // ダーク時の背景色｜【後でもOK】
          }
        }
      ]
    ],
    "experiments": {
      "typedRoutes": true, // ルートを型安全に（Routerの型生成）｜【自動】テンプレ既定（好みで変更可）
      "reactCompiler": true // React Compiler 有効化｜【自動】テンプレ既定（不具合時はfalse）
    }
  }
}
Bash

アイコン・スプラッシュ画像の配置

フォルダ構成の中にある assets フォルダが画像の保存場所です。
ここに用意したアイコンやスプラッシュ画像を配置し、app.json からパスを指定します。

例：

  • ./assets/images/icon.png → ホーム画面アイコン
  • ./assets/images/splash-icon.png → スプラッシュ画面

公開前に確認しておきたいポイント

  • アプリ名やアイコンが仮のままになっていないか
  • bundleIdentifier（iOS）や package（Android）が適切か
  • バージョン番号が正しく設定されているか
  • 権限を利用する場合、infoPlist などに説明文を追加しているか

まとめ

Expoで作成したアプリは、そのままでも動作しますが、ストア公開や配布を意識するなら設定の見直しが不可欠です。
特に app.json はアプリ全体をコントロールする重要なファイルなので、開発の初期段階で正しく整えておきましょう。

次のステップでは、実際に QRコード読み取り機能の追加 や デザイン調整 に進めていくと、実用的なアプリに成長させることができます。

タイトルとURLをコピーしました