講師のNです。
JavaScriptのコードを書いていると、いろんな「カッコ」― ()、[]、{}、<> が出てきますよね。
「どのカッコを使うんだっけ？」と迷ったことはありませんか？
今回は、それぞれのカッコの意味・使い方をお話しします。
🔴丸カッコ () 動作囲むカッコ
主な使い方
| 用途 | 例 | 説明 |
| 関数呼び出し | greet(“Taro”) | 関数に引数を渡して実行する |
| 関数定義 | function greet(name) {} | 引数を受け取る部分 |
| 優先順位指定 | (2 + 3) * 4 | グループ化して先に計算する |
イメージ
( ) は動作を囲むカッコ 何かを実行したり、順番を決めたりする
🔳角カッコ [] コレクション（集まり）を囲むカッコ
主な使い方
| 用途 | 例 | 説明 |
| 配列を作る | [“apple”, “banana”] | 複数の値をまとめる |
| 配列要素を取る | fruits[0] | 指定した位置の値を取り出す |
| 動的アクセス | person[key] | 変数を使ってプロパティを取る |
| 分割代入 | let [a, b] = [10, 20]; | 配列の中身を変数に展開する |
イメージ
[ ] はコレクション（集まり）を囲むカッコ データをまとめたり、取り出したりする
🌊波カッコ {} ルールや構造をまとめるカッコ
主な使い方
| 用途 | 例 | 説明 |
| コードブロック | if (…) { … } | 文のグループをまとめる |
| オブジェクトリテラル | { name: “Mika”, age: 22 } | データのまとまりを作る |
| 関数の本体 | function add(a,b){ return a+b } | 実際の処理内容を囲む |
| 分割代入 | let { name } = user; | オブジェクトから値を抜き出す |
イメージ
{ } はルールや構造をまとめるカッコ データや処理をひとつの“まとまり”として扱う
⛰山カッコ <> はさむカッコ
主な使い方
| 用途 | 例 | 説明 |
| HTMLのタグ | <p>こんにちは</p> | 要素をはさむ |
| JavaScriptの文法内では「比較演算子」 | 5 < 10 // true 10 > 3 // true | 大小をくらべる |
イメージ
<>は、はさむカッコ HTMLでは“囲む”、JavaScriptでは“比べる”
まとめ
| カッコ | 名称 | 主な使い方 |
| ( ) | 丸カッコ 🔴 | 関数・実行・優先順位 |
| [ ] | 角カッコ 🔳 | 配列・要素アクセス |
| { } | 波カッコ 🌊 | オブジェクト・ブロック |
| < > | 山カッコ ⛰ | HTMLのタグ・比較演算子 |
・JavaScriptのカッコは「形」ごとに役割が異なる
・書くときは「いま何を包もうとしているのか？」を意識すると迷わない
カッコを正しく使えるようになると、JavaScriptの文法がグッと読みやすくなりますよ！
Crebitではプログラミングの初歩から丁寧に教えます。
また、コードを書いたときや学習でのちょっとした疑問も丁寧に解説します。
もし興味があれば、ぜひ無料相談会に参加してみてくださいね。