初めてのNext.jsと、AI使用のアプリ開発ハッカソン

イベント概要

Progate ハッカソン~オンライン~ 2025.4

キックオフ：2025年4月15日(火) 19:00 - 19:30
ハッカソン本番：2025年4月26日(土) 11:00～2025年4月27日(日) 18:00
発表方法: 動作デモ、topas

作成したアプリ↓
deploy: https://cooking-assistant-deploy.vercel.app/
topas: https://topaz.dev/projects/0e4b5dea401914a3868f
github: https://github.com/yusa-bot/cooking-assistant

結果

9チーム中 2位

感想

webアプリを最後まで開発できる力が欲しく、個人開発未経験ながら野良で参加しました。
他チームは4人等が多い中、欠席などで2人チームになり、
初めましての方と2週間弱でアプリ開発を行いました。

キックオフ当日にアプリ内容を聞いたときは不安で未知でしたが、今はAPIでなんでもできるんだという認識です。
APIの扱い方が肝。

私自身初めての開発でアプリの機能レベルの相場がわからない中、自分でもすごいアプリだと感じていましたが、結果9チーム中2位をいただけて驚きました。

1位ではなかったことの反省点は、プレゼン時に技術紹介を省略してしまったことで、
今後は時間の許す限り、存分にアピールするべきだと気づきました。
私は自分自身の紹介やアピールが苦手なため、その点も改善します。

他チームは4人等が多い中、欠席などで2人チームになり、
初めましての方と2週間弱のアプリ開発を行いました。
オフラインでの開発だったため、discordでやりとりをし、資料共有、通話や画面共有でコミュニケーションを行いました。
今の時代は、メンバーが共有してくれた資料の不明点をLLMで解決できるので、円滑なコミュニケーションにとても助かり、初心者が参入するハードルを一気に下げてくれていると感じました。
音声でのやりとりでは、耳に入る知らない情報全てをメモし、後で自分で調べるというキャッチアップ方法を行なっていました。ハッカソンといえども2週間程期間があったため、自分で学習する時間も自由に取ることができました。
反省: レコードや画面録画を瞬時にできるようにしておく。

異なる視点での感想ですが、
学ぶ人への窓口が広く、挑戦する人へのコミュニティは優しいということも感じました。
在学している42 toykoでも強く感じます。
また、今までを振り返ったときもそうですが、今回のアプリ開発で改めて
目の前のことを必死に吸収していれば、気づけばできるようになっている
ことを感じました。

学んだこと

いろんなツールがあること、開発に必要な知識、ファイルを体系的に理解できた。
チームメンバーに開発用のER図、フローチャート、ディレクトリ構造、API仕様書(fetch例も)を用意していただき、
v0やfigma, github, vercelの使い方
他にもたくさんのことを教えていただきました。
本当に感謝しています。

とにかく使ってみないと知り得ない高速開発手法や、人間の手間をかけずに進められる手法があることを学んだ。
どのツールがどう役立つかわからないので、耳に入ってきたものはまず調べ必要時に頭に浮かんでくる状態にしたい。
ツールを使いこなす力、キャッチアップ能力が大事だと感じた。
ツールを使いこなせる人ほど前提の知識があると感じた。

次回改善点

• 最初ににtypes/を作成
  importしてエラー判定で気づける。
  最初にフロントバック間でinterfaceを共有していなかったため、エラー解消に時間をかけてしまった。

• ハッカソンだから
  こだわりすぎず柔軟に進めていくことが大事。
  v0が出した案に足していくだけではなく、-もする。
  非機能にこだわるのではなく、重要な機能から作っていく

• Nextのstate
  グローバル変数みたい。
  もっと扱いに慣れたい。

工夫

• ファイル内の文字数が多すぎ
  component内のtailwind cssを消して構造理解
  v0を改修していく開発方式だったため、ブラウザの画面とcomponentを何度も往復し、動作しながら構造理解

• エラー解消方法
  console.logで検証機能でのデバック
  型・変数名変更後の変更し忘れによるエラーが多い
  github copilotの活用