【AI駆動開発】React Native + Expoで勉強時間管理アプリを作る！
こんにちは！今回は、最新のAIを活用しながら「勉強時間管理スマホアプリ」を個人開発していくプロジェクトの第1回目をお届けします。
Web制作の知識から一歩踏み出し、自らのスキルでアプリを形にし、リリースまで持っていく過程をすべて公開していきます。
パート１です。
1. なぜ今、学習管理アプリを自作するのか？
開発のきっかけは、私自身が数学などの学習を進める中で感じた「もっと定量的に、詳細に計測したい」という悩みでした。
世の中には多くの学習管理アプリがありますが、以下のような課題を感じていました。
- 粒度が粗い: 「数学」という大きな括りでは記録できても、「どの単元の」「どの問題に」どれだけ時間をかけたかまでは追いにくい。
- 分析機能の不足: 過去のデータの蓄積はあるが、3ヶ月の推移や特定の単元ごとの傾向など、カスタマイズした分析がしづらい。
そこで、「自分が本当に欲しい機能を詰め込んだアプリ」を自作することに決めました。
実装予定の目玉機能
- 階層的な記録: 単元や問題レベルまで細かくログを残せる。
- データの可視化: グラフを用いて、直感的に自分の成長を分析できる。
2. 技術選定：なぜ React Native + Expo なのか？
開発にあたり、まずはAI（Gemini）に相談しながら、最適な技術スタックを選定しました。
- フレームワーク: React Native (Expo)
- 理由: Flutterも有力候補でしたが、Web制作で培ったJavaScript/Reactの知識が直接活かせる点、そして将来的な市場価値を考慮しました。
- Expoのメリット: iOS/Android両対応のアプリを一つのコードで作成でき、実機テストが非常にスムーズです。
- バックエンド: Firebase (予定)
- グラフ描画: Chart.js または Victory Native (予定)
3. 開発アプローチ：AI駆動開発 × MVP
今回のプロジェクトでは、最新の開発手法である「AI駆動開発」を全面的に取り入れます。
AI（Gemini）の役割
アーキテクチャの設計から具体的なコード生成まで、まずはAIに「丸投げ」に近い形で提案を求めます。出てきたコードを人間が理解し、微調整しながら進めることで、圧倒的なスピード感を持って開発を進めます。
MVP（実用最小限の製品）戦略
最初から全ての機能を盛り込むのではなく、まずは「タイマーで時間を計り、ログとして表示する」という最小限の機能（MVP）の実装を最優先にします。
4. 実践：開発環境を構築する
AIが出力してくれたロードマップに従い、まずは土台となる開発環境を構築しました。
① 必要なツールの準備
- Node.js: JavaScriptをサーバーサイドやローカル環境で動かすための実行環境。
- npx: パッケージをインストールせずに実行できる便利なコマンド。
② プロジェクトの作成
ターミナル（PowerShell等）で以下のコマンドを実行し、プロジェクト「StudyLogApp」を立ち上げます。
npx create-expo-app@latest StudyLogApp
③ アプリの起動
プロジェクトディレクトリに移動して、開発サーバーを起動します。
cd StudyLogApp
npx expo start
④ 実機での動作確認
起動後に表示されるQRコードを、スマホの「Expo Go」アプリで読み込むだけで、開発中の画面を自分のスマホにミラーリングできます！これには感動しました。PCブラウザで確認したい場合は、ターミナルで w キーを押せばWeb版のプレビューも可能です。
5. まとめと次回の予定
無事にデフォルトのアプリ画面が表示され、React Nativeの開発環境が整いました。
次回からは、いよいよ実際にコードを書き進めていきます。まずはMVPとして、「学習時間の計測・記録機能」の実装を目指します。
AIと一緒にどこまでスムーズにアプリが作れるのか、ぜひご期待ください！