mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、JavaScriptでmustacheを勉強します。
公式サイト
作成するファイル
- HTMLファイル:index.html
- JavaScriptファイル:render.js
参考サイトに倣いHTMLにmustache.jsを読み込んで使ってみます。コードは以下の通りです。
<!-- index.html --> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Mustacheの練習</title> </head> <body onload="renderHello()"> <!-- 表示部分 --> <div id="target">Loading...</div> <!-- テンプレート --> <script id="template" type="x-tmpl-mustache"> Hello {{ name }}! </script> <!-- mustache.jsの読み込み --> <script src="https://unpkg.com/mustache@latest"></script> <script src="render.js"></script> </body> </html>
/* render.js */ /* レンダリングとデータの指定 */ function renderHello() { var template = document.getElementById('template').innerHTML; var rendered = Mustache.render(template, { name: 'hoge' }); document.getElementById('target').innerHTML = rendered; }
ブラウザで表示を確認すると「Hello hoge!」と表示されるのが確認できると思います。特にエラーが出ていなければ問題ありません。
まとめ
JavaScriptでmustacheを試してみました。今回は、参考サイトのコードを実行して、ブラウザで表示できるのか確認しました。
