JavaScript | コードを記述する上での基本ルール

JavaScript

2020.01.012025.10.10

1. 大文字と小文字の区別（Case Sensitivity）

JavaScriptでは、変数名・関数名・予約語など、すべてが大文字小文字を区別します。
つまり、次の2つはまったく別の識別子です。

let name = "Taro";
let Name = "Hanako";

console.log(name); // "Taro"
console.log(Name); // "Hanako"

let name = "Taro";
let Name = "Hanako";

console.log(name); // "Taro"
console.log(Name); // "Hanako"

JavaScriptでは、空白・タブ・改行は基本的に無視されます。
ただし、トークン（単語）を区切る役割を果たす場合は重要になります。

たとえば次の2つは同じ意味です。

let x = 1 + 2;
let x=1+2;

let x = 1 + 2;
let x=1+2;

しかし、識別子の途中に空白を入れると構文エラーになります。

let my name = "Ken"; // ❌ エラー

let my name = "Ken"; // ❌ エラー

JavaScriptは「自動セミコロン挿入（Automatic Semicolon Insertion, ASI）」という仕組みを持っています。
文末にセミコロンがなくても、多くの場合は自動で補ってくれます。

let x = 10
let y = 20
console.log(x + y)

let x = 10
let y = 20
console.log(x + y)

これは有効なコードです（実行時に自動的にセミコロンが補われます）。

しかし、ASIの誤動作によるバグが起きるケースがあります。

function f() {
  return
  {
    value: 42
  }
}
console.log(f());

function f() {
  return
  {
    value: 42
  }
}
console.log(f());

➡ 結果：undefined

理由：
return の直後の改行で自動セミコロンが挿入され、return; と解釈されるためです。
正しい書き方は：

function f() {
  return {
    value: 42
  }
}

function f() {
  return {
    value: 42
  }
}

let a = 1
[2, 3].forEach(n => console.log(n))

let a = 1
[2, 3].forEach(n => console.log(n))

このコードは a[2,3].forEach(...) と誤って解釈され、TypeError になります。

正しい書き方は：

let a = 1;
[2, 3].forEach(n => console.log(n));

let a = 1;
[2, 3].forEach(n => console.log(n));

または：

let a = 1
;[2, 3].forEach(n => console.log(n))

let a = 1
;[2, 3].forEach(n => console.log(n))

let b = 2
(function() { console.log('IIFE'); })()

let b = 2
(function() { console.log('IIFE'); })()

➡ b が関数呼び出しとして扱われてエラーになります。

安全な書き方：

let b = 2;
(function() { console.log('IIFE'); })();

let b = 2;
(function() { console.log('IIFE'); })();

または：

let b = 2
;(function() { console.log('IIFE'); })()

let b = 2
;(function() { console.log('IIFE'); })()