はじめまして。SI業界2年目のminatoです。
人生初のハッカソンに参加したので体験ルポを書きました。ハッカソンの存在自体は以前から知っていましたが、調べてみると毎日何かしらのハッカソンが開催されていることに驚きました。
今回参加させていただいたのはCursor Webアプリハッカソン by Sunrise AIというイベントです。Cursorとは生成AIが搭載されたIDEです。VSCodeがベースになっており、拡張機能も共有できるようです。
まずは潜入
イベントHPから申し込みを行いDiscordサーバに参加します。私が応募した時は150名ほどの参加者でしたが、初心者からすると多いのか少ないのかよく分かりません。しかしながらDiscordサーバはお祭りムードの様相で、期待感が高まります。
全6回のセミナーがあり、Cursorの他にも、Next.js、Vercel、v0、Difyなどの入門解説があり、一通り受講すればWEBアプリが開発できる、といった内容でした。生成AI技術ということもあり、非エンジニアの参加者も少なくないようです。
キックオフ・ウェビナーはAIエディタCursor完全ガイドの著者きのぴーさんによるCursor入門解説。「Cursorって何？」状態で話を聞いていた私ですが、きのぴーさんの解説が大変分かり易く、実際に手を動かしながら参加したのでスムーズに入門できました。
Cursorを体験
正直めちゃくちゃ便利でした。今までもChatGPTは使っていましたが、スピード感が全然違います。ChatGPTでエラーを修正したい場合、コードを抜き取って渡したり、補足情報を与えるステップが必要ですが、Cursorの場合は前後の文脈を既に知っているので、ブロックを選択→Ctrl+K→『fix』 と打つだけで簡単なものは直してくれます。
複雑な内容の場合は細かい内容を指示しても精度があまりよくないですが、雑に『fix』と打って直してくれたり、Tsdocやコメントを書いてくれたり、Markdownに整えてくれたりするのが個人的には便利でした。実際にデバッグしながらおかしなところや足りない部分をCursorに全振りで、サクサク開発が進みます。
無料と有料のプランがありますが、登録して最初の2週間はProモードが無料体験できます。無料版でもOpenAIやAzureなどのAPIキーを設定すればPro版相当の機能が使えます。
私の場合はGPT 4oを主に使っていたのですが、2週間での使用料が3\$程度でした。CursorのPro版が月20\$するので、体験版が終わった後はAPIで使用感を試してみるのがいいと思います。OpenAIのAPIは5\$からチャージして使えます。AzureやGCPは使用料に応じて後から請求されるのと、プラットフォーム自体の操作感が難しいので注意が必要です。
v0を体験
v0はVercel社の生成AIサービスで、WEBアプリのアイデアを伝えると、ReactベースのUIを作成してくれるツールです。shadcn/uiとTailwind CSSを使用してUIを作成してくれるのでモダンなデザインに仕上がります。ChatGPTに書かせた要件定義書をv0に渡すだけで、1分程度で簡単なモック版ができました。気になる部分があればチャットで指示を追加してイメージに近づけていきます。
Cursorもv0もそうですが、コンテキストの長い出力では精度が不安定になるので、コンポーネント単位に分解して作っていく形になるかと思います。なので、ある程度は使用言語やフレームワークを理解しているのが前提になってくるかと思います。最終的にAIが分からない部分は自分で直すしかないです。
今回作るもの
最近、英語の小説を読みながら単語の勉強をしているのですが、使い勝手のいいアプリがないので自分で作ることにしました。
最低限必要な機能は日本語-英語の翻訳と、後で復習するために検索結果を保存する機能です。他に必要なものがあれば後から追加することにします。早速、v0に丸投げしてみます。
ポン出しでも結構いい感じです。細かく調整を重ねて、ある程度形になったらCursorに持ってきて内部のロジックを作り込みます。追加で必要な部品があれば、別途コンポーネント単位で作ってもらいます。
今回はせっかくなので、できるだけ使ったことのない技術を使いたいと思います。
以下の構成で望みました。
- パッケージ管理 : pnpm
- フロントエンド : Next.js
- スタイリング : Tailwind CSS
- データベース : IndexedDB
- デプロイ環境 : Vercel
- API環境 : Google Apps Script
- ライブラリ : shadcn/ui, Lucide, Dexie.js, Framer Motion
ブラウザのみで完結することが分かったので、バックエンドや個人認証は省略しました。Next.jsは、CSR、SSRなど、4種類のレンダリング方式を自由に組み合わせることができるため、急な仕様変更でも柔軟に対応できます。バックエンドを削ったことで制作期間にも余裕ができました。
データベースにはIndexedDBを使用しました。IndexedDBはブラウザにオブジェクト構造のデータを保存できる仕組みです。ラッパーライブラリのDexie.jsを使って、簡単に実装できました。
翻訳処理はGASにスクリプトを置いて直接叩いていますが、VercelにはServerless Functionsという機能があるようです。時間がある時に修正しようと思います。
できたもの
制作物はこちらです。制作期間は2週間です。翻訳、登録、DB検索など一通りの要件はクリアできました。物足りなかったので、アニメーションもつけてみました。
感想
初めてハッカソンにトライしてみましたが、なんとか完走することができました。生成AI技術は上手く使えれば生産性が格段に上がるので、これからの開発はAIありきになって行くのかなと思います。何はともあれ新しい技術に出会ったら一回触ってみるのが大事ですね。
作品の審査がこれからなので、他の参加者の方がどんなものを作ってきたのか楽しみです。これからも面白そうなハッカソンがあればまた参加してみようと思います。以上、ハッカソン潜入ルポでした。
参考記事