はじめに
株式会社HataLuck and Person（以下、HATALUCK）でバックエンドエンジニアをしている平形です。
この度、エンジニア全員で社内アプトプット活性化のための施策の一環でブログ執筆していますが、進捗ゼロで締切が直前に迫っておりネタにも困っていたため、AIをフル活用して最短時間で執筆することにしました。
ミソなのは短時間で実際に動くものを開発しているということです。
開発、ブログ執筆含め30分くらいで完成させました。
なお、時間の制約の都合および、広い読者に生成AIを活用した開発事例を共有したかったのもあったのでClaude CodeやCursorではなく、あえて広い業界に認知されているChatGPTを利用することにしてみました。
出だしはこんな感じです。
以下すべてChatGPTに出力してもらっております。この記事の執筆も含めてAIで完結しています。
それではどうぞ🙇♂️
はじめに
こんにちは、バックエンドエンジニアの平形です。
普段は、はたLuckのインフラおよびAPI開発を担当していますが、今回は少し毛色を変えた技術的チャレンジに取り組みました。
テーマは、 「1時間で“動く”プロダクトを作る」 というもの。加えて、Vibe Coding（ノリ重視の即興開発） というコンセプトで進めた結果、軽快なプロトタイプが完成しました。
この記事では、そのプロセスと所感を簡潔にまとめたいと思います。
Vibe Codingとは何か？
「Vibe Coding」とは、気分と勢いを最優先に短時間でプロダクトを組み上げるスタイルです。
- 考えすぎずにコードを書く
- 技術的正しさより“動くこと”に重きを置く
- その場のテンションが開発の推進力
今回の開発でも、このマインドセットに則り、あえて事前設計や技術選定を簡素にし、「今、手元にあるものでどこまで作れるか？」を重視しました。
作ったもの：「今の気分で選ぶランチジェネレーター」
1時間という制約の中で作ったのが、「今の気分」に応じてランチを提案してくれるWebアプリです。
- 「がっつり」「さっぱり」「スパイシー」から気分を選ぶ
- 選んだ気分に応じて、複数あるランチ候補からランダムに1つを提案
完成したもの
開発のステップ
使用技術
- フロントエンド：React（TypeScript）
- ビルドツール：Vite
- バックエンド：なし（すべて静的データ）
- 開発環境：CodeSandbox
実装内容（主な構成）
src/
├ App.tsx # メイン画面
├ components/
│ ├ MoodSelector.tsx # 気分の選択ボタン群
│ └ SuggestionResult.tsx # ランチ提案の表示
└ data/
└ suggestions.ts # 気分ごとのランチ候補一覧
- データはフロント内にハードコード
- ボタン選択時に気分に対応するリストからランチ候補をランダム表示
- 画面遷移なし、極めてシンプルな構成
主なコード
suggestions.ts
export const suggestions = {
がっつり: ['ラーメン', 'ハンバーガー', 'カツ丼'],
さっぱり: ['冷やしうどん', 'サラダチキン', 'お寿司'],
スパイシー: ['インドカレー', '麻婆豆腐', 'タコス'],
} as const;
export type Mood = keyof typeof suggestions;
MoodSelector.tsx
import { Mood } from "../data/suggestions";
type Props = {
current: Mood | null;
onSelect: (mood: Mood) => void;
};
export const MoodSelector = ({ current, onSelect }: Props) => {
const moods: Mood[] = ["がっつり", "さっぱり", "スパイシー"];
return (
<div style={{ display: "flex", gap: "10px", justifyContent: "center" }}>
{moods.map((m) => (
<button
key={m}
onClick={() => onSelect(m)}
style={{
padding: "10px 16px",
borderRadius: "6px",
border: "1px solid gray",
backgroundColor: current === m ? "#def" : "white",
}}
>
{m}
</button>
))}
</div>
);
};
SuggestionResult.tsx
import { Mood, suggestions } from "../data/suggestions";
type Props = { mood: Mood | null };
export const SuggestionResult = ({ mood }: Props) => {
if (!mood) return null;
const menus = suggestions[mood];
const pick = menus[Math.floor(Math.random() * menus.length)];
return (
<p style={{ marginTop: "20px", fontSize: "1.2rem" }}>
今日のおすすめは <strong>{pick}</strong> です！
</p>
);
};
App.tsx
import { useState } from "react";
import { Mood } from "./data/suggestions";
import { MoodSelector } from "./components/MoodSelector";
import { SuggestionResult } from "./components/SuggestionResult";
export default function App() {
const [mood, setMood] = useState<Mood | null>(null);
return (
<main style={{ padding: "40px", textAlign: "center" }}>
<h1 style={{ fontSize: "1.8rem", marginBottom: "20px" }}>
ランチジェネレーター
</h1>
<MoodSelector current={mood} onSelect={setMood} />
<SuggestionResult mood={mood} />
</main>
);
}
開発ログ（Vibe Codingの記録）
今回のプロトタイピングは、ChatGPTとの対話を通じて即興的に進行しました。
- 開始時点での決定事項：React + フロントエンドのみ / バックエンドなし / プロトタイプでOK
- アイデアは「今の気分でランチを決める」というライトな発想から即決
- 開発環境はCodeSandboxを採用し、即時に動作確認できるよう設計
- UI構成・データ構造・画面遷移は全てその場の会話で確定
- 最後にスクリーンレコーディングを取得し、ブログ素材として活用
Vibe Codingの名前通り、直感と思いつきの流れを大切にした即興開発でした。
振り返り：やってみて思ったこと
良かった点
- 1時間でも意外と形になる：割り切って開発することで集中力も高まり、結果的にシンプルな構成で完走できた
- Reactの即応性を実感：状態管理や再描画の仕組みが軽快
- CodeSandboxが便利：環境構築ゼロで開発→公開まで完了
課題感
- 見た目がややチープ：デザインフレームワークを入れる余力はなかった
- 調整が効かない：1時間という制限上、品質に手をかけにくい
まとめ
「完成度」よりも「動いたこと」が評価軸になるVibe Coding。
日々の業務ではなかなかできない“瞬発力型の開発”を通じて、開発者としての感覚をリフレッシュできたのは大きな収穫でした。
今後も、週1回ペースでこうした「Vibe Coding」を実施してみるのも面白そうです。
お読みいただき、ありがとうございました！
本当のまとめ
はい！ここまでがすべてChatGPTで生成した記事になります。
どうでしたでしょうか？
実際にVibe Cordingと記事執筆含めて30分ほどで完成しました。
本文の編集は、GIFアニメの挿入くらいです。
ChatGTPの実際のやり取りの様子は以下のURLから確認できます。
自分はバックエンドエンジニアなのでフロントエンドの知識はあまり無いですが、そんな自分でも実装ができました。
生成AIとエンジニアリングの親和性は高く、特に初学者の方は実装のわからない部分を聞きまくって学習にもガンガン活用できます。
ということで技術ブログもAIに書かせる時代になったのでバシバシ書いていこうと思っています。
今度はちゃんと自分でテーマ考えて書きますw
We are hiring!
HATALUCKでは、一緒に「はたLuckシリーズ」を開発してくれる仲間を募集しています。
ご興味のある方は下記リンクからぜひご連絡ください！
Discussion