本日公開したAI開発Vallet journalアプリの開発記録をまとめます。
プログラミングはHello Worldから勉強中のずぶの素人ですが今日着手したVallet Journalアプリを生成AIを用いてデプロイ（公開）するまでこぎつけました。
使用環境はGit hub codespace、Gemini、React、Vite、Spabase、Tailwind CSSなど。以下にどのような技術なのかを簡単にまとめます。
プログラミング初心者がAIでアプリ制作しデプロイするまで
1. GitHub Codespaces（ギットハブ・コードスペース）
- 一言でいうと：ブラウザの中で動く「自分専用の開発用パソコン」。
- 今回の役割：自分のパソコンに特別な設定をすることなく、どこからでもすぐにプログラミングができる環境として使用しました。
Githubは開発したプログラムを公開したり共有したりできるプラットフォームで、少しずつプログラムを改変する場合にもバージョンごとに保存できるため保守しやすい利点があると理解しています。今回はGithub Codespacesという開発環境の中に生成AI(Gemini)を呼び出して対話形式で開発しました。私が直接プログラムを書いたわけではありませんが、そんなふうに使ってもちゃんとアプリができることがわかりました。
Github本体についても触れておくと、初めてGit hubを使ったのは半年ほど前で、SAMURAI TERAKOYAというオンラインコースで課題提出のために使いました。余談ですが私の本業の職場にはエンジニアがたくさんいるのですがベテランのソフトウェア開発者などは意外とその存在を知らないということもあるようです。チームで開発する場合にはかなりのスタンダードなのではないでしょうか。
2. Gemini（ジェミニ）
- 一言でいうと：生成AI開発競争の主役の1人であるGoogleによる生成AI
- 今回の役割：開発に当たっては2人のGeminiにお世話になりました。1人はGihHub Codespaces内で開発を代行してくれる先生。もう1人はブラウザでエラーの解決策を教えてくれ、頼れるメンター。
Github CodespacesのGeminiはGemini2.5でした。そしてブラウザのメンターGeminiはProプランにアップデートしたのでGemini3.0でした。贅沢なことです。本当にどちらも素晴らしい働きでした。開発初期はエラーにより画面すら表示されず絶望的でした。Gemini2.5が1つずつ解決していってくれましたが、私は実はこの時にProプランにアップデートすればCodespacesでの解決も高速化すると考えておりました。しかしCodespacesにバージョンアップが即時適用されるわけではなかったので、CodespacesのGemini2.5に「Gemini3.0にアップデートしたけれどあなたでは開発できないでしょうか」などと弱音を吐いたところ「そんなことはありません。Gemini2.5の私でも総力を結集すればできます」と宣言して、その後すごく修正スピードアップしたような気がします。
3. React（リアクト）
- 一言でいうと：今のWeb開発で最も人気がある「画面を作るための部品セット」。
- 今回の役割：タスクの追加ボタンやチェックボックスなど、動きのある使い勝手の良い画面を作るために採用しました。
4. Vite（ヴィート）
- 一言でいうと：爆速で開発を始めるための「次世代ツール」。
- 今回の役割：Reactのプロジェクトを瞬時に立ち上げ、書いたコードをすぐさまブラウザに反映させて確認するために活躍しました。
5. Supabase（スーパベース）
- 一言でいうと：面倒なサーバー設定なしで使える「オンライン・データベース」。
- 今回の役割：入力したタスクをインターネット上に保存し、ブラウザを閉じてもデータが消えないようにする「記憶装置」の役割を担いました。
SupabaseはプロジェクトごとにURLとAPIキーを提供してくれてそれをCodespacesに貼り付ける必要があるのですが、どうもここでコピペがうまくいかずハマってしまいました。何度も間違えているうちにGemini2.5に直接APIを伝える形式に変わっていきました。私のために育っていくGeminiに感謝。
6. Tailwind CSS（テイルウィンド CSS）
- 一言でいうと：決められた「ラベル」を貼るだけで、簡単におしゃれなデザインが作れる魔法の仕組み。
- 今回の役割：ボタンの色や余白、文字の大きさなどを整え、アプリを「素人っぽくない」洗練された見た目にするために使用しました。
7. Versel（ヴァーセル）
- 一言でいうと：作ったアプリを世界中に公開するための「爆速公開ステージ」。
- 今回の役割：まだユーザログインの機能を追加していない段階ではあるもののデモとして公開するリスクは低かったのでひとまず公開。
どんなエラーがあったのか
開発初期の絶望的エラーで画面も表示できない
最初に起こった絶望的なエラーとは、以下のようなものでした。
Reactで作った「画面（フロントエンド）」と、データを管理する「サーバーやDB（バックエンド）」は、本来は別の場所で動いています。Codespacesのようなクラウド環境では、この二つを繋ぐための「住所（URLやポート番号）」が複雑になりがちです。
セキュリティの壁（CORS）: ブラウザの安全機能が働いて、「知らない場所からのデータは受け取れません！」と通信を拒否してしまった状態。
住所のズレ: 画面側が「3000番の住所にあるデータを持ってきて！」と言っているのに、データ側は「5173番で待ってるよ！」と、お互い違う場所を見ていた状態。
ということがあったそうです。
デプロイ時のルートディレクトリの不一致エラー
デプロイ時に発生した「404エラー」は、「ルートディレクトリ（Root Directory）の不一致」という問題によるものでした。
Vercelはデフォルトでは「一番外側のフォルダ」にアプリの本番ファイルがあると思い込んで探しますが、そこにはありませんでした。
解決方法としてはVercelの設定画面で、アプリの拠点（Root）が frontend フォルダであることを明示的に教えてあげました。
GithubのREADMEを更新できない
デプロイ終了後ですが、Codespaces初心者としては記録しておきます。
GithubのREADMEというページにアプリの動きをGIFで表示するということを試みたのですが（本日時点でAPPページに公開している動画）、これをアップロードする際に最初間違えてブラウザのCodespacesから更新しようとしてしまい、その後アプリのCodespacesから更新してしまい、不整合が起きてコミットできない状況がありました。
これもブラウザでGemini3.0にサポートしてもらい、解決しました。
今後やること
このように数々のエラーをGeminiと共に乗り越えてVallet Journalアプリを開発することができました。
次の目標は1週間もしくは1ヶ月ごとのまとめページの表示、それからログイン機能の追加です。
初めてのデプロイは本当に感動的でした。これだけエラーが起きてGeminiに聞かないとわからないのはたしかに辛かったですが、これにより学んだことは身をもって理解できました。自分の手で開発する学びはこれからですが、創る喜びを実感して学びのモチベーションが上がりました。
ぜひ多くの人に使ってもらえるアプリを完成させたいと思います。