プログラミングにおける識別子の表記法まとめ🐫🐍⛓ #命名規則

プログラミングにおける識別子（クラス名、関数名、変数名など）の表記法（○○ケース）には、以下のようなものがあります。

名前		説明	例
キャメルケース	アッパーキャメルケース	大文字で始めて、各単語の先頭を大文字にする	UserName
キャメルケース	ローワーキャメルケース	小文字で始めて、各単語の先頭を大文字にする	userName
スネークケース	アッパースネークケース	すべて大文字にして、各単語をアンダースコア（_）でつなぐ	USER_NAME
スネークケース	ローワースネークケース	すべて小文字にして、各単語をアンダースコア（_）でつなぐ	user_name
チェインケース（ケバブケース）		各単語をハイフン（-）でつなぐ	user-name

使い分け例

以下は、もっとも多くの表記法が混在するであろう、HTML+CSS+JavaScriptにおける使い分けの例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: #ffffff;
  background-color: #55c500;
}
</style>
</head>

<body>
ようこそ、<span id="user_name" data-prop="user_name"></span>さん

<script>
class MetaElement{
  constructor(element){
    this.element = element;
  }

  static fromId(id){
    return new this(document.getElementById(id));
  }

  data(name){
    return this.element.getAttribute(`data-${name}`);
  }

  text(value){
    this.element.textContent = value;
    return this;
  }
}

function fetchConfig(){
  //Mock
  return JSON.parse(
`{
  "user_name": "ムニエル"
}`);
}

const USER_NAME_AREA_ID = 'user_name';

const config = fetchConfig();
const userNameArea = MetaElement.fromId(USER_NAME_AREA_ID);
const userName = config[userNameArea.data('prop')];
userNameArea.text(userName);
</script>
</body>
</html>

See the Pen qpJyWN by Munieru (@munieru_jp) on CodePen.

キャメルケース🐫

アッパーキャメルケース🐫

JavaScriptのクラス名

ローワーキャメルケース🐫

JavaScriptの関数名
JavaScriptの変数名

スネークケース🐍

アッパースネークケース🐍

JavaScriptの定数名

ローワースネークケース🐍

HTMLの属性値
JSONのプロパティ名

チェインケース（ケバブケース）⛓

HTMLのカスタムデータ属性名
CSSのプロパティ名