JavaScript 定数の命名規則について

Question

JavaScriptの場合、
・クラスはPasalケース記法　→MySimpleApp
・変数/関数(メソッド)はキャメルケース記法　→mySimpleApp
・定数はスネークケース記法　→MY_SIMPLE_APP, my_simple_app
で表すのが通例とJavaScriptの書籍に記載されていました。

定数だと
const CHECK_ALL = document.getElementsByClassName('ip-check');
になります。

では下記のように定数の中に関数(メソッド)が入っている場合、キャメルケースとスネークケースどちらになるのでしょうか。
const cRect = () => element.getBoundingClientRect();

何卒お願い致します。

Answer 1

const (ES2021)

ES2021仕様上、const キーワードで宣言される変数名に縛りはありません。
他言語にあるような「変数」と「定数」を区別する概念もありません。
const キーワードで宣言される変数は「再代入不可能な変数」の意味しか持ちません。

• 14.3.1 Let and Const Declarations - ECMAScript® 2021 Language Specification

ビルトインオブジェクトのプロパティ

ES仕様上の概念ではありませんが、[\dA-Z_]+ の命名規則を持つプロパティを抽出してみました。

<script>
'use strict';
const getType = value => {
  if (value === null) return 'Null';

  const typeofValue = typeof value;

  if (Object(value) === value) {
    return typeofValue === 'function' ? 'Object(function)' : 'Object';
  }

  return typeofValue[0].toLocaleUpperCase() + typeofValue.slice(1);
};

const setConstProp = (map, object, prefix) => {
  const propList = Object.getOwnPropertyNames(object);
  const entries = propList.filter(name => /^[\dA-Z_]+$/.test(name)).map(function (name) {
    const value = this[name];

    return [
      getType(value),
      {
        propertyName: prefix ? prefix + name : name,
        value: value
      }];
  }, object);

  for (let [key, value] of entries) {
    if (map.has(key)) {
      map.get(key).push(value);
    } else {
      map.set(key, [value]);
    }
  }

  return map;
}

const constMap = new Map;
setConstProp(constMap, this, '');

for (let name of Object.getOwnPropertyNames(this)) {
  const value = this[name];

  if (Object(value) === value) {
    setConstProp(constMap, value, name + '.')
  }
}

console.log(constMap);
</script>

Number型のプロパティが「定数」と思われる不変性を有している事がわかります。

Google JavaScript Style Guide(原文)

ES仕様にない以上、採用するコーディング規約で「定数」の概念および命名規則が決定されます。

---

• 6.2.5 Constant names - Google JavaScript Style Guide

6.2.5 Constant names

Constant names use CONSTANT_CASE: all uppercase letters, with words separated by underscores. There is no reason for a constant to be named with a trailing underscore, since private static properties can be replaced by (implicitly private) module locals.

6.2.5.1 Definition of “constant”

Every constant is a @const static property or a module-local const declaration, but not all @const static properties and module-local consts are constants. Before choosing constant case, consider whether the field really feels like a deeply immutable constant. For example, if any of that instance's observable state can change, it is almost certainly not a constant. Merely intending to never mutate the object is generally not enough.
Examples:

// Constants
const NUMBER = 5;
/** @const */ exports.NAMES = ImmutableList.of('Ed', 'Ann');
/** @enum */ exports.SomeEnum = { ENUM_CONSTANT: 'value' };

// Not constants
let letVariable = 'non-const';
class MyClass { constructor() { /** @const {string} */ this.nonStatic = 'non-static'; } };
/** @type {string} */ MyClass.staticButMutable = 'not @const, can be reassigned';
const /** Set<string> */ mutableCollection = new Set();
const /** ImmutableSet<SomeMutableType> */ mutableElements = ImmutableSet.of(mutable);
const Foo = goog.require('my.Foo');  // mirrors imported name
const logger = log.getLogger('loggers.are.not.immutable');
Constants’ names are typically nouns or noun phrases.

Constants’ names are typically nouns or noun phrases.

以下、機械翻訳結果。

6.2.5 定数名

定数名はCONSTANT_CASEを使用します。すべて大文字で、単語はアンダースコアで区切られます。プライベート静的プロパティは（暗黙的にプライベート）モジュールローカルに置き換えることができるため、定数に末尾にアンダースコアを付ける理由はありません。」

6.2.5.1 「定数」の定義

すべての定数は@const静的プロパティまたはモジュールローカルconst宣言ですが、すべての@const静的プロパティおよびモジュールローカル定数が定数であるとは限りません。定数の場合を選択する前に、フィールドが本当に不変の定数のように感じられるかどうかを検討してください。たとえば、そのインスタンスの監視可能な状態のいずれかが変化する可能性がある場合、それはほぼ確実に一定ではありません。通常、オブジェクトを決して変更しないことを意図するだけでは十分ではありません。
...(中略)...
定数の名前は通常、名詞または名詞句です。

---

コード例を見ればわかるように、const 宣言された変数のすべてを「定数」として扱っているわけではありません。

関数の返り値

関数の返り値を「定数」とみなすのは非常に困難です。

定数だと

const CHECK_ALL = document.getElementsByClassName('ip-check');

になります。

getElementsByClassName() の返り値は HTMLCollection オブジェクトですが、これはliveであり、後から書き換わる可能性があります。
その性質から、変数 CHECK_ALL を「定数」ではないと私は捉えます。

• 4.5. Interface Document - DOM Standard
• 4.2.10. Old-style collections: NodeList and HTMLCollection - DOM Standard

---

querySelctorAll() の返り値は live ではありませんが、querySelctorAll() 実行前にDOMを書き換える事で返り値が変化する可能性がある為、私なら「定数」と扱いません。

---

getElementById() の返り値は、IDに一意性があることから定数とみなしやすいですが、一定の条件は必要です。

• getElementById() 実行前後にid属性値が重複していない
• getElementById() 実行前後にid属性値を書き換えない
• getElementById() 実行前後に対象idを持つ要素の存在性を変更しない(存在しなかった要素を追加or存在していた要素を削除)

---

では下記のように定数の中に関数(メソッド)が入っている場合、キャメルケースとスネークケースどちらになるのでしょうか。

const cRect = () => element.getBoundingClientRect();

element 値の状態に応じて返り値が変化する為、「定数」ではないと私は考えます。

---

参照透過性がない関数は、返り値が変動する可能性がある為、返り値を「定数」とみなしにくい、といえます。
参照透過性があり、引数やthis値を固定できるのなら「返り値」は不変ですが、それならば約束された「関数の返り値」を初めから変数に代入すれば良いことになります。
「関数の返り値」を「定数」とみなすのは非常に困難だと思います。

Re: rei78087487 さん

Comments

[Zuishin]

> element 値の状態に応じて返り値が変化する為、「定数」ではないと私は考えます。

> 「関数の返り値」を「定数」とみなすのは非常に困難だと思います。

この場合、返り値は無関係だと思います。

> const cRect = () => element.getBoundingClientRect();

cRect に入るのは getBoundingClientRect の返り値ではありません。

Answer 2

変数や関数名クラス名の命名規則は、
他の人や将来の自分がそのコードを見たときに
読みやすくなるように規則化されています。

・クラスはPasalケース記法
・変数/関数(メソッド)はキャメルケース記法
・定数はスネークケース記法

逆に言えば

Pascalケース記法は、クラス
キャメルケース記法は、変数/関数
スネークケースは定数

という風になり、コードを見て、クラスなのか関数・変数なのか定数なのか、判断しやすくなりますよね？

つまり、定数は、値の設定方法の如何を問わず、スネークケース記法が規則になります。

Answer 3

定数だと
const CHECK_ALL = document.getElementsByClassName('ip-check');
になります。

ここでいう「定数」は、意味が違うと思われます。単に「constで宣言したもの」ではなく、文字列や数値など、「実行前から特定の値に決められているもの」と解釈したほうが適当だと考えました。