![()・[]・{}カッコの使い分け【React＆JavaScript学習メモ】](https://canato.net/wp-content/uploads/2025/06/react-brackets.webp)
JavaScriptを学習していく中でつまづいたポイントの一つが、()・[]・{}などのカッコの使い分け。
Reactでの使い方目線で個人的な覚え方をまとめてます。
JS・Reactともに学習中のため、ご参考に留めておいてください。
目次
ざっくりルール分け
| 記号 | 名前 | 使い道の例（用途） |
|---|---|---|
() | 丸カッコ | 関数の引数 即時実行関数（IIFE） JSXの return で1つのまとまりにするとき 無名関数（アロー関数）など |
[] | 角カッコ | 配列 インデックスアクセス（例：arr[0]）） |
{} | 中カッコ（波カッコ） | オブジェクトリテラル JSX内での値の埋め込み（ {name}など）分割代入 |
()：丸カッコ「何かを渡す／囲う」
関数まわり、まとまりを表す時に使う。
// 関数まわり
// 引数
function greet(name) {
return `こんにちは、${name}`;
}
// 関数の呼び出し
greet('さくら');// JSXで複数行書くとき
return (
<div>こんにちは</div>;
); []：角カッコ「並び（リスト）」
配列（リスト）の操作に使う。
// 配列を作るとき
const fruits = ['りんご', 'みかん'];
// インデックスでアクセス
const first = fruits[0]; JSXの中ではあまり使われないイメージ。
{}：波カッコ（中カッコ）「中身を持つもの」
※当記事内では、「波カッコ」で統一してます。
オブジェクトやJSX内のJavaScript、テンプレートリテラル、分割代入などで使用。
// オブジェクト
const user = { name: 'さくら', age: 20 };
// 分割代入
function item({name, age}) {
〜
}
// JSX内でJSを使うとき（テンプレートリテラル含む）
return (
<div>
<p>{name}さん、こんにちは</p>
<ul>
{users.map((user) => (
<li key={user.id}>{`こんにちは！${user.name}さん`}</li>
))}
</ul>
{/* コメントアウトにも{} */}
</div>
);文字列の途中で変数を入れる場合によく使ってる。
バカっぽい表現だけど、「プログラムっぽい処理をしている時によく使ってる」イメージ。
よくある組み合わせ
()、[]、{} はそれぞれ用途が違うだけで、「入れ子（ネスト）にできない組み合わせ」というルールは特にない。
ただし、文法上おかしくならないように、使い方に注意が必要な場面はある。
| カッコ | よくある中身（入れ子） | 用途 |
|---|---|---|
[]（配列） | [{...}, {...}] | 配列の中にオブジェクトを並べる（よくある） |
()（関数の引数） | ({ id, name }) => {...} | 引数がオブジェクトの分割代入。Reactで超よく使う |
{}（オブジェクト） | { items: [1, 2, 3] } | オブジェクトの中に配列を持つ、基本中の基本 |
JSXの中の {} | <div>{items.map(() => {})}</div> | JSXでは {} の中にJS式を書くのがルール |
配列 × オブジェクト（Reactで超よく使う）
const users = [ // [配列]の中に
{ id: 1, name: 'さくら' }, // {オブジェクト}
{ id: 2, name: 'たけし' }
];関数の中でオブジェクト分割代入
function GreetingItem({ name }) {
return <li>こんにちは、{name}さん</li>;
}JSXの中で .map()（配列→JSX化）
return (
<ul>
{users.map((user) => (
<GreetingItem key={user.id} name={user.name} />
))}
</ul>
);メモ
関数やJSXやら複合的になってくると混乱してくるので、一つ一つの意味を理解すること。