動的 Element 生成を実装するときの状況例を明文化する

手間の観察が必要だ

何べんも行ってきた作業だが、動的 Element 生成を実装するプログラムは、書いていてとても手間がかかる。
とてもしんどい。
その手間をテンプレートエンジンなどを、導入することで減らしたい。

仮にそのようなテンプレートエンジンを実装することにしたとする。
テンプレートエンジンを実装するにあたり、動的 Element 生成のプログラミングでは、実際にはどのような実装をしているか、よく観察する必要がある。
どのような実装をしていて、どのように手間なのかを理解するためだ。
どのように実装しているか、業務で行った作業をふりかえり観察してみよう。

作業をふりかえる

動的 Element を生成するために、クローン元にする Tag をあらかじめ HTML で非表示の Element の下にレンダリングした。
その Tag はHTML ページが初期表示されたときにすでに存在している。
変更不可能なグローバル変数的に、その Tag はいつでも参照できる状態にあることになる。

状態が変わって、動的に Element を生成することになったとする。
例えば、ドロップダウンリストを選択し、その選択内容にあわせて、何かを表示するような場合を想定している。
状態が変わることを、検知するためにイベントをハンドルする関数を登録する。
そのハンドルする関数内で次のようなことを行う。

まず動的生成を行った Element を全て削除する処理を実装した。
以降の処理で生成した Element を追加するにあたり、先にイベントが起きていて、Element が生成してあったら、それは一旦なかった状態にしなければならないからだ。

次にどのような状態になったかを確認する。
ある状態では、Element生成する必要があるが、ある状態では必要がないという、ビジネス的要件があった。
そのための確認だ。

確認した結果、Elementを生成しなければならない場合だったとする。
非表示の Element の下にある、クローン元の Element を、querySelector() か jQuery などで検索し取得する。
取得できた Element をクローンする。
クローンした Element へ、その Element 固有に与えなければならない情報や、id、class、属性などを指定する。
この Element を情報設定済 Element と呼ぶことにする。

今回の作業では、そのクローンした要素を、ページ中の1から数か所以上へ配置するようにしなければならなかった。
そのため、情報設定済 Element を配置先の数だけ、クローンする。

次に配置先の Element を特定する。これも querySelector() か jQuery などで検索し取得する。
取得した配置先 Element の child node へ、情報設定済 Element をさらにクローンして追加する。
これを1から数か所に対して行う。

最後に配置先へ、追加したことによって、さらに状態が変わるので、その状態を確認し、画面表示に反映させる。
例えば、Element の数を画面に何件と表示しているような場合だ。
もともと2件と表示していたものを、追加したことで、5件と書き直すようなことをする。

ここまでで動的 Element 生成で行った実装の一巡となる。
この一巡の実装を、個別の状態に対して、全部面倒をみるように実装しなければならないわけだ。

ふりかえりの整理

整理のために、ふりかえりの中で表れた作業を箇条書きに抜き出してみよう。

クローン元 Tag を非表示で準備
イベントハンドリング設定
生成済み Element を全削除
クローン元非表示 Tag 取得
取得 Tag をクローン
クローン済み Tag へ情報設定。それを情報設定済 Element とする
配置先 Element を取得
情報設定済 Element をクローン
クローンした情報設定済 Element を配置先 Element へ追加
追加完了後の状態を画面へ反映

整理を省察する

さて私の状況で手間を減らすために、テンプレートエンジンを実装するとしたときに、箇条書きにあげた事項を、端的記述で表現して指定できることが、テンプレートエンジンに求められるわけだ。
そのような記述を設計し、処理できる仕組みを考えることは大変な仕事だ。