[ ホーム | 開催日&申し込み | バイブコーディング講座内容 ]

バイブコーディング講座

講座の特徴

バイブコーディング講座では、AIの力を借りて「まず形にする」スピードを上げつつ、きちんと動くかを自分で確かめながら仕上げる進め方を学びます。

前半は、AIへの頼み方を「目的・条件・やってほしいこと/やってほしくないこと」をセットで伝えるコツとして整理し、同じ結果を出しやすい指示の出し方を身につけます。あわせて、画面に貼り付けて動かす手順や、うまくいかないときの確認ポイントも一緒に練習するので、環境の準備やつまずき対応も自分で進められるようになります。

後半は、おみくじツールやBMIチェッカーなどのミニツールを実際に作りながら、「作る→動かす→直す」の流れを繰り返し、「作れる実感」を積み上げます。さらに、入力ミスへの対処や読みやすい書き方など、最低限の見直しポイントも押さえるので安心して仕上げられます。

定員10名の少人数で行われるので、気になっている点はなんでも気軽に聞くことができます。
※他サイトでも募集しているため、お申し込みタイミングによっては、人数は若干増える場合があります。

  • 初心者向けに特化した1日完結講座
  • 10名の少人数制
  • 経験豊富なスクール講師が担当
  • PC準備不要(スクールPC使用)
  • 年10回以上開催、実績のあるITスクールが運営
  • 特典:当講座のオリジナルテキスト無料配布
対面型対応 オンライン対応
講座名 バイブコーディング講座
開催予定 開催日程はこちらから
対象・前提条件 ・PCの基本操作(ファイル操作、ブラウザ、テキストのコピー&ペースト)ができる方
・HTML / CSS / JavaScript は未経験でも参加可能です
(HTML / CSS / JavaScriptへの深い知識や、高度なフレームワーク知識
(React / Vue 等)は不要です)
定員 10名の少人数
時間 10時~17時
実施形態 ワークショップ形式(講義+個人ワーク)
受講料
新規開講記念キャンペーン
55,000円(税込)
38,500円(税込)
【30%OFF】            
※3月開催分、このページからのお申込み限定
 
特典 当講座のオリジナルテキスト無料配布
会場(通学) 【東京開催】東京都の神田駅、秋葉原駅周辺の神田ITスクール内セミナー会場
会場(オンライン) ご自宅などお好きな場所からZOOMを使用
持ち物(共通) ・筆記用具
・gmail, yahooメール等の外部からアクセス可能なwebメール
 (現在ご利用のものがあればそちらで大丈夫です。)
・飲み物等
持ち物(通学) ・データお持ち帰り希望の方は、USBメモリ
持ち物(オンライン) ・PC(インターネット接続可、環境構築済みのもの)

バイブコーディング講座はこんな方におすすめ!

  • プログラミング初心者・未経験者
  • 生成AIを触ったことはあるが、コード生成の品質や再現性に悩んでいる方
  • 小さく作りながら、検証・改善の型を身につけたい方
コミュニケーション

受講目標 ― 7時間の講座が終わったら、できるようになること

  • バイブコーディングの考え方(AIで速度を上げ、検証で品質を守る)を説明できるようになります
  • ChatGPTでの進め方(出力形式・貼り付け手順)を理解し、ブラウザ実行とDevTools確認まで自走できるようになります
  • 目的・前提・制約・入出力例・禁止事項を含む依頼で、再現性の高い指示ができるようになります
  • ブラウザ上で動くミニツールを複数作成し、「作れる実感」を積み上げられます
  • 最低限のチェックリストでセルフレビューできるようになります
  • 再現→最小化→仮説→検証の切り分け手順で、AIを使いながら問題解決できるようになります

講座内容

はじめに 当講座の概要

当講座について

  • 当講座について
  • 当講座の構成
  • 当講座の進め方

第1章:【導入編】AIを「最強の相棒」にする開発スタイル

  • バイブコーディングの世界へようこそ
  • 【体験】AIに10秒でページを作らせる
  • 「動く」のその先へ

第2章:【準備編】3つの道具で始める高速開発の土台づくり

  • 編集の第一歩「サクラエディタ」に触れる
  • AIパートナー「ChatGPT」を起動する
  • ブラウザの裏側を覗く「DevTools」入門

第3章:【基本編】AIと会話する技術
  • 思考を妨げない魔法のキー操作
  • 期待通りの答えを引き出す「プロンプトの型」
  • 「質問」と「修正依頼」と「手順化」の使い分け
  • 【演習】Ask / Edit / Planで修正してみよう
  • コンテキスト(文脈)の管理
第4章:【安全編】AIの提案を疑う:セキュリティとレビューの鉄則

  • 変更点を見落とさない:前後比較と要約レビュー
  • 秘密情報を守る:禁止事項とデータ流出リスク
  • 安全なWeb制作の基本は「textContent」
  • 【演習】innerHTMLで何が起きるか体験
  • 最低限のレビュー観点
  • 【演習】変更の安全な進め方

第5章:【演習1】一瞬で形にする:おみくじツールでUIデザイン体験

  • 【演習】おみくじツールの作成
  • 【演習】ランダム表示のロジック
  • 【演習】おみくじツールの完成を目指す
  • エラーが出た場合の対処
  • 【演習】見た目を楽しくするCSS(バイブス重視)

第6章:【演習2】計算を自動化する:BMIチェッカーでロジック作成

  • 【演習】BMIチェッカーの作成
  • 入力は「文字列」から始まる【重要】
  • 【演習】BMIチェックのロジック追加
  • 【演習】「もし〜なら」条件で処理を分岐する
  • 【演習】BMI判定と色分けの実装
  • 【演習】エラーが出た場合の対処

当日の流れとタイムスケジュール

10:00バイブコーディング講座開始
はじめに【5分】
第1章:【導入編】AIを「最強の相棒」にする開発スタイル【45分】
第2章:【準備編】3つの道具で始める高速開発の土台づくり【30分】
第3章:【基本編】AIと会話する技術①【30分】
12:00休憩
13:00
第3章:【基本編】AIと会話する技術②【25分】
第4章:【安全編】AIの提案を疑う:セキュリティとレビューの鉄則①【20分】
第4章:【安全編】AIの提案を疑う:セキュリティとレビューの鉄則②【30分】
第5章:【演習1】一瞬で形にする:おみくじツールでUIデザイン体験【60分】
第6章:【演習2】計算を自動化する:BMIチェッカーでロジック作成【50分】
質疑応答【5分】
17:00講座終了(お疲れ様でした。)
※時間は目安で、前後する場合がございます。

注意事項

※本講座はChatGPT利用可能なアカウントを用意していることが前提となります。

講座内でアカウント作成の時間は設けておりませんので、事前にご準備をお願いいたします。
なお、無料プランのアカウントで問題ございません。

決済・キャンセルポリシー

オンライン講座受講時の事前準備

オンラインで受講いただく場合は、ZOOMが必要となります。
必ず事前にをご確認いただき、受講開始までに準備を完了しておいてください。
オンライン講座(ZOOM)の準備はこちら

インストラクター

その他

会場へのアクセス

利用するPC、LAN、及びテキスト