はじめに
プログラミングにおける命名規則の大切さについてはリーダブルコード等でも触れられており、改めて説明する必要はないでしょう。
私は今 React / TypeScript を使ったアプリケーション開発に関わっていますが、設計前に改めて各社の命名規則を読み返しました。当たり前な内容もあるかと思いますが、自分の目に止まった箇所をまとめておきます。
人によって気になる箇所は違うと思うので、原文の一読をおすすめします。React / TypeScript を使わない場合でも有用な内容も含まれると思います。
情報ソース
- Microsoft TypeScript Coding Guidelines
- Google TypeScript Style Guide
-
TypeScript Deep Dive StyleGuide
日本語版 -
Airbnb React/JSX Style Guide
日本語版 - Naming cheatsheet
命名規則
識別子
- UpperCamelCase（PascalCase）
- React コンポーネントとそのファイル名
- type 文の型名
- camelCase
- 変数
- 関数名
-
.tsのファイル名
- CONSTANT_CASE
React コンポーネントについてのルール
Airbnb React/JSX Style Guide からの抜粋です。
- ひとつのファイルにひとつのコンポーネントにする（Basic Rules）
- 複数のステートレスや単純なコンポーネントはひとつのファイルにまとめることを許容する
- React コンポーネントにはパスカル記法を利用し、それらのインスタンスにはキャメル記法を利用する（Naming）
- ファイル名をコンポーネント名として使用する（Naming）
// bad
import Footer from './Footer/Footer';
// bad
import Footer from './Footer/index';
// good
import Footer from './Footer';
- デフォルトエクスポートでもコンポーネントに名前をつける（Declaration）
関数・変数に関する指針
Naming cheatsheet からの抜粋です。
- 短く、直感的で、説明的。（S-I-D）
- 単語の収縮は避ける（Avoid contractions）
- A/HC/LC Pattern
- 注釈の訳
注：文脈の順序は変数の意味に影響します。例えば、shouldUpdateComponentはコンポーネントを更新しようとしていることを意味し、一方shouldComponentUpdateはそのコンポーネントがそれ自体で更新され、あなたはそれがいつ更新されるべきかを制御していることを示します。 言い換えれば、高い文脈は変数の意味を強調するのです。
- 注釈の訳
- Actions では関数の動詞部分の選択について参考になります。
- get, set, reset, remove, delete, compose, handle
- remove と add、delete と create が対の動詞。
- handle って以前はどういうときに使っていいかよくわからなかったです。
- Prefixes は変数の意味を強調するので、関数名にはほとんど使われない。
- 単数形と複数形は使い分ける。
最後に
設定にもよりますが、Prettier や ESLint とバッティングする箇所もあるので、そういった箇所は飛ばしてまとめましたが、普段意識できてないかもという方は一読はしておくとよいと思います。当たり前にできていてほしい部分です。
また、こうしたルールはチームやプロジェクトによって意思や一貫性が保たれていればよいと思うので、フレームワーク等で決まっている文法以外は守らなくてはいけないというものではありません。
しかし、どうしようかと迷っているときにはひとつの指針になると思います。