JavaScriptをTypeScriptにする一文字命名規則とは何か

:::note warn
この命名規則は策定中です。
:::

## はじめに

本記事ではプログラミングの生産性を上げるシンプルな命名規則を提案します。

## 一文字命名規則とは何か

一文字命名規則とはアルファベット一文字とアンダースコアを変数名や関数名の頭に付ける命名規則です。

そうすることにより変数名や関数名を大文字小文字あわせて最大52種類のグループに分け、それぞれのグループに型などの意味を持たせられます。

具体的にはフラグ変数の名前が`visible`ならアルファベット一文字`b`とアンダースコア`_`を頭につけて`b_visible`にして変数名に`Boolean`型の意味を持たせられます。

## 一文字命名規則の補足説明

一文字命名規則を詳しく説明します。

プログラマーはそれぞれのグループの意味を自由に定義できます。

変数名や関数名の一文字を見てグループの意味が分かるようにします。

シンプルな命名規則にするために**一文字縛り**があります。

一文字が重複したときは大文字や、52種類のなかの未使用文字を使うことを検討します。たとえばJavaScriptなら数値型を`n_`に、Node型を`N_`にするのが良いでしょう。

一文字が重複して複数の意味を持っても構いません。その場合は文脈から判断されます。

グループの定義をどこかに書いておくことは良い考えです。

すべての変数名や関数名に一文字を付ける必要はありません。プログラマーの負担がない範囲で一文字命名規則を使います。

## 一文字命名規則がどのようにしてJavaScriptをTypeScriptにするか？

一文字命名規則を使うことによりプログラマーが変数名`b_visible`を見たとき`Boolean`型だと分かるようになります。

変数名を見て型情報が分かることがJavaScriptをTypeScriptに近づけるということです。

## 一文字命名規則の使用例

一文字命名規則がJavaScriptのプログラミングの生産性を爆上げすることが一発で分かる使用例を示します。

```javascript:JavaScript
var e_target = document.querySelector('#target'); // 要素(Element)
var s_target = e_target.textContent; // 文字列(String)
var n_target = Number(e_target.textContent); // 数値(Number)
```

お分かりいただけただろうか？

1つの名称`target`を使いまわすことにより、DOMの操作をするJavaScriptのプログラマーが変数名で悩まなくてよくなります。一文字命名規則により、それぞれの変数の意味が変数名から分かるようになっています。

## 一文字命名規則の一例

JavaScriptの場合の一例を示します。

<details><summary>変数名の場合</summary>

| 一文字 | 意味                                                         |
| ------ | ------------------------------------------------------------ |
| a      | Array型。配列。                                              |
| b      | Boolean型。論理型。真偽値。<br />BigInt型。                  |
| c      | Constant。定数。constで宣言された変数。<br />Class型。クラス。 |
| d      | Date型。日付。                                               |
| e      | Element型。                                                  |
| f      | Flag型。フラグ。<br />Function型。関数。                     |
| g      | Global。グローバル変数。                                     |
| h      |                                                              |
| i      |                                                              |
| j      | JSON型。                                                     |
| k      |                                                              |
| l      | letで宣言された変数。<br />List型。リスト。                  |
| m      |                                                              |
| n      | Node型。<br />Number型。数値。                               |
| o      | Object型。オブジェクト。                                     |
| p      |                                                              |
| q      | Queue型。キュー。                                            |
| r      | RegExp型。正規表現。                                         |
| s      | String型。文字列。<br />Symbol型。シンボル値。               |
| t      | Text型。テキスト。<br />Temporary型。一時的な変数。<br />Time型。時間。 |
| u      |                                                              |
| v      | Value。任意の値。<br />varで宣言された変数。                 |
| w      |                                                              |
| x      |                                                              |
| y      |                                                              |
| z      |                                                              |

</details>

<details><summary>関数名の場合</summary>

| 一文字 | 意味                                                   |
| ------ | ------------------------------------------------------ |
| a      | Arrow。アロー関数。<br />Async関数。                   |
| b      | Bind。thisや関数の引数がバインドされた関数。           |
| c      | Callback。コールバック関数。                           |
| d      |                                                        |
| e      | EventListenerの関数。                                  |
| f      | Function。functionで宣言された関数。                   |
| g      | Generator関数。function*で宣言された関数。             |
| h      | Higher-order function。高階関数。                      |
| i      |                                                        |
| j      | jQueryの関数。                                         |
| k      |                                                        |
| l      |                                                        |
| m      |                                                        |
| n      | Nested function。関数内関数。                          |
| o      |                                                        |
| p      | Pure function。純粋関数。                              |
| q      | Query。何かを問い合わせる関数。                        |
| r      | Recursive function。再帰関数。                         |
| s      | Side Effect。副作用のある関数。<br />Sub関数。副関数。 |
| t      | Temporary。一時的な関数。                              |
| u      |                                                        |
| v      |                                                        |
| w      | Wrapper。ラッパー関数。                                |
| x      |                                                        |
| y      |                                                        |
| z      |                                                        |

</details>

## 一文字命名規則に関連した記法

調べたところハンガリアン記法という記法があることが分かりました。

[ハンガリアン記法](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%AC%E3%83%AA%E3%82%A2%E3%83%B3%E8%A8%98%E6%B3%95)とは変数名やクラス名などに接頭文字ないし接尾文字をつける命名法です。

ハンガリアン記法との違いは、一文字命名規則には一文字縛りがあること、アンダースコアがあること、一文字が重複した場合の扱いがあることなどです。

## ハンガリアン記法への批判への批判

調べたところハンガリアン記法が批判されてきたことが分かりました。ハンガリアン記法への批判への批判を試みます。

> 修正の際にデータ型を変更すると変数名も変えなきゃいけなくなるので面倒。保守の障害になる。
>
> [変数や関数に名前を付けるときによく使われる省略形 - Qiita](https://qiita.com/Shons_a/items/bd6eed229253ee266b7d)

C++やC#のような言語ではそういうこともあるかもしれませんが、JavaScriptの小さな開発ならデータ型を変更することはほとんどありません。

> C++やC#のような言語では型付けが存在するためにシステムハンガリアンを使用することによる利点はない。
>
> [ハンガリアン記法 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%AC%E3%83%AA%E3%82%A2%E3%83%B3%E8%A8%98%E6%B3%95)

JavaScriptにはC++やC#のような型付けが存在しません。型付けが存在する言語においても変数名や関数名に型以外の意味を持たせることがプログラミングの役に立つと思います。

## さいごに

ハンガリアン記法は Excel や Word の開発で成功を収めました[^1]が、批判があったためか世間で推奨されなったようです。

本当に非推奨でしょうか？少なくともJavaScriptの小さな開発において役に立つと思います。

ぜひ一文字命名規則を使ってください。ハンガリアン記法よりもシンプルな一文字命名規則でプログラミングの生産性を爆上げしましょう。

[^1]: [ハンガリアン記法 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%AC%E3%83%AA%E3%82%A2%E3%83%B3%E8%A8%98%E6%B3%95)