jQuery Academy · レッスン

データによる動的コンテンツ生成

データ属性とjQueryを組み合わせてインタラクティブなコンポーネントを作成し、保存されたデータに基づいてUIを更新して、柔軟なコンテンツ表示を構築します。

「データによる動的コンテンツ生成」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

データを使った動的コンテンツ

レッスン2へようこそ！前のレッスンでは、HTML5のデータ属性を使ってデータを保存・取得する方法を学びました。

ここでは、さらに一歩進みます。これらの属性をjQueryと組み合わせて、Webページ上のコンテンツを動的に生成・更新する方法を学びます。これにより、UIをインタラクティブで柔軟なものにできます。

動的コンテンツを使う理由

商品一覧、ユーザープロフィール、ニュース記事の一覧があるとします。すべてをハードコードする代わりに、data-*属性を使って基本的なデータを定義できます。

既存の要素を新しい情報で更新する。
データに基づいてまったく新しい要素を作成する。
データを使ってUIの動作（表示・非表示など）を制御する。

この方法では、コンテンツのデータとその表示方法を分離できます。

既存の要素を更新する

まずはコンテンツの更新から始めましょう。data-*属性を持つ要素を用意し、jQueryでそのデータを読み取って、ページの別の部分に反映できます。

選択した項目の詳細を表示したり、ステータスメッセージを更新したりする場合に便利です。

コード：項目の詳細を更新する

ボタンをクリックして、ある要素のデータ属性で別の要素のテキストを更新する方法を確認してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

解説：コンテンツの更新

この例では、#productCardのdivにdata-product-nameとdata-product-priceが設定されています。

ボタンをクリックすると、.data('productName')と.data('productPrice')でこれらの値を取得します。
次に.text()を使って、取得した値を#displayedNameと#displayedPriceのspanに挿入します。

これは、ある要素からデータを読み取り、別の要素のコンテンツを更新する方法を示しています。

新しい要素を作成する

更新だけでなく、データ属性を使ってまったく新しいHTML要素を生成することもできます。リスト、ギャラリー、動的なフォームなどで特に威力を発揮します。

新しい要素のテンプレートのようなデータや設定をデータ属性に保存し、jQueryで要素を構築してDOMに挿入できます。

コード：リストに項目を追加する

下のボタンをクリックして、新しいリスト項目を動的に追加してみましょう。項目の内容は、ボタンのデータ属性から取得します。

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

解説：要素の作成

ここでは、ボタン#addBtnにdata-new-item-textとdata-new-item-valueが設定されています。

クリック時に、これらの値を取得します。
$('
')で新しいリスト項目の要素を作成します。
.text()で、結合したデータを要素に設定します。
最後に、$('#myList').append(newItem)でこの新しい
を順序なしリストに追加します。

これは、動的なリストやグリッドを構築するための基本的なパターンです。

データを使ったインタラクティブコンポーネント

データ属性はテキスト専用ではありません。インタラクティブなコンポーネントの設定も保存できます。たとえば、切り替える対象の要素や再生するアニメーションを指定できます。

これにより、JavaScriptのロジックをハードコードされたIDやクラスから切り離せるため、コードのモジュール性と再利用性が高まります。

問題：動的コンテンツ

次のHTMLとjQueryのコードについて考えてみましょう。

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

このコードの実行後、$('#infoBox').data('status')を使って取得したとき、data-status属性の新しい値は何になりますか。

まとめ：データを使った動的コンテンツ

よくできました！このレッスンでは、データ属性を活用して本当に動的なWebコンテンツを作成する方法を学びました。

データ属性を読み取り、その値を反映することで、既存の要素を更新できます。
別の要素のデータを使って、新しいHTML要素を動的に生成できます。
この方法ではデータと表示方法を分離できるため、UIの柔軟性とインタラクティブ性が高まります。

これで、より柔軟で魅力的なユーザーインターフェースを構築する準備ができました。

よくある質問

「データによる動的コンテンツ生成」レッスンは無料ですか？

はい。「データによる動的コンテンツ生成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「データによる動的コンテンツ生成」で何を学びますか？

データ属性とjQueryを組み合わせてインタラクティブなコンポーネントを作成し、保存されたデータに基づいてUIを更新して、柔軟なコンテンツ表示を構築します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「データによる動的コンテンツ生成」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る