Vibe Cordingハッカソンの体験記

先日、初ハッカソンを体験してきたので、その時のメモをまとめてみようと思います。

ハッカソンに参加するきっかけ

ハッカソン¹には今まで一度も参加したことがなくて、いつかは参加したいと思っていた。

そんなタイミングでちょうど Connpass にハッカソンの募集がされていたので申し込んでみたというのが参加のきっかけである。

参加したハッカソンは ゆるVibeCodingハッカソン というタイトル通り、初めて参加するハッカソンとしては敷居が低そうだと感じたのも申し込むきっかけになった。

ところが、申し込み時点では既に定員50人に対して60番目の補欠という有様。 もう少し早く動くべきだったと反省していたら、開催当日にキャンセルが続出して繰り上がり当選となった。 こういうオフラインイベントでは当日の欠席者が一定数出るのが常らしい。 とりあえず申し込んでみることが大事かもしれない。

会場のFindyへ

主催者は Findy というIT / Webエンジニア向け転職サービスを運営する会社である。 大崎のオフィス街にある。

事前にオフィスへの行き方が共有されていたものの、迷子になってもおかしくない立地だった。 実際、この分かりにくさをネタにしてハッカソンのプロダクトを作った参加者もいたのは面白かった。

ハッカソンのルール

オープニングではドラゴンボールのブルマを起用した CM の紹介があったりした（ブルマを選ぶところにセンスを感じる）。 オフィスは相当に綺麗で、CMの放映まで始めるとは、Findyの勢いを感じずにはいられない。

で、早速ハッカソンが始まった訳だが、ルールはシンプル。

• Vibe Cording² で1人1つのプロダクトを完成させる
• 制限時間は約3時間

ハッカソンといえばチームで開発するものだと勝手に思い込んでいたので面食らった。 確かに、Vibe Cordingでチーム開発となると最終的な統合作業を考えると現実的ではないのかもしれない。

それでも、周囲との会話は自由なのでAIエージェントのことについて話したり、聞こえてくる議論は興味深いものがあった。

作ったもの

Claude CodeのカスタムスラッシュコマンドをmacOSメニューバーから実行できる Electron 製デスクトップアプリを制作した。 Electronは初体験である。

制作の動機は単純で、Claude Codeをコーディング以外のちょっとしたタスク実行にも使いたいが、その度にターミナルに移動するのが煩わしいからである。 どこからでも実行可能なアプリがあれば便利だろうと考えた。

対象は~/.claude/commands/*に置かれた個人コマンドのみ。 カスタムスラッシュコマンド一覧を取得する公式な方法がないため、ファイルから動的に読み込んでいる。

使用例として、日々の日報作成がある。 以下の記事を参考にClaude Codeに日報を作らせている。

Claude CodeのSlash Commandsで日報を作成する - じゃあ、おうちで学べる 〜日報をサボってしまう人のための解決策〜 日報、めんどくさいよね 正直に言います。日報書くの、めんどくさいですよね。 僕も毎日終業時に「あれ、今日何やったっけ...」ってなって、GitHubでクローズしたIssue探したり、Slackでミーティングの議事録掘り返したり、Jiraのチケット確認したり...。正確に書こうとすると、気づいたら15分とか経ってるんですよね。 しかも、やっと書き終わったと思ったら「あ、そういえば午前中にあのバグ直したの書き忘れた」「レビューで指摘もらった内容も書かなきゃ」みたいなことがしょっちゅう。 正直、この作業が苦痛すぎて、サボっちゃう日もありました。「明日まとめて…

syu-m-5151.hatenablog.com

/nippo-addコマンド実行のためにターミナルに移動する時間を短縮できる。

日報以外にもClaude Code経由で何らかの加工をしてメモを保存したい場合に活用できそうである。 制作したプロダクトのコードは以下のリポジトリにある。

GitHub - kkhys/claude-palette Contribute to kkhys/claude-palette development by creating an account on GitHub.

github.com

Claude Codeはコーディングだけでなく、日常業務やプライベートにも活用できるというところまで伝えたかったが時間が足りなかった。 MCPと組み合わせればエンジニア以外にも活用の幅が広がるのは間違いないので、そのハードルを下げるプロダクトは今後登場するだろう。

開発途中でClaude Proの使用上限に達してしまい焦った。 代わりに Junie を使って開発を再開した。

このプロダクト自体がClaude Codeを使用するため、最後にデモを見せられなかったのは残念だった。

他の人の作品

開発締切後、1人5分程度の発表時間が設けられた。 特に印象的だった作品を記録しておく。

• QRコード読み取り + スマホを振る動作で、会場のスクリーンにリアルタイムで花火を打ち上げる参加型エンターテインメントアプリ（SupabaseのRealtime APIを使っていた）
• 物件写真をAIでリノベーションし、reveal sliderで改装前後を比較できる不動産サイト向けアプリ
• CLI上でバーチャル猫を育成・世話できる、ペット飼育シミュレーションアプリ
• 待ち時間・混雑状況をAI分析し、ディズニーランドの最適回遊ルートを視覚的マップで提案するアプリ

上記以外も実際にリリースすればバズりそうなアイデアばかりで面白かった。 それをクオリティ高く仕上げているのを見て、感心するばかりである。

技術的に気になったこと

発表では制作プロセスや技術選定の方法について解説する参加者も多く、非常に参考になった。 気になった点や試してみたい技術は以下の通りである。

• Claude Codeを活用している人が体感8割程度
• GitHub Copilot Coding AgentでIssueを複数立てて並列開発を進める手法
• Gemini Nanoを使ったAI検索機能
• Bolt でUIを作成し、それを元にコーディングする方法
• Claude Codeで--resumeを使って特定のセッションを再開する（会話を分岐させる）技術
• t-wada駆動開発（人名で開発方法を指定。例：Eric EvansのDDD）
• Gemini Cliの/corgiコマンド（イースターエッグ）
• AIエージェントにスライドを作らせる手法（Marp や Slidev などを使用）。シンプルにHTMLでスライドを作るのも良さそう（JSでアニメーション制作可能）

個人的な反省点

• Claude Proでは全く足りない（使い方に改善の余地あり）。月額 $100は高いが、Maxプランへの加入を検討すべきか（ハッカソンにはMaxプランでも上限に達している人もいたが）
• Vibe Cordingでは待ち時間を作らないことが重要だと実感。そのために要件定義をしっかり詰める必要がある
• 要件を複数に分解し、並列処理で実行させる方法の習得は必須
• ハッカソンでは「映える」プロダクトの受けが良い。今回制作したプロダクトは地味すぎた
• 自己紹介スライドはどこでも使えるので用意しておくべき

さいごに

発表と表彰式終了後はピザとお酒での懇親会があった。 ただし、時間が押していて30分程度しかなかったのは残念である。

Findyはクラフトビールも製造しており（ファインディオリジナルIPA）、早い者勝ちで飲むことができたが、争奪戦に敗れてしまった。 今度こそは開発生産性IPAを飲みたいので、Findyのイベントがあれば、また参加しようと思う。