ES6 で HTMLElement の派生が作りたかった。

@ETROJAN

2016 OCT 20

背景

jQueryとか使わずにdivとかにhide()とか足したい。

▸ 例えば広告Tagを想定すると jQuery とかは媒体のJSで競合する可能性があり使えない。

▸ でもいちいち elm.style.display =‘none’ とかしてると気が遠くなる。

▸ そこで HTMLDivElement の派生(っぽい)事がやりたくなった。

ES5

ES5だと無理やりやれる。

▸ もともとClassが無いので、それっぽくはなる。

▸ ポイントは function の戻りで createElement した変数を返すところ。

俺は HTLMElement が派生出来るものだと思っていた。

ES6

ES6だとエラーが出る。

▸ なんか良さそうなんだけど super() でエラーが出る。

▸ 調べてみると。。。

HTMLElement インターフェイスは HTML 要素を表します．

MDN

インターフェイスだった!!

驚愕の事実。

HTMLElementはインターフェイスだった。

▸ と分かったところで。。。

▸ ES6には多重継承もインターフェイスも無いのである。

▸ 頑張ればなんとかなるかもしれないが無用に複雑化してしまっては本末転倒。

▸ 結局は jQuery っぽい実装になった。

JQUERY的実装

結局 new は諦める。

▸ クラスメソッドに createElement を作り、そこでdivのインスタンスを作って return するようにした。

▸ やってることは ES5 と同じ。

▸ new できなくなったり、インスタンスメソッドの実装が煩雑になったりしてるけど、致し方ない。

CHROMEだけなら

Custom Elements もある。

▸ Chromeには実装されてる。

▸ でも他は全滅。使えるとは言えない。

来年は TypeScript でライブラリ書こうかな。

@etrojan

来年は