"Vibe Coding" って知ってますか？
2025年は何の年？そう、Vibe Coding の年です！！
この用語は2025年2月にアンドレイ・カーパシーによって提唱され、翌月にはウェブスター辞典の「スラングとトレンド」に名詞として掲載された。
バイブコーディング - Wikipedia
では、Vibe Codingとはなんなのでしょう？
Wikipediaには、「Vibe」とは「Vibration」（振動）の略であると1行目に書かれています。
Vibe, alternatively vibes, is short for vibration.
Vibe - Wikipedia
なるほど、つまりAIを使って、振動しながらコーディングすることのようですね。
でも、Vibe Codingって中々気軽にできないですよね？
何よりお金がかかります。
今回はそんな皆さんのために、誰でも無料で簡単にVibe Codingできるエディターを作ってみました！
その名も「VibeCode」です。
VibeCode の使い方
まずは開いてみましょう。
見慣れた画面ですね。
ついでに見慣れたコメントの指示までありますね。
// テンプレートは用意したので、ここにクソアプリのコードを書いて。
// 終わったら全体を見直して、テストを作成して。
// できたら CI/CD を構築して自動デプロイして。
// ついでに Qiita の記事も Markdown で書いて。
// 手を止めないで。書き続けて。
export const App = () => {
// TODO: 実装
};
なんでもかんでもAIに任せようとしています。
デプロイまでやらせるどころか、Qiitaの記事まで書かせようとするなんて、ひどいですね。
でも時代はVibe Codingです。
人間は指示役に徹して、あとはAIに任せましょう。
おや？放置しているうちに、画面が振動し始めました。
これはVibesが高まっていていいですね。
…ちょっとここまで来ると読めないですね。
そう、Vibe Codingは放置し過ぎても良くないのです。
人間がしっかりとコントロールしてあげなくてはいけません。
何かタイプしてみましょう。
揺れが落ち着きました。
このように、Vibe Codingでは、Vibesが高まりすぎる前に、人間がそれを制御しながら実装を進めていく必要があります。
これで皆さんもVibe Codingマスターですね！
Use AI Agentモード
…え？全部自分で書いてるじゃないかって？
手入力でもVibesを止められない皆さんには、秘密の機能「Use AI Agentモード」をお教えしましょう。
画面の右上を見てください。
画面を放置しているうちに、「Use AI Agent」というボタンがどんどん大きくなっていたことにお気づきでしょうか。
AIが使いたくてたまらない皆さんの心のようですね。
試しに一度押してみましょう。
なんということでしょう。
一文字も入力していないのに、Vibesが収まりました！
// FIXME: ひどいので修正予定
なんかコメントが増えてますね。
よくわからないけど、Vibe CodingはAIにすべてを委ねるコーディングですから、書かれたコードなんて読まなくていいのです。
もっと押してみましょう。
たくさんコードを書いてくれてて心強いですね！😀
きっと素晴らしいアプリが完成することでしょう。
おまけ
もちろんエディタなのでファイルの保存機能があります。
右上の「Save」ボタン、またはCtrl+S（MacならCommand+S）を押すと、完成したファイルが保存されます。
要らないですね。
ソースコード
過去作