状態管理とデータバインディングについて　22-24日目　2024/10/28-30（お金持ちまでの道のり）

2024/10/31

本日は、状態管理とデータバインディングについて勉強します！

初めての人はお金持ちまでの道のり：０日目をまず読んでみてください！よろしくお願いします★

状態管理とデータバインディングとは？

1. 状態管理とは？

状態管理は、アプリの中で変わるデータ（状態）を管理する仕組みのことです。
たとえば、「りんごの数」がどんどん変わるときに、「今、りんごが何個あるか」をアプリ内で記憶することを「状態管理」といいます。

  • りんごが1つ増えるたびに「状態」が変わります。
  • 状態管理がしっかりしていると、データが変わるたびにその新しいデータをアプリが覚えてくれます。
2. データバインディングとは？

データバインディングは、データと画面表示をつなげる仕組みです。
つまり、状態管理で管理された「りんごの数」が変わったら、データバインディングのおかげで画面の表示も自動で変わります。

  • 「りんごの数」という状態が変わると、それが画面にもすぐに反映されます。
  • データバインディングのおかげで、プログラムが自動で画面を更新するので、手動で書き換える必要がありません。
状態管理とデータバインディングの違い
  • 状態管理：データを「覚える・管理する」部分。
  • データバインディング：そのデータが変わったときに、画面も「自動で更新」される部分。

この2つが一緒に働くことで、アプリはスムーズに動きます。

おさらい
Reactの特徴
  • パーツを組み合わせる：Reactでは、画面の小さなパーツ（ボタンや入力欄など）を作り、それらを組み合わせて大きな画面を作っていきます。作り方はレゴブロックで何かを作るイメージです。
  • JavaScriptをたくさん使う：Reactは、画面のレイアウトをJavaScriptという言葉でたくさん書きます。なので、JavaScriptが好きな人に向いています。
  • イベントを自分でしっかり管理：たとえば、ボタンを押したときの動きなどを、自分でしっかり書いていきます。
Vue.jsの特徴
  • 簡単に始められる：Vue.jsは、Reactに比べて初めての人でも使いやすい作りになっています。少しの設定で動き出せるので、初心者に優しいです。
  • データと画面を簡単につなげる：Vue.jsには、データと画面を自動でつなげてくれる仕組みが組み込まれているので、データが変わると画面も自動で変わります。
  • HTML・CSSと一緒に書ける：Vue.jsは、HTMLやCSSも一緒に書けるので、見た目を作るのがわかりやすいです。

Reactの状態管理

useStateフック： Reactでは、useStateフックを使ってコンポーネント内の状態を定義します。状態を変更すると、コンポーネントが再描画され、UIが更新されます。
※コンポーネントは、画面の部品を作るためのまとまりです。ボタンやフォームなど、一つ一つのパーツをコンポーネントとして作っておくと、他の場所でも使い回せて便利です。

import React, { useState } from 'react';

function Counter() { // ここから全てのコードが「Counter」というコンポーネント
  const [count, setCount] = useState(0); // 状態を宣言

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

コードの詳しい解説

このコードは「カウンター」といって、ボタンを押すと数字が1つずつ増えていく仕組みを作っています。カウンターがどう動いているか、部分ごとに説明します。

  1. import React, { useState } from 'react';
    • 最初のimport React, { useState } from 'react';は「React」というツールと、その中のuseStateという便利な機能を使うための準備です。これで、Reactの仕組みを使ってカウンターを作れるようになります。
    • 名称変更不可：ReactとuseStateはReactの組み込み機能であり、名前を変えることはできません。
  2. function Counter() { ... }
    • function Counter() { ... }は「Counter」という名前のカウンターを作るための「設計図」です。この設計図の中で、カウンターの仕組みや見た目を決めます。
    • 名称変更可：Counterはユーザーが自由に変更可能です。
  3. const [count, setCount] = useState(0);
    • constは、「この入れ物（変数）に一度だけ名前をつけて、その名前は変えられないよ！」というルールをつける言葉です。
    • setCountはcountの数字を変えるためのスイッチです。ボタンを押したときにsetCountを使って、countに新しい数字を入れます。
    • useStateは、Reactで変わるデータ（状態）を管理するための機能です。ボタンを押すと数字が増えるなど、データが変わるたびに画面を自動で更新する仕組みを作れます。
    • 名称変更可：countとsetCountはユーザーが自由に名前を付けられますが、useStateは名称変更不可の組み込みです。
  4. return ( ... )
    • returnの中には、このコンポーネントがレンダリング（表示）する内容が含まれています。<div>タグ内にカウンターの値とボタンを配置しています。（returnの中に、実際に画面に見えるものを配置している）
    • 名称変更不可：returnはJavaScriptのキーワードで、名称変更不可です。
  5. <p>Count: {count}</p>
    • ここではcountの現在の値を表示しています。{}内に変数を記述することで、JSX(JavaScript XML)内でその値が展開されます。（※JSX:JavaScriptの中にHTMLみたいな見た目のコードを書くための仕組み）
    • 名称変更可：countは上記で定義した変数のため、変更可能ですが、<p>や{}は名称変更不可のHTMLタグやJSX構文です。
  6. <button onClick={() => setCount(count + 1)}>Increment</button>
    • <button>タグはボタンの要素です。onClickはボタンがクリックされた時に実行されるイベントハンドラです。ここでは無名関数() => setCount(count + 1)がonClickに設定されています。
    • この関数は、ボタンをクリックするたびにsetCount(count + 1)が実行され、countの値が1ずつ増加します。
    • 名称変更不可：onClickは組み込みのイベントプロパティで変更不可ですが、countやsetCountは上記で説明したように自由に変更可能です。


まとめ
このコードは、画面に「Count: 数字」が表示され、その下に「Increment（増やす）」ボタンが出ます。このボタンを押すとcountが1増え、数字が変わります。ReactとuseStateを使うことで、数字が変わったら自動で画面が更新される仕組みになっています。

Vue.jsの状態管理

Vue.jsでは、コンポーネントの状態を管理するためにdataオプションを使います。dataオプションは、コンポーネントのデータ（状態）を定義し、コンポーネント内で動的に利用できるようにします。状態が変わると、それに応じて画面も自動で更新されます。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0, // 初期値
    };
  },
  methods: {
    increment() {
      this.count += 1; // countの値を1増やす
    },
  },
};
</script>

コードの詳しい解説

このコードの機能は、reactの状態管理でやったコードと同じです。

1. data()

  • dataは、Vue.jsコンポーネントの状態（データ）を管理するために使います。このdataオプションは、関数として定義し、オブジェクトを返す形で書きます。戻されたオブジェクトがコンポーネントの状態として使われます。
  • この例では、countという状態が定義され、初期値は0です。
  • 名称変更不可：dataはVue.jsで状態を管理するための決まり文句です。この名前は変えられませんが、countの部分は自由に変えられます。


2. methods

  • methodsは、コンポーネント内で使える関数を定義するためのオプションです。この例では、incrementという関数を作成し、countの値を1ずつ増やしています。
  • this.countと書くことで、このコンポーネントのcountにアクセスして更新することができます。
  • 名称変更不可：methodsはVue.jsの定義のため、変更できませんが、incrementという関数名は自由に変えられます。


3. <template>...</template>

  • <template>タグの中に、画面に表示されるHTML要素が書かれています。
  • <p>Count: {{ count }}</p>で、現在のcountの値を表示します。{{ count }}はVue.jsのテンプレート構文で、countの値がここに表示されます。
  • <button @click="increment">Increment</button>はボタン要素で、クリックされるとincrement関数が呼び出され、countが増えます。
  • 名称変更不可：<template>, <p>, <button>などのHTMLタグや、@clickディレクティブはVue.jsの構文のため、名称を変更することはできません。


4. Vue.jsのリアクティブな仕組み

  • Vue.jsでは、dataで定義した変数はリアクティブ（反応的）であり、countが変更されると、自動的に画面も更新されます。
機能の比較（ReactとVue.jsの状態管理）
  1. 状態の管理
    • React：useStateフックを使って、countという状態とsetCountという更新関数を管理します。
    • Vue.js：dataオプションでcountを状態として定義し、this.countを使って状態を更新します。
  2. ボタンのクリックで数値を増やす
    • React：onClickイベントでsetCount(count + 1)を呼び出して、カウントを増やします。
    • Vue.js：@clickディレクティブでincrementメソッドを呼び出し、countを増やします。
  3. 画面の自動更新
    • React：useStateによって状態が変わると、Reactが自動で再描画（再レンダリング）します。
    • Vue.js：Vue.jsもリアクティブシステムによって、countが変わると画面が自動で更新されます。
主な違い
  • 状態の定義方法：ReactはuseStateを使い、Vue.jsはdataオプションを使います。
  • イベントの設定方法：ReactではonClick、Vue.jsでは@clickを使います。

これらの違いはありますが、機能としては同じ「ボタンを押すと数字が1ずつ増えるカウンター」を作っています。

Vue.jsのcomputedプロパティ

computedプロパティは、Vue.jsでデータを自動的に計算するための仕組みです。あるデータに基づいて別のデータを作りたいときに使います。例えば、countの2倍の値を表示したいときに便利です。
※Vue.jsのcomputedプロパティは組み込みのプロパティであり、名称変更はできません。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2; // countの2倍を計算
    },
  },
  methods: {
    increment() {
      this.count += 1;
    },
  },
};
</script>

この例では、countが1増えるたびに、doubleCount（2倍の数）も自動で計算されて表示されます。
・count：ボタンを押すたびに1ずつ増える数。<p>Count: {{ count }}</p>で表示されています。
・doubleCount：countの2倍の数を計算して表示します。<p>Double Count: {{ doubleCount }}</p>で表示されています。

Vue.jsのcomputedプロパティは、Excelのセル参照に近い使い方ができます。一度computedで計算した値（たとえばdoubleCount）を作っておけば、他の場所で使いたいときにdoubleCountと書くだけで、自動で計算してくれますし、countが変わったときだけ再計算してくれるのです。

たとえば、count * 2という計算をそのまま書いた場合、countが変わるたびにVue.jsは画面を更新するときに毎回この計算を実行します。Vue.jsのcomputedプロパティを使えば、一度計算した結果を覚えておき、countが変わったときだけ再計算します。これにより、無駄な計算を減らして効率的になるのです。（プログラムが何度も計算することを避けられるという意味）

ReactでもuseMemoを使えば、Vue.jsのcomputedプロパティと同じようなことができる。ReactではuseMemoフックや関数を使う必要があるため、Vue.jsのcomputedに比べて少しコードが増える。計算やデータの再利用が多いプロジェクトではVue.jsが便利。

Reactのデータバインディング

ReactはJSX内で直接データを埋め込みます。入力フォームでのデータ管理にはvalueプロパティとイベントハンドラを使います。（※イベントハンドラとは、ボタンを押したり、画面をクリックしたときに何かが起こるようにする仕組みです→イベントハンドラは、まるでスイッチみたいなものです。スイッチを押すと電気がつくように、「ボタンを押したらこうしてね！」という動きをプログラムが覚えてくれます）

import React, { useState } from 'react';

function TextInput() {
  const [message, setMessage] = useState('');

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type something"
      />
      <p>Message: {message}</p>
    </div>
  );
}
  1. import React, { useState } from 'react';
    • Reactと、useStateという機能を使うための準備です。
    • Reactは、Facebookが開発した、ユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。
    • useStateは、Reactで「状態」を管理するための機能（フック）です。
    • 名称変更不可：ReactやuseStateはReactの組み込みのため、名前を変えることはできません。
  2. function TextInput() { ... }
    • TextInputというコンポーネント（部品）を作っています。ここで書いたものが画面に表示される内容になります。
    • 名称変更可：TextInputは自分で自由に名前を変えられます。
  3. const [message, setMessage] = useState('');
    • ここでmessageという状態（変わるデータ）と、状態を変えるためのsetMessageという関数を宣言しています。最初は空っぽの文字列（''）がmessageにセットされます。
    • 名称変更可：messageとsetMessageは自由に名前を変えられますが、useStateは組み込みのため変更不可です。
  4. <input ... />
    • ここでは、ユーザーが文字を入力できるテキストボックスを作っています。
    • type="text"でテキスト入力用に設定し、value={message}でmessageの値を表示しています。
    • onChangeイベントハンドラ：ユーザーが文字を入力するたびにonChangeが動き、(e) => setMessage(e.target.value)が実行されて、messageの値がリアルタイムで更新されます。ここでいうe.target.valueは、テキストボックスに入力された文字を表しています。
    • 名称変更不可：type, value, onChange, placeholderなどはHTMLやReactで決まったもののため、名前を変えることはできません。
  5. <p>Message: {message}</p>
    • ここでmessageの内容を表示しています。{message}と書くことで、messageの値がそのまま表示されます。
    • ユーザーがテキストボックスに文字を入力すると、messageも更新され、その内容がここにリアルタイムで反映されます。
    • 名称変更不可：<p>や{}は構文として変更できませんが、messageの部分は変更可能です。

このコードの働き

  1. ユーザーがテキストボックスに文字を入力すると、messageにその文字が保存されます。
  2. messageが変わるたびに、画面に表示される「Message: ...」の部分もリアルタイムで更新されます。

Vue.jsのデータバインディング

Vue.jsはテンプレートエンジンを使っており、{{変数名}}と書くだけでHTMLにデータが表示されます。v-bindやv-modelディレクティブもバインディングに使え、v-modelはフォーム入力とデータを双方向にバインドする際に便利です。

<template>
  <input v-model="message" placeholder="Type something"/>
  <p>Message: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>
コードの詳しい解説
  1. <template>
    • ここに、画面に表示されるHTMLの内容を記述します。
      ※Vue.jsの<template>部分は、HTMLでいう<body>の部分に相当します。
  2. <input v-model="message" placeholder="Type something"/>
    • <input>は、ユーザーが文字を入力できるテキストボックスです。
    • v-model="message"：双方向データバインディングを使っています。入力した内容がmessageに自動で保存され、messageが変わると入力ボックスにもすぐに反映されます。
    • placeholder="Type something"：テキストボックスに「Type something」という薄い文字を表示し、ユーザーが何か入力できることを示します。
  3. <p>Message: {{ message }}</p>
    • <p>タグの中でmessageの内容を表示しています。
    • {{ message }}：Vue.jsのテンプレート構文を使い、messageの値がリアルタイムで表示されるようにしています。
      ※一重の中括弧（{}）だとJavaScriptのオブジェクトや配列に使う表記と区別がつきにくくなってしまうため、Vue.jsでは二重中括弧を使って特別な「Vueのデータですよ！」と示しています
  4. <script>
    • Vue.jsのデータやメソッドなど、アプリの動作部分を記述します。
  5. data()
    • Vue.jsのデータ管理のためのオプションです。この例ではmessageというデータを定義しており、最初は空（''）です。
    • message：ユーザーが入力した文字がリアルタイムで保存される場所です。v-modelでmessageにデータをバインド（つなげる）しているので、入力が変わるとmessageも自動で更新されます。
このコードの働き
  1. ユーザーがテキストボックスに文字を入力すると、messageにその文字が保存されます。
  2. messageが変わると、<p>Message: {{ message }}</p>の部分が自動で更新され、入力内容がリアルタイムで表示されます。


このように、Vue.jsのv-modelを使うことで、テキストボックスと表示されるメッセージが簡単に連動するようになっています。

働きの比較
  1. Reactのコード：
    • useStateでmessageの状態を管理し、onChangeイベントでユーザーが入力した文字をmessageに保存しました。
    • ReactではonChangeイベントとuseStateを使って、入力内容と表示を連動させました。
  2. Vue.jsのコード：
    • v-modelを使ってmessageを直接データバインディングしています。
    • v-modelにより、ユーザーが入力した文字が自動でmessageに保存され、リアルタイムで画面に反映されます。
簡単な違い
  • React：useStateとonChangeで入力内容と表示を連動させます。
  • Vue.js：v-modelだけで自動的に入力内容と表示が連動します。


結果として、どちらも「テキストボックスに入力した内容が下にリアルタイムで表示される」という同じ動作をしていますが、Vue.jsはv-modelでより簡単にデータバインディングを実現している点が特徴です。

ユーザーインタラクション（捕捉）

ユーザーインタラクションとは、ユーザーがウェブページやアプリを使って何か操作したときに、その操作に応じて画面が変化する仕組みのことです。たとえば、ボタンを押したり、入力ボックスに文字を入力したりすることが「ユーザーインタラクション」にあたります。

よくあるユーザーインタラクションの例
  1. ボタンをクリックする
    • たとえば「いいね！」ボタンを押すと、ボタンが青くなり、カウントが増えるなど。
    • ReactやVue.jsでは、ボタンのクリックに応じて状態が変わる処理を書きます。
  2. 文字を入力する
    • ユーザーが入力した内容がすぐに画面に反映されるようにしたり、入力内容によってエラー表示が出るようにしたりするのもユーザーインタラクションです。
  3. マウスを重ねる
    • リンクにマウスを重ねたときに文字が強調されたり、画像が大きく表示されたりすることもインタラクションの一つです。
  4. スクロールする
    • ページをスクロールすると新しいコンテンツが読み込まれたり、スクロールの位置によってアニメーションが動いたりすることもユーザーインタラクションに含まれます。
ReactとVue.jsでのユーザーインタラクション
  • Reactでは、ボタンのクリックなどにonClickのようなイベントハンドラを設定して、ユーザーが操作したときに特定の関数が動くようにします。
  • Vue.jsでは、@clickや@inputなどのイベントディレクティブを使って、ユーザーの操作に反応します。
まとめ

ユーザーインタラクションは、ユーザーが何か操作をしたときに、それに応じて画面が変わる仕組みです。これがあることで、ウェブサイトやアプリが動的に感じられ、使いやすくなります。

１～４のイベント処理をReactとVue.jsそれぞれで簡単に紹介

① ボタンをクリックする

  • React：onClick
<button onClick={() => console.log("ボタンがクリックされました")}>クリック</button>
  • Vue.js：@click
<button @click="() => console.log('ボタンがクリックされました')">クリック</button>

② 文字を入力する

  • React：onChange
<input type="text" onChange={(e) => console.log("入力:", e.target.value)} />
  • Vue.js：@input（※v-modelを使って双方向にデータを結びつけることも可）
<input type="text" @input="(e) => console.log('入力:', e.target.value)" />
<input v-model="message" /> <p>{{ message }}</p>

③ マウスを重ねる

  • React：onMouseEnterまたはonMouseOver
<div onMouseEnter={() => console.log("マウスが重なりました")}>ここにマウスを重ねてください</div>
  • Vue.js：@mouseenterまたは@mouseover
<div @mouseenter="() => console.log('マウスが重なりました')">ここにマウスを重ねてください</div>

④ スクロールする

  • React：onScroll
<div onScroll={() => console.log("スクロール中です")}>スクロールしてください</div>
  • Vue.js：@scroll
<div @scroll="() => console.log('スクロール中です')">スクロールしてください</div>

追加のポイント（捕捉）

1. イベントハンドラの概要

ReactとVue.jsのどちらも、**ユーザーの操作（イベント）**に対して画面の動きを設定するための仕組みを持っています。

2. 補足ポイント

  • イベントの追加方法：
    • React：onClickやonChangeなどのイベント名をキャメルケース（onClickなど）で指定します。イベントに関数を渡し、その関数がユーザーの操作に反応して実行されます。
    • Vue.js：v-onディレクティブを使いますが、@記号で省略して書くこともできます。例えば、@clickや@inputのように設定します。
  • 複数イベントの処理：
    • React：複数のイベントを使いたい場合は、異なるイベントハンドラをコンポーネント内で別々に設定します。
    • Vue.js：methodsオプション内に複数のメソッドを定義し、それぞれのイベントに対して@イベント名="メソッド名"と設定することで簡単に処理できます。

3. 条件付きイベント（イベントの有効化・無効化）

どちらも、条件に応じてイベントの動作をコントロールすることが可能です。たとえば、ボタンがクリックできる条件を状態に応じて変えたい場合、以下のように設定します。

  • React：disabled属性に状態を条件として指定し、onClickイベントもその条件に応じて実行するか判断します。
  • Vue.js：ボタンにdisabledや@clickを条件に応じて設定できます。
簡潔さ重視か、柔軟性重視か
  • React：柔軟なJavaScript関数を使って複雑な処理を行いやすく、条件分岐や複数のイベントを組み合わせた使い方も容易です。
  • Vue.js：イベントハンドラが簡潔で、初心者にも分かりやすいです。双方向データバインディングが強力で、特にリアルタイムでデータを更新する場合に便利です。

本日の感想

コードを１００％理解しながら学習している訳ではないので知識の消化不良を起こしてしまっている状態です。でもAIはこの学習を勧めているので、その通りにどんどん進めたいと思います。この学習のゴールにいる自分を想像できないまま突き進んでいるので不安ですが、AIの言うとおりに学習したらどうなるかという実験も兼ねているので、このまま全力で突き進みます。

21日目の記事はこちら
React、Vue.jsについて　21日目　2024/10/27（お金持ちまでの道のり）

25-26日目の記事はこちら
SPA（Single Page Application）について　25-26日目　2024/10/31-11/1（お金持ちまでの道のり）

ここに初めて来た人はゼヒ０日目を読んでください。プログラミング知識０のおじさんがお金持ちになるまでのプランと熱い思いが載っています。私と一緒に運要素を排除したゴリゴリの脳筋プレイでお金持ちを目指しませんか？

０日目の記事はこちら
お金持ちまでの道のり：０日目

コードの読み方が全く分からないという方は以下の記事がオススメです。コードの読み方の説明が一番詳しく書かれてある記事です。

ToDoリストアプリの作成　12-15日目　2024/10/18-21（お金持ちまでの道のり）

コメント