Portfolio

プロジェクト紹介 (Project Introduction) これは、JavaScriptのデータ(配列)を基に、Eラーニングサイトの「厳選おすすめ」セクションのコースカードを動的に生成・描画するUIモジュールのデモンストレーションです。

主な機能 (Key Features) データ駆動型のUI: 静的なHTMLとは分離されたJavaScriptのdata配列を元に、forループ処理でコンテンツ(<li>)を動的に生成します。

DOM操作: document.createElementで新しいHTML要素を作成し、appendChildでDOMツリーに追加する、基本的ながらも重要なDOM操作スキルを示します。

ES6テンプレートリテラル: テンプレートリテラル(``)を使用し、${data[i].title}のように動的な値を埋め込むことで、可読性の高いHTML文字列を効率的に構築しています。

API連携のシミュレーション: このdata配列は、実際にはAPIからJSON形式で取得されることを想定しており、非同期データを使ったフロントエンド構築の基礎を示しています。