一方向データバインディングがHTMLのみで実装できる「outputタグ」の使い方

一方向データバインディングといえば、Reactを思い浮かべるかもしれない。Reactを用いたSPA開発において、入力した内容がディスプレイに反映するシーンは一般的といえる。入力によるイベントを検知したら、入力内容でstateを上書きして、再レンダリングされる。

この実装においても、さほど難しいことはないのだが、入力内容の状態管理を必要としないならば、HTMLベースで代替することができる。

このエントリーでは、データバインディングっぽいことができる「outputタグ」を紹介したい。

outputタグとは

HTMLのoutputタグは、フォーム関連要素の操作した結果を表示する。数値入力における計算結果やレンジ操作値を反映を前提としているため、JavaScriptが有効でなければならない。無効の場合は、outputタグ内の内容が表示される。

outputタグを使ってみる

formタグのinputイベントハンドラで、inputタグのvalue値をoutputタグのvalue値に代入する式を実行している。つまり入力した内容が、outputタグに表示される。

前述では、outputタグは計算結果を表示するHTML要素である述べたが、文字列型がエラーになるということはないようだ。

計算結果というのは、数値の計算を意味するものなのか、レンダリングにおける計算処理の結果という意味なのか定かではない。

しかし文字列も表示できるため、Reactのバインディングのようにインタラクティブな使い方もできなくはない。

まとめ

データバインディングっぽいことができる「outputタグ」を紹介だった。HTMLの記述のみで実現はしているが、決してHTMLだけでシームレスに反映しているわけではない。ちゃんとJavaScriptも用いていることがわかる。

そしてそもそもデータバインディングとも違うのだけれど、それっぽいインタラクティブなUIにすることは、できるかもしれない。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。