ウェブ開発において、ページの特定のセクションを動的に更新する必要がしばしばあります。JavaScriptを使用してこのような動的な置き換えを行う方法を見ていきましょう。

テンプレートを使用する利点

HTML5の<template>タグは、クライアントサイドでのレンダリングを待機させることなく、マークアップを準備できる強力なツールです。このタグ内に配置された内容は、ページの読み込み時にはレンダリングされませんが、JavaScriptを使用して必要な時にインスタンス化し、ページに挿入することができます。

JavaScriptによる動的置き換え

ステップ 1: テンプレートの準備

まず、置き換えたい内容を<template>タグ内に定義します。各テンプレートには一意のdata-id属性を付与して識別します。

  <template class="goreinu-template" data-id="uniqueId">
  <!-- ここに置き換えたい内容を入れます -->
</template>

ステップ 2: 置き換え対象の要素をマーク

次に、置き換えたい要素にclass="goreinu-inplace"と特定のdata-idを設定します。

<div class="goreinu-inplace" data-id="uniqueId"></div>

ステップ 3: JavaScriptでの置き換え処理

ウィンドウがロードされたり、リサイズされたりしたときに置き換えを実行するための関数を定義します。この関数は、data-id属性を使ってテンプレートと置き換え対象の要素を関連付け、内容を置き換えます。

(function () {
  let templates = {}; // テンプレートのキャッシュ
  
  let replaceContent = function () {
    document.querySelectorAll(".goreinu-inplace").forEach((inplace) => {
      let dataId = inplace.getAttribute('data-id');
      if (!templates[dataId]) {
        let tmpl = document.querySelector('.goreinu-template[data-id="' + dataId + '"]');
        templates[dataId] = document.importNode(tmpl.content, true);
      }
      inplace.replaceWith(templates[dataId].cloneNode(true));
    });
  };
  window.addEventListener('load', replaceContent);
  window.addEventListener('resize', replaceContent);
  })();

このコードは、ページのロード時とウィンドウのリサイズ時に、指定されたdata-idを持つ要素を対応するテンプレートの内容で置き換えます。

まとめ

この方法を使えば、ページの特定の部分を効率的に動的に更新することができます。テンプレートのキャッシュを活用することで、パフォーマンスを向上させることが可能です。ウェブアプリケーションのユーザーインターフェイスをよりインタラクティブに、そして反応的にするために、このテクニックをぜひ試してみてください。