マンガで学ぶ♪バイブコーディング講座②バイブコーディングで使うツール

バイブコーディング

2025.08.05

バイブコーディングを分かりやすくご紹介するために、漫画を始めてみました＾＾

今回は第2回目で、バイブコーディングで使うツールをご紹介します。

よかったら、読んでみてください。

バイブコーディングには、特に専用ツールがあるわけではありません。マンガにあるとおり、色々なツールがあります。

上記にご紹介している以外にも、色々とあります…

「知らないコードを使うのが不安」「面倒そう」と感じたら、まずは普通にChatGPTにコードを組んでもらうのがおすすめ。たとえば、次のように、ChatGPTに指示をいれてみてください。

HTML1枚のページで、おみくじができるページを作ってください。

わたしの場合は、次のようなコードが生成されました。コードは毎回違うものが生成されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>おみくじ</title>
  <style>
    body {
      background-color: #fff8f0;
      font-family: sans-serif;
      text-align: center;
      padding: 60px 20px;
    }
    h1 {
      font-size: 32px;
      color: #2c3e50;
    }
    button {
      margin-top: 30px;
      padding: 12px 24px;
      font-size: 18px;
      background-color: #ffb6c1;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }
    #result {
      margin-top: 40px;
      font-size: 24px;
      font-weight: bold;
      color: #e74c3c;
    }
  </style>
</head>
<body>
  <h1>✨ 今日の運勢 ✨</h1>
  <button onclick="drawOmikuji()">おみくじをひく！</button>
  <div id="result"></div>

  <script>
    const omikujiList = [
      "大吉 🎉 最高の一日になりそう！",
      "中吉 😊 いいことがあるかも！",
      "小吉 🌱 穏やかな日になりそう。",
      "吉 🌈 落ち着いて行動してみて。",
      "末吉 🍀 小さな幸せに気づけるかも。",
      "凶 😱 無理せず慎重にいこう。",
      "大凶 💥 今日は静かに過ごそう！"
    ];

    function drawOmikuji() {
      const result = omikujiList[Math.floor(Math.random() * omikujiList.length)];
      document.getElementById("result").textContent = result;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

body {

background-color: #fff8f0;

font-family: sans-serif;

text-align: center;

padding: 60px 20px;

}

h1 {

font-size: 32px;

color: #2c3e50;

}

button {

margin-top: 30px;

padding: 12px 24px;

font-size: 18px;

background-color: #ffb6c1;

border: none;

border-radius: 10px;

cursor: pointer;

}

#result {

margin-top: 40px;

font-size: 24px;

font-weight: bold;

color: #e74c3c;

}

</style>

</head>

<body>

<h1>✨ 今日の運勢 ✨</h1>

<button onclick="drawOmikuji()">おみくじをひく！</button>

const omikujiList = [

"大吉 🎉 最高の一日になりそう！",

"中吉 😊 いいことがあるかも！",

"小吉 🌱 穏やかな日になりそう。",

"吉 🌈 落ち着いて行動してみて。",

"末吉 🍀 小さな幸せに気づけるかも。",

"凶 😱 無理せず慎重にいこう。",

"大凶 💥 今日は静かに過ごそう！"

];

function drawOmikuji() {

const result = omikujiList[Math.floor(Math.random() * omikujiList.length)];

document.getElementById("result").textContent = result;

}

</script>

</body>

</html>

生成されたコードはコピーして、ローカル上のテキストエディタに貼り付けます。保存するときは、ファイルの拡張子（.txtの部分）を、.htmlに変えます。

保存したファイルをダブルクリックすれば、おみくじ機能のあるページが表示されます。「おみくじをひく」をクリックすれば、おみくじの結果が表示されます。

バイブコーディングで使えるツールについて

今回はChatGPTにそのまま聞く方法をご紹介しましたが、生成AIを使えるコーディング用ツールは、色々出ています。

あまりに多すぎて、わたしは、混乱するほどでした＾＾；

そこで下記の動画で、どんなツールがあるのか、3つのタイプをご紹介してみました。ツール選びに悩んだら、こちら見てみてくださいね。

Claude Code・Cursor・Devinの違いがスッキリ分かる！AIコーディングツール３タイプ分類。これでもう迷わない

マンガ講座でも、この先、ほかのツールをご紹介していこうと思います。

「面白い」「続きみたい」と思っていただけたら、ぜひ、Xでフォローしてくださいね。新しくマンガを書いたら、Xに投稿していきます。