eslint-plugin-var-lengthで変数名の長さにメリハリをつけよう!

2 min読了の目安(約2600字TECH技術記事

こんにちは。この記事は筆者が開発したESLintプラグイン「eslint-plugin-var-length」を宣伝する記事です。このプラグインを使うことで、変数の生存範囲の広さに応じて変数の最低文字数制限を変えることができます。

変数名の長さについて

変数名というのは、プログラミングにおいて非常に重要な要素です。どんな変数名でもプログラムは動きますが、変数名はプログラムの読みやすさに大きな影響を与えます。極端な例では、変数名が順番にa, b, c, ……だとしたらそのプログラムはとても読めたものではないでしょう。

変数名は何が入っているのかが分かりやすい命名が理想的ですが、変数の名前の良し悪しのチェックというのは困難なタスクです。変数名がチェックされる主な機会はコードレビューであり、変数名の良し悪しを人間がチェックしなければいけません。プログラミング、特にコードのチェックにおいては機械的にできることは機械的にやってしまいたいですよね。筆者は、機械的にチェックできないルールは守られないし意味が薄いと考えています。

変数名に関して機械的にチェックしやすいのは変数名の長さです。短い変数名よりは長い変数名のほうが、情報が多い分だけより分かりやすい変数名となっていることが期待されます。もちろんaaaaaaaaaaのような変数名を付けられたら長くても意味がありませんが、そこは今回は書き手の良心に期待することにしましょう。そこで、変数名の最低文字数を設けることでコードのクオリティを担保しようという考え方できます。実は、ESLintの公式にもこのような考え方に基づいたid-lengthというルールがすでに存在します。

ただ、筆者としては変数名の長さについて画一的な制限を設けるのは理想的ではないと考えていました。例えば、次のような例では引数xが1文字なのはあまり問題ではないと思います。なぜなら、xx => xという非常に小さな関数の中に閉じているからです。より具体的に言えば、xという変数に何が入るのかを読解する労力が小さく、それを記憶する必要性も小さいことから、xが短くてもあまり問題ではないのです。

const arr2 = arr.filter(x => x);

これを機械でチェックしやすい考え方に落とし込むと、変数の生存範囲が小さければ変数名が短くても問題ないという考え方になります。変数の生存範囲というのは、その変数を参照することができるコードの長さと言い換えることもできます。

この考え方に基づいて作ったのがeslint-plugin-var-lengthなのです。

eslint-plugin-var-lengthの機能

デフォルトでは、変数名の最短文字数mmは、その変数が属するスコープの長さLLに対してm=0.75Lm = 0.75\sqrt{L}(小数切り上げ)となります。
Googleで調べてみると、スコープが1行のときは最低文字数は1となり、スコープが2行〜7行のときは最低文字数2、8行〜16行のときは最低文字数3、……と遷移していくことが分かります。

変数が属するスコープというのは、関数引数ならばその関数の中身の長さ、varにより宣言された変数ならばそのvarが属する関数スコープの長さ、letconstならばそれが属するブロックスコープの長さとなります。具体的には、次のような違いとなって現れます。

// これはxが属するスコープが1行なのでOK
function double(x) {
  return x * 2;
}
// これはxが属するスコープが2行なのでだめ
function double2(x) {
  const result = x * 2;
  return result;
}

関数の外で宣言された変数の場合はその変数はモジュールスコープに属することになり[1]、ファイル全体の長さが属するスコープの長さとなります。

eslint-plugin-var-lengthが実現するコーディングスタイル

eslint-plugin-var-lengthは、変数名の最低文字数の制限を通してプログラムの読みやすさを促進するだけでなく、適切なプログラム分割を促す効果もあると考えています。

変数名があまりに長くなってしまう(長い変数名を強制されてしまう)場合、それは関数が大きすぎるということです。関数の分割などにより関数を小さくすることで、より短い変数名が解禁されます。これは実際理に適っていますね。長い関数というのは様々なロジックを含むことになるため、その中で変数が表す役割を的確に言い表すためには自然と変数名が長くなりがちです。関数を分割して短くすることで関数の責務も小さくなり、言い換えればロジックのドメインも小さくなるため、より短い変数名で変数の役割を的確に表すことができるようになるのです。

まとめ

eslint-plugin-var-lengthは、変数が属するスコープの長さに応じて変数名の最低文字数を決めることで、プログラムの読みやすさと適切なプログラム分割を同時に促進する効果を持つESLintプラグインです。

これはいいと思った方はぜひ導入してみてください。GitHubリポジトリへのスターもお待ちしています。

脚注
  1. Moduleとして解釈されるファイルの場合。今どきのJavaScriptファイルはほとんどこちらです。 ↩︎