Better Stimulusガイド 02: DOMステートを元に戻す（翻訳）

🔗 DOMステートを<template>でリストアする

こんなときに使いたい

• 使っている外部ライブラリがHTMLの一部を削除したときに復元する必要がある場合
• Turbolinksのキャッシュに備えて、ページ遷移の前に既知のステートにリストアしたい場合

Good

<!-- index.html -->
<div data-controller="modal">
  <template data-target="modal.template">
    <div>
      <a href="#" data-action="modal#show">Click Me</a>
      <div class="modal invisible" data-target="modal.modal">
        <h1>A Modal</h1>
        <a href="#" data-action="modal#hide">Hide Me</a>
      </div>
    </div>
  </template>
</div>

// modal_controller.js
import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["template", "modal"];

  connect() {
    this.element.insertAdjacentHTML("beforeend", this.templateTarget.innerHTML);
  }

  show(e) {
    e.preventDefault();

    // これは外部のshowメソッド（BootstrapやSemanticUIなど）の代用
    this.modalTarget.classList.remove("invisible");
    this.modalTarget.classList.add("visible");
  }

  hide(e) {
    e.preventDefault();

    // これは外部のhideメソッド（ページのモーダルHTMLを削除する）の代用品
    this.element.removeChild(this.element.lastElementChild);

    this.element.insertAdjacentHTML("beforeend", this.templateTarget.innerHTML);
  }
}

そうする理由

ページ遷移の前や、何らかの操作がトリガーされた直後に、DOMを既知のステートにリセットする必要が生じることがあります。例として、モーダルダイアログを閉じると一部のHTMLを削除する外部ライブラリ（UIでSemanticUIやBootstrapなど）を使う場合があります。

さらに、Turbolinksを使っている場合は、ページ遷移する直前に現在のステートをキャッシュしてリストア時にプレビュー表示できるので便利です。

そうしない理由があるとすれば

DOM操作、特にCSSクラスを切り替えるときに1個の要素だけを扱うのであれば、上の方法よりもっと簡単にHTMLを復元する方法は確かにあります。しかしHTMLを広範囲に置き換える必要がある場合は、いつでも上の方法が利用できます。

参考資料

• Animations with Turbolinks and Stimulus - DEV Community

Codesandboxのサンプル

関連記事

Better Stimulusガイド:アーキテクチャ（1）アプリケーションコントローラ（翻訳）

Better Stimulusガイド:アーキテクチャ2: コントローラはコンフィグ可能にしよう（翻訳）