https://www.trygroup.co.jp/js/digima-renderer-v1.js

1// 概要: 共通要素をレンダリングするためのスクリプト。用途に応じたHTMLタグを配置することによって動作する。
2// 使用方法: headタグで本スクリプトを読み込む。
3//    <script src="/js/digima-renderer-v1.js" defer></script>
4// TIPS 動的ページの場合:
5//    動的ページなどでレンダリングが初回以降に発生する場合、レンダリング完了後に `window.renderDigimaTag();` を実行する。これは冪等性があるため複数回実行してよい。
6
7window.renderDigimaTag = () => {
8  try {
9    // -------- メソッド定義ここから --------
10    const methods = { // { [key: string]: (element: Element) => void }
11      // 概要: [data-digima="render"]のinnerHTMLに値を適用する。
12      // 使用例: <span data-digima="render" data-digima-key="reception-time"></span>
13      render: (element) => {
14        const htmlCodes = { // { [key: string]: string | (element: Element) => string }
15          "reception-time": "9:00～23:00",
16          "reception-time-note": "土日・祝日も受付しております",
17          // "header": () => "<header>ヘッダー</header>", // TODO: 将来的にはヘッダーも生成できるようにしていきたい。
18        };
19
20        // 指定されたkeyに対応する値をinnerHTMLに適用する。
21        const key = element.dataset.digimaKey
22        if (key in htmlCodes) {
23          const isFunction = typeof htmlCodes[key] === "function"
24          element.innerHTML = isFunction ? htmlCodes[key](element) : htmlCodes[key];
25
26          element.dataset.digimaRendered = "true";
27        }
28      },
29    }
30
31    const main = () => {
32      // data-digimaが付いていて、data-digima-renderedが付いていない(=適用されていない)要素を返却する。
33      const elements = document.querySelectorAll("[data-digima]:not([data-digima-rendered])");
34
35      elements.forEach(element => {
36        const type = element.dataset.digima
37        if (type in methods) {
38          methods[type](element);
39        }
40      });
41    }
42    // -------- メソッド定義ここまで --------
43
44    main();
45  }
46  catch(e) {
47    console.error("[digima internal error]", e)
48  }
49}
50
51document.addEventListener('DOMContentLoaded', () => {
52  window.renderDigimaTag()
53})