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

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

今回は第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>

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

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