Module 02

JavaScript基礎

課題に進む → 学ぶことを確認
ゴールカードを描画・更新できるシングルページをJSのみで実装
必須スキルDOM / イベント / 配列操作
納品物コード + 動作キャプチャ

✏️ 学ぶこと

動的UIの基礎

言語の基礎

  • 変数・スコープ・const/let
  • 関数宣言 / アロー関数
  • 配列・オブジェクト操作 (map/filter/reduce)

DOM & イベント

  • 要素の取得と生成 (querySelector / createElement)
  • クラス操作・属性操作
  • イベント委譲とフォーム入力処理

開発スキル

  • DevToolsでネットワーク/コンソール確認
  • デバッグ用ログとbreakpoint
  • モジュール化の基本 (ファイル分割)

📝 課題：プロフィールカード一覧

JavaScriptのみで実装

要件

  • カードを描画
  • 条件によってカードをフィルタリング
DOM操作 イベント 配列操作

必要ファイル

JavaScript基礎 (受講者用) 回答サンプル

🎯 完成イメージ / 制約

守るべきポイント

UI

  • カードはPC 3列 / SP 1列
  • 余白と影でカードを区切る
  • ボタンのhover/activeで状態を示す

実装

  • フレームワーク不使用、バニラJSのみ
  • イベント委譲を1箇所で行う
  • 配列操作を使用

品質

  • 定数/関数名は意図が分かる命名
  • 魔法の数字は定数化
  • 例外ケース（空配列・失敗時）をハンドリング

✅ セルフチェック

提出前に確認

機能

  • データ取得成功でカードが描画される
  • 条件によってカードをフィルタリング

コード

  • 関数は単一責務になっている
  • 重複処理はヘルパー関数化

理解

  • イベントバブリングと委譲の利点

🆘 詰まったら

質問テンプレ付き

デバッグ手順

  1. Console/Networkタブでエラーを確認
  2. エラー行を特定して入力値をログ出力
  3. 最小再現を作って原因を切り分け
  4. 公式ドキュメント/MDNを参照

質問するときに書くこと

  • やりたいこと
  • 現在の状況
  • エラー内容
  • 試したこと
  • わからない点

📚 参考

MDN & 学習サイト
MDN: JavaScript ガイド The Modern JavaScript Tutorial