JavaScript演習-【付録】JavaScriptガイドライン

ガイドラインとは

このガイドラインは、トライデントコンピュータ専門学校 Web デザイン学科の授業「JavaScript 基礎/JavaScript 実習」でのプログラミングのスタイルガイドラインです。

変数と関数の命名規則と宣言規則。
空白、字下げ、およびコメントの使用に関する規則。
プログラミングの慣習と原則。

ガイドラインは、プログラムの統一化と品質を保証、グループ制作など複数の開発者が携わった場合の意思疎通をしやすくすることを目的としています。

コードの読みやすさを改善する。
コードのメンテナンスを容易にする。

ガイドラインは、チームが従うためのルールを文書化することも、個々のコーディング慣習とすることもできますが、
各開発現場（企業・プロジェクト）によりガイドラインは変わります。
あくまで、トライデントコンピュータ専門学校 Web デザイン学科内での制作時に利用すると心得てください。

解説項目

命名規則

参考ガイドライン

命名規則

記法	別名	例	備考
スネークケース		users_table	すべて小文字で複合語のスペースをアンダースコアで区切る。
アッパーキャメル	パスカルケース	UserData	先頭を大文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。
ローワーキャメルケース	キャメルケースバイキャピタライゼーションインターキャプスミックストケース	usersTable	先頭を小文字で書き始め、複合語のスペースをなくし要素の先頭は大文字にする。
コンスタントケース	アッパースネークケース	USER_ID	すべて大文字、単語をつなげる場合はアンダースコア。
ケバブケース	チェインケーストレインケーススパイナルケースリスプケース	user-area	文字の単語間にハイフンでつなぐ。JavaScriptなどプログラムでは減算(-)と混同しますので利用しません。 cssやhtmlの属性などには使われます。

変数（グローバル変数・ローカル変数）

変数には、グローバル変数とローカル変数があります。
2 つを区別するガイドラインをもありますが、スコープの概念が理解できてないうちは同じで構いません。

lowerCamelCase（ローワーキャメルケース）を使う。

//例
let localVariableName;

参考

変数名の付け方をまとめてみた | zenn
1. 広く意味を持つ名前をつけない
2. 多少長くなっても必要な情報は必ずいれる
3. 不要な単語は排除する
4. 日本語をローマ字にした変数名は絶対 NG
5. 配列やコレクションは複数形にする
6. boolean 型は「is」「has」「can」「should」をつけると分かりやすくなることが多い
7. 品詞を意識する

ネーミングに困ったら、プログラマーのためのネーミング辞書codicが便利です。

定数

すべて大文字で、単語毎にアンダースコアで区切る。
CONSTANT_CASE（コンスタントケース）を使う。
変数として const を利用する場合は、lowerCamelCase（ローワーキャメルケース）を使う。

//例
const PI;
const MY_BIRTH_YEAR = 2003;
const variableText= '変数';

配列

複数形もしくは、接尾辞（サフィックス）を利用する。
lowerCamelCase（ローワーキャメルケース）もしくは snake_case（スネークケース）を使う。

//例
let values = ['value1', 'value2', 'value3']; //複数形
let data_list = ['data1', 'data2', 'data2']; //接頭辞_list
let data_array = ['arrayData1', 'arrayData2', 'arrayData']; //接頭辞_array

values（複数形）と value（単数）の区別が付きづらいので、接尾辞を入れるスネークケース（snake_case_array）で明記することにします。

オブジェクトのプロパティ

lowerCamelCase（ローワーキャメルケース）を使う。
オブジェクト名（変数名）も同様に lowerCamelCase。
2 つ以上の単語の組み合わせをキーに設定しない。

//例
let ichiroSuzuki = {
	name: '鈴木一朗',
	number: 51,
	teamName: 'Seattle Mariners'
};

関数

lowerCamelCase（ローワーキャメルケース）を使う。
動詞または動詞＋名詞となるように命名する.

//例
function run() {
	//処理
}

引数

単語（名詞）
複数の単語をつなげる場合は、snake_case（スネークケース）を使う。

//例
function getName(first_name, last_name) {
	//処理
}

クラス

クラス名は先頭大文字のキャメルケース(複数語を単語の先頭を大文字で結合したもの)を使う。

//例
class BigDog {
	constructor(name, type) {
		this.name = name;
		this.type = type;
	}
}

Webデザイン学科
授業資料