バイブコーダーに贈るフロントエンド開発入門講座 🚀

AI と協働する新時代のエンジニアのための、実践的フロントエンド開発教材

📖 プロジェクト概要

このプロジェクトは、バイブコーディング（AI を活用したコーディングスタイル）を実践する人に向けた、フロントエンド開発の入門講座です。

単なる技術解説ではなく、「AI に的確な指示を出せるようになる」「生成されたコードを理解・修正できるようになる」ことを目的とした、実践的なカリキュラムを提供します。

🎯 このプロジェクトの目的

バイブコーダーが得られるもの

✅ AI との共通言語：HTML/CSS/JavaScript の基礎を理解し、的確な指示が出せる
✅ コードリーディング力：AI が生成したコードを評価・修正できる
✅ 創造性の拡張：技術的な可能性を知り、アイデアの幅が広がる
✅ 開発効率の向上：自分で微調整できるため、AI とのやり取りが最小化
✅ 実践力：実際のプロジェクトで使える技術の習得

従来の教材との違い

従来の教材	このプロジェクト
すべてを自分で書く前提	AI と協働する前提
暗記重視	理解と応用重視
完璧な実装を目指す	効率的な指示と修正を目指す
技術単体の学習	実践的な組み合わせ

📚 カリキュラム構成

Phase 0: はじめに - AI 時代のフロントエンド開発 🌟

目標：学習のモチベーションを高め、フロントエンド開発の全体像を理解する

学習内容

なぜ AI 時代の今、フロントエンド開発を学ぶの？
- AI との対話力が劇的に向上する
- AI の出力を評価・改善できる
- 創造性の幅が無限に広がる
HTML/CSS はプログラミング言語？
- プログラミング言語との違い
- HTML/CSS が Web の土台である理由
HTML と CSS の役割
- HTML：ドキュメントの構造を定義
- CSS：ドキュメントを装飾
- 役割分担が重要な理由
あなたはもうドキュメント作成を知っている
- Word や Pages と HTML/CSS の共通点
- 本質的には同じ「構造化と装飾」
- HTML/CSS ならではの強み

バイブコーダー向けポイント

「AI があるのに学ぶ必要ある？」という疑問に正面から答える
基礎知識が AI との協働を加速させることを理解する
HTML/CSS の役割分担を知り、AI への指示が的確になる
既存の知識（Word/Pages）との繋がりで学習ハードルを下げる

👉 Phase 0 の詳細を見る

Phase 1: HTML/CSS 基礎編 🎨

目標：静的なレイアウトでドキュメントを作成できるようになる（Word/Pages と同等レベル）

学習内容

HTML の基本構造とセマンティックタグ
- 見出し（h1-h6）
- 段落（p）
- リスト（ul, ol, li）
- 画像（img）
- リンク（a）
- テーブル（table）
- コンテナ要素（div, span）
- セクション要素（header, main, footer, article, section）
CSS の基礎
- セレクタの基本（要素、クラス、ID）
- ボックスモデル（margin, padding, border）
- テキストスタイリング（color, font-size, font-weight, line-height）
- 背景とカラー
- 基本的なレイアウト（display: block, inline, inline-block）

バイブコーダー向けポイント

Word/Pages でやってきたことを HTML/CSS で実現する方法
「見出し 2 つと段落 3 つの記事を作って」といった具体的な指示
生成されたコードで文書構造が正しく表現されているかの確認

👉 Phase 1 の詳細を見る

Phase 2: HTML/CSS 発展編 🚀

目標：インタラクティブで動的なレイアウトを作れるようになる

学習内容

HTML フォーム
- form, input, textarea, select などの要素
- さまざまな入力タイプ（text, email, password, checkbox, radio）
- HTML5 バリデーション属性
CSS レイアウト応用
- Flexbox（柔軟な 1 次元レイアウト）
- Grid（強力な 2 次元レイアウト）
- position（absolute, relative, fixed, sticky）
レスポンシブデザイン
- メディアクエリ
- モバイルファーストの考え方
- 可変的なサイズ指定（%, vh, vw, rem）
CSS アニメーション
- Transition（状態変化の滑らかな遷移）
- Animation（複雑なアニメーション）
- Transform（移動、回転、拡大縮小）

バイブコーダー向けポイント

「flexbox で 3 カラムレイアウトを作って」といった指示の出し方
レスポンシブ対応が正しく実装されているかの確認方法
アニメーションの滑らかさとパフォーマンスのバランス

👉 Phase 2 の詳細を見る

Phase 3: JavaScript 基礎編 - 言語の基礎 ⚡

目標：JavaScript の文法と基本的な使い方を理解する

学習内容

JavaScript 基礎文法
- 変数（let, const, var）
- データ型（数値、文字列、真偽値、配列、オブジェクト）
- 演算子（算術、比較、論理）
- 条件分岐（if, else, switch）
- ループ（for, while, forEach）
- 関数の基本（関数宣言、関数式、アロー関数）
データ操作
- 配列の操作（map, filter, reduce）
- オブジェクトの操作
- 文字列の操作
基本的な DOM 操作
- 要素の取得（querySelector, getElementById）
- 要素の内容変更（textContent, innerHTML）
- 簡単なスタイル変更
- 基本的なイベント処理（onclick など）

バイブコーダー向けポイント

「配列から偶数だけを取り出す処理を書いて」といった指示例
AI が生成したループ処理の効率性チェック
まずは動くコードを得て、それを理解することから始める

👉 Phase 3 の詳細を見る

Phase 4: JavaScript 発展編 - 動的な Web ページ 🎮

目標：イベント処理や非同期処理を使った動的な機能を実装できる

学習内容

高度なイベント処理
- addEventListener による柔軟なイベント管理
- イベントオブジェクトの活用
- イベント委譲（delegation）
- イベントの伝播（bubbling, capturing）
フォーム操作とバリデーション
- フォームデータの取得と検証
- リアルタイムバリデーション
- 動的なフォーム要素の追加・削除
非同期処理と API 連携
- fetch API でのデータ取得
- Promise の理解と使い方
- async/await による非同期処理
- JSON データの扱い方
モダン JavaScript
- ES6+ の便利な機能（分割代入、スプレッド構文、テンプレートリテラル）
- モジュールシステム（import/export）
- エラーハンドリング（try/catch）

バイブコーダー向けポイント

「ボタンクリックで API からデータを取得して表示」といった機能の依頼方法
非同期処理でエラーハンドリングが適切に実装されているかの確認
fetch の使い方と、生成されたコードの安全性チェック

👉 Phase 4 の詳細を見る

Phase 5: CSS フレームワーク編 🎯

目標：効率的な開発のためのフレームワークを使いこなす

学習内容

Bootstrap
- グリッドシステム
- コンポーネント（ボタン、カード、ナビゲーション）
- レスポンシブユーティリティ
Tailwind CSS
- ユーティリティファーストの思想
- カスタマイズとテーマ設定
- レスポンシブデザインの実装

フレームワーク比較

それぞれの特徴と使い分け
プロジェクトに応じた選択基準
AI との組み合わせ方

バイブコーダー向けポイント

「Bootstrap で〇〇を作って」の指示例
フレームワークのクラス名を理解することの重要性
カスタマイズが必要な箇所の見極め方

👉 Phase 5 の詳細を見る

Phase 6: 統合プロジェクト 🚀

目標：AIと協働しながら、ゼロから本格的なWebアプリケーションを作り上げる

学習内容

Lesson 1: プロジェクトの要件定義
- AIと対話しながら要件を明確化
- ユーザーストーリーの作成
- 機能の優先順位付け
Lesson 2: 仕様書の作成
- データ構造の設計
- 画面構成の設計
- 技術仕様書の作成
Lesson 3: UIデザインとプロトタイプ
- ワイヤーフレームの作成
- Tailwind CSSでのUIコンポーネント設計
- 静的プロトタイプの作成
Lesson 4: 基本機能の実装
- タスクの追加・表示機能
- DOM操作での動的UI生成
Lesson 5: 機能の拡張
- 編集、フィルター、ソート、検索機能
Lesson 6: データ永続化とUI改善
- LocalStorageでのデータ永続化
- アニメーション、トースト通知
Lesson 7: 最終調整とリファクタリング
- コードの整理と最適化
- アクセシビリティ改善
Lesson 8: あなたのプロジェクトを始めよう
- 学んだパターンを応用
- オリジナルプロジェクトの開始

事例プロジェクト

カード型TODOアプリ（1000-1500行規模）

Phase 3のシンプルなTODOリストの進化版
カード形式UI、優先度、カテゴリ、締切日管理
フィルター、ソート、検索機能
LocalStorage永続化

バイブコーダー向けポイント

要件定義から実装までの開発プロセス全体を体験
AIとのブレインストーミングで機能を洗い出す方法
仕様書を基にAIに実装を依頼する方法
段階的な実装とテストの進め方
事例プロジェクトから自分のプロジェクトへの応用

👉 Phase 6 の詳細を見る

🗂️ プロジェクト構造

front-end/
├── README.md                    # このファイル（プロジェクト全体概要）
├── CLAUDE.md                    # プロジェクト固有のClaude指示
│
├── phase0-intro/                # Phase 0: はじめに
│   └── README.md               # AI時代のフロントエンド開発入門
│
├── phase1-html-css-basics/     # Phase 1: HTML/CSS基礎編
│   ├── README.md               # Phase 1の概要と学習ガイド
│   ├── lessons/                # レッスン教材
│   │   ├── 01-html-structure/
│   │   │   └── exercises/      # 演習問題
│   │   │       └── solutions/  # 解答例
│   │   ├── 02-semantic-html/
│   │   ├── 03-css-basics/
│   │   └── 04-text-styling/
│   └── projects/               # 実践プロジェクト
│
├── phase2-html-css-advanced/   # Phase 2: HTML/CSS発展編
│   ├── README.md
│   ├── lessons/
│   │   ├── 01-forms/
│   │   ├── 02-flexbox/
│   │   ├── 03-grid/
│   │   ├── 04-responsive/
│   │   └── 05-animations/
│   └── projects/
│
├── phase3-javascript-basics/   # Phase 3: JavaScript基礎編
│   ├── README.md
│   ├── lessons/
│   │   ├── 01-js-syntax/
│   │   ├── 02-data-types/
│   │   ├── 03-functions/
│   │   ├── 04-arrays-objects/
│   │   └── 05-basic-dom/
│   └── projects/
│
├── phase4-javascript-advanced/ # Phase 4: JavaScript発展編
│   ├── README.md
│   ├── lessons/
│   │   ├── 01-events/
│   │   ├── 02-forms-validation/
│   │   ├── 03-async/
│   │   └── 04-es6-plus/
│   └── projects/
│
├── phase5-frameworks/          # Phase 5: CSSフレームワーク編
│   ├── README.md
│   ├── bootstrap/
│   │   ├── lessons/
│   │   └── projects/
│   ├── tailwind/
│   │   ├── lessons/
│   │   └── projects/
│   └── comparison/             # フレームワーク比較
│
├── phase6-final-project/       # Phase 6: 統合プロジェクト
│   ├── README.md
│   ├── project-templates/      # プロジェクトテンプレート
│   └── examples/               # 完成例
│
└── resources/                  # 共通リソース
    ├── cheatsheets/            # チートシート
    ├── vibe-coding-tips/       # バイブコーディングTips
    └── tools/                  # 便利ツール紹介

🎨 各レッスンの構成

すべてのレッスンは以下の構成で統一されています：

学習目標：このレッスンで何を学ぶか
基礎知識：技術的な解説
コード例：実際に動くサンプル
バイブコーディング実践
- AI への指示例
- 生成されたコードの解説
- カスタマイズポイント
演習：自分で試す課題
チェックリスト：理解度確認

🚀 学習の進め方

推奨ステップ

各 Phase を順番に進める
- Phase 1 から順に学習することを推奨
- 前の Phase の理解が次の Phase の基礎になる
レッスン → 演習 → プロジェクト
- 各レッスンで基礎を学ぶ
- 演習で手を動かす
- プロジェクトで実践する
AI と一緒に学ぶ
- レッスンを読みながら、実際に AI に指示を出してみる
- 生成されたコードを観察し、理解を深める
- わからないことは AI に質問する

学習時間の目安

Phase 0（はじめに）：1-2 日
Phase 1（HTML/CSS 基礎）：1-2 週間
Phase 2（HTML/CSS 発展）：1-2 週間
Phase 3（JavaScript 基礎）：2-3 週間
Phase 4（JavaScript 発展）：2-3 週間
Phase 5（フレームワーク）：2-3 週間
Phase 6（統合プロジェクト）：2-4 週間

合計：約 3-4 ヶ月（自分のペースで進めよう！）

個人の経験や学習ペースによって変動します

💡 バイブコーダーへのアドバイス

AI を最大限活用するために

基礎を理解する
- 「何ができるか」を知ることで、AI への指示が具体的になる
- 生成されたコードの良し悪しが判断できる
試行錯誤を恐れない
- AI に指示して、結果を見て、修正する
- このサイクルが学習を加速させる
コードを読む習慣をつける
- 生成されたコードを必ず読む
- 「なぜこう書かれているか」を考える
小さく始めて、徐々に拡張
- 最初はシンプルな指示から
- 慣れてきたら複雑な要求にチャレンジ

🛠️ 開発環境

必要なもの

テキストエディタ：VS Code 推奨
- 拡張機能：Live Preview 推奨
ブラウザ：Chrome、Firefox、Safari など（開発者ツールが使える）
AI：Claude、ChatGPT、Copilot など

あると便利なもの

Git/GitHub：コード管理とポートフォリオ
ブラウザ拡張：開発者ツール、カラーピッカーなど
デザインツール：Figma（UI 設計用）

📅 今後の展開

現在のステータス

✅ プロジェクト計画策定
✅ Phase 1 教材作成
✅ Phase 2 教材作成
✅ Phase 3 教材作成
✅ Phase 4 教材作成
✅ Phase 5 教材作成
✅ Phase 6 教材作成

予定している追加コンテンツ

React/Vue.js などのフレームワーク編
バックエンド連携の基礎
デプロイとホスティング
パフォーマンス最適化
アクセシビリティ

🤝 コントリビューション

このプロジェクトは随時改善・拡張していきます。

フィードバック、改善提案、誤字脱字の指摘など、どんな貢献も歓迎です！

📝 ライセンス

このプロジェクトは教育目的で作成されています。

自由に学習・参照・改変してご活用ください。

Let's vibe and code! 🎉

AI と一緒に、楽しくフロントエンド開発を学んでいこう！

Name		Name	Last commit message	Last commit date
Latest commit History 52 Commits
phase0-intro		phase0-intro
phase1-html-css-basics		phase1-html-css-basics
phase2-html-css-advanced		phase2-html-css-advanced
phase3-javascript-basics		phase3-javascript-basics
phase4-javascript-advanced		phase4-javascript-advanced
phase5-css-frameworks		phase5-css-frameworks
phase6-integrated-project		phase6-integrated-project
slides		slides
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

バイブコーダーに贈るフロントエンド開発入門講座 🚀

📖 プロジェクト概要

🎯 このプロジェクトの目的

バイブコーダーが得られるもの

従来の教材との違い

📚 カリキュラム構成

Phase 0: はじめに - AI 時代のフロントエンド開発 🌟

学習内容

バイブコーダー向けポイント

Phase 1: HTML/CSS 基礎編 🎨

学習内容

バイブコーダー向けポイント

Phase 2: HTML/CSS 発展編 🚀

学習内容

バイブコーダー向けポイント

Phase 3: JavaScript 基礎編 - 言語の基礎 ⚡

学習内容

バイブコーダー向けポイント

Phase 4: JavaScript 発展編 - 動的な Web ページ 🎮

学習内容

バイブコーダー向けポイント

Phase 5: CSS フレームワーク編 🎯

学習内容

フレームワーク比較

バイブコーダー向けポイント

Phase 6: 統合プロジェクト 🚀

学習内容

事例プロジェクト

バイブコーダー向けポイント

🗂️ プロジェクト構造

🎨 各レッスンの構成

🚀 学習の進め方

推奨ステップ

学習時間の目安

💡 バイブコーダーへのアドバイス

AI を最大限活用するために

🛠️ 開発環境

必要なもの

あると便利なもの

📅 今後の展開

現在のステータス

予定している追加コンテンツ

🤝 コントリビューション

📝 ライセンス

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages