TypeScriptコーディング規約のきほん

1.目的

チーム開発などでコーディング規約を統一・共有することで、コードの保守性を向上させる

2.前提

原則としてJavaScriptコーディング規約に則り、TypeScript固有の項目については、そちらに従う
中には、明確なルールがないものもある。その場合は著名なプロジェクトでの標準的なルールや慣習などに従う

3.識別子スタイル

項目	スタイル	備考
変数名、関数名	camelCase	Jsに従う
定数名	CONSTANT_CASE
クラス名	PascalCase メンバとメソッド名はcamelCase	Jsに従う
インターフェース名	PascalCase(クラス名のスタイルに従う)	・多くのJSチームでの慣習として、プレフィックスIやInterfaceなどは付与しない(組み込みのWindowやDocumentなどのInterfaceにIがついていない) ・そのインターフェースが存在する理由を表す名前を付けるのがベスト
タイプ名	PascalCase(クラス名のスタイルに従う)
Enum名	PascalCase(クラス名のスタイルに従う) メンバもPascalCase	言語作成者、TypeScriptチームに従った慣例
ディレクトリ名	多くのJSチームでの慣習としてcamelCaseまたは kebab-case
ファイル名	多くのJSチームでの慣習としてcamelCaseまたは PascalCase	クラスや単一の関数しかexportしていないファイルの名称はexportしている要素の名称とする

4.言語特性

変数

変数宣言
- 原則constを使用する。constで不都合がある時にlet
- varは使用しない
- 変数はできるだけ使用する直前で宣言すること

文字列

文字列の合成にはテンプレートリテラルを使う。+を使用しない

const user = {
  id: 1,
  name: "太郎",
};

console.log(`私の名前は${user.name}です`); // 私の名前は太郎です

配列

型宣言は、慣習としてArray<Hoge>ではなく、Hoge[]を使う

等価チェック

等価演算は===を使用する(🙅==)
- 以下のように、JavaScriptが自動で型を変換するため、==だと数値の1と文字列の1の比較がtrueとなってしまう
- 想定している動作とは異なる動作になってしまう可能性のある書き方は控えたほうが良いのと、タイプセーフにコードを書く上では、型も含めてチェックすべき

1 == "1"; // true
1 === "1"; // false

オブジェクトのプロパティへのアクセス方法

どちらかに統一する

const user = {
  id: 1,
  name: "太郎",
};

// ①
user.id

// ②
user["id"]

4-6.名前空間とモジュール

namespaceは基本的に使用せず、モジュールシステムを使用して他のファイルのコードを参照する
モジュールシステムのうち、CommonJs形式(require)を使用しない、EsModules(import)を使用する

5.型システム

null vs undefined

前提

値がないことを表現する方法としてnullとundefinedがある(どちらもプリミティブ型)

	undefined	null
定義	値が代入されていないため、値がない	代入すべき値が存在しないため、値がない
自然発生するか	Jsの言語仕様では、さまざまなケースでundefinedが自然発生する・変数を宣言したときに初期値なしの場合・オブジェクトに存在しないプロパティや配列にない要素にアクセス・戻り値がない関数の戻り値を取得したとき	・プログラマーが意図的に使わない限り発生しない・一部のDOM系のAPIはnullを返すこともある

どちらを使うべきか

論争が分かれるが、Jsの言語仕様に沿って、値がないことを表現したい場合はundefinedを使用する方が無難
- nullに統一する方法を採用しようとすると、上記のundefinedを全てnullに置き換えることが必要になり、現実的に不可能
- 例えば、findメソッドは該当する要素がない場合はundefinedを返すが、これを使用したメソッドを実装する際に、結果がundefinedだったらいちいちnullに変換して返す等する必要がある

typeとinterfaceの使い分け

そこまで大差ないので、プロジェクトごとにどちらを使用するか決めてそれに従う形で良いのではないかと思われる
※ただ、implementsできるという点で、個人的にはinterfaceが優れていると感じる

	interface	type(型エイリアス)
拡張可能か	可能	交差型(インターセクション型)で複数のタイプを組み合わせることにより、拡張可能
定義可能な対象	オブジェクトとクラス	オブジェクトとクラスに加え、そのほかのユニオン、タプル型なども可能
クラスで実装可能か	可能(implements)	不可

交差型(インターセクション型)によるtypeの拡張

type Three = One & Two;

typeでは他の型(ユニオン型など)も定義可能

type ProductType = "book" | "grocery";

6.フォーマット

インデント

スペース2個分とする(🙅タブ)

引用符

シングルクォート(')
他の有名なJavaScriptチーム(airbnb、標準、npm、NodeJS、google/angular、facebook/react)がこれを採用している

セミコロン

不要でもいいと思われるが、議論が分かれるので、プロジェクト内で統一する

※以上です。不足している内容もあるかと思いますので、適宜加筆して行きます。

7.参考

Google提供のスタイルガイド
- https://google.github.io/styleguide/tsguide.html
TypeScript Deep drive スタイルガイド
- https://typescript-jp.gitbook.io/deep-dive/styleguide
TypeScriptコーディング規約(2020版)
- https://bit.ly/3RJjgjE

まとめ

いかがでしたでしょうか。本記事では、JavaScriptおよびTypeScriptコーディング規約の基本的な内容について説明しています。Google提供のスタイルガイドやTypeScript関連の情報を参考にしつつ、実際のプロダクト開発で実践した上で、最低限知っておくべきと感じた内容を中心にまとめています。