最近、自分自身が2年ほど前に書いたコードを書き直すタイミングがありました。
その頃は複数人でコードを書くことや、自分自身が読み返す際のことも一切考慮せず、
とにかく楽して書くということをしていたので、コードは本当にひどいものでした。
コード自体はそれほど難しい内容ではなかったのですが、
書き直すにあたりコードを読み返しているとコメントはほぼ無いに等しく、
変数や関数名も単語の頭文字同士を合わせたような名前ばかりで、
理解するのに多くの時間と労力を要してしまいました。
2年前の自分にもっときれいにコードを書けって言ってやりたいですね。
ということで今回は読みやすいコードにするための命名規則について解説したいと思います。
この記事では主に変数や関数を例に紹介しますが、
HTMLのクラスやIDの命名の際にも当てはまる内容ですので、
ぜひHTML/CSSしか触れないという方にも読んでいただきたいです。
変数や関数の命名記法
まず、読みやすいコードを書くための基本として命名記法というものがあり、主に下記の5つがよく使われています。
キャメルケース
キャメルケースとは、下記のように最初の単語の部分は小文字にし、2つ目以降の単語は先頭の１文字だけ大文字にするという記法です。
1 2 3 | userId |
アッパーキャメルケース/パスカルケース
アッパーキャメルケース/パスカルケースとは、下記のように全ての単語の先頭の１文字だけ大文字にするという記法です。
1 2 3 | UserId |
スネークケース
スネークケースとは、下記のように全ての単語を小文字で表記し、単語の間をアンダースコア(_)でつなぐ記法です。
1 2 3 | user_id |
コンスタントケース/アッパースネークケース
コンスタントケース/アッパースネークケースとは、下記のように全ての単語大文字で表記し、単語の間をアンダースコア(_)でつなぐ記法です。
1 2 3 | USER_ID |
チェインケース/ケバブケース
チェインケース/ケバブケースとは、下記のように全ての単語を小文字で表記し、単語の間をハイフン(-)でつなぐ記法です。
1 2 3 | user-id |
こちらは一般的なプログラミング言語ではハイフン(-)は減算のための演算子として扱われるため、
HTMLのクラスやIDでしか使われることがない記法です。
これらの記法をコード全体で統一しているかどうかだけでも読みやさが全く違います。
名前に情報を入れる
ここからが本題になります。
まず、中身がどんなものなのかが分かる情報を入れるということです。
例えば、数値を扱う変数で単位がある場合には変数名に単位を入れたり、
ある数値を別の単位や形式に変換する関数の場合には、元の形式から変換先の形式を名前に入れるとよいでしょう。
例として、下記のように分を秒に変換する関数を作ったとします。
1 2 3 4 5 | function covertMinsToSeconds() { //分を秒に変換する処理 } |
このような名前であれば関数内の処理を確認しなくても分を秒に変換する関数だということが一目で分かると思います。
何をするものなのかが分かる名前
何をするための変数または関数なのかが分かる命名をしましょう。
例えば、getUserDataと命名した関数を用意したとします。
これであれば名前からユーザーデータを取得するための関数であることは分かります。
しかし、getは意味が広すぎてどこからデータを取得するのかが分からず、中身のコードを読まないといけなくなります。
そのため、データベースから取得するのであればfetch、
ファイルから取得するのであればloadをgetの代わりに付けると分かりやすくなります。
目的を示す名前
CSSでありがちなのですが、ある部分の文字を強調する目的で文字色を赤色にしようとするとき、
REDとクラス名を付けている人を見かけます。
このとき、文字色が赤から青へ変更することになった場合、
文字色は青なのにクラス名はREDとなり違和感を感じるようになります。
そして、それを修正しようとするとそのクラスを指定している箇所全て修正するという手間になります。
そのため、目的のことをするためのクラスや変数・関数なのであれば、
目的の結果ではなく、その目的に応じた名前にしましょう。
先ほどの例では、文字を強調することが目的ですので、text-strongのような名前がよいでしょう。
状態を表す名前
次にtrueまたはfalseのみを取り扱うデータ型であるboolean型などの状態を表す変数の場合です。
例えばスイッチの状態を示すswitchという変数があり、その中にtrueが入っているとき、
trueがスイッチのオンを示すのか、それともオフを示すのかは読む人によって解釈が異なります。
そのため、今回の場合だと「switchOn」のように、
変数がどの状態を表しているのかをより明確にするためにisやcan、has、onなどを前に付けるとよいでしょう。
また、名前は否定的なものではなく肯定的なものにしましょう。
その理由として例を挙げると、空ではないかどうかを表す変数名「isNotEmpty」に、trueを入れたとします。
1 2 3 4 5 | if( !isNotEmpty ) { //処理 } |
上記の条件式のとき、中の処理が実行される条件を考えてみると、
「isNotEmptyは空ではないとき、そしてその否定だから空のときに実行される」と少し考えればわかると思いますが、瞬時に理解ができず余計に考える時間が生まれてしまいます。
そのため、肯定的な名前にしましょう。
名前の長さ
次に名前の長さです。
名前の長さはできるだけ短いほうがよいですが、短すぎるのはよくありません。
for文でよく使われるイテレーター(i)のように、
広く知られている名前であればそのままでも問題ないと思います。
しかし、for文の中にfor文が入るようなネストが深い場合には処理を追いづらくなるため、
どこの変数のfor文のイテレーターなのかを明確にするためにfor文を回す変数の頭文字をイテレーターの前に付けるようにするとよいでしょう。
短すぎるのはよくないと書きましたが、
逆に2行に渡る長さの名前もよくありません。
あまりに名前が長いと記述量が増え、単純にソースが読みづらくなります。
関数名などで名前が長くなりすぎてしまった場合には、関数に処理を入れすぎているのかもしれません。
もう少し関数を分けることができないか、一度考え直してみることをおすすめします。
変数の命名に困ったら
どんな名前を付けたらいいか迷う時があると思います。
そんなときは下記のサービスをおすすめします。
記法を選ぶことができ、選択した記法に応じた名前を考えてくれます。
まとめ
ということで今回は命名規則にのっとり時間と労力の削減をしよう！について解説しました。
いかがだったでしょうか？
最適な名前を考える作業というのは難しく、
時間がかかってしまい、正直めんどくさいと思います。
しかし、時間を割くだけの価値があると考えています。
というのも、プログラムは一度作ったら終わりではありません。
長く使おうとすると必ず改修や修正が発生するものです。
もし、その改修や修正作業を担当するのが自分だとしても、
少なからずコードを読み返すことになると思います。
その際にコードが読みやすければ読みやすいほど、
作業にかける時間も労力も少なくなります。
ですので、時間をかけてでも命名という作業に時間を割いてほしいと思います。
最後までご覧いただきありがとうございました～。
