前回の記事はこちら

アプリの概要に、主な機能を追加しました。

🌟制作するアプリの概要

タイトル：『ひとこと日記』

概要：ひとこと日記をつけるアプリ。継続して日記をつけていると、動物達の警戒心が解けて、少しずつ近寄ってきます。構いすぎてしまうと……？

（NEW）機能：タップで動物が話す機能、日記記録機能、日記履歴表示機能、動物記録機能など

🌟開発環境の構築

React Native＋Expo開発環境の構築手順

Node.jsのインストール。
Expo CLIのインストール。
プロジェクト作成。
開発サーバー起動。
実機での確認。

Node.jsはゼミでインストール済みだったので、ターミナルに以下のコマンドをコピペしていくだけで開発環境の構築が終わりました。

// Expo CLIのインストール
npm install -g expo-cli

// プロジェクト作成
npx create-expo-app hitokoto
cd hitokoto

// 開発サーバー起動
npx expo start

以降は、作成したプロジェクトのフォルダに移動して、開発サーバーを起動するだけで、スマホで動作を確認しながらのアプリ開発ができるようになります！

🌟事前にやったこと

やったこと①：デモファイルをリセットする。

初めは、サンプルとしてExpoアプリのテンプレートが表示されています。 Expoにはnpm run reset-projectという便利なコマンドが用意されており、このコマンドを実行すると既存のデモファイルが移動されて、新しいシンプルなファイルが作られます。元のファイルはapp-exampleフォルダにまとめられていました。

やったこと②：グループ化設定を行う。

グループ化機能はExpo Router独自の機能です。Expo Routerとは、Expoプロジェクトで使われる公式の画面遷移ライブラリ群のひとつで、React Native上でファイルベース・ルーティングを提供する機能らしいです。詳しいメリットとやったことは以下の通りです。

グループ化設定のメリット

URLがシンプルになる

(tabs)はURLに含まれないため、/index、/history、**/collection**という綺麗なパスになります。zenn

タブ専用のレイアウトを適用できる

**(tabs)/_layout.tsx**でタブナビゲーションの設定を一箇所で管理でき、他の画面（例えば詳細画面など）はタブ外に配置できます。

拡張性が高い

将来的にログイン画面や設定画面などタブに含めたくない画面を追加する際も、**app**直下に配置すれば簡単に分離できます。

（tabs）ファイルを作成したよ

// タブナビゲーション用のファイル作成
app
├── _layout.tsx
└── (tabs)
    ├── _layout.tsx
    ├── index.tsx       # メイン画面
    ├── history.tsx     # 過去の日記
    └── collection.tsx  # 図鑑機能

(tabs)ディレクトリ内の各ファイルが自動的にタブとして認識されるらしいです。

やったこと③：app.jsonの基本設定を行う。

**app.json**はアプリの「設計図」のような役割を果たし、開発からリリースまでの全過程で参照される重要なファイルです。最初に基本情報を設定しておくことで、後の開発やビルドがスムーズに進みます。詳しい目的は以下の通りです。

app.json設定の目的

アプリの識別情報の定義

アプリ名、バージョン、アイコン、スプラッシュ画面などの基本情報を設定します。これらは各ストア（App Store/Google Play）にアップロードする際に必要な情報です。

ビルド時の動作設定

画面の向き（縦固定・横固定）、対応プラットフォーム（iOS/Android）、アプリの色などを指定します。これにより、開発中もリリース時も同じ設定で動作するようになります。

プラットフォーム固有の設定

iOSのバンドルIDやAndroidのパッケージ名など、各プラットフォーム特有の識別子を設定します。これらはアプリストアでアプリを一意に識別するために必須です。

必要な権限の宣言

カメラ、位置情報、ストレージなど、アプリが使用する機能の権限を事前に宣言します。ユーザーがアプリをインストールする際、これらの権限が表示されます。

app.jsonの中身

{
  "expo": {
    "name": "日記アプリ",
    "slug": "my-diary-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

Claudeが生成してくれました。よくわかっていないので、随時修正していきます。

🌟参考にしたサイト

開発環境の構築において、参考にしたサイトを以下に載せておきます。

React Native公式ドキュメント（https://reactnative.dev/docs/environment-setup）
Expo公式ドキュメント（https://docs.expo.dev/get-started/set-up-your-environment/?platform=ios&device=physical）
今日から毎日ReactNativeを学ぶことにした（https://note.com/nero15/n/n082af638c459?sub_rt=share_pw）

公式サイトにはファイル構造や初めの環境設定が詳しく載っているのですが、英語が苦手なので、日本人のnoteがとても参考になりました。このあたりの設定やファイル構造は、初めPerplexityに教えてもらっていたのですが、古いバージョンの記事を参照してしまったようでめちゃくちゃな回答になっていました。そこで一時間ぐらいタイムロスしてしまったので、面倒でも公式のドキュメントはしっかり確認すべきですね。

#3に続く…

【iOSアプリ開発】#2 開発環境を整える