JavascriptでHTMLをテンプレート化して文字置換する方法|ブログ|ウェブスタジオTANIWorksNewsBlogfrontendbackendtoolsothersRecruitContact検索TOPfrontendJavascriptでHTMLをテンプレート化して文字置換する方法2018.01.152019.04.17Javascriptmustache.jsどうもユーキです。今回は、JavascriptでHTMLをテンプレート化して、特定の文字部分だけを置換する方法を紹介していきます。素のJSだけでやろうと思ったのですが、素晴らしい記事があったので、「mustache.js」というJavascriptのフレームワークを使います。mustache.jsについてはこちらシンプル故に機能はほとんどないのですが、JS側でやればいい話なのでこれで充分かと思います。本家サイトだけ見ても使い方がよくわからなかったので、下記のソースを参考にしてください。</body></html>{{element_name}}と中括弧2つを囲むことで値が置換されるようになります。<p>10000円</p></li></ul>こんな感じで表示されます。素のHTMLとJSでやりましたが、PHPやRubyなど様々な言語に簡単に組み込めるのがいいみたいです。dataのところは、JSONを読み込んで処理するなど、適宜変えてください!他のJSフレームワークでも同じことができるようなので、また試したときに記事にしたいと思います。できれば、VueなりReactなりでできればな、といった感じです。gulpでpug(旧jade)のHTML変換時に組み込みできるとベストなのでそちらも試してみようと思います。Meユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。その他日々気になったこと、思ったことも書いてます。お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。ウェブスタジオTANITOP。