プログラミングにおける識別子（クラス名、関数名、変数名など）の表記法（○○ケース）には、以下のようなものがあります。
| 名前 | 説明 | 例 | |
|---|---|---|---|
| キャメルケース | アッパーキャメルケース | 大文字で始めて、 各単語の先頭を大文字にする |
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のプロパティ名