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変換時に組み込みできるとベストなのでそちらも試してみようと思います。

About Me

プロフィール画像

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。

お問い合わせはこちら

ツイッターはこちら

ポートフォリオはこちら

Latest Posts

Popular Posts

TOP