2021-03-10
#js 
JavaScriptでのwebアプリづくりで人気のフレームワーク Vue.jsReact.js。 よりシンプルにUIとの相互反映を実現する「Alpine」が使っていた「Observable Membrane」は、データの変更をチェックできるJavaScriptの標準機能、Proxyがあれば不要と判明。 「Alpine_es」を依存モジュールなしのスッキリシンプルな実装に変更できました。

では、もっとシンプルにつくってみましょう!
リアクティブなテキスト入力コンポーネントとデータ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 のようなものが作成できるわけです。

最強のフレームワークづくり、チャレンジしてみるのも楽しいですね!


IchigoJamでプログラミングをはじめて、現在JavaScriptでバリバリ作品作りしている中学1年生。小学4年生が興味津々とのこと! 34年経っても楽しすぎる、プログラミングの世界へようこそ〜

links
- 100円のコンピューターの実力に驚きの声、ミニマムなドラクエ風の作り方、鯖江の小学校プログラミングより

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS