こんにちは！
AIに存在意義を奪われそうになって毎日脳を焼かれている、TS系バーチャル美少女エンジニア（中身はおじさん）の月見ルナです！
今日の作業のお供は、ドラッグストアの安売りでまとめ買いしてきたスポーツドリンクと、個包装の塩分チャージタブレットです。……いやね、作業のお供にポッキーやらポテチをキメたいのは山々なんですけど、ちょっと聞いてくれます？
実はここ数日、家族内でインフルエンザの集団感染が発生しまして。
家庭内パンデミックの波に飲まれ、ボクが見事にトリを飾る最後の発症者になりました。幸いなことに熱もそこまで上がらず軽症で済んだんですけど、念のために近所の病院へ診察を受けに行ってきたんですよね。
そこでの、お医者さんとのやり取りがこちら。
先生: （喉を診察しながら）
先生: あー、こりゃインフルっぽいねぇ。
先生: 家族の集団感染の条件もバッチリ満たしてるし、検査しよっか
月見: やーやーなの。お鼻に長いの突っ込むのやーやーなの！（40代のおっさん）
先生: （なんやコイツ……キッツ……）
月見: あの……ほぼインフル確定なら、もうインフルってことで手打ちにしよ♪
先生: …………!! ええよ!!
月見: ええの!?!?いやー、鼻を綿棒でグリグリほじくられるの、地味に涙が出るほどキツいじゃないですか。ボク、お腹を刺されるのは耐えれますが、お鼻グリグリはちょっと耐えれません。 満場一致の集団感染条件さえ揃っていれば、大人の人間の尊厳と引き換えに回避できることがあるみたいです。みなさんはとちゃんと検査受けてください。
さて！
前回は、「〇〇したい」というフワッとした願望をゴミ箱に捨てて、画面を開いてから閉じるまでの「マウスと指の物理動作」だけで要求を定義しよう、というお話をしました。
「よし！要求定義も綺麗にまとまったぞ！」 「早速ターミナルを開いてプロジェクトフォルダを掘って、エージェントに作らせたろ!!Opus!!君にきめた」
記事を書いてる間にCodexからOpusに鞍替えしました…ほんとキライこいつ。ボクよりできるんだもん。
意気揚々としているあなた。
ちょっと待ってください。まだプロジェクト作らなくてすら作らなくていいんじゃないですかね。
エージェントに本格的なプロジェクトを組ませる前に、もっと速くて、もっと安全で、何より精神衛生上めちゃくちゃ気持ちいいステップがあるんですよ。
あ、ちなみに前もってお断りしておきますが、仕事やチーム開発には2ミリも役に立ちません！
仕事やチームの場合、組織ごとにカッチリ決まった進め方やルールがあるはずですし、お仕事で勝手に自分のやり方でいろいろすすめて「ん?ボク、なんかまたやっちゃいました?」なんてやったら、普通に怒られちゃいますからね。今回は特に「個人の開発を自分のペースでどう進めるか」というお話です。
では、「みんなもっとChat版AIつかおうよ。Canvas/Artifactsプレビューを馬鹿にするのやめてあげてよぉ」について、ボクなりのスタンスをお話ししてみようと思います!
ローカルディレクトリを汚すな
AIエージェントが進化して、本当に開発の立ち上げが楽になりましたよね。
古の時代なら環境構築だけで半日潰れていたような作業も、エージェントにお願いするだけで一瞬で揃っちゃいます。
- Dockerfileやcomposeファイルを用意する
- Gitを初期化する（
git init） - パッケージマネージャーを叩いてフレームワークを叩き込む（
npm create ...） - ディレクトリ構成（
src/components/,src/utils/）を綺麗に整える……
こんな感じの作業が mkdir my-project-app して、「やって♪」さえすれば、ぜーんぶ代わりにやってくれる。ほんとにめちゃくちゃ便利になりましたよね。
でもね、最近Xのタイムラインとかを見ていると、こういう声をものすごーく頻繁に見かける気がするんです。
「アイデア思いついたし、Opus5.5で作ってみた。だれか使いたい人いる?」
「Opus5.5、〇時間回して回してできた!!」
Opus、Opus、うるさいなぁ。 もうOpus5.5と結婚しろよ。 誰か使いたい人いる?じゃねーんだよ。
自分が使いたいかどうかも分からないものを、思いついた勢いだけで即エージェントに投げさせて、無駄な資源つかって、いざ動いたら「ユーザーどうしよう」って……それ完全に順番が逆になっちゃってませんかね！？
お前が使え。ゴミみたいなアイデア押し付けんな、ドパガキ。
日本のミームでは、こういう風に新しい技術やツールにテンションが上がりすぎて、冷静さを失って突っ走っちゃう人のことを「ドパガキ（ドーパミン出まくりのガキ）」なんて呼んだりしますね。
あまりにも「思いついたら即エージェント！！」で突っ走るドパガキさんが多すぎるから、ボクはこの回をどうしても書きたかったんよ。
プロジェクトを作るたびに、あなたのローカルストレージもGitHubのリポジトリ一覧も、凄まじい勢いで汚染されているというのに……！
ドパガキの人って、いつもそうですね……！
ローカルディレクトリのこと、何だと思ってるんですか！？
この初期段階で立派なディレクトリを掘るのは、ちょっと時間がもったいないんじゃないかなぁって思っちゃうんですよね。
なぜなら、まだあなたが作ろうとしているツールの「コアな手触り」や「操作のテンポ感」が本当に気持ちいいかどうか、他ならぬあなたが自身が1ミリも検証できていないからです。
そもそも、実際に数分ポチポチ触ってみたら、
……あれ？ ぶっちゃけこれ、いらなくね ??
って我に返る可能性だって大いにあるわけじゃないですか。
どうせ作ったあとのプロジェクトのディレクトリ整理なんて、誰も綺麗にやらないんでしょ!? ボクは知ってるんだ!!
最初の体験にエージェントなんていらない
人間は本当に愚かです。
ほんの少し前までは、ChatGPTやClaudeの画面でコードを出力させては「うわー！動いたー！」って手動コピペして喜んでいたはずです。
その前は、Google検索でQiitaやStack Overflowを探しては手動コピペして喜んでいましたんですよ。
コピペしかしてなくない???
で、次は「エージェントに全部丸投げしてプロジェクトを作らせればいいや〜ん」ですか。
怠惰!! 圧倒的な堕落!!
そもそも、企画を立ち上げて「コアな体験や最小限の機能」を検証するここまでの領域って、ぶっちゃけエージェントって本当に必要なんですかね？
綺麗な画面みたいだけなんじゃないですかね。
ボクの体感としては、最初の体験なんて普通のブラウザ版ChatAI（ClaudeやChatGPT、Gemini）とお話しするだけで、100%事足りるんじゃないかなぁって思っています。
なんのかんのでエージェントにやらせるにしても、そこそこの準備はいると思うんですよ。ほんの少しの手触りを確かめるためだけにそんなことする必要ありますか?
というか、もっと言っちゃえば、そもそもPCを開く必要すらあるの？？ って思うんです。
Artifact / Canvasを思い出してください……
「よし、やりたいことがまとまった！ これを仕様書Markdownにして、Codexに食わせて一撃でフルスタック開発だ！」
……フルスタック笑
エージェントに何十個ものファイルを作らせて、ローカルサーバーを立ち上げてポートを開く前に、もっと手軽で強力な武器がすでにあるじゃないですか。
いつも手に持っているスマホでArtifactとかCanvas使って、その場でプレビューすりゃいいじゃん！ というお話です。
まずは画面上で体験してみて、自分のやりたいことが本当にその操作で気持ちよく達成できるかを見てみませんか？
言葉を濁さずに言っちゃいますね。
自分も使わないアクティブユーザー0のゾンビサービスで資源を無駄にする前に、一度深呼吸しましょう。
画面右側に一瞬でアプリが現れる魔法だったもの
ClaudeのArtifactsや、ChatGPTやGeminiのCanvas機能を使ったことがある人は多いと思います。 多分ほとんどの人が最初はChatAppからAIにはいるでしょうから。 ところが、エージェントワークに移行するとなぜかChatAppを見下すようになるひとが増えるのなぜなんですかね??
もしかして、ちょっとした全能感??
ただの道具なのに。
Artifacts/Canvas、チャットで指示を出すと、画面の右側にスッと別パネルが現れて、生成されたHTML/JS/CSSがその場でレンダリングされて、実際にクリックしたり入力したりできるエリアが表示されるアレです。
これを使うと、開発の最初のステップはこんな感じになります。
- チャット欄に「この物理動作を満たす単一HTMLを作って」と投げる
- 数秒後、右側のプレビュー画面に目的のツールがポンと出現する
- マウスでボタンを押し、キーボードで文字を打って、「実際にその場で触り倒す」
ターミナルなんて1ミリも開いていません。
Gitのコミットもしていませんし、ローカル環境には1バイトのファイルすら保存していません。
スマホでコチコチするだけで、「ちゃんと動くモックアップ」が、あなたの目の前でカチカチ動いているんですよ。 登場したときは魔法みたいだったのに……。
引き返しやすいは再計画しやすい
でも月見さん、どうせ後から本開発でNext.jsとかFlutterで開発するんだから、最初からちゃんとしたプロジェクト構成で作った方が二度手間にならないんじゃない？
そう考える人がいるのも、すごくよく分かります。
でもね、そもそも一度も動かしていない段階で、なんでReactなのかFlutterなのかが決まってるんですかね。
ボクの考えとしては、個人開発の初期フェーズにおいては真逆なんですよね。
最初の体験を再現するだけなら、HTML/CSS/JSが1枚にまとまった「単一ファイル」で事足りるし、むしろ単一ファイルじゃないと危ういんじゃないかなぁとすら思っています。
その最大の理由は、「圧倒的な引き返しのしやすさ（再計画のしやすさ）」にあります。
プロジェクトを作ると「作りきること」自体が目的にすり替わる
ボクが「まずはCanvasで単一ファイルを作ろう！」って口を酸っぱくして言いたい最大の理由、実はこれなんですよね。
一度プロジェクトを組んでしまうと、人間の脳内では恐ろしい**「目的のすり替え」**が発生するんです。
どんな開発でも、最初は「明日からの自分の作業をちょっとラクにしたい」とか「こんなのあったらいいんじゃない??」っていう、素朴で純粋な目的からスタートしたはずですよね。
それなのに、立派なプロジェクトディレクトリを掘って、パッケージを山ほど入れて、何十個ものファイルを綺麗に並べてしまうと……いつの間にか目的が 「このプロジェクトは何としてでも作りきること」 へと化けてしまうんですよ。
実際に触ってみて、「……あれ？ この操作、思ってたよりテンポ悪いな」「このボタンの配置、直感的に押しづらいかも」という違和感に気づいたとします。
でも、すでに手を動かして立派な枠組みを作ってしまっていると、 サンクコスト効果（投資したコストを惜しむ心理） が邪魔をしてくるんです。
「せっかくディレクトリ切って環境構築したんだから、このまま進めるか……」
「今さら根本的に変更するのは面倒だから、とりあえずこの仕様で妥協しよう」
「せっかくここまでできたし、リリースまでもってこ……！」
完全にゴールが「作りきること」にすり替わっちゃってるじゃないですか！
「完成させること」が自己目的化してしまった瞬間、道具としての使い心地や、本当に必要なサービスなのかなんて完全に置き去りにされます。
「せっかくここまで作ったんだから！」という意地と義務感だけで突っ走り、初期の違和感にフタをして完成させ……結局、誰も（自分すら）使わないゴミが生まれてしまうわけです。
my-app/
├── package.json
├── tsconfig.json
├── src/
│ ├── components/
│ │ ├── Header.tsx
│ │ ├── TaskInput.tsx
│ │ ├── TaskList.tsx
│ │ ├── TaskItem.tsx
│ │ ├── DeleteModal.tsx
│ │ └── Toast.tsx
│ ├── App.tsx
│ └── main.tsxmy-app/
└── index.htmlどっちがゴミに見えますか？
両方ゴミなんです。
使わないなら、ファイルが1個だろうが数十個だろうが全部ただのゴミなんですよね。
ただ、数十個のファイル群をゴミ箱に捨てるのには「ここまで作ったのにもったいない……」という未練と執着がつきまといますが、単一ファイルなら話は別です。
チャット画面なら削除に抵抗がない
一方、チャット画面とCanvasで動いている単一ファイルならどうでしょう？
マウスで触ってみて、「あ、なんか違うな」「この物理動作、思ってたより面倒くさいわ」と感じたら、あなたは何をすればいいと思いますか？
チャットを削除するか、「やっぱりさっきのナシ！こういう動作に変えて」ってプロンプトを1行打つだけです。
ディレクトリもなければ環境構築の苦労もない。
チャットの右側にペラッと出ているだけの使い捨てコードだからこそ、「作りきらなきゃ」なんていう無駄な執着が1ミリも湧かないんです。
失ったものは何もありません。 Gitの履歴を巻き戻しもいらないし、残骸ファイルを削除する必要もありません。
「引き返しやすい」ということは、「何度でもノーリスクで再計画できる」ということ。
アイデアの当たり判定を最速で探るためには、この「作りきることに執着しない身軽さ」が絶対に欠かせないんじゃないかなぁってボクは思います。
ちなみにボクはAIが出る以前から、大体単一ファイルでモックアップを作成してデモしてましたね……お仕事で後から「なんか違うなぁ」みたいなこといわれるとちょっと……ね。
アイデアの鮮度を保てる
単一ファイルモックの最大のメリットは、「思いついた熱量のまま、数分で動くものが手に入る」という点です。
開発アイデアって、お風呂に入っているときとか、お布団に入ってボーッとしているとき、あるいはコーヒーを飲んでいるときに突然降ってきたりしませんか？
その瞬間の「うわっ、これ絶対便利じゃん！ 今すぐ作りたい！」という熱量は、時間とともにものすごいスピードで冷めていきます。
個人的な感覚になりますが30分もたてば、情熱なんてあっという間に蒸発して消え去っちゃうんですよね。AIがない時代なんて、環境構築・パッケージのインストールで何回かエラーくらったら終わりですよ。
たぶん、なくてもいいかな♪ってなります。
単一ファイルモックなら、思いついてから3分後には手元の画面でカチカチ動かせています。
ボクがモックを作るときのサンプル
Chat版AIに投げるプロンプトなんて、肩肘張った難しい指示は全然いりません。
第3回で整理した「物理動作」をそのまま渡して、最低限の制約をちょこんと添えるだけでOKです。
次のユーザー動作を体験する単一のシンプルなHTMLを作ってください。
1. アップロードボタンから動画ファイルをロードする。
2. 読み込んだ動画ファイルのバイナリを解析する。
3. 解析したバイナリから音声情報を削除する。
4. 無音動画として表示する。
5. ダウンロードボタンでデバイスに保存する。 
これで十分です。
AIは余計なビルド設定も外部通信も挟まない、プレーンで素朴なHTMLをスッと出力してプレビューしてくれます。 そして、これは最も原始的なやりたいことです。 ただ、このざっくり指示だと「よかれとおもって」余計な要素がはいってきますが気にしない。
だって削除するもん。
実際に触ってみて「ログ出力なんていらないな」と思ったら、チャットで「バイナリ構造解析 & 音声トラック削除ログのセクションは削除」と1行返すだけ。
早ければ数秒で次のバージョンがプレビューに反映されます。
この圧倒的なテンポ感がインスピレーションを失わせませんし、ゴミをゴミとして扱うことができます。
ちなみにボクはモックアップにはGeminiを使うことが多いです。早いのと、初期段階でGeminiで思うようにいかないなら指示や構成をみなおしたほうがいいです。この段階では多少性能が低めのモデルのほうがいいと思います。
プロジェクトディレクトリを作るのは「体験に合格」してから
本当に、個人開発にとってはAmazingな時代になったなぁってボクは思います。
昔なら、アイデアを思いついてから画面上で動く形にするまでに数時間〜数日はかかっていたのが、今やチャットで数往復するだけで、動くプロトタイプが手元でカチカチ動かせるんですから。
- 一度プロジェクトを組んでと「作りきること」を目的にするのやめろ。
- ブラウザのChat版AIとお話しして、Chat上でプレビューすればすぐに体験できるし、サンクコストが少ない。
- 思いついたときが作りたいとき。インスピレーションを覚まさない。
プレビューを触り倒してみて、
「おっ……この単一ファイルの感触いいじゃん。進める価値ありそう」
そう心から確信できて初めて、ターミナルを開いてプロジェクトディレクトリを作る資格が得られるんじゃないかなぁってボクは思っています。
大事なのは価値なんですよ。
さて、単一ファイルでの体験検証に無事合格したら、次はいよいよ「本開発のための技術選定」に進みますが、AIの技術選定はねぇ……ちょっと要注意ですよね。
次回は、メンテ不能のゴミを作らないための防衛術、【第5回】AIはミーハー。提案してくる設計はだいたい盛りすぎ というテーマでお話ししてみようと思います。
どうぞお楽しみに！