DOTLOG

JavascriptでHTMLをテンプレート化して文字置換する方法

どうもタニです。

今回は、JavascriptでHTMLをテンプレート化して、特定の文字部分だけを置換する方法を紹介していきます。
素のJSだけでやろうと思ったのですが、素晴らしい記事があったので、「mustache.js」というJavascriptのフレームワークを使います。

mustache.jsについてはこちら

シンプル故に機能はほとんどないのですが、JS側でやればいい話なのでこれで充分かと思います。

本家サイトだけ見ても使い方がよくわからなかったので、下記のソースを参考にしてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>test</title>

    <!-- CDNで読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

    <!-- jQueryも一応読み込み -->
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  </head>
  <body>
    <!-- 以下ロジックを記載 -->
    <script>
      $(function () {
        // ダミーデータ
        var data = {
          "items": [
            {"name": "テスト1", "price": 200},
            {"name": "テスト2", "price": 10000}
          ]
        };

        // 出力したいテンプレート
        var template = `{{#items}}
<li>
  <p>{{name}}</p>
  <p>{{price}}円</p>
</li>
{{/items}}`;

        // Mustache.js実行
        var html = Mustache.render(template, data);

        // DOM操作
        $('#target').html(html);
      });
    </script>


    <!-- ulタグにhtmlが表示される -->
    <ul id="target"></ul>
  </body>
</html>

{{element_name}}と中括弧2つを囲むことで値が置換されるようになります。

上記ページにアクセスすると

<ul id="target"><li>
  <p>テスト1</p>
  <p>200円</p>
</li>
<li>
  <p>テスト2</p>
  <p>10000円</p>
</li>
</ul>

こんな感じで表示されます。

素のHTMLとJSでやりましたが、PHPやRubyなど様々な言語に簡単に組み込めるのがいいみたいです。
dataのところは、JSONを読み込んで処理するなど、適宜変えてください!

他のJSフレームワークでも同じことができるようなので、また試したときに記事にしたいと思います。
できれば、VueなりReactなりでできればな、といった感じです。

gulpでpug(旧jade)のHTML変換時に組み込みできるとベストなのでそちらも試してみようと思います。

COMMENTS

About Me

プロフィール画像

タニユウキと申します。27歳の道産子です。犬、ゲーム、お酒、食べること、旅行大好きです。飲み友募集中です。

元フリーランス。現在は、札幌のWeb制作会社にフロントエンドエンジニアとして勤務してます。

当サイトでは、Web制作全般(バックエンドも)、フリーランスなどいろいろなノウハウだったり知識だったりを書いてます。

お問い合わせはこちら

Latest Posts

Popular Posts

TOP