プログラミング言語を全く読めない学生がAI駆動を用いてアプリ開発ハッカソンに参加した結果

Posted at 2025-08-24

こんにちは！名桜大学の健康学科の学生です。
先日開催されたfan-milyハッカソンに参加し、AIの力を借りながらWebアプリ開発に挑戦しました。
この記事では、プログラミング初心者の私が、アイデア出しからアプリ完成までをどう乗り越えたのか、特にAIをどのように活用したかについて共有します。

この記事を読んでほしい人

開発したプロダクト

1. アイデアの誕生：解決したかった課題 (Why)

今回のハッカソンでは、まず「課題」を見つけるところから始まりました。

私が解決したかった課題: ハッカソンでのテーマ選択に時間が掛かる問題
なぜそれを解決したかったのか: 私自身が今回のハッカソンでテーマ選択に時間が掛かったため
AIとのアイデア出し:
- Geminiにこんなプロンプト（指示）を投げかけました
  課題　アイディアソンで課題が出ない
  目的　アイディアソンで課題が思いつくように
  ５ｗ１hでフローチャートで書く
  いつ　アイディアソンをやる時
  どこで　ハッカソン
  誰　自分
  何を　アイディアを思いつくように５ｗ１hの型を作る
  なぜ　アイディアソンで課題がでない
  どのように　５W１hを使ってアイディアを最終的に出す。
  このアイデアをAIで解決するためのアプリを作りたいです。(原文）

簡単な要件定義を作成して

アイデアが決まったら、次は「何を作るか」を具体的にする要件定義です。ここでもAIに大いに助けてもらいました。

いよいよ開発です。今回はVS Code + GitHub Copilotという、AIがコーディングを助けてくれる環境で開発しました。

開発環境
- 使用言語: HTML, CSS, JavaScript
- AIツール: GitHub Copilot, Vercel AI
- その他: Visual Studio Code

開発中、APIキーが適応されない問題に悩まされました。

エラー内容: クリックしても反応しない
試したこと:
1. まずGitHub Copilotにエラー箇所を見せて、コメントで「このエラーを直して」とお願いした。
2. メンターさんに相談した。
解決策:
- 原因はJavaScriptのエラーでした。

GitHub Copilotは、まさに「隣にいる凄腕プログラマー」でした。

こちらが、2日間で開発した「Theme Flow Architect」です！

あっという間の2日間でしたが、得られたものは非常に大きかったです。

技術的な学び:
- Webアプリが動く仕組みを、身をもって体験できた。
- AIに指示をする時には何をして欲しいのか明確にする必要があることを理解した。
AI駆動開発の学び:
- AIは魔法の杖ではなく、自分の意図を正確に伝える「プロンプト」が重要だとわかった。
- 要件定義の質がアプリの完成度に大きく関わっている
- 初心者でもアプリを作成することができる
これから挑戦したいこと:
- 一人でアプリを作る

最後に、手厚くサポートしてくださったメンターの皆様、運営の皆様、そして一緒に頑張った参加者の皆さん、本当にありがとうございました！