メインコンテンツまでスキップ

基本編

このページは、vibe-coding-starter の基本編カリキュラムです。

各部で何を学ぶのか、どこまでできれば次に進んでよいのかを整理します。 各部の詳しい進め方は、それぞれの部の入口ページと章本文に分けて置いています。

基本編の考え方​

この教材では、最初からGitHubへpushしたり、公開したりはしません。 一方で、AIエージェントと一緒に学ぶ教材なので、最初に最低限の開発ツールは導入します。

第0部では、すべてを理解する前に、AIエージェントを使って学び始められる状態を作ります。 第1部以降で、第0部で実行したコマンドや導入したツールの意味を順番に回収します。

まず、自分のPCの中で次の感覚を身につけます。

  • 今どこで作業しているか
  • どのファイルを見ているか
  • どのコマンドを実行しているか
  • AIに何を見せ、何を任せているか
  • 変更前後で何が変わったか

その後、Gitで変更を記録し、最後にGitHubとGitHub Pagesで公開します。 GoやAstroなど、最初のAIエージェント起動に不要なツールは、それぞれ実際に使う章の直前で導入します。 インストールそのものも学習対象として扱い、「なぜ今このツールが必要なのか」を確認しながら進みます。

AIエージェントと学び始める準備をする
↓
PC・OS・CLIの意味を回収する
↓
生成AIとコーディングエージェントを理解する
↓
Gitで変更を見る・記録する
↓
ローカルだけで小さく自動化する
↓
ブラウザで小さく作る
↓
Astroでポートフォリオを作る
↓
GitHubで共同作業を体験する
↓
GitHub ActionsとGitHub Pagesで公開・運用する

第0部：AIエージェントと学び始める準備​

ゴール​

CodexまたはClaude Codeを起動し、教材リポジトリを見ながらAIに質問できる状態を作ります。 この時点では、すべてのコマンドやツールの意味を理解できなくて構いません。

学ぶこと​

  • この教材におけるVibe Codingの考え方
  • AIに丸投げしない理由
  • まだ全部理解できなくてもよいという前提
  • macOS 26 Tahoe以上のApple Silicon Mac、またはWindows 11 x86_64 PC上のWSL Ubuntuを本線にする理由
  • 教材を読む順番
  • ターミナルを開く
  • 最低限のパッケージ管理
  • Gitの最小導入
  • Node.js / npmの最小導入
  • Codexはnpm、Claude Codeは公式インストーラーで導入すること
  • 教材リポジトリのclone
  • AIエージェントを教材リポジトリで起動する
  • AIにこの教材の目的を要約させる
  • 第0部で実行した操作の意味は、第1部以降で回収するという方針
  • パスワード、トークン、APIキー、秘密鍵をAIに貼らないこと

到達目標​

  • 教材リポジトリをローカルに置ける
  • CodexまたはClaude Codeを起動できる
  • AIエージェントが教材リポジトリを見ている状態を作れる
  • AIにこの教材の目的を要約させられる
  • 教材リポジトリと、自分が後で作る成果物リポジトリを区別できる
  • まだ全部わからないが、ここからAIと一緒に学ぶ状態になれる
  • パスワード、トークン、APIキー、秘密鍵をAIに貼らない判断ができる

第1部：PC・OS・CLIの意味を回収する​

ゴール​

第0部で実行したセットアップ操作の意味を、ファイル、パス、ターミナル、シェル、PATH、権限、パッケージ管理の観点から説明できるようになります。

学ぶこと​

  • ファイル、ディレクトリ、パス、作業場所の基本
  • macOS、Windows、WSL Ubuntu、Linux、UNIXの関係
  • ターミナル、CLI、シェル、基本コマンドの読み方
  • PATH、権限、シェル設定、危険なコマンドの見分け方
  • Homebrew、apt、npmなどのパッケージ管理
  • ghq など、リポジトリ配置を整理する補助ツールの考え方
  • 第0部で導入したツールと実行したコマンドの意味
  • 教材リポジトリと成果物リポジトリの置き場所
  • 秘密情報、認証情報、ログイン状態を混同しない考え方

到達目標​

  • 今いるディレクトリを確認できる
  • 自分がmacOSとWSL Ubuntuのどちらの環境で作業しているか説明できる
  • 教材リポジトリと成果物リポジトリを置く場所を説明できる
  • 第0部で何をインストールしたか説明できる
  • コマンドを実行する前に、何が起きそうかを大まかに読める
  • コピーして実行する前に、危ないコマンドかどうかを一度立ち止まって考えられる
  • エラーが出たときに、場所、権限、PATH、インストール未完了のどれに近いかを切り分ける入口を持てる
  • ローカルPCのユーザー、GitHubアカウント、AIツールのログインを区別できる

第2部：生成AIとコーディングエージェントの基礎​

ゴール​

AIツールを魔法扱いせず、モデル、チャットAI、コーディングエージェント、作業環境の違いを理解して使い始めます。

学ぶこと​

  • 生成AIとは何か
  • 従来のAIと生成AIの違い
  • LLMとは何か
  • AIがもっともらしく間違える理由
  • モデルとは何か
  • GPT、Claude、Gemini、Llama、Qwen、DeepSeekなどの代表例
  • クラウドモデルとローカルLLMの違い
  • ChatGPTやClaudeのWebチャットと、コーディングエージェントの違い
  • Claude Code、Codex、GitHub Copilot、Cursor系ツール、ローカルLLM連携型ツールなどの選択肢
  • CodexやClaude Codeを使うために必要な環境
  • AIに見えているファイル、会話、作業ディレクトリ、指示ファイル
  • AIに説明、計画、レビュー、小さな変更を頼む方法

到達目標​

  • モデルとツールの違いを説明できる
  • AIが間違える前提で確認できる
  • AIに「まだ編集しないで」「先に計画して」と頼める
  • AIを先生、補助者、ペアプログラマー、レビューアとして使い分けられる

第3部：Gitで変更を見る・記録する​

ゴール​

Gitを、まずローカルの変更履歴を確認・記録する道具として使えるようになります。 GitHubへ送る前に、自分のPCの中で変更を見て、選んで、記録する感覚を身につけます。

学ぶこと​

  • Gitの目的
  • GitHubとの違い
  • 第0部で導入したGitを、変更記録の道具として使う
  • git init
  • git status
  • git diff
  • git add
  • git commit
  • git log
  • commitメッセージ
  • .gitignore
  • AIが変えたファイルを確認する習慣
  • commit前レビュー
  • 秘密情報、.env、トークンをGitに入れない考え方

到達目標​

  • 変更されたファイルを確認できる
  • 変更内容をcommit前に確認できる
  • commitに含める変更を選べる
  • 小さく意味のあるcommitを作れる
  • AIが変更した内容を、自分の責任で記録できる
  • GitHubを使わなくても、Gitだけでローカル履歴を作れることを説明できる

第4部：ローカルだけで小さく自動化する​

ゴール​

GitHubや公開を使わず、自分のPCの中だけで小さな自動化を作ります。 シェルスクリプトとGoを通して、スクリプト言語とコンパイル言語の違いを体験します。

学ぶこと​

  • 練習用ディレクトリを作る
  • シェルスクリプトでファイルやディレクトリを扱う
  • 実行権限と chmod の注意点
  • Goを使う直前にインストールする
  • Goで小さなCLIツールを作る
  • go run と go build
  • コンパイルと実行ファイル
  • 標準入力、標準出力、終了ステータスの入口
  • 定期実行とは何か
  • cronの入口
  • macOSのlaunchdの入口
  • 定期実行でやってよいこと、危ないこと
  • ログを残す考え方
  • AIに改善案を出させる
  • AIに小さな変更を実装させる
  • 変更前後をGitと自分の目で確認する

到達目標​

  • ローカルだけで動く小さな自動化を作れる
  • シェルスクリプトとGoの向き不向きを大まかに説明できる
  • Goのインストール、実行、ビルドを体験できる
  • AIが変更した結果をターミナルとGit差分で確認できる
  • cronやlaunchdは「勝手に定期実行される仕組み」だと説明できる
  • 定期実行を設定する前に、影響範囲と止め方を確認できる
  • 公開前提ではない練習場で、安心して試行錯誤できる

第5部：ブラウザで小さく作る​

ゴール​

Node.js / npmを使わず、まずはHTML、CSS、JavaScriptだけでブラウザ上に動く小さなページを作ります。

学ぶこと​

  • HTMLは構造、CSSは見た目、JavaScriptは動き
  • ローカルファイルをブラウザで開くこと
  • ローカルサーバーで見ること
  • localhost
  • 小さなHTMLページを作る
  • CSSで見た目を変える
  • JavaScriptで小さな動きを付ける
  • 変数、文字列、配列、関数の入口
  • document.querySelector
  • addEventListener
  • textContent
  • classList
  • 入力フォームの値を読む
  • ブラウザDevTools
  • Consoleを見る
  • エラーをAIに相談する
  • TypeScriptはJavaScriptに型を足すものだと知る

到達目標​

  • ローカルだけで動く小さなWebページを作れる
  • AIが変更した結果をブラウザとGit差分で確認できる
  • Consoleに出たエラーを確認できる
  • JavaScriptを完全には読めなくても、どこが画面の動きに関わるか見当をつけられる
  • TypeScriptを、この後の発展で学ぶ理由として理解できる

第6部：Astroで成果物ポートフォリオを作る​

ゴール​

教材リポジトリとは別に、自分のVibe CodingポートフォリオをAstroで作ります。 Node.js / npmは、この部でWeb制作の道具として改めて確認し、未導入ならここで導入します。

学ぶこと​

  • 教材リポジトリと成果物リポジトリを分ける理由
  • Node.js / npmを使う直前に確認し、未導入ならインストールする
  • npm create astro@latest
  • npm install
  • package.json
  • package-lock.json
  • node_modules をcommitしない理由
  • npm scripts
  • npm run dev
  • npm run build
  • dev server
  • localhost
  • dist/
  • Astroのページとコンポーネント
  • Astroで触れるTypeScriptの入口
  • ポートフォリオの構成
  • READMEを書く
  • Astroのページを自分向けに編集する
  • CSSを整える
  • docs/learning-log.md を書く
  • AIと一緒に改善する
  • ローカルで最終確認する
  • Gitでcommitする

到達目標​

  • 自分の成果物リポジトリをローカルで作れる
  • 公開してよい内容だけを入れる判断ができる
  • AIと相談しながら、README、Webページ、学習ログを整えられる
  • npm run dev と npm run build の違いを説明できる
  • node_modules をcommitしない理由を説明できる
  • 公開前に、自分の目で内容を確認できる

第7部：GitHubで共同作業を体験する​

ゴール​

GitHubを、単なる公開先ではなく、他の人と変更をやり取りする場所として体験します。 この教材リポジトリにStarを付け、forkし、感想Pull Requestを出します。

学ぶこと​

  • GitHubとは何か
  • GitHubアカウント
  • Star
  • fork
  • Pull Request
  • review
  • merge
  • commit用メールアドレス
  • メールプライバシー
  • SSH公開鍵と秘密鍵
  • 教材リポジトリに感想を送る体験
  • reviews/ に自分の感想ファイルを追加する
  • PRが必ずmergeされるとは限らないこと
  • 公開される文章を書く責任

到達目標​

  • この教材リポジトリにStarを付けられる
  • この教材リポジトリをforkできる
  • reviews/ に感想ファイルを追加し、commit、push、Pull Request作成まで体験できる
  • Pull Requestがreviewされ、mergeされる流れを理解できる
  • 公開されるPRに、本名、住所、勤務先、秘密情報を書かない判断ができる

第8部：GitHub Pagesで公開・運用する​

ゴール​

自分の成果物をGitHubに置き、公開前後の責任まで理解してGitHub ActionsとGitHub Pagesで公開します。

学ぶこと​

  • GitHub上に成果物リポジトリを作る
  • remote
  • git push
  • 公開リポジトリの注意点
  • GitHub Pages
  • GitHub Actions
  • GitHub Actionsの成功・失敗ログを見る方法
  • AstroをGitHub Pagesへデプロイする設定
  • 公開前レビュー
  • 公開後の修正
  • 運用と維持コスト

到達目標​

  • 自分の成果物をGitHubにpushできる
  • 公開リポジトリに入れてはいけない情報を説明できる
  • GitHub ActionsでAstroをビルドし、GitHub Pagesで公開できる
  • GitHub Actionsが失敗したときにログを確認できる
  • 公開後に修正して再度反映できる
  • 作って終わりではなく、維持する責任を理解できる

章立てを詰めるときの観点​

各章を作るときは、次を確認します。

  • その章で初めて出る用語は何か
  • その章の前に知っていないと困ることは何か
  • コマンドを実行する場合、何が変わるのか
  • 失敗したときに戻れるか
  • AIに何を頼んでよいか
  • どの時点でGitやGitHubが必要になるか
  • 公開や秘密情報に関わる内容が早すぎないか

GitHub体験ワークの運用メモ​

第7部では、学習者がこの教材リポジトリをforkし、reviews/ に自分の感想ファイルを追加してPull Requestを出す体験を入れています。

このワークで体験できることは次です。

  • Starを付ける
  • forkする
  • fork先へcommitしてpushする
  • Pull Requestを作る
  • reviewを受ける
  • mergeされる
  • 自分の変更が元リポジトリに入る

ただし、感想は公開されます。 章本文と reviews/README.md では、次の注意を扱います。

  • 本名、住所、学校名、勤務先、メールアドレスを書かない
  • 業務情報や秘密情報を書かない
  • 誰かを攻撃する内容を書かない
  • AIが生成した文章でも、自分が公開してよい内容か確認する
  • PRは必ずmergeされるとは限らない

運用側では、reviewとmergeをある程度自動化する候補があります。 ただし、完全自動mergeにする場合でも、最低限の安全条件が必要です。

  • 変更ファイルを reviews/ 配下の新規Markdownファイルに限定する
  • 1 PRにつき1ファイルだけに制限する
  • 追加行数を少なく制限する
  • 禁止語や秘密情報らしき文字列を検査する
  • Markdownの形式を検査する
  • GitHub Actionsで条件を満たしたPRだけmerge対象にする
  • 判断が必要なPRは人間がreviewする

本文との関係​

このページは、基本編全体の見取り図です。 各部の具体的な章立て、確認コマンド、注意点は、それぞれの部の index.md と章本文で扱います。

基本編の部構成を変える場合は、まずこのカリキュラムを直し、次に該当する各部index、章本文、サイドバーを更新します。