TypeScriptのセミコロンの正体、必要性と注意点を解説

2023.08.16 に更新記事は 4 分で読めます
サムネイル画像

この記事で取り上げたいのがTypeScriptにおけるセミコロンの存在意義です。

この小さな記号がコードの品質や可読性にどのような影響を及ぼすのか。
それについて解説していきます!

セミコロンって本当に必要?

まず、JavaScriptやTypeScriptでは、セミコロン(;)は命令の終わりを示す記号です。

let a = 5;
let b = 6;

上記のコードでは2つの変数の宣言がセミコロンで終わっていますね。

このセミコロン、実は以下のように省略することも可能です。

let a = 5
let b = 6

でも、なぜ多くの開発者がセミコロンを使い続けるのでしょうか?

ASI(自動セミコロン挿入)の罠

JavaScriptやTypeScriptには ASI(自動セミコロン挿入) という仕組みがあります。
これはコードの終わりに自動でセミコロンを挿入する機能です。

しかし、この機能が予期しない動作を引き起こすこともあります。

例えば以下のような例の場合です。

let foo = function() {
  return
  {
    key: "value"
  }
}

上記の関数は実際には undefined を返します。
なぜなら return の後にASIが自動的にセミコロンを挿入し、関数の返り値として undefined が返されるからです。

おっと、こんな罠もあるんですね!

一貫性の維持

illust

コードの一貫性は読みやすさやメンテナンスの容易さに直結します。
セミコロンの有無によるスタイルの乱れはチームでの開発を困難にする可能性もあります。

そういった背景から、多くのスタイルガイドやLintツールではセミコロンの使用を推奨しています。

私の感想としては、細かいことかもしれませんがこうした一貫性はプロジェクト全体の品質を高める大きな要素だと感じます。

セミコロンを使うべきか、使わないべきか

最終的な選択はあなた次第です!

セミコロンを省略することで少しスッキリしたコードになるかもしれません。
しかし、上で述べたような罠や一貫性の問題も考慮に入れる必要があります。

私自身は、予期しないエラーを避けるためと一貫性を保つためにセミコロンの使用を続けています。

まとめ

セミコロンの有無、一見些細な問題に思えますがその背後には深い議論や考えがあるんですよね。
最終的にはあなたのスタイルやチームの方針に合わせて選択することが大切です。

プロフィールアイコン

Syuu

フロントエンドが好きなWEBエンジニア Next.js / React / TypeScript

SHARE