サキ今回は名前の付け方について学んでいきます！
適当につけると他の人が分からないので、
命名規則を覚えましょう。
命名規則とは
ファイル名やコンピュータ言語で名前をつける時のルールです。
用途や目的が分かりやすくなったり、チームでの管理など複数人で作業する際などに一貫性があると効率的です。
よく使用するものだけでも覚えていきましょう！
こちらのコンテンツは動画でも説明しています。
Web制作で使用する命名規則
まずは、よく使用する命名規則について学んで行きましょう。
ケバブケース
単語と単語を-（ハイフン）でつなげるルールです。
例えばuser nameという場合はuser-nameとなります。
串刺しにしたような見た目からケバブケースと言われますが、別名チェインケースとも呼ばれます。
- HTMLのクラスやID
- URL
- ファイル名
などに使用されますので、Web制作初心者でもよく目にするルールです。
<p class="user-name">田中太郎さん</p>キャメルケース
つなげる単語の頭文字を大文字にするルールです。
user nameの場合はuserNameとなります。
キャメルケースと言えばこちらが一般的ですが、後述するものとの違いでローワーキャメルケースと言ったりもします。プログラミングでは一般的なルールですが、日常生活ではあまり見ません。
- 変数
- 関数
などに使用されますので、コードを扱う場合は覚えておきましょう。
let userName = '田中太郎';スネークケース
単語と単語を_（アンダースコア）でつなげるルールです。
user nameの場合、user_nameになります。
スネークケースもキャメルケースと同様でプログラミングで使用されますが、画像の命名などにも使われるのでわりと身近に感じられるのではないでしょうか。
- 変数
- 関数
- ファイル名
などに使用されます。
let user_name = '田中太郎';パスカルケース
単語の頭文字を全て大文字にします。
user nameの場合は、 UserNameとなります。
キャメルケースに似ているため、こちらをアッパーキャメルケースと言ったりする場合もあります。
プログラミング言語のパスカルというもので使用されていたことが由来になっています。
- クラス
こちらが使用されているクラスはHTMLやCSSではなく、プログラミング言語におけるクラスの場合に使用されます。
class UserName {
constructor(name) {
this.name = name;
}
displayName() {
console.log(`Hello, my name is ${this.name}.`);
}
}コンスタントケース
単語を全て大文字にして、単語と単語を_（アンダースコア）でつなぎます。
user nameの場合はUSER_NAMEになります。
スネークケースの大文字版なので、アッパースネークケースとも呼ばれます。
かなり目立つので重要なものなど明示的に表すのに使用されます。
- 定数
プログラミング言語では定数でよく使用されます。
define('USER_NAME', 'YAMADA_TARO');URLにおける命名規則
URLで単語をつなげたいという場合は、ハイフンでつなぐケバブケースが推奨されています。
こちらは「GoogleにおけるURL構造のベストプラクティス」に記載されており、ユーザーや検索エンジンがURLのコンセプトを理解しやすいようにハイフンを検討してください。とあります。
プログラミングでNGな命名規則
プログラミングで変数や関数の名前を決める際には、ケバブケースで定義してはいけません。
プログラミング言語において、-（ハイフン）は減算演算子と呼ばれ引き算をするのに使用します。
そのためuser-nameなどとしてしまうと変数同士の引き算などと解釈されてしまうため、使用することができません。
HTMLはマークアップ言語、CSSはスタイルシート言語といいプログラミング言語とは違うため、この２つの言語では使用可能となります。
最後に
今回は命名規則についてご紹介しました。
キャメルケースなど独特の命名規則があったり、コンスタントケースのような名前の付け方で意味を持つものもあるので、プログラム見た時に気づけるようになりましょう！
