[PR記事] この記事で紹介している内容には広告を含んでいます。
JavaScriptでコーディングをしていると、名前を付けて変数や関数を管理する機会がたくさんありますよね。
どういう名前を付けたらいいか迷うことはありませんか？
「実際の開発ではどういう風に名前を付けるのかな？」
そんなあなたに向けて、この記事ではJavaScriptでの命名規則を解説します。
命名規則をしっかりと意識することで、チームでの開発にも役立ちます！
山田ねこ現役システムエンジニアの山田ねこが解説します！
そもそも変数って何？という人は、先に次の記事から確認しましょう。
JavaScriptでの変数や関数につけられる名前の制限
JavaScriptの仕様として、変数や関数につけられるに次の制限があります。
- 大文字と小文字が区別される
- 変数の1文字目は、文字、_（アンダースコア）、$（ドル記号）から始める
- 変数の1文字目に数値を使うことはできない ※2文字目以降であれば使える
この先で説明する命名規則は、上の制限にさらにルールをプラスするよ。
変数名や関数名のことを識別子といいます。
上で記載した制限は、識別子共通のルールです。
識別子には他にも、オブジェクトのプロパティ名が含まれます。
開発現場で使うJavaScriptの命名規則～パターンから考える～
開発現場ではどのような命名規則を使っているのかを確認してみましょう。
命名の規則には○○ケースと呼ばれるパターンがあります。
ここでは、代表的な以下の2つのパターンをご紹介します。
- キャメルケース(camelCase)
- スネークケース(snake_case)
キャメルケース（camelCase）
キャメルケースは、先頭の1文字目が小文字始まり、単語の切れ目を大文字にしてつなげる命名のパターンです。
キャメルケースを使う場面
キャメルケースはJavaScriptの変数名・関数名の基本となるパターンです。
// camelCaseの例
const functionName = () => {
console.log('Hello, world!');
};
functionName();変数・関数は、まずはキャメルケースで名前をつけると覚えておきましょう。
スネークケース（snake_case）
スネークケースは単語と単語の間を_(アンダーバー)でつなげる命名のパターンです。
スネークケースを使う場面
スネークケースは、固定の値を入れておきたい定数の名前に使います。
その際、すべての単語を大文字にします。
// snake_caseの例
const MAX_COUNT = 5
// ループを5回繰り返す
for (index = 0; index < MAX_COUNT;index +=1) {
console.log(index);
}こちらの記事でも解説した通り、constで宣言した変数のことを定数といいます。
「constで宣言した場合は必ず大文字のスネークケースにしたほうが良いの？」
そんな疑問が浮かぶ人もいるでしょう。
ですが、constを使う場合でも、関数から返された値を設定するなど、その場で処理を行う場合はキャメルケースを使います。
大文字のスネークケースを使うのは、あくまでも絶対に固定の値を入れたい場合と覚えておきましょう。
チームの他のメンバーのことを意識する
基本的な命名の規則として、まずはJavaScriptの仕様。次に命名のパターンを意識する必要があります。
その先に必要なのがチームの他のメンバーのことを意識するということ。
つまり、自分だけに伝わる名前ではなく、他の人が見ても分かりやすい名前を付けることが大切です。
そのために意識することとして、例えば次の3つのことがあります。
- 意味を持った名前をつける
- 単語を省略しすぎない
- 関数名では動詞と目的語を意識する（何をどうする処理なのかを明確にする）
意味を持った名前をつける
名前には意味を持たせるようにしましょう。
単に「a」「b」「c」のような名前をつけることは避けましょう。
これは自分自身では分かりやすいかもしれませんが、他の人が見ても分かりにくいものです。 また、意味を持たせることで、後からコードを見直す場合にも理解しやすくなります。
例えば、次のコードでは各変数に意味を持たせています。
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const week = today.getDay();
単語を省略しすぎない
名前を省略しすぎることは、意味を持たせることから逆に分かりにくくなることがあります。
例えば次のコードでは、長い名前を省略しすぎることで、分かりにくいコードになっています。
const today = new Date();
const y = today.getFullYear();
const m = today.getMonth() + 1;
const d = today.getDate();
const w = today.getDay();これなら、次のコードの方が分かりやすくなります。
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const week = today.getDay();関数名では動詞と目的語を意識する
特に関数名では、動詞と目的語を意識することで、関数の動作をよく理解できるコードになります。
function getCustomerData() {
// 顧客データを取得するための処理
}
function createNewCustomerData() {
// 新規顧客データを作成するための処理
}チームによっては命名規則を明確なルールとして定めているところもあるよ。
チームで開発するときはそういう資料がないか確認してみてね。
分かりやすい命名規則の参考になる本
分かりやすい命名規則の参考になる本として「リーダブルコード」があります。
独学でプログラムを学ぶのであれば、一度読んでおきたい本です。
チームで開発をする上で分かりやすいコードとはどういうものかを学ぶことができます。
ポチップ
初心者には少し内容が難しいというレビューもあるよ。
良い本なのは間違いないので、手元に置いておいて本の中で紹介されているやり方で実際に命名してみるなど、実践しながら読むことがおすすめだよ。