JavaScript 構文入門

JavaScript の構文を構成する構造や部品を理解しよう

はじめに

コードの階層構造

プログラムは、大きな構造から小さな部品へと分解できます。この関係を知ると、コードの見え方が変わります。

ステップ 1

部品（トークン）の役割を知る

console.log('Hello, world!'); の各部分にマウスカーソルを合わせてみてください。

console.log('Hello, world!');

ここに解説が表示されます。

ステップ 2

単純な構造（文と式）を理解する

コードのまとまりにカーソルを合わせると、その構造がわかります。下のステップ3のツリーも連動して光ります。

console.log('Hello, world!') ;

ここに解説が表示されます。

ステップ 3

コンピュータの視点 (単純な構文木)

コンピュータはコードをこの「木」の形で理解します。ツリーの各部分に触れると、ステップ2のコードも連動します。

  • 文 (ExpressionStatement)
    • 式 (CallExpression)
      • 呼び出すもの (callee)
        • 式 (MemberExpression)
          • 対象: Identifier "console"
          • メンバー: Identifier "log"
      • 引数 (arguments)
        • 値 (Literal): 'Hello, world!'

ステップ 4

制御構文を分解する

条件分岐や繰り返しなど、より複雑な命令の構造を見てみましょう。タブで切り替えてください。

if (score >= 80) { ... }
else if (score >= 60) { ... }
else { ... }

ここに解説が表示されます。

MDNで詳しく見る →
  • IfStatement
    • test: BinaryExpression
    • consequent: BlockStatement
    • alternate: IfStatement
      • test: BinaryExpression
      • consequent: BlockStatement
      • alternate: BlockStatement
for (let i = 0; i < 5; i++) { ... }

ここに解説が表示されます。

MDNで詳しく見る →
  • ForStatement
    • init: VariableDeclaration
    • test: BinaryExpression
    • update: UpdateExpression
    • body: BlockStatement
switch (fruit) {
case 'apple': ...; break;
case 'orange': ...; break;
default: ...;
}

ここに解説が表示されます。

MDNで詳しく見る →
  • SwitchStatement
    • discriminant: Identifier "fruit"
    • cases: [...]
      • SwitchCase
        • test: Literal 'apple'
        • BreakStatement
      • SwitchCase
        • test: Literal 'orange'
        • BreakStatement
      • SwitchCase (default)

ステップ 5

応用的な構文パターン

基本を理解したら、より複雑で実用的なパターンを見てみましょう。expressionが入れ子になることで、柔軟なコードが書けるようになります。

users.filter (u => u.active)
    .map (u => u.name) ;

ここに解説が表示されます。

配列メソッドについて詳しく →
  • ExpressionStatement
    • CallExpression (map呼び出し)
      • callee: MemberExpression
        • object: CallExpression (filter呼び出し)
          • callee: MemberExpression
            • object: Identifier "users"
            • property: Identifier "filter"
          • arguments: [ArrowFunction]
        • property: Identifier "map"
      • arguments: [ArrowFunction]
getEventHandler('click') (event) ;

ここに解説が表示されます。

高階関数について詳しく →
  • ExpressionStatement
    • CallExpression (戻り値の関数を実行)
      • callee: CallExpression (関数を取得)
        • callee: Identifier "getEventHandler"
        • arguments: [StringLiteral 'click']
      • arguments: [Identifier "event"]
obj [ 'get' + capitalize(field) ] (42) ;

ここに解説が表示されます。

プロパティアクセサについて詳しく →
  • ExpressionStatement
    • CallExpression
      • callee: MemberExpression (computed)
        • object: Identifier "obj"
        • property: BinaryExpression (+)
          • left: StringLiteral 'get'
          • right: CallExpression
            • callee: Identifier "capitalize"
            • arguments: [Identifier "field"]
      • arguments: [NumericLiteral 42]