有名な JavaScript/TypeScript スタイル
TypeScript のコーディングスタイルは下記のサイトが参考になります。
- スタイルガイド（コーディング規約） - TypeScript Deep Dive 日本語版
- TypeScript Deep Dive のスタイルガイドは、重要なポイントが簡潔にまとまっていてわかりやすいです。
- standard/standard: JavaScript Standard Style
- セミコロンの省略を推奨していますが、2021 年時点ではまだセミコロン有り派の方が多いようです。モダンなプログラミング言語では行末にセミコロンを付けないものが多いので、セミコロン省略派が増えてきているというのも何となく頷けます。
- 関数定義の際に、カッコの前にスペースを強制するところがちょっと気持ち悪いです。
- Node.js、npm、GitHub、Electron など有名どころが採用しています。
- ドキュメントサイト
- airbnb/javascript: JavaScript Style Guide
- Airbnb は JS スタイルを細かく定義しています。ただ、長大すぎるので、重要なポイントをかいつまんで読むのには向いてません。ESLint などのツールを使ってスタイル強制する 場合にもよく使われますが、TypeScript 対応が不完全で、モジュールインポート時の拡張子省略がエラーになったりします（2021-05 時点）。
- Coding guidelines · microsoft/TypeScript Wiki
- TypeScript 自体のコントリビューター用のコーディングガイドラインです。ユーザーレベルの開発プロジェクトに強制するものではないと注記がありますが、多くのルールはそのまま採用できると思います。インデントサイズは 4 とされていますが、多くの TypeScript プロジェクトではインデントサイズは 2 が採用されているので、ここだけ例外的です。
- google/styleguide: Google Style Guides
- JavaScript/TypeScript 以外にもいろいろな言語の Google スタイルが説明されています。
- JavaScript/TypeScript の世界では、上記の JavaScript Standard か Airbnb のスタイルの方が人気があるようです。
- ESLint 用の設定ファイルはこちら
まとめると、多くのスタイルガイドでは次のようなルールが採用されています。
- インデントは 2 文字（4 文字を採用しているのはごく一部のプロジェクトのみ）
- ドキュメンテーションコメントには JSDoc の記法を使う
- 命名規則
- 型名（クラス名、列挙型、エイリアスなど）は
PascalCase - 変数名や関数名は
camelCase - プライベートプロパティ名を
_で始めない
- 型名（クラス名、列挙型、エイリアスなど）は
- 文字列リテラル は
'シングルクォーテーション'で囲む- シングルクォーテーションを含む文字列はダブルクォーテーションで囲んで OK
- 比較には
==ではなく===を使用する。ただし、下記は例外。obj == undefined…nullあるいはundefinedであることのチェックobj != undefined…nullでもundefinedでもないことのチェック
- 値の設定には
nullもundefinedも使用せず、代わりに{ valid: boolean, value?: Foo}のようなオブジェクトを返すことを検討する- どうしても明示しなければいけないケースでは
undefinedに統一（undefinedとnullは同じものとして使って通常は問題ない） nullは API で指定されている場合のみ使う（コールバック関数のerror引数としてnullを渡すとか）
- どうしても明示しなければいけないケースでは
- 開き括弧 (
{) は同じ行の末尾に記述する
結局どのスタイルがよい？
多くのケースでは、JavaScript Standard か Airbnb スタイルのどちらかを採用しているようですが、一応 GitHub リポジトリのスター数比較（2021-05時点）を載せておきます。 スター数だけでいうと、圧倒的に Airbnb スタイルが人気がありますが、とりあえずシンプルなスタイルだけでも適用したいということであれば、Standard スタイルがよいかもしれません。
- Github Compare
- airbnb/javascript: 109,050 stars
- standard/starndard: 25,509 stars
- google/eslint-config-google: 1,510 stars
関連記事
- TypeScriptの型: 既存の JavaScript ライブラリに型情報を追加する（.d.ts ファイル）
- TypeScriptサンプル: ジェネリッククラスの定義例（MyStackクラス）
- TypeScriptサンプル: 文字列内のひらがなとカタカナを変換する (hiraToKana, kanaToHira)
- TypeScriptの型: クラス定数を定義する (static readonly)
- TypeScriptのモジュールのインポートには import を使う
- TypeScriptの型: インタフェースを結合する (交差型: Intersection types)
- TypeScriptの型: クラスに static プロパティを定義する