WEB班6_06ワークショップ 再構築プロジェクト進行記録

🎯 プロジェクト概要（本質特化版）

目的: CSSホバーエフェクト + JavaScript DOM操作の習得 対象: HTML/CSS/JavaScript基礎学習済みの参加者 形式: ペアプログラミングワークショップ（2時間） 成果物: シンプルなタスク管理アプリ

👥 関係者の役割

🎓 私（指導責任者）

• ワークショップ全体設計
• 2時間で完成できる適切な規模の設定
• CSS ホバーエフェクト とJavaScript DOM操作 の効果的な教授

👨‍🎓 参加者（学習者）

事前学習済み:

• HTML基礎、CSS基礎、JavaScript基礎
• DOM操作の初歩

今回の学習目標:

• ✅ CSS ホバーエフェクト（:hover, transition）
• ✅ JavaScript DOM操作（要素取得、イベント、進捗更新）

🤖 AI（設計支援）

• シンプルで教育効果の高いコード作成
• 適切な規模での技術資料提供

📝 修正履歴・学んだこと

第1〜3回の問題

• ❌ 機能が多すぎる（メンバー管理、スキル表示、学習記録、設定など）
• ❌ コードが大きすぎる（HTML 200行、CSS 500行、JS 300行）
• ❌ 学習の焦点が散漫

第4回（今回）の方針

本質に特化:

• ✅ 機能を「タスク管理」のみに絞る
• ✅ CSS: ホバーエフェクトに集中（不要なアニメーション削除）
• ✅ JavaScript: DOM操作基本に集中（過度なエフェクト削除）
• ✅ 2時間で確実に習得できる範囲

🎯 本質特化後の構成

Phase 1 (40分): HTML構造 + 基本CSS

• タスクリストの基本レイアウト
• シンプルなカード型デザイン

Phase 2 (40分): CSS ホバーエフェクト

• :hover セレクタ
• transition プロパティ
• 実用的な装飾

Phase 3 (40分): JavaScript DOM操作

• 要素の取得
• イベントリスナー
• 進捗バー更新

次のステップ: シンプル版完成形コード作成