プログラミングほぼ未経験から、AIを活用して「旅行のしおりWebアプリ」を開発してみた

開発のきっかけは、日々の業務でのAI活用

私はプログラミングについてはほぼ未経験です。しかし最近、仕事でAIを使って動画を作成したり、ホームページ制作でのコードやデザインについてAIに相談したりする機会が増えていました。そうした業務の中で、「もしかしたら、このままAIに相談しながら進めれば、自分一人で未経験でもWebアプリが作れるのではないか？」と思いついたのが、今回の開発のきっかけです。作ろうと考えたのは「旅行のしおりアプリ」でした。旅行の計画を立てる際、既存のサービスやスプレッドシートではどうしても見づらく、Googleマップと予定が綺麗に連動した自分好みのしおりが欲しいと以前から感じていたためです。

プロ顔負けのモダンな構成を採用する

実際の開発は、ひたすらAI（生成AI）との対話で進めていきました。使用したツールはCursorです。しかし、無料枠では当然収まらず、無料枠を超えてからは既に課金しているGeminiを使用しました。「こんなWEBアプリを作りたい」と伝えると、Next.js、Vercel、Supabaseといった専門用語が次々と提案されます。最初は戸惑いましたが、一つ一つ役割を聞いていくうちに、現代のWeb開発の全体像が少しずつ見えてきました。Vercelがサーバーとして動き、Supabaseがデータを守り、Next.jsがアプリの頭脳となる。プロのエンジニアが使うようなモダンなシステム構成を、未経験の自分がそのまま採用して構築できるのは、AIという優秀なナビゲーターがいるからこその恩恵でした。

AIが作ってくれたWEBアプリの関係図

「対話」と「コピペ」で進む開発と、直面した壁

作業としては、自分でコードを打ち込むのではなく、「AIにやりたいことを伝え、出力されたコードをコピーして貼り付ける」ことの繰り返しです。

実際にAIとやり取りしていた履歴

しかし、すべてがスムーズに進んだわけではありません。開発中にはいくつもの壁にもぶつかりました。例えば、作りたかった一番の目玉機能として、各工程の入力を終え、プレビュー画面を表示するとマップが表示され、各工程に入力したGoogleマップの短縮URLをもとにピンが打たれていて、かつ移動時間と移動経路がわかる機能です。下の画像が完成したスクショです。

Googleマップの短縮URLから座標を取得する処理では、最初はなぜか地図上のピンの位置が少しずれて保存されてしまうという問題が発生しました。AIと一緒に原因を探った結果、URLの文字列内に「画面の中央を示す座標」と「実際のピンの座標」の2種類が混在していることに気づきました。プログラムが読み取る優先順位を修正してもらうことで、正確な位置にピンを刺すことができるようになりました。

妥協しなかったUI/UXへのこだわり

「スマホで見たときに直感的に使いやすいか？」という点には少しこだわりました。複数日の旅行なら、自動で「1日目」「2日目」のタブを生成して切り替えられるようにする。全日程（すべて）のタブを見る時は、地図がごちゃごちゃしないようルート線を隠し、俯瞰して見られるようにする。削除ボタンは誤タップを防ぐため、オリジナルの確認ポップアップを実装する。「ここをもう少しこうしたい」と要望を投げると、AIが即座にコードを修正してくれます。それはまるで、優秀なエンジニアとペアプログラミングをしているような感覚でした。

AIとのやり取り

学んだこと：「コードを書く力」より「要件を定義する力」

この開発を通して痛感したのは、AI時代において本当に必要なのは、プログラミング言語の文法を暗記するスキルではないということです。それよりも、「自分が何をどう作りたいのか」を明確に言語化する「要件定義」の力なのだと気づきました。「出発と到着の時間を分けたい」「スマホではこのボタンを常に表示したい」という明確な意志さえあれば、AIはそれを忠実にコードへと翻訳してくれます。自分自身の思考の解像度が、そのままアプリのクオリティに直結するのだと実感しました。

新規作成画面

今後の展開

現在、アプリは無事にVercel上で稼働し、スマホからいつでもURLを知っている人はアクセスできる状態になっています。誰かに公開できるようなクオリティではないですし、自分好みのWEBアプリが欲しかったのと、WEBアプリを作ってみたいと思って作ったものなので、今後も自分だけのWEBアプリとして活用していこうと思っています。