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

初心者向けにJavaScriptの命名規則について現役エンジニアが解説しています。変数や関数などの名前は基本的なルールを守っていれば問題ないのですが、定数は大文字、変数名にはわかりやすい半角英数字などをつけることが慣例としてあります。他のプログラミング言語でも似ていますので、命名規則について気を付けるようにしましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptの命名規則について詳しく説明していくね!

大石ゆかり

お願いします!

 

命名規則とは

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

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

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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

この記事を監修してくれた方

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。