React を触っていると、JavaScript のさまざまな書き方が自然と登場します。
しかし、JavaScript の記法をしっかり理解していないと、React のコードが「なんとなく」でしか読めなくなってしまいます。
この記事では、React で頻出する JavaScript の記法を
ひとつずつ丁寧に解説していきます。
1. アロー関数（Arrow Function）
アロー関数は、関数を短く書くための構文です。
React の関数コンポーネントやイベントハンドラで頻繁に使われます。
■ 基本の書き方
const add = (a, b) => {
return a + b;
};
処理が 1 行なら return を省略できます。
const add = (a, b) => a + b;
出力例
console.log(add(2, 3)); // 5
■ オブジェクトを返すときの注意
アロー関数でオブジェクトを返すときは、括弧で囲む必要があります。
const createUser = () => ({ name: "Taro" });
括弧がないと {} が「関数のブロック」と解釈されてしまいます。
■ React ではどう使う？
関数コンポーネント
const Hello = () => <div>Hello!</div>;
イベントハンドラ
<button onClick={() => setCount(count + 1)}>+</button>
2. 分割代入（Destructuring）
分割代入は、オブジェクトや配列から必要な値だけを取り出す書き方です。
React では props や Hooks で頻繁に使われます。
■ オブジェクトの分割代入
const user = { name: "Taro", age: 20 };
const { name, age } = user;
オブジェクトのキー名と変数名は一致する必要があります。
出力例
console.log(name); // "Taro"
console.log(age); // 20
■ 別名をつけたいとき
const { name: userName } = user;
console.log(userName); // "Taro"
name を取り出して userName という変数にする、という意味です。
■ ネストしたオブジェクトも取り出せる
const user = {
name: "Taro",
address: { city: "Tokyo", zip: "123-4567" }
};
const { address: { city } } = user;
console.log(city); // "Tokyo"
■ 配列の分割代入
const arr = [10, 20, 30];
const [first, second] = arr;
出力例
console.log(first); // 10
console.log(second); // 20
補足：スキップもできる
const [ , , third] = arr;
console.log(third); // 30
■ React ではどう使う？
props の受け取り
const User = ({ name, age }) => (
<div>{name}（{age}歳）</div>
);
Hooks
const [count, setCount] = useState(0);
3. スプレッド構文（Spread Syntax）
スプレッド構文は、オブジェクトや配列を展開する書き方です。
■ オブジェクトのスプレッド
const user = { name: "Taro", age: 20 };
const copy = { ...user };
出力例
console.log(copy);
// { name: "Taro", age: 20 }
ポイント
-
...userが user の中身を展開する - コピーとして使える
■ 上書きしたい場合
const newUser = { ...user, age: 21 };
出力例
console.log(newUser);
// { name: "Taro", age: 21 }
■ 浅いコピーであることに注意
const obj = { nested: { value: 1 } };
const copy = { ...obj };
copy.nested.value = 2;
console.log(obj.nested.value); // 2
ネストしたオブジェクトはコピーされず、参照が共有されます。
■ 配列のスプレッド
配列のコピー
const arr = [1, 2];
const copy = [...arr];
結合
const merged = [...arr, 3, 4];
間に挟む
const inserted = [0, ...arr, 3];
出力例
console.log(merged); // [1, 2, 3, 4]
console.log(inserted); // [0, 1, 2, 3]
■ React ではどう使う？
props をまとめて渡す
<User {...user} />
state 更新
setUser({ ...user, age: 21 });
4. Null合体演算子（??）
Null合体演算子は、左側が null または undefined のときだけ右側を使う演算子です。
■ 基本の書き方
const name = user.name ?? "名無し";
出力例
console.log(null ?? "default"); // "default"
console.log(undefined ?? "default"); // "default"
console.log("" ?? "default"); // ""（空文字はそのまま）
■ React ではどう使う？
<div>{user.nickname ?? "ニックネーム未設定"}</div>
5. オプショナルチェーン（?.）
オプショナルチェーンは、途中のプロパティが存在しなくてもエラーにならず、undefined を返す構文です。
■ 基本の書き方
const city = user.address?.city;
出力例
const user = {};
console.log(user.address?.city); // undefined（エラーにならない）
■ React ではどう使う？
<div>{user.profile?.nickname}</div>
6. テンプレートリテラル（Template Literal）
テンプレートリテラルは、バッククォート ` を使って文字列を作る構文です。
■ 変数を埋め込む方法
const name = "Taro";
const message = `こんにちは、${name}さん`;
出力例
console.log(message); // "こんにちは、Taroさん"
■ 式も書ける
console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"
■ 関数呼び出しもできる
const toUpper = (str) => str.toUpperCase();
console.log(`結果: ${toUpper("hello")}`);
// 結果: HELLO
■ 複数行の文字列もそのまま書ける
const text = `
これは
複数行の
文字列です
`;
■ React ではどう使う？
<div className={`box ${isActive ? "active" : ""}`} />
7. デフォルト引数
デフォルト引数は、関数の引数にデフォルト値を設定できる構文です。
■ 基本の書き方
const greet = (name = "ゲスト") => {
console.log(`こんにちは、${name}さん`);
};
出力例
greet(); // "こんにちは、ゲストさん"
greet("Taro"); // "こんにちは、Taroさん"
■ 注意：null はデフォルト値にならない
greet(null); // "こんにちは、nullさん"
8. async / await（非同期処理）
async / await は、Promise を読みやすく扱うための構文です。
async の役割
- 関数を「非同期関数」にする
- 戻り値を Promise に変換する
async function fn() {
return 1;
}
fn().then(console.log); // 1
await の役割
- Promise が解決するまで「待つ」
- 結果をそのまま変数に入れられる
const result = await somePromise();
■ まとめて使うとこうなる
const fetchUser = async () => {
const res = await fetch("/api/user");
const data = await res.json();
return data;
};
■ try/catch でエラー処理が書きやすい
const load = async () => {
try {
const data = await fetchUser();
console.log(data);
} catch (e) {
console.error("エラー:", e);
}
};
■ React ではどう使う？
useEffect 内でのデータ取得
useEffect(() => {
const load = async () => {
const data = await fetchUser();
setUser(data);
};
load();
}, []);
まとめ：JavaScriptの記法を理解すると、Reactが一気に読みやすくなる
React は JavaScript の記法を前提に作られています。
だからこそ、今回紹介した記法を理解しておくと、React のコードが驚くほど読みやすくなります。
- アロー関数
- 分割代入
- スプレッド構文
- Null合体演算子（??）
- オプショナルチェーン（?.）
- テンプレートリテラル
- デフォルト引数
- async / await
どれも React で毎日のように使うものです。
「JavaScript の記法 → React での使われ方」という流れで理解すると、
React の学習がぐっと楽になります。