LLM 開発ツールを知る
Claude Code / Codex と ChatGPT の違いを押さえます。
AI駆動開発 / LLM もくもく会
Weeyble LLM bootcamp
Claude Code や Codex を使って、LLM と一緒に小さなアプリを作るための初参加者向けガイドです。 知識ゼロからでも、会場で相談しながら進められます。
For first timers
初参加・初心者大歓迎です
このページは、はじめて「AI駆動開発 / LLM もくもく会」に参加する人のための入口です。 まずは用語をざっくり理解し、次に実際の開発タスクを LLM と一緒に進めてみます。
うまくプロンプトを書けなくても問題ありません。大事なのは、LLM に丸投げすることではなく、 目的を伝え、出てきた案を読み、試し、直していく開発のリズムを体験することです。
Bootcamp map
今日の流れ
小さく作る
バイブコーディングでテトリス風ゲームを作ってみます。
開発プロセスに使う
競合分析、要件定義、実装、検証まで LLM を使います。
拡張の考え方を知る
MCP で外部ツールやデータとつなぐ考え方を学びます。
Tools
Claude Code / Codex とは
開発作業を一緒に進める AI エージェント
Claude Code や Codex は、コードを読む、ファイルを編集する、テストを実行する、エラーを調べる、 修正方針を立てるといった開発作業を、プロジェクトの中で進めるためのツールです。
ChatGPT と何が違うのか
ChatGPT は会話で相談する場面に強い一方、開発エージェントは手元のリポジトリを見ながら作業できます。 「説明を聞く」だけでなく、「実際に直す」「動作確認する」まで近い距離で扱えるのが違いです。
Vibe coding
バイブコーディングとは？
作りたいものの雰囲気や目的を LLM に伝え、提案されたコードを動かしながら、 会話と修正を重ねて形にしていく開発スタイルです。
最初から完璧な設計を目指すより、まず動くものを作り、触って、気づいた違和感を LLM に伝えます。 初心者でも「作って試す」サイクルに入りやすいのが特徴です。
Prompt example
HTML/CSS/JavaScript だけで動く
シンプルなテトリス風ゲームを作って。
初心者が読みやすい構成にして、
ブラウザでそのまま開けるようにして。Hands-on
テトリスを作ってみよう
1. まず作る
「ブラウザで動くテトリス風ゲーム」を LLM に依頼します。
2. 動かす
表示、操作、落下、消去、ゲームオーバーが動くか確認します。
3. 直す
バグや遊びにくさを具体的に伝えて、差分で直してもらいます。
4. 仕上げる
スコア、次のブロック、リスタート、スマホ操作などを追加します。
AI driven development
AI駆動開発とは
AI駆動開発は、コードを書く瞬間だけでなく、調査、設計、実装、レビュー、検証まで、 開発プロセス全体に LLM を組み込む考え方です。
競合分析・要件定義をしてみよう
作りたいアプリに近いサービスを調べ、ユーザー、課題、必要な機能、最初に作る範囲を整理します。 LLM には「比較表」「想定ユーザー」「MVP の要件」を出してもらうと始めやすいです。
実装してみよう
要件を小さなタスクに分け、1つずつ実装します。LLM には作業前に方針を説明してもらい、 変更後は実行結果やエラーを渡して次の修正につなげます。
レビューして改善しよう
動いたら終わりではなく、読みやすさ、アクセシビリティ、エラー処理、テスト観点を確認します。 「初心者にも説明できるか」を基準にすると理解が深まります。
MCP
MCPとは？
MCP は Model Context Protocol の略で、LLM アプリや開発エージェントが外部ツール、 データ、サービスとつながるための共通インターフェースです。
たとえば、ブラウザ操作、データベース、ドキュメント、GitHub、社内ツールなどを LLM から扱えるようにすると、単なるチャットではなく、実作業に近い支援ができます。
More reading
もう少し深掘りする
今日のハンズオンで出てくる用語を、あとから読み返せる記事です。 会場で試した内容を整理したいときや、次に作るものを考えるときに使えます。
Next action
今日やることを1つ決めよう
テトリス、TODO アプリ、勉強会告知ページ、競合分析メモなど、小さく完成させられるテーマを選びます。 迷ったら「ブラウザだけで動くもの」から始めるのがおすすめです。
最初の説明に戻る