JavaScriptにおける行末セミコロンの必要性

●JavaScriptの行末セミコロンとは
●行末セミコロンの自動挿入ルール
●コーディング規約とセミコロン
●コード整形ツールでのセミコロン設定
●VSCodeでのセミコロン自動挿入設定
まとめ

●JavaScriptの行末セミコロンとは

JavaScriptを学び始めたばかりの頃、コードの最後にセミコロン(;)をつけるべきなのか、つけなくても良いのか悩んだことはありませんか？

実は、JavaScriptではセミコロンの扱いが他の言語とは少し異なるんです。

○セミコロンの役割と意味

セミコロンは文の終わりを示す記号で、多くのプログラミング言語で文の終端に使われています。

JavaScriptでもセミコロンを文の終わりに置くことができますが、実は省略が可能なケースが多いんです。

○セミコロン省略のメリットとデメリット

セミコロンを省略することで、コードがすっきりとして見やすくなるというメリットがあります。

一方で、セミコロンがないことで意図しない動作をしてしまうことがあるので注意が必要です。

○サンプルコード1：セミコロン有無の比較

次のコードを見てみましょう。

console.log("Hello")
console.log("World")

console.log("Hello");
console.log("World");

どちらのコードも同じように動作します。

上のコードではセミコロンを省略していますが、下のコードではセミコロンを付けています。

このようにセミコロンの有無でコードの動作は変わらないことが多いです。

ただし、セミコロンを省略すると問題が起きるケースがあります。

次章では、そういった場合について詳しく見ていきましょう。

●行末セミコロンの自動挿入ルール

JavaScriptでは、セミコロンを省略できるケースが多いと言いましたが、実はこれにはルールがあります。

そのルールとは、自動セミコロン挿入（Automatic Semicolon Insertion、ASI）と呼ばれるものです。

○自動セミコロン挿入（ASI）の仕組み

自動セミコロン挿入は、JavaScriptエンジンが自動的にセミコロンを挿入してくれる機能です。

具体的には、次のようなケースで自動的にセミコロンが挿入されます。

文の終端に到達した時
閉じ括弧 } の前
改行の前（ただし、その改行が文の途中である場合は除く）

例えば、次のコードは自動的にセミコロンが挿入され、問題なく動作します。

const x = 1
const y = 2
console.log(x + y)

○ASIが適用されるパターン

自動セミコロン挿入が適用されるのは、主に次のようなケースです。

return文、throw文、break文、continue文の後
++演算子、–演算子の後
後置式の式文の後

これらのケースでは、セミコロンを省略しても自動的に挿入されるので、コードが正常に動作します。

○サンプルコード2：問題が起きるケース

ただし、自動セミコロン挿入に頼りすぎると、意図しない動作をしてしまうことがあります。

例えば、次のようなコードを見てみましょう。

const fun = () => {
  return
  {
    message: "Hello, world!"
  }
}

console.log(fun())

このコードを実行すると、undefinedが出力されます。

これは、returnの後に自動的にセミコロンが挿入されてしまい、return;と解釈されるためです。

正しくは、次のようにreturnの後に改行を入れないようにします。

const fun = () => {
  return {
    message: "Hello, world!"
  }
}

console.log(fun())

このように、自動セミコロン挿入のルールを理解していないと、思わぬバグを生んでしまうことがあるので注意が必要です。

○サンプルコード3：明示的にセミコロンが必要なケース

また、次のようなケースでは明示的にセミコロンを書く必要があります。

for文の初期化式、条件式、増分式を複数書く場合
1行に複数の文を書く場合

例えば、次のコードはセミコロンがないとエラーになります。

for (let i = 0; i < 10; i++) console.log(i)

正しくは、次のようにセミコロンを付けます。

for (let i = 0; i < 10; i++) { console.log(i); }

このように、自動セミコロン挿入のルールを理解し、必要なところではセミコロンを明示的に書くことが大切です。

●コーディング規約とセミコロン

自動セミコロン挿入のルールを理解したところで、次に気になるのがコーディング規約ではないでしょうか。

チーム開発では、コードの書き方をある程度統一することが求められます。セミコロンの扱いもコーディング規約の重要な要素の1つです。

○有名なコーディング規約の方針

有名なコーディング規約を見てみると、セミコロンの扱いについてはいくつかの方針があることがわかります。

例えば、次のような方針があります。

常にセミコロンを付ける（Airbnb JavaScript Style Guide）
必要な場所にのみセミコロンを付ける（Standard Style）
セミコロンを付けない（NPM coding style）

このように、セミコロンの扱いについては意見が分かれているのが現状です。

○Google JavaScript Style Guideの推奨

その中でも、GoogleのJavaScript Style Guideは多くの開発者に参考にされています。

GoogleのStyle Guideでは、文の末尾には常にセミコロンを付けることを推奨しています。

○サンプルコード4：関数式とセミコロン

Google Style Guideに従ってコードを書くと、次のようになります。

// 関数宣言
function foo() {
  // ...
}

// 関数式
const bar = function() {
  // ...
};

// アロー関数
const baz = () => {
  // ...
};

関数式やアロー関数の末尾にはセミコロンを付けますが、関数宣言にはセミコロンを付けません。

これは、関数宣言がセミコロンで終わらないという文法ルールがあるためです。

●コード整形ツールでのセミコロン設定

コーディング規約を手動でチェックするのは大変ですよね。そこで活躍するのがコード整形ツールです。

ESLintやPrettierなどのツールを使えば、セミコロンの有無もルールに沿って自動的にチェック・修正してくれます。

○ESLintでのセミコロンルール設定

ESLintは、JavaScriptのコードをチェックするための静的解析ツールです。

ESLintでは、セミコロンに関するルールを設定することができます。

例えば、semiルールを使うと、セミコロンの有無をチェックできます。

.eslintrc.jsonファイルで次のように設定します。

{
  "rules": {
    "semi": ["error", "always"]
  }
}

この設定では、セミコロンが必要な場所に付けられていない場合にエラーが報告されます。

"always"の部分を"never"に変更すれば、セミコロンを付けないスタイルもチェックできます。

○Prettierでのセミコロン設定

Prettierは、コードを自動的に整形してくれるツールです。

Prettierでもセミコロンの有無を設定できます。

.prettierrcファイルで次のように設定します。

{
  "semi": true
}

この設定では、セミコロンを付けるスタイルで整形されます。

trueをfalseに変更すれば、セミコロンを付けないスタイルで整形されます。

○サンプルコード5：ESLintとPrettierの連携

ESLintとPrettierを連携させることで、コードのチェックと整形を同時に行うことができます。

まず、ESLintとPrettierをインストールします。

npm install --save-dev eslint prettier eslint-config-prettier

そして、.eslintrc.jsonファイルで次のように設定します。

{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

この設定では、ESLintのルールとPrettierのルールを組み合わせてチェックします。

コードが整形されていない場合にはエラーが報告されます。

実際にコードをチェックするには、次のようにESLintを実行します。

npx eslint ファイル名

自動整形するには、次のように実行します。

フォーマットと同時にチェックされエラー除去で整形できます。

npx eslint --fix ファイル名

このように、ESLintとPrettierを連携させることで、セミコロンの有無を含めたコードの品質をより高いレベルで保つことができるのです。

●VSCodeでのセミコロン自動挿入設定

コード整形ツールの設定もバッチリですね。

でも、普段のコーディングではエディタを使うことが多いと思います。

人気のエディタであるVSCodeでは、セミコロンの自動挿入機能を設定することができるんです。

○VSCodeのフォーマッター設定

VSCodeには、デフォルトのフォーマッター機能が用意されています。

これを使えば、セミコロンの有無を自動的に制御できます。

設定ファイル（settings.json）で次のように設定します。

{
  "editor.formatOnSave": true,
  "javascript.format.semicolons": "insert"
}

"editor.formatOnSave"をtrueにすると、ファイルを保存する度に自動的にフォーマットされます。

"javascript.format.semicolons"を"insert"にすると、セミコロンが自動的に挿入されるようになります。

この設定を行うことで、セミコロンを付け忘れる心配がなくなります。

コーディングに集中できるので、生産性が上がりますよ。

○セミコロンの自動挿入と削除

VSCodeでは、セミコロンの自動挿入だけでなく、不要なセミコロンを自動的に削除する機能もあります。

次のように設定します。

{
  "editor.formatOnSave": true,
  "javascript.format.semicolons": "remove"
}

"javascript.format.semicolons"を"remove"にすると、不要なセミコロンが自動的に削除されます。

ただし、この設定はコーディング規約によっては適さない場合があるので注意が必要です。

チームで決めたルールに合わせて設定することをおすすめします。

○Prettier拡張機能の活用

さらに、VSCodeではPrettier拡張機能を使うことで、より細かな設定が可能になります。

まず、Prettier拡張機能をインストールします。

VSCodeの拡張機能タブで「Prettier」を検索し、インストールしましょう。

そして、設定ファイルで次のように設定します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.semi": true
}

"editor.defaultFormatter"に"esbenp.prettier-vscode"を指定すると、PrettierがVSCodeのデフォルトフォーマッターになります。

"prettier.semi"をtrueにすると、セミコロンが自動的に挿入されます。

このように、VSCodeとPrettierを組み合わせることで、セミコロンの扱いを柔軟に設定できるようになります。

自分にあった設定を見つけて、快適なコーディング環境を整えましょう。

まとめ

JavaScriptのコーディングにおけるセミコロンの扱いについて、一通り見てきました。

セミコロンの扱いは、一見些細な問題に見えるかもしれません。

でも、可読性の高いコードを書くためには、こうした細かい部分にもこだわることが大切だと思います。