社内のハッカソンで、生成AIを使いながらWebアプリを1つ作りました。目安で合計8時間ぶんです。
一人で作ったので、設計も実装も記録も、AIと分担しながら進めました。
この記事は2部構成です。第1部で何を作ったかを短く、
第2部で、AIとどう作ったかを書きます。
第1部 作ったもの
何を作ったか
どんなイベントで作ったか
| 形式 | 社内のAI駆動開発ハッカソン |
| チーム | 一人 |
| 時間 | 目安 合計8時間 |
| お題 | 普段接点のないチームどうしが、自然に会話するきっかけになるもの（当日発表） |
お題が当日まで分からないので、何を作るかは当日決めます。
逆に言うと、お題に依存しない部分は前日までに決めておける。
画面の形（スマホ優先の1カラム）、使う技術、デプロイの経路は先に固めておきました。
「ゆるまど」がやること
普段接点のないチームどうしは、話しかけるきっかけがありません。
用があれば連絡しますが、用がないと、そもそも顔が見えません。
そこで、用がなくても書ける場所を作りました。社内SNSの、いちばん小さい形です。
ひとこと書くと新しい順に流れる、それだけの1画面です。
用件ではないので、読むほうも気軽に反応できます。
画面でできることは7つです。
| できること | 中身 |
|---|---|
| はじめる | 最初に1回だけ。IDとニックネーム、チーム、得意なこと、ひとことを登録する |
| ひとこと投稿する | 中心の操作はこれ1つ。 名前とチームは登録したものが自動で付く |
| 今日のお題 | 全員に同じお題が1日1つ出る。何を書けばいいか迷わないため（生成AI。落ちたときは人が確認した例） |
| 文体を変えてみる | 書きかけを「ラジオDJ風」「時代劇風」「取説風」に。素のままだと書きにくいことを出しやすくするため（生成AI） |
| 私も気になる | 反応を1タップで。押すと「気になる済み」に変わる |
| 自分のチーム以外だけ表示 | チェックを入れると、自分のチームの投稿が消える |
| 自分の投稿を削除 | 自分のものだけ。 押し間違い防止に2段階 |
どう作ったか
技術構成
画面は Vite + React + TypeScript、インフラは CloudFormation、
デプロイは CI から OIDC で入ります（アクセスキーを置いていません）。
この構成で、書かずに済んだものが2つありました。
1つ目は CORS の設定です。
画面とAPIを同じドメインにまとめたので、ブラウザから見ると通信先が1つしかありません。
別ドメインを叩かないので、CORS の設定もデバッグも1行も要りませんでした。
2つ目は、常時課金されるリソースです。
使ったのはリクエストや保存量に応じて課金されるものだけで、
立てているだけでお金がかかるものを1つも使っていません。
一人で短期間の企画なので、消し忘れが事故にならない形を先に選びました。
先に「作らない」と決めたもの
いちばん効いたのは、作らないものを先に決めたことでした。
| 作らなかったもの | 理由 |
|---|---|
| ログイン（認証） | 一人で短期間なら最大の地雷。端末に持たせた合言葉で「所有権」だけを表す形にした |
| 投稿の編集 | 中心の操作を増やさない |
| 通知・未読 | 常時動かすものが要る＝課金が続く |
| 画像の投稿 | 設計が1段増える |
| ページング・無限スクロール | 十数人の規模。全件出して足りる |
| 自動更新 | 手で押す更新ボタンで足りる |
認証を作らなかったのが、あとで効きます。
「誰か」を判定できないので、他人のデータを触れないようにする方法を別に用意する必要がありました。
端末に乱数の合言葉を1つ持たせ、サーバーはその指紋だけを持ちます。
一致したときだけ、自分の投稿を消せます。本人確認ではなく、所有権の確認です。
生成AIをどこに使ったか
使いどころは2つだけです。どちらも目的は同じで、書き出しのハードルを下げることです。
「用がなくても書ける場所」を作っても、何を書けばいいか分からないと、人は書きません。
そこを埋めるのが「今日のお題」です。
もう1つの「文体を変えてみる」は、素のままだと言いにくいことを、言い換えで出しやすくするためのものです。
| 機能 | モデルに送るもの |
|---|---|
| 今日のお題 | 何も送らない（固定のテンプレートだけ） |
| 文体を変えてみる | 本人が書いた、本人の文だけ |
どちらも、社内の情報をモデルに送っていません。 これが選定のいちばんの理由でした。
「話が合いそうな人を提案する」のような案も考えましたが、
投稿とプロフィールをまとめて送ることになるので、採りませんでした。
文体変換は、選べる文体を3つに固定しています。
利用者が渡せるのは「どれを選ぶか」と「自分の書きかけ」だけで、
自由な指示文は受け取りません。 ログインの無い場所に、
「AIに何でも言わせられる口」を作らないためです。
そして、変換しても本文を上書きしません。
変換前と変換後を並べて、どちらを使うかは本人が選びます。
AIが書いたものが、そのまま全員の見る場所に出ることはありません。
お題は「出ないこと」を前提に組んである
今日のお題は、その日いちばん最初に開いた人が生成して保存し、以降は全員それを読みます。
日付をキーにして、先着の1人だけが書き込める形にしてあります。
おかげで**「1日に何回呼んだか」を数えるコードが要りません。**
生成した文はそのまま採用せず、機械で判定できることだけを機械で判定します。
前置きが付いていないか、長すぎないか、疑問文になっているか、といったことです。
通らなければ、人が事前に確認した例に差し替えます。
どちらで出たかを、必ず記録に残しています。
ここを黙って差し替えると、呼び出しが失敗していても、
毎日「ちゃんとしたお題」が出続けて、画面上は正常に見えます。
それは画面の正常であって、状態の正常ではありません。
どちらで出たかが分からない作り方をしない。 第2部の「気をつけたこと」も、同じ考え方です。
第2部 AIとどう作ったか
ここからは、作業をAIとどう分担したかです。
ここでは、その進め方を「よかったこと／気をつけたこと／もっとうまくやれたこと」に分けて並べます。
役割を分けて、3つ並行で動かした
人は自分1人。AI側を、役割ごとに3つに分けました。
環境まわりを見る役、コードを書く役、記録を書く役です。
同じ作業ツリーを共有するので、決めたのは1つだけです。
書くファイルは役ごとに分ける。読むのは全員どこでも自由。
書き込みがぶつからなければ、並行できます。
読みまで制限すると、同じことを何度も聞き直す往復が増えます。
やり取りは会話ではなく、ファイルに書いて渡しました。
会話は長くなると前のほうが失われますが、ファイルなら残ります。
受け渡しは一方通行ではなく、輪になりました。
指示を書いた役が、戻ってきた結果を見ます。実装した本人ではない役が見るので、
一人チームでも、第三者の目が入った状態で進みます。
やってよかったこと
| やったこと | なぜ／どうなったか | |
|---|---|---|
| 1 | 役ごとに、書いてよいファイルを分けた | 3つ同時に動かしても、書き込みがぶつからなかった |
| 2 | 決めたことと、却下した案を、理由つきで残した | あとで前提が変わったとき、どれを見直せばいいかが分かる |
| 3 | やり取りをファイルに残した | 会話が長くなっても、続きから再開できた |
| 4 | 提案はAIに出させ、採否は自分で決めた | 選択肢は広がるが、決めるのは人という線を引けた |
| 5 | アプリに組み込むプロンプトを、自分で一から考えなかった | AIに書かせて、採否と調整だけ自分がやった。 考える手間がまるごと減った |
2について、却下は「できない」ではなく「やらない。こちらを選ぶから」で書きました。
「できない」と書くと、前提が変わったときに判断ごと崩れます。
実際、いちど「作らない」と決めた機能を、あとから作り直しています。
4は、実測でいちばん良かったものを選ばなかった場面もあります。
品質だけでは決めない理由があったときに、理由のほうを記録に残しました。
気をつけたこと
| やったこと | なぜ／どうなったか | |
|---|---|---|
| 6 | 「やりました」を、実行できた証明として扱わない | 一覧や検索で裏を取る。報告と実態がずれていたことが2回あった |
| 7 | 指示に「やらないこと」を毎回書いた | 勝手に公開しない、このファイルは触らない、など |
| 8 | 社外に出せないものの一覧を先に作り、毎回機械で検査した | 目視だと、書いた本人がいちばん見落とす |
6は、AIが嘘をついたわけではありません。 報告を、状態の確認の代わりに使っていただけです。
8の一覧は、この記事を書く前に作りました。
社内の識別子や社内のネットワークの情報など、出せないものを先に決めておくと、
書いたあとに毎回同じ検査をかけられます。
もっとうまくやれたこと
| 起きたこと | 次はこうする | |
|---|---|---|
| 9 | 並行させたのに、両方に関わる情報を片方にしか伝えなかった | もう片方が前提を知らないまま動いた。横断する話は、関係する全員に同時に渡す |
| 10 | 節ごとに書いて、節ごとに確認した | 通しで読んだら節の境目の壊れが11件出た。書き終えたら通しで読む |
| 11 | 先に決めた骨子を、実物が変わったあとも直さなかった | 記事に事実と違う記述が残った。書く前に実物を見る |
| 12 | 最初にゴールを決めずに書き始めた | 記事を3回書き直した。誰に何を伝えるかを先に決める |
10がいちばん効きました。節の中では正しいのに、並べると矛盾しているという壊れ方です。
節ごとに読み返しても出ません。通しで読むまで、誰も見ていない状態でした。
12は、いま読んでいるこの第2部が3回目の書き直しです。
最初は技術的な失敗を並べていましたが、「細かすぎて何が言いたいか分からない」となり、
全部捨てて、いまの形にしました。
まとめ
AIに任せて速くなったのは、手を動かす部分だけでした。
決めること、確かめること、伝えることは、むしろ増えています。
3つ並行させたのも、速くするためではなく、記録を後回しにしないためでした。
一人だと、記録はいちばん最初に落ちます。
任せたのは、手を動かす部分。
任せなかったのは、決めることと、確かめることでした。