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

6383 ワード
命名規則 ネーミング 命名規則 テキストリンク

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

名前 説明 例
キャメルケース アッパーキャメルケース 大文字で始めて、
各単語の先頭を大文字にする		 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のプロパティ名