HTMLプログラミングをがんばっていきます

今日もHTMLでプログラミングをしていくぞ

やっほ。みんなおはようございます。今日も "HTML" プログラミングをやっていきます。え？HTMLはプログラミング言語じゃないって？細かいことはいいんだよ。どう考えてもプログラミング言語でしょう。

<template>: コンテンツテンプレート要素 - HTML: HyperText Markup Language | MDN
はい、ここをみてて思ったんですけど、HTMLはJavaScriptで生成されるものだから実質プログラミング言語なのではという暴論のもとHTMLはプログラミング言語であるという主張をしていきたいんですけどいかがでしょう。個人的に「HTML⊂JavaScript」みたいな論調で戦っていきたい（誰と？）。

「いいと思うよ。」
「そうだね。HTMLは実質JavaScriptだ。」

みんなありがとう。

おわり

さて、そんな茶番はさておきまして今日はHTMLネタでも語っていきます。最近HTMLについて語ってなかったしね。なんか喋りたくなったのです。んで、ウェブコンポーネントの機能の一つtemplate要素を見ていきます。

とりあえずFizzBuzzをつくってみる。こんな感じに使えるそうです。

<!-- 挿入元 -->
<ol></ol>

<!-- テンプレート -->
<template id="myId">
  <li></li>
</template>

<!-- 挿入するデータ -->
<script>
if("content" in document.createElement("template")){
// templateの取得
  const template = document.querySelector("#myId");
// 追加するタグの処理
  const ol = document.querySelector("ol");
  let clone = document.importNode(template.content, true);
  let li = clone.querySelector("li");
  li.textContent = "追加した文字";
  ol.appendChild(clone);  
  
}else{
	console.log('こちらの要素はつかえません');
}
</script>

実際にコード書くとこんな感じ。ちょっとしたテンプレートとして使うならよさげな気がするけどあんまりでかいものに使おうとするんだったら素直にJSX使った方がいい気もしなくもない。

おわり

おわりに

こんな論調でエントリ書いたけど僕は平和主義者なので争う気はないです。どうしても争いたいって場合はテンプレートエンジンを絡めた場合での話とかTeXなどの組版システムの話を絡めたり、チューリング完全だとかそういう話をベースに僕のいないところで殴り合ってください。