CSS
JavaScript

そろそろガバガバな命名規則を整理する

More than 1 year has passed since last update.

そろそろガバガバな命名規則を整理する

はじめに

  • 命名が糞適当なのでいい加減整理する
  • リーダブルコード読んだよ
  • jsとcssの想定 フロントエンド寄り

命名の時のアレ

  • キャメルケース : 複合語をひと綴りとして、要素語の最初を大文字で書き表すこと
    例) gorillaGorilla

  • パスカルケース : 複合語の先頭を、大文字で書き始めるキャメルケースのこと。
    例)GorillaGorilla

  • スネークケース : アンダースコアを区切記号として単語をつなげる。
    例)gorilla_gorilla

  • チェインケース:ハイフンを区切記号として単語をつなげる。
    例)gorilla-gorilla

引用
wikipedia
https://ja.wikipedia.org/wiki/キャメルケース

それぞれの使用ケース

  • キャメルケース : 関数名、オブジェクトのキー名

  • パスカルケース : クラス名

  • スネークケース : cssのクラス名、変数名

  • チェインケース : 状態を表す時のcssのクラス名 is-activeとか

命名のポイント

  • 明確な単語
  • 汎用的な名前を避ける(使う状況を選ぶ)
  • 具体的な名前を使う
  • 接尾辞・接頭辞を使って情報を追加

明確な単語

「get」や「size」という単語は抽象的、「どこから」・「なんの」といった明確な情報を命名に含ませる

汎用的な名前を避ける

  • いい名前は変数の目的や値を表す
  • 一時的な保管を目的とした変数などは例外
  • ループイテレータ(iとかjとかkとか)にも明確な名前を追加しておくとバグの発見が楽
    例) club_i ci

具体的な名前を使う

その変数や関数がなんの情報を持つかや、どんな仕事をするのかを具体的に名前に入れる(明確な単語)

接尾辞・接頭辞を使って情報を追加

  • 値を計測できるものには単位も入れるといい。 ms(ミリ秒)とか
  • 変数の意味を間違えるとバグになりそうな部分は属性を名前に追加する

まとめ

命名むずい。アメリカ語わかんない。
命名に関してはリーダブルコードの2章と3章読むのが一番いいんじゃないですかね。