変数名や関数名の命名規則ってあるの？

どうも、ぺんしるです！

変数名や関数名の命名って悩みますよね？？

今日は、変数名や関数名の命名規則について話していきたいと思います。

変数名は何でもよいのか？

変数名や関数名は、JavaScriptの仕様上は予約後等に引っかからなければ、何を使ってもよいはよいです。ですが、必ずその変数や関数の用途に合った意味のある単語を使用してください。

例えば、何かの総計を設定する変数には、totalCountのように、変数名を見て何が格納されているか分かるような名前にしてください。絶対にaaaのような意味のない名前は付けないでください。

命名規則には、一般的にはキャメルケースとスネークケースというスタイルがあります。

単語の最初の文字が小文字で、2単語目以降は大文字になる書き方です。

ローワーキャメルケースとも呼びます。

var totalCount;

名付けられた変数名がラクダ（英語でcamel）のコブのように見えることから、キャメルケースと呼ばれています。

各単語の先頭文字が大文字になる書き方です。

var TotalCount;

単語と単語とアンダーバーで結合する書き方です。

var total_count;

名付けられた変数名がスネーク（蛇）のように見えることから、スネークケースと呼ばれています。

どちらでも良いです。

それぞれ、メリットデメリットがありますが、正直どちらでも構いません。

それよりも、もっとも大事なことは、ルールを決めることです。

ルールが決まっていないと、人によって好きな書き方をしてしまい、スネークケースとキャメルケースが混在することがよくあります。そうなると、ソースコードの可読性が落ち、後々の開発保守の効率を落とします。ルールが決まっていない場合には、必ずルールを決めてくださいね。

定数は必ず大文字にします。大文字にすることで、この変数を見た人が「これは定数だな」と簡単に認識できるようになります。単語と単語はアンダーバーで区切ります。

const TOTAL_COUNT = 0;

仕様上の明確な名称はありませんが、先頭がアンダーバーで始まる変数名を使用する場合があります。

var _totalCount;

使用するケースとしては、アンダーバーなしの変数の値を一時的に格納するために局所的に使用します。

var totalCount;
var _totalCount;

ハイフン（-）で単語を区切った書き方です。

CSSのクラス名で良く使用します。

<div class='div-1'>

名前の由来は、ハイフンでつないだ文字がケバブのように串刺しに見えるためです。

いかがでしたか？

命名規則なんて軽微なこと、と思われるかもしれませんがとても大切です。

必ずルールを決めてそれに従ってくださいね。

より良いプログラムを書くには、以下の本が参考になりますよ。

不明点があれば、遠慮なく質問くださいね。

ではでは。