JSの反応性

こんにちは！これは私にとって初めてのストーリーで、とても興奮しています:))。

このストーリーでは、JavaScript の単純な反応性について説明し、その実装方法を示します。ReactとVue はどちらも、リアクティブ性を利用するフレームワークの例です。反応性を使用すると、データに変更が加えられると DOM が自動的に更新されます。

まず、リアクティビティ実装の簡単な例を試してみましょう。

<body>
    <div id="counter-value"></div>
    <button onclick="incr()"> incr </button>
    <button onclick="decr()"> decr </button>
</body>

<script>

    let counter = 0


    const setCounterValueToDOM = () => {
        document.querySelector('#counter-value').innerText = counter
    }

    setCounterValueToDOM()

    const incr = () => {
        counter += 1
        setCounterValueToDOM()
    }

    const decr = () => {
        counter -= 1;
        setCounterValueToDOM()
    }

</script>

setCounterValueToDOMただし、このアプローチは、値が更新されるたびに関数を呼び出す必要があり、悪い習慣であると考えられるため、推奨されません。

JavaScript で反応性を最初から実装するには、 Proxyオブジェクトを使用できます。コンストラクターは、オブジェクトの初期値とハンドラーを受け取ります。このハンドラーを使用すると、オブジェクトに発生するすべての変更を監視できます。コードのスクリプト セクションを書き直してみましょう。

const counterHandler = {
    set(obj, prop, value) {
        obj[prop] = value
        setCounterValueToDOM()
        return obj
    }
}

const counter = new Proxy(
    {
        value: 0,
    },
    counterHandler,
)


const setCounterValueToDOM = () => {
    document.querySelector('#counter-value').innerText = counter.value
}
setCounterValueToDOM()


const incr = () => {
    counter.value += 1
}

const decr = () => {
    counter.value -= 1
}

楽しんでいただければ幸いです。