【AI駆動開発】React Native + Expoで勉強時間管理アプリを作る！

こんにちは！今回は、最新のAIを活用しながら「勉強時間管理スマホアプリ」を個人開発していくプロジェクトの第1回目をお届けします。

Web制作の知識から一歩踏み出し、自らのスキルでアプリを形にし、リリースまで持っていく過程をすべて公開していきます。

パート１です。

【開発ログ】React Native + Expoで勉強時間管理アプリを作る #1 環境構築とAI対話

本記事は、YouTubeチャンネル「皇帝ペンギンプログラミング」の動画「【Expo,React Native】#1 勉強時間管理のスマホアプリの開発！【AI駆動開発】」の内容を時系列に沿って詳細に書き起こした開発ログです。

オープニング：なぜ「アプリ開発」なのか？

これまではWebサイト制作（クライアントワーク）を中心にしていましたが、今回から「AI駆動開発」でスマホアプリの個人開発に挑戦します。

動機: 受託開発（クライアントワーク）だけでなく、自身のプロダクト（アプリ）で収益を得る「個人開発」のスキルを身につけるため。
企画: 企画からリリースまでの全過程（AIへのプロンプト、エラー対応、勉強の過程）をドキュメンタリー形式で公開します。

アプリの企画：ガチで自分が欲しい「学習管理アプリ」

現在、投稿者自身が数学を勉強中であり、既存アプリでは満たせない以下のニーズを解決するアプリを開発します。

階層的な記録: 単に「数学」だけでなく、「どの単元の」「どの問題に」何分かけたかまで細分化して記録したい。

高度な分析: 「過去のトータルの勉強時間」や「直近3ヶ月の推移」など、任意の切り口でグラフ化して分析したい。既存アプリは過去データの分析機能が弱いと感じているため、ここを強化します。

AIによる要件定義と技術選定

ここから画面はPCに移り、生成AI（Gemini）を使用した開発が始まります。

AIへのプロンプト（要件定義）

「学習時間の記録とグラフ表示」「階層式タイマー」といった要件をGeminiに投げ、設計を相談しました。

技術選定の決断

AIの提案と自身の思考を合わせ、以下のスタックを採用しました。

フレームワーク: React Native (Expo)
思考プロセス: Flutterも候補でしたが、Web技術（JavaScript/React）の知見が活かせる点と、React Native界隈が盛り上がっている印象があるため選択。
Expoの利点: 1つのコードベースでiOS/Android両対応でき、開発工数を削減できる。
バックエンド: Firebase (予定)
グラフ描画: Chart.js または Victory Native
AIはreact-native-chart-kitやvictory-nativeを提案。円グラフや棒グラフの実装に使用予定。

開発の進め方：「MVP」から作る

AIが提示したロードマップの中で重要な概念が登場しました。

Q: 「まずミニマムの機能を開発することを3文字で何と言いますか？」とAIに質問。
A: MVP (Minimum Viable Product) = 実用最小限の製品。

まずは多機能を目指さず、「タイマーで時間を測り、ログを表示する」機能だけに絞って開発を進めることに決定しました。

開発環境のロードマップと用語理解

「React Native (Expo) で開発したい。手順は？」とAIに問いかけ、出力されたロードマップに含まれる用語を一つずつ確認していきます。

Node.js: JavaScriptをサーバーサイド（PC本体）で動かすための実行環境。JSの可能性を広げた重要ツール。
LTS (Long Term Support): 長期サポート版。ビジネス等で安定して使うためのバージョン。
Shell (Bash / Zsh):
AIへの深掘り質問：「Bashとは？」。コンピュータに命令を出すシェルの一つ。
Macの最新標準は Zsh (Z Shell) だが、Bashと操作感はほぼ同じ。
Expo Go: スマホにインストールする検証用アプリ。PCで書いたコードをリアルタイムでスマホにミラーリングできる。

コマンド解説：npx とは何か？

環境構築コマンドとして登場した npx について、AIを使って深掘り学習を行いました。

AIへの質問：「npmとnpxの違いは？」

npm (Node Package Manager): パッケージをPCにインストール（保存）して管理する。何度も使うツール向け。
npx: パッケージをインストールせずに、1回だけダウンロードして実行し、終わったら破棄する。
メリット: PC内を汚さない（不要なファイルが残らない）。常に最新版のコマンドを実行できる。
用途: create-expo-app のような、プロジェクト作成時に一度しか使わないコマンドに最適。

開発テクニック：AIによる「ファクトチェック」

投稿者はここで、独自のAI活用法を紹介しています。

手法: AIウィンドウを2つ開く。
流れ: 片方のAIが出したコードやコマンドを、もう片方のAIに「これはどんなコマンドですか？」と解説させる。
目的: AIのハルシネーション（嘘）を防ぎ、自分が実行するコードの意味を正確に理解するため。

実践：プロジェクトの作成

いよいよ実際にコマンドを打ち込みます。

1. プロジェクト作成コマンドの実行

ターミナル（PowerShell）で以下を実行しました。

npx create-expo-app@latest StudyLogApp

create-expo-app: Expoのプロジェクトを作成するコマンド。
@latest: 最新版を指定。
StudyLogApp: 今回決定したプロジェクト（フォルダ）名。

コマンド実行後、必要なファイル群（Node Modules等）のダウンロードと展開（Extract）が行われます。

2. ディレクトリの移動

作成されたフォルダに入ります。

cd StudyLogApp

実践：アプリの起動と実機確認

3. 開発サーバーの起動

npx expo start

これを実行すると、ターミナル上に巨大なQRコードが表示されます。

4. 実機（スマホ）での確認

スマホに「Expo Go」アプリをインストールしておく。

スマホのカメラでQRコードを読み取る。
トラブルシュート: 「Something went wrong」等のエラーが出る場合、PCとスマホが同じWi-Fiに接続されているかを確認する（動画内でもこの点に触れています）。

ビルド（JavaScript Bundleの構築）が始まり、100%になるとスマホにアプリ画面が表示されます。

5. Webブラウザでの確認

スマホだけでなく、PCブラウザでも確認が可能です。ターミナルに表示されたローカルサーバーのアドレス（例: localhost:8081）にアクセスすることで、Web版としてアプリの挙動を確認できました。

まとめと次回予告

今回はここまで。

React Native + Expo の環境構築が完了。
デフォルトのアプリ画面がスマホとブラウザで表示されることを確認。

次回からは、MVPとして定めた「学習記録機能」のコーディングに入っていきます。