変数の更新イベントが簡単に扱えるVue

変数の更新イベントが簡単に扱えるVue

Vue のフレームワークでは、変数の更新を検出して表示する内容を更新しています。この変数の更新検出の仕組みはフレームワークやプログラミング言語によって違う場合があります。この記事は変数の更新のイベントに関する仕組みについて更新しています。

変数の更新の考え方

最初に、結論を書いてしまうと、Vue のフレームワークの場合には、変数の更新の取り決めはシンプルです。 変数の値が変更されると、変更を Vue の変数を管理している仕組みが見つけて、表示を自動的に更新してくれます。 これも、Vue が初心者に向いている理由です。

当たり前のような機能ですが、この仕組みはフレームワークやプログラミング言語で微妙に違います。 例えば、Vue と並んでよく利用されているフレームワーク React では少し事情が違います。

これが「イミュータブル(immutable)」と「ミュータブル（mutable）」の違いによるものです。

配列の例がわかりやすい！

この辺りは、わかりにくい分野の一つです。 配列（array）を使った例がわかりやすいので、紹介します。

配列は、同じ「形」のデータを複数まとめて保持できる変数の型です。Web 開発で利用されている Javascript でも「array」という形で活用できます。

Javascript では、変数を宣言する際に幾つかの書き方がありますが、その中で「const」という書き方をよく使います。

const a = [];

const b = 7;

の様に書きます。

「const」というのは、「定数（constant）」という意味です。この場合、この「定数」を宣言した時に、値を設定してその後の変更ができないという決まりになっています。

ここで、この後に記述を追加して、配列(array)「a」に「８」を追加する「a.push(1)」という操作をすると、配列「a」に「1」が追加されます。さらに追加された「a[0]」に「10」をセットするために「a[0] = 10」を実行すると、値は変更されて「10」になります。 一方で、「b = 8」という操作をやろうとするとエラーになります。エラーになる理由は簡単で、「定数」の値を変更しようとしたのでエラーになっています。

const a = [];

const b = 7;

a.push(1);

console.log(a);

a[0] = 10;

console.log(a);

b ＝８;

Ract の場合は、この配列の要素の更新は、更新として検出されません。 一方で Vue の場合には、この配列の要素の更新も更新として検出されて、この配列のデータを表示に利用している場合には、更新されたデータが表示されます。

C 言語を学習している人にはわかりやすい！

上の配列の例は、なんか変な感じがしますよね？ 「a」は、「const」で宣言しているにも関わらず更新ができて、「b」の場合はエラーになってしまいます。

実は、この原因は「変数（定数）」のプログラミング言語での扱い方が違うことにあります。「b」の場合は、変数は値を差していて、「a」の場合は、値はポインタ（リファレンス）になっています。

これでも、わかりにくいので、例えれば、「b」の場合は、「容器の中身」のことで、「a」は「容器」と考えるとわかりやすくなります。

「b」の場合は「中身＝値」なので値が変わると「b」が更新された事になります。しかし、「a」の場合には、差しているのは「容器」であって、容器は同じで、中身だけを入れ替えているので、値を入れ替えても容器（ポインタ・リファレンス）は変わっていないので、「更新」したとは見做されないという事になります。

C 言語では、この「中身（値）」と「容器（ポインタ）」を明確に区別しているので C 言語を学習している場合には、この話は比較的理解されやすくなっています。

ところが、最近の言語は、明示的に区別していないものが多いので、混乱の原因になっています。

現在では、Web 開発やアプリの開発では、C 言語よりも、他の言語（Javascript や Python など）が使われる機会が増えていて、C 言語の用途は別の分野に特化される傾向が強くなっています。そのため、こうした事例を理解する機会が少なくなっていると言えます。大学など、プログラミングの基本をきちんと学ぶために、あえて C 言語などを最初に学習する場合がありますが、それはこうした基本的なコンセプトをきちんと理解するためには、その方が都合が良いと考えられているためです。

最初から、Javascript や Python などを学習した場合、即利用できるというメリットはありますが、こうした基本的なコンセプトを理解する機会はあまりなくなるという不利な一面もあります。

React と Vue の違いは？

React も Vue もプログラミングの部分ではどちらも Javascript をベースに作られています。 そういう意味では同じように思えますが、変数の状態の管理のやり方が違います。 React は、配列や JSON オブジェクトなどの中身の変更は更新として検出することはできませんが、Vue は配列や JSON オブジェクトなどの変更も検出する事が可能です。

その結果何が違うかというと、Vue の場合は、状態を管理している変数の更新についてプログラマー側は余り意識する必要がないという事です。逆に言うと、React の場合は、注意が必要と言えます。

この辺りは、初心者でも Vue は扱いやすいと言われる理由の一つになっています。

では、React などを利用している場合にはどうすれば良いか気になりますよね？ ここでは、詳しい話は書きませんが簡単に言うと、まず、配列の「コピー」を作って、値を書き換えます。 つまり、「別の容器を用意して」まず全く同じデータを入れます。その上で必要なデータを更新して、元々の容器と入れ替えます。容器が入れ替わるので、更新されたことがわかるという仕組みです。

まとめ

フロントエンドのフレームワークは、見た目は同じ様ですが、実は微妙な違いがあります。 変数の更新をどのように見つけて表示を更新するのは React や Vue ではやり方が違っています。

Vue の場合は、プログラマが特別に意識する部分が少なくて良いように作られています。 一方で、React の場合は、プログラムで利用するデータの詳細をきちんと理解してプログラミングする必要があります。慣れてしまえば、特に難しい事ではありませんが、初心者には大きな違いになります。

Vue の場合は、ページ毎の変数の状態や、Pinia などで一括管理をする場合でも、特別意識しなければいけないことは少ないので初心者で、プログラムの詳細の仕組みを理解していなくても扱いやすくなっています。