Edited at

純粋なHTML5だけで、データバインディング"ぽい"ことをする


追記 (2019/03/11)

<output>タグがすごい」と勘違いしてる記事です。特に下の例は、<output>でなくても動きます。「Named access on the Window object(詳細: @rryu さんコメント)」を知らなかったがために勝手にシンプルに書けるとと勘違いしてしまってます。

(コメントで、@yuta0801 さん、 @rryu さんに教えていただきました。 )


見つけたこと

<output>タグという存在を初めて知り、ピュアなHTMLだけで、ちょっとしたデータバインディングぽいことが可能だとわかったので、メモです。(追記:特に<output>タグに限った話でないことがわかりました。) (ぽいってだけでデータバインディングとは呼べないかもしれません。)

でも、ちょっと初めて知ってDOMとかいじらずに簡単に使えそうなので、紹介します。

HTML5から<output>タグっていうのがあったみたいです。(全然知りませんでした)


MDNの例を引用します。以下のように、oninput=属性のJavaScriptが評価されるみたいです。


See the Pen
例セクション
by Ryo Ota (@nwtgck)
on CodePen.


例えば、以下のように自分で作った関数(myLogic())などを書くこともできるので、汎用性はある程度あると思います。以下の例では入力文字を逆にします。

output-tag-demo

<form oninput="x.value = myLogic(my_text.value)">

<input id="my_text">
<output id="x"></output>
</form>

<script>
function myLogic(text){
return text.split("").reverse().join("");
}
</script>


See the Pen
&lt;output&rt; example
by Ryo Ota (@nwtgck)
on CodePen.

<output>タグのメリットは、シンプルで、document.getElementOooo()系のメソッドやライブラリとか使わずに、Angular/React/Vueみたいなことを、HTML5標準の機能でできるところだと思います。 (追記: <output>タグの力ではなくoninput属性と「Named access on the Window object」を使った方法です(@yuta0801 さん @rryu さんに教えてもらいました )。) すばやく何か単純なものを作りたいときに役立ちそうです。

上記の例ではシンプルにするために、for=属性などを書かずに使っています。ちゃんと書くには、https://developer.mozilla.org/ja/docs/Web/HTML/Element/output が参考になると思います。