JavaScript文のルール

文(ステートメント)の末尾には;(セミコロン)

JavaScriptの文(ステートメント)は、;(セミコロン)で区切るのが一般的です。JavaScriptにはASIという仕組みがあるため、セミコロンは省略可能ですが、意図しない解析をされてしまう場合があるので、セミコロンは省略しないで記述した方がよいでしょう。

ASI(オートマティック・セミコロン・インサーション)とは、構文解析時に文が明確に区切られていない場合でも、エラーにならないようにセミコロンが自動的に補完される仕組みです。

空白(スペース)の扱い

JavaScriptでは、複数のスペースを自由に挿入できます。
スペースはトークン(単語や記号)を区切るために使われ、無駄なスペースは無視されます

let x=10+20;   // 読みにくい
let x = 10 + 20;  // 読みやすい(スペースを入れる)

改行(\n)の扱い

改行(\n)は、文の途中でも文法的に問題がなければ許可されます
例えば、長い文を複数行に分割することができます。配列やオブジェクトの要素を見やすくするために改行を使うのが一般的です。

let items = [
  "Orange",
  "Peach",
  "Grapefruit"
];

let person = {
  name: "Jessica",
  age: 25,
  city: "Tokyo"
};

改行するとエラーになるケース

function getValue() {
  return
  56;
}
console.log(getValue());  // undefined になる

JavaScriptのASIは[return;] と解釈するため、エラーとなります。

可読性の向上

長い式を分割する

//可読性が低い
let result = (a * b) + (c / d) - (e % f);

//改行を入れて見やすく
let result = (a * b) 
           + (c / d) 
           - (e % f);

//または、演算子を文末に置く
let result = (a * b) +
             (c / d) -
             (e % f);

条件式を整理する

//1行に詰め込むと見づらい
if (user.isLoggedIn && user.hasPermission && user.isActive) {
  console.log("Access granted");
}

//改行を使って見やすく整理
if (
  user.isLoggedIn &&
  user.hasPermission &&
  user.isActive
) {
  console.log("Access granted");
}

関数の引数を整理

//引数が多いと横に長くなる
createUser("Jessica", 25, "Tokyo", "alice@example.com", "123-4567");

//改行を使って見やすく整理
createUser(
  "Jessica",
  25,
  "Tokyo",
  "jessica@example.com",
  "123-4567"
);

JavaScriptの大文字・小文字の区別

JavaScriptは大文字・小文字を区別するケースセンシティブ言語です。
そのため、変数名や関数名、オブジェクトのプロパティ名などは、大文字と小文字が違うと別のものとして扱われます

let apple = "りんご";
let Apple = "リンゴ";

console.log(apple);  // りんご
console.log(Apple);  // リンゴ

apple と Apple は別の変数として扱われる

命名規則

命名規則用途
キャメルケース(camelCase)myVariable変数・関数名
パスカルケース(PascalCase)MyClassクラス名
スネークケース(snake_case)my_variable変数・関数名
すべて大文字のスネークケース(SCREAMING_SNAKE_CASE)MAX_VALUE定数
ケバブケース(kebab-case)my-variableファイル名、クラス名
ハンガリアン記法(Hungarian Notation)strName, iValue, bIsValid変数名(型の接頭辞)

一般的には、変数名や関数名はcamelCase記法、クラス(コンストラクタ)名はPascal記法と覚えておけばいいでしょう。

※例外的に、繰り返し命令などで使用されるカウンタ変数は、「i」や「j」など1文字のアルファベットが使われることが多いです。

JavaScriptのコメント文

コメントを使うことで、コードにメモや説明を追加できます。
コメントは実行されず、コードの動作には影響しません

シングルラインコメント

// の後ろにコメントを書きます。改行するとコメントが終わります。

//シングルラインコメント
let x = 10;  // 変数 x に 10 を代入

複数行コメント

/* から */ までの間をコメントとして扱います。
改行を含む長い説明を書く場合に便利です。

/*
  これは複数行コメントです。
  ここに書かれた内容はすべて無視されます。
*/
let y = 20;

コメント文を書く目的の他、命令文を一時的にコメント化することでデバッグに利用することもあります。命令を無効化することをコメントアウト、再び命令文に戻すことをコメントインと呼びます。