かすみん日記

暇なときに何か喋ります

フロントエンドで完結するテンプレートエンジンを作った？【JavaScript】

JavaScript

テンプレート言語は便利だけど、いちいちサーバーでレンダリングしないと使えないのがアレ。

もちろん、サーバー側で動的にHTMLを作るからこそ意味があるのだが、APIでデータ（今日の天気とか？）を取ってきて表示をif文で分岐させる、みたいな使い方ならフロント側だけで十分だなと思った。

というわけで、フロントエンドで完結するテンプレートエンジンを作った。

と言っても、変数定義と変数展開の機能しか実装していないので、ただのおもちゃです。 if文も無いよ。

フロントではJavaScriptしか動かないので、それで作りました。

ソースコード：

github.com

使い方

nyaa.jsを読み込む：

<script src="./nyaa.js"></script>

読み込んだHTML内で、変数の定義と展開ができる：

<!-- 変数定義 -->
{% assign nyaa = にゃあ！ %}

<!-- 変数展開 -->
{{ nyaa }}

その他の機能は皆無です。

例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./nyaa.js"></script>
  <title>テストにゃ</title>
</head>
<body>
  {% assign hello = 'こんちわ！' %}
  {% assign good_night = "おやすみ" %}
  {% assign url = https://google.com %}
  {% assign nyaa = にゃあ %}
  <h1>テスト</h1>
  <p>ほげ</p>
  <p>にゃあ</p>
  <p>{{ hello }}</p>
  <p>{{ hello }}で始まり{{ good_night }}で終わる。</p>
  <p>{{ good }}</p>
  <p><a href="{{ url }}">Google</a>です。</p>
</body>
</html>