EcmaScript6（javascript）の勉強の件で、DOMの記載に関して考えてみた。以前のjavascriptではjQueryなどのライブラリを使ってDOMを簡潔に記載していたが、EC6以降も豊富なライブラリを使う機会が増えているような感じ。
しかし、折角なので、ここはライブラリを使用せずに素のEC6でDOMを分かりやすく記述出来ないものかと考えてみた。通常、素のjavascriptでDOMを記載するときは、例えばBODYタグから下を全てDOMで記述する場合
const body = document.querySelector("body"); // まずBODYタグを見つける
var title = document.createElement("h1"); // タイトル用のH1タグを生成
title.innerHtml = "page title"; // タイトル文字を設定
body.appendChild(title); // タイトルをBODYの子要素とする
var content = document.createElement("p"); // 本文段落用タグを生成
content.innerHTML = "page content"; // 本文を設定
body.appendChild(content); // 本文をBODYの子要素とする
の様に、既存のタグを見つけるか、新規タグを生成して内容を設定し、親要素に接続する作業を繰り返して文書構造を組み立てていく形になるが、階層が深くなると何が何だか分からなくなってしまう。そのあたりをjQueryでは文書構造に沿った形で記述出来て便利なのだが、”＄”関数の数珠つなぎとなりなんだか違う言語のような気がして、個人的には好きにはなれなかった。そこでEC6ではライブラリを一切用いずに次のように記載してみた。
((body) => { // bodyを引数とした矢印関数①
body.className='hogehoge';
body.appendChild(((title) => { // bodyタグへのappendChildを同様に矢印関数で記述②
title.innerHtml = "page title";
return title;
})(document.createElement('h1')));
body.appendChild(((content) => { // 同様に本文ダグも矢印関数で生成と同時にappendChild
content.innerHtml = "page content";
return content;
})(document.createElement('p')));
return body; // ①関数の戻り値（これが無いと結果が空になる）
})(document.querySelector('body')) // ①関数の引数として body = document.querySelector('body')
同様の内容を文書構造を意識した記載方法にしてみた。矢印関数を用いてタグを生成（またはquery）し、タグの内容を関数内で記載。子要素も矢印関数内で新たに矢印関数で生成したタグをその場でappendChildする。
かなり冗長な記述になるが、文書構造がHTMLに近い形で多少は見やすくなるのではと考える。
というか、そもそも文書全体をDOM化しようとするからイケないんですけどねｗ
あと、Lispかっ？！てくらい括弧がメチャメチャ多くなるので、エディタの力を借りないと括弧が一個違うとかでバグ探しも大変なことになりそう。。。vscodeさんありがとう！