JavaScriptのテンプレートエンジンを作ってみる

1 · 2019/03/05(火) 00:50:27.87

よ？

1 · 2019/03/25(月) 21:40:09.75

HTMLはやめるってHTML内にif else forとかの独自属性をごてごて埋め込むことかな？
id属性とか{{name}}でHTML内のタグの位置を特定するのだけは必要だと思う
そうじゃないとjQueryみたいにセレクタを使うことになるから

1 · 2019/03/26(火) 23:37:48.08

今日は試しにWebComponentsぽい機能を作ってみる

index.html(HTML)
https://pastebin.com/zgk87cxy

config.xml(XML/XHTML)
https://pastebin.com/KuBEp3vm

test.js(JavaScript)
https://pastebin.com/8bnMsLF0

↓出力HTML
https://pastebin.com/UUet5Rw1
https://i.imgur.com/hm4txLj.png

1 · 2019/03/27(水) 00:42:38.58

ちょっと構想を書いてみる。

例えばログインのユーザー入力でエラーが生じたとき、よく赤字でエラーメッセージをだす。
そのときよくあるテンプレートエンジンではHTML内にifを埋め込んでいたりする。

// JS
var js = {
loginErrorName : true, // booleanがfalseのときはhtmlタグが消える
loginErrorPass : false
};

// HTML
<p id="loginError">
<div framework:if="js.loginErrorName" style="color:red;">※そのアカウント名は存在しません。</div>
<div framework:if="js.loginErrorPass" style="color:red;">※パスワードが間違っています</div>
</p>

↓上記を下記のようにクラスライブラリ化してみるか？

// JS
var loginError = new LoginError();
loginError.loginErrorName = true;
loginError.loginErrorPass = false;

// HTML
<p>{{ loginError }}</p>

これだとタグライブラリを作るのに近い感じになりそう。

1 · 2019/03/31(日) 13:51:59.56

要素の繰り返しが鬼門だな

1 · 2019/04/03(水) 18:11:43.84

考えた結果、作り直すことにした

Vueの単一ファイルコンポーネントみたいなのを作ろうかと構想してたけど
まずはもっと簡単にjQueryみたいなことをやってみるぞ

**デフォルトの名無しさん** · 2019/04/03(水) 19:10:41.45

jQueryのどこがテンプレートエンジンなんだ？
とっとと削除依頼出して回線切って首吊って死ねや

1 · 2019/04/04(木) 08:08:33.83

結局DOM操作したほうがいいじゃんと思って。

html内に埋め込まないテンプレートエンジンてこうだろ？↓
特に工夫することもないよね

HTML
https://pastebin.com/8hS3FZur

JS
https://pastebin.com/W5znAzjg

↓出力結果

HTML
https://pastebin.com/1DXTjD88

**デフォルトの名無しさん** · 2019/04/06(土) 23:26:17.28

やはりDOM操作系が一番だな
以下、繰り返しのサンプル

ＨＴＭＬ
https://pastebin.com/m1jG6UMf

ＪＳ
https://pastebin.com/BZ9daPTJ

↓出力結果
https://i.imgur.com/JL8ebLX.png

**デフォルトの名無しさん** · 2019/04/09(火) 07:01:20.81

>>9
全然違う

**デフォルトの名無しさん** · 2019/04/09(火) 10:49:18.75

テンプレートエンジンっていうのは、

テンプレート（雛形）とデータから生成物を
作ってくれる ”エンジン" で完成されたもの。

毎回専用のエンジン（？）を作らなければいけない>>16は
テンプレートエンジンではない。

テンプレートとデータから生成物を作るための
単なるJavaScriptコード

1 · 2019/04/09(火) 19:08:59.78

分かった。じゃあまたあとで書くが既存の名の知れたテンプレートエンジンを調査するところから始めてみよう

1 · 2019/04/09(火) 19:37:35.64

おそらく、jsにはデータだけを置いて、それをどのようにDOMに組み立てるのかを
テンプレート側(HTML)に全て置くのがテンプレートエンジンと言うことなのだろう

>>8はどういう意味なんだろう
HTMLテンプレート自体をjsonにしてしまうとか？
{ "html" : [ "head" : {}, "body" : { "div":"hello" } ] }

**デフォルトの名無しさん** · 2019/04/09(火) 20:33:21.80

テンプレートにロジックを置くのはアンチパターン。
じゃなきゃロジックレステンプレートなんて言葉は生まれない。
まあifやforくらいは許されてる感あるが…
なぜロジックフルが忌避されてるかって？
答え：PHP

1 · 2019/04/09(火) 23:50:46.70

例えばsetInterval()でstyle.opacityを更新して要素を点滅させるとか、ViewModelに関する一切をエンジンに任せ、
テンプレートには<div framework:blink="speed:0.8">greeting</div>とかエンジンが提供する属性を埋め込むのが
よくあるテンプレートエンジンの方向性だよね

**デフォルトの名無しさん** · 2019/04/10(水) 01:02:07.20

全然違う。それは「テンプレートエンジン」の仕事ではない。
じゃんけんのパーって、手のひら開いて極太ビーム出す必殺技だよね？と言っているに等しい。
トンチンカンにも程がある。

**デフォルトの名無しさん** · 2019/04/10(水) 12:10:44.96

用語がわかってないから、テンプレートエンジンを作るスタート地点にも立っていない。

「美味しいラーメン作るぞー」と言いながら、
「パラパラのご飯が重要なんですよ」って言ってる。

そして出来た後、皆に突っ込まれる。
「それラーメンじゃなくてチャーハンだろ！」って

それでもまだこう言うんだ。
「え？これいつも行くラーメン屋の一番人気メニューですよ？」と。
つまり素でチャーハンをラーメンだと勘違いしている。

>>22
お前は今、そんなレベルだよ

1 · 2019/04/10(水) 16:09:44.07

　　　　　　　　　　　　／）
　　　　　　　　　　　／／／）
　　　　　　　　　／,.=ﾞ''"／　　　
　　　／　　　　 i f　,.r='"-‐'つ＿＿＿_こまけぇこたぁいいんだよ！！
　　/　　　　　 /　　　_,.-‐'~／⌒　　⌒＼
　　　　／　　,i　　　,二ﾆ⊃（ ●）.　（●）＼
　　　/　　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼
　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|
　　　　　/　iﾄヾヽ_/ｨ"＼　　　 `ー'´ 　　／

1 · 2019/04/10(水) 16:21:31.25

入力テンプレートとJSからHTML画面を出力するのがテンプレートエンジンＤＡ！

1 · 2019/04/10(水) 16:48:39.76

>>16のサンプルはこういう書き方にしてもいいな
https://pastebin.com/UB2mDUgW

我ながら秀逸だわ