JavaScriptの命名規則を現役エンジニアが解説【初心者向け】

JavaScriptの命名規則について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

命名規則とは

命名規則とは、プログラムの変数名や関数名などを決めるルールです。

ほとんどのプログラミング言語は、その言語仕様さえ守っていればとても自由にソースコードを記述することができます。しかし、変数名や関数名を以下のように記述するとどうなるでしょう。

var _1 = 180;
var _2 = 75;
function a(_a, _b) { _a /= 100; return _b / (_a * _a); }
var _3 = a(_1, _2);
console.log(_3);

 

変数名や関数名から意味を読み解くことができず、結果的にプログラム全体の処理も分かりづらくなってしまいます。

それでは同じプログラムを、変数名や関数名を変え、コメントを付与するとどうなるでしょうか。

// 身長(cm)
var height = 180;
// 体重(kg)
var weight = 75;

// BMIを計算する関数
// BMI = 体重kg / (身長mの2乗)
function calcBmi(height_cm, weight_kg) {
  var height_m = height_cm /= 100;
  return weight_kg / (height_m * height_m);
}

// BMIを計算した結果をコンソールに出力する
var bmi = calcBmi(height, weight);
console.log(bmi);

 

明らかに読みやすいのがお分かり頂けたことと思います。このようにプログラムでは、変数名や関数名を分かりやすく命名するとこがとても重要です。

 

JavaScriptの命名規則

JavaScriptの命名規則として有名なものに「Google JavaScript Style Guide」があります。

「Google JavaScript Style Guide」は命名規則だけでなくプログラム全体のコーディング規約（守ったほうが良いルール）をまとめたものです。

Google JavaScript Style Guide(ECMAScript6対応版)

命名規則は「6.Naming」にまとめられています。いくつかご紹介しましょう。

• 名前には半角英数字とアンダースコア「_」とドルマーク「$」を使用する
• 外部(プログラムを書いた人以外)の人が見ても分かりやすい名前にする。独自のルールで単語の文字を省略したりしない。悪い例：「wgcConnections」。何を指しているか外部の人には意味不明
• クラス名は先頭大文字のキャメルケース(複数語を単語の先頭を大文字で結合したもの)。例：BigDog。
• 関数名は先頭小文字のキャメルケース。例：sendMessage
• 定数名はすべて大文字のスネークケース(複数語をアンダースコア「_」で結合したもの）。例：COLOR_CODE_RED
• 変数名(引数名)は先頭小文字のキャメルケース。例：priceCountReader

「Google JavaScript Style Guide」には命名規則以外にも役立つ情報が多く掲載されています。平易な英語で書かれているのでぜひ読んでみましょう。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

筆者プロフィール

この記事を監修してくれた方 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。