バイブコーディングを分かりやすくご紹介するために、漫画を始めてみました＾＾
今回は第2回目で、バイブコーディングで使うツールをご紹介します。
よかったら、読んでみてください。
バイブコーディングには、特に専用ツールがあるわけではありません。マンガにあるとおり、色々なツールがあります。
上記にご紹介している以外にも、色々とあります…
「知らないコードを使うのが不安」「面倒そう」と感じたら、まずは普通にChatGPTにコードを組んでもらうのがおすすめ。たとえば、次のように、ChatGPTに指示をいれてみてください。
わたしの場合は、次のようなコードが生成されました。コードは毎回違うものが生成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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に変えます。
保存したファイルをダブルクリックすれば、おみくじ機能のあるページが表示されます。「おみくじをひく」をクリックすれば、おみくじの結果が表示されます。
バイブコーディングで使えるツールについて
今回はChatGPTにそのまま聞く方法をご紹介しましたが、生成AIを使えるコーディング用ツールは、色々出ています。
あまりに多すぎて、わたしは、混乱するほどでした＾＾；
そこで下記の動画で、どんなツールがあるのか、3つのタイプをご紹介してみました。ツール選びに悩んだら、こちら見てみてくださいね。
マンガ講座でも、この先、ほかのツールをご紹介していこうと思います。
「面白い」「続きみたい」と思っていただけたら、ぜひ、Xでフォローしてくださいね。新しくマンガを書いたら、Xに投稿していきます。
▶第１話からすべて通して読みたい方はこちら♪
なお、わたしのほうでは、生成AIを使った開発業務効率化や内製化のための研修・コンサルティングのご相談を承っています。ご興味があれば、「お問い合わせ」ページをご覧ください。
ご紹介動画もご用意しています♪
