Reactのスプレッド構文などの理解を深めたい

Question

前提

こちらの部分について、色々調べましたが、理解ができませんのでご教授いただけると幸いです。

const handleFormCheck = e => {
setForm({
...form,
[e.target.name]: e.target.checked
});
};

下記までは理解しました。
(相違しているかもしれませんが…)
処理を分解して記載します。

①「handleFormCheck」がinput属性のonChange属性により呼び出される。
②「e」にはonChange属性が動作して時の状態が保存されいる。
③setFormのステートフックスが動作しformを操作する。
以降が不明です。
...form　がスプレッド構文ということはなんとなくわかるのですが、スプレッド構文とはどんな動きをするのか、調べてもイマイチ分かりません。
[e.target.name]: e.target.checked　こちらに関しても、[]内は動的な〜〜と出てくるだけでよく分かりません。

詳しい方、分かりやすく解説して頂けると幸いです。

該当のソースコード

import { useState } from 'react';

export default function FormTextarea() {
 const [form, setForm] = useState({
 agreement:true
 });

const handleFormCheck = e => {
  setForm({
    ...form,
    [e.target.name]: e.target.checked
  });
};

 const show = () => {
  console.log(`同意確認:${form.agreement ? '同意': '反対'}`);
 };

 return (
  <form>
  <label htmlFor='agreement'>同意します:</label>
  <input id='agreement' name='agreement' type='checkbox'
  checked={form.agreement} 
  onChange={handleFormCheck} /><br />
  <button type='button' onClick={show}>送信</button>
  </form>
 );
}

試したこと

グーグル検索
YouTubeの動画視聴(ほぼ出てきませんでした。)
AIに質問

Answer 1

（１）まず、{...form}は、オブジェクトリテラルでのスプレッド構文です。（参照）

オブジェクトを表す{}の中で...form と書くことで、formオブジェクトのキー（プロパティ名）と値の組が展開されます。

{}の中に、カンマで区切って、他のプロパティ名:値の組を書くことも可能です。
またスプレッド構文を書くことも可能です。

展開した結果プロパティ名が重複する場合は、マージされ、値は上書きされます。

例:

let obj1 = { foo: "bar", x: 42 };
let obj2 = { ...obj1, y: 13 };  // obj1 のプロパティ名と値の組が展開される。
console.log(obj2);
>>> { foo: "bar", x: 42, y: 13 }  

let obj3 = {x: 50};
let obj4 = {...obj2, ...obj3};  // スプレッド構文を並べて書ける。それぞれのプロパティ名と値の組が展開される。
console.log(obj4);
>>> { foo: "bar", x: 50, y: 13 }  // 展開した結果、x が重複するのでマージされ、値は50になる。

　

（２）次に、[e.target.name]: e.target.checked の部分ですが、これは前半でプロパティ名を式で表現しているものです。（参照:計算プロパティ名）

たとえば、e.target.nameが「agreement」、
e.target.checked　が「false」ならば、
{[e.target.name]: e.target.checked}　は
{agreement : false} というオブジェクトとして評価されます。

なぜ[　]でプロパティ名を囲むかというと、そうしないと識別子であるプロパティ名にピリオドが含まれていると解釈されて、構文エラーになるからです。
（{'e.target.name': e.target.checked}と書けばエラーにはなりませんが、これだとプロパティ名が単なる「e.target.name」という文字列になってしまい、式として評価されません）

　
（３）スプレッド構文を使うと、使われた元のオブジェクトのプロパティ名が、新しいオブジェクトにコピーされます。

---

（１）～（３）を念頭に置いて元のコードを追ってみます。

 const [form, setForm] = useState({
 agreement:true
 });

ここで、form オブジェクトの初期値として、　{agreement: true}がセットされています。
同時にformのステート変更用の関数の名前として、setFormが設定されます。

  <input id='agreement' name='agreement' type='checkbox'
  checked={form.agreement} 
  onChange={handleFormCheck} /><br />

チェックボックスの動作・外観を定義している部分です。
checked つまりチェック状態を form オブジェクトの agreement プロパティに紐付け、チェックボックスをクリックした時のハンドラを handleFormCheck 関数に設定しています。

　

const handleFormCheck = e => {
  setForm({
    ...form,
    [e.target.name]: e.target.checked
  });
};

チェックボックスをクリックするとこの部分が実行されます（前述 onChange={handleFormCheck} ）。

チェックボックスのname属性が「agreement」となっているので、クリックしたときに e.target.name は「agreement」と評価されます。
また、 e.target.checked はクリックされた後のチェック状態（チェックが入ればtrue、外されればfalse）になります。

仮に、チェックボックスにチェックが入っている状態でクリックしたと仮定しましょう。
このとき、このコードの部分は下記のように評価されます。

setForm({
   ...form,
   agreement: false  // チェックが外されたのでfalseになる。
  })

そして、form は もともとagreement というプロパティを持っているので、

setForm({
   agreement: true,
   agreement: false
  })

となり、重複しているプロパティ名 agreement がマージされて、その値は false に上書きされます。

setForm({
   agreement: false
  })

結局、setFormには、{agreement:false} という新しいオブジェクトが渡されることになります。

この結果、useState に設定していた form という名前のオブジェクトの状態変化が React によって検知され、コンポーネントが再レンダリングされることになります。
再レンダリングの結果、 checked={form.agreement} なので、 checked=false 、つまりチェックが外れた状態で描画されます。

ここで、スプレッド構文を使わず下記のようにすればよいと思われるかもしれません。

const handleFormCheck = e => {
    form.agreement = e.target.checked;
    setForm(form);
};

しかし、この場合、formオブジェクトを直接変更しているため変更が検知されず、再レンダリングされません。
参照：https://ja.react.dev/learn/updating-objects-in-state

---

「１つのチェックボックスを切り替えるだけなのになんでこんなめんどくさいことをやってるのだろう」と思われるかもしれません。
たしかに元のコードでは、計算プロパティ名を使わずとも、送信時にチェックボックスの状態を調べれば十分な気もします。
下記のようなコードだと計算プロパティ名の便利さが少しだけわかるかもしれません。

import { useState } from 'react';

export default function FormTextarea() {
 const [form, setForm] = useState({
 agreement:true, concent:true
 });

const handleFormCheck = e => {
  setForm({
    ...form,
   [e.target.name]: e.target.checked
  });
};

 const show = () => {
  console.log(`同意確認:${form.agreement ? '同意': '反対'}`);
 };

 return (
  <form>
  <label htmlFor='agreement'>同意項目:</label>
  <input id='agreement' name='agreement' type='checkbox'
  checked={form.agreement} 
  onChange={handleFormCheck} /><br />
  <p> （同意しているか？ {form.agreement ? '同意している': '反対している'}）</p>

  <label htmlFor=''>納得感:</label>

  <input id='concent' name='concent' type='checkbox'
  checked={form.concent} 
  onChange={handleFormCheck} /><br />
  <p> （納得しているか？ {form.concent ? '納得している': '不服である。'}）</p>
  <button type='button' onClick={show}>送信</button>
  </form>
 );
}

この例では、「同意」に加えて「納得」のチェックボックスを追加しています。それぞれ、agreementとconcent という名前を指定しており
各チェックボックスをクリックした結果が、そのチェック状況に応じて表示されます。
handleFormCheck 関数の中身は質問から変えていません。
計算プロパティ名によって自動的にどのチェックボックスがチェックされたのかを判別しています。

（スプレッド構文を使うことの有用性に着目するならば、公式のこの例の方がもっとわかりやすいと思います）

Comments

[KAI]

とても分かりやすかったです。
ありがとうございます。