では、もっとシンプルにつくってみましょう！
「リアクティブなテキスト入力コンポーネントとデータ」src on GitHub
リアクティブなフレームワークのいいところは、利用者との接点とデータ構造を切り離して考えられること。ただし、フレームワークが重いとその構造に作り方が制限されるのが面倒です。
まずはシンプルにテキスト入力コンポーネントとデータをProxyを使って、相互反映するようにしてみました。
下記のプログラム、テキスト入力コンポーネントのidとしてt1を指定しているだけで、単純にデータを変更しているだけですが、テキスト入力に1秒後反映されます。
window.onload = async () => { // 入力コンポーネントt1とリアクティブな関係なデータ const data = createReactiveData("name", t1); // 代入するとinputに反映される (data → input) data.name = "初期データ"; // 1秒後、データを変更 (data → input) await sleep(1000); data.name = "1秒後の変更"; };
逆に、テキスト入力で変更したものもデータに反映されます。（3秒置きにチェックしてdivタグへ反映）
// 3秒置きにデータを表示 (input → data) await sleep(1000); data.name = "編集してみて！"; for (;;) { await sleep(3000); // データも変わってることが確認できる view.textContent = data.name; }
おもしろいですね！
プログラム全文はこちらです。リアクティブを実現する要はProxyクラス。set関数が値の変更時に呼ばれるので、テキスト入力コンポーネントへも反映させています。（昔用語(?)で言う、フック）
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <script type="module"> import { sleep } from "https://js.sabae.cc/sleep.js"; const createReactiveData = (name, inp) => { const data = {}; // inputが変更されたらデータに反映 inp.onchange = inp.onkeyup = () => { data[name] = inp.value; }; // dataが変更されたことをProxyを使って検知してinputに反映 const proxy = new Proxy(data, { set(target, prop, val) { target[prop] = val; if (prop == name) { inp.value = val; } return true; } }); return proxy; }; window.onload = async () => { // 入力コンポーネントt1とリアクティブな関係なデータ const data = createReactiveData("name", t1); // 代入するとinputに反映される (data → input) data.name = "初期データ"; // 1秒後、データを変更 (data → input) await sleep(1000); data.name = "1秒後の変更"; // 3秒置きにデータを表示 (input → data) await sleep(1000); data.name = "編集してみて！"; for (;;) { await sleep(3000); // データも変わってることが確認できる view.textContent = data.name; } }; </script> </head> <body> <h1>リアルティブなテキスト入力テスト</h1> <input type=text id=t1> <div id=view></div> </body> </html>
チェックボックスや、ボタン、タブの反映などなど、いろいろと拡張し、ハイフン付きの独自HTMLタグの実現法、WebComponentsと組み合わせると React.js や Vue.js のようなものが作成できるわけです。
最強のフレームワークづくり、チャレンジしてみるのも楽しいですね！
中学生のお兄さんのプログラムを見せてもらう小学4年生。
— Hana道場 (@hanadojo_sabae) March 10, 2021
これってJavaScript？ぼくもやりたい。とのこと👍
すでにJavaScript知ってました😅#Hana部活 pic.twitter.com/5LqBYO66HS
IchigoJamでプログラミングをはじめて、現在JavaScriptでバリバリ作品作りしている中学1年生。小学4年生が興味津々とのこと！ 34年経っても楽しすぎる、プログラミングの世界へようこそ〜
Fri Night
