はじめに
Reactでフォームを実装していると、以下のようなコードを見かけることがあります。
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};
この中の [name]: value という記法は、JavaScriptのComputed Property Names（計算プロパティ名） という機能です。角括弧を使うことで、オブジェクトのプロパティ名を動的に設定できます。
この記事では、Computed Property Namesの基本的な使い方から、Reactのフォーム処理での活用方法までを解説します。
想定読者
- JavaScriptの基本構文を理解している方
- Reactの基礎（useState、イベントハンドラ）を学習中の方
- フォーム処理のコードをより効率的に書きたい方
Computed Property Namesとは
Computed Property Namesは、ES6（ES2015）で導入された機能で、オブジェクトのプロパティ名を変数や式から動的に生成できます。
基本的な構文
角括弧 [] を使ってプロパティ名を囲むことで、変数の値をプロパティ名として使用できます。
const key = 'username';
const value = '太郎';
// Computed Property Namesを使用
const user = {
[key]: value
};
console.log(user); // { username: '太郎' }
従来の書き方との比較
Computed Property Namesが導入される前は、オブジェクトを作成した後にプロパティを追加する必要がありました。
const key = 'username';
const value = '太郎';
// 従来の書き方
const user = {};
user[key] = value;
console.log(user); // { username: '太郎' }
Computed Property Namesを使えば、オブジェクトの作成と同時にプロパティを設定できるため、コードがより簡潔になります。
Reactのフォーム処理での活用例
Computed Property Namesは、複数の入力フィールドを持つフォームで特に威力を発揮します。
複数の入力フィールドを一つの関数で処理する
以下のようなフォームがあるとします。
import { useState } from 'react';
function UserForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
age: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};
return (
<form>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
/>
</form>
);
}
このコードでは、すべての入力フィールドで同じ handleChange 関数を使用しています。Computed Property Namesを使わない場合、各フィールドごとに個別の関数を作成する必要があり、コードが冗長になってしまいます。
動作の流れ
- ユーザーが入力フィールドに文字を入力する
-
onChangeイベントが発火し、handleChangeが呼ばれる - イベントオブジェクト
eからnameとvalueを取得する -
[name]の部分で、取得したnameの値がプロパティ名として使用される - 該当するプロパティだけが更新される
例えば、emailフィールドに入力した場合：
-
nameの値は'email' -
valueの値は入力された文字列 -
[name]: valueはemail: '入力値'となる
仕組みの詳細
handleChange 関数の中で使われている技術を詳しく見ていきましょう。
分割代入との組み合わせ
const { name, value } = e.target;
この行では、イベントオブジェクト e の target プロパティから name と value を取り出しています。これは分割代入（Destructuring Assignment） という機能です。
以下のコードと同じ意味になります。
const name = e.target.name;
const value = e.target.value;
スプレッド構文との連携
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
ここではスプレッド構文 ...prevData を使って、既存のformDataの内容をコピーしています。その後、Computed Property Namesで特定のプロパティだけを上書きしています。
例えば、現在のformDataが以下の状態だとします。
{
username: '太郎',
email: 'taro@example.com',
age: ''
}
ageフィールドに「25」と入力すると、以下のように処理されます。
{
...prevData, // 既存の値をすべてコピー
[name]: value, // ageプロパティだけを '25' で上書き
}
結果：
{
username: '太郎',
email: 'taro@example.com',
age: '25'
}
処理の流れを図解
このように、Computed Property Namesを使うことで、どの入力フィールドでも同じ処理フローで値の更新が行えます。
まとめ
Computed Property Namesは、オブジェクトのプロパティ名を動的に設定できるJavaScriptの機能です。角括弧 [] を使って変数の値をプロパティ名として使用できます。
Computed Property Namesのメリット
- コードの簡潔化: 複数のフィールドを一つの関数で処理できる
- 保守性の向上: 入力フィールドが増えても関数を追加する必要がない
- 可読性の向上: 重複するコードが減り、意図が明確になる
使いどころ
- 複数の入力フィールドを持つフォーム処理
- 動的にプロパティを追加・更新するオブジェクト操作
- キーと値のペアを柔軟に扱いたい場合
Reactでフォームを実装する際は、Computed Property Namesを活用することで、より効率的でメンテナンスしやすいコードを書くことができます。