この記事は、フロントエンジニア目線で書いています。フロントエンジニア、コーダーに参考になりそうなリーダブルコードテクニックをまとめました。参考コードは、JavaScriptで記述しています。
リーダブルコードとは、
自分のコードを、他人が見たときに、理解しやすく、読みやすいコードのことです。優れたコードは、人それぞれで概念は掴みづらいですが、優れていないコードの概念は掴みやすいです。
この記事では、優れていないコードを書かないための工夫を紹介していきます。優れていないコードの考え方や詳しい概要は説明しません。興味がある方は、今回参考にする書籍「リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック」を読んでみてください。
#1 変数名で情報を伝える
jQueryは、"$"(ドルマーク)を関数として扱います。"$"だけで呼び出した関数は、変数の頭文字に"$"をつけるというものです。
このようにすれば、変数がjQueryのオブジェクトだと明確にわかります。JavaScriptでは、HTMLCollectionを返すgetElementbyIdや、NodeListを返すquerySelectorなどがあります。変数名を工夫することで、変数にどのような情報（ノード、要素）が入っているか短時間で認識することが出来ます。
JavaScriptには、DOMによる文字サイズの変更、ウェブページの読み込み時間（サイトパフォーマンスを）計測するNavigation Timing APIなどがあります。ピクセルやミリ秒など値に単位が関わる変数には、変数名の末尾に_px、_msなど単位を追加するとわかりやすいでしょう。
HTML、CSSでは、属性名を工夫することが出来ます。id名の区切り文字はアンダースコアを、class名の区切り文字をハイフンにするのが有力です。アンダースコア、ハイフンに何かしらの意味を持たせると理解しやすいコードになります。
大文字にも、意味を持たせることできます。JavaScriptでは、ES2015(ES6)からclass構文が追加されました。class構文は、関数名を先頭大文字にすることで意味を持たせています。JavaScript(ES6以前)は、class構文がなかったため、模倣的にコンストラクタ関数(new演算子とともに利用されることを前提とした関数)を作成していました。ES6以前から、コンストラクタ関数名には、先頭文字を大文字にするよう多くの著者が、提唱しています。ですので、先頭大文字は、コンストラクタ関数名以外では使用しない方が良いでしょう。
全大文字変数は、定数、強い意味を持つ変数などに使用されています。稀に、HTML(DOM)を格納した変数も見かけます。JavaScriptは、ES6でconstが登場しました。再代入が不可能な定数です。しかし、IE10以前は、ES6が非対応です。全大文字変数にすることで、他の開発者に、書き換える（再代入する）べきではない意図を伝えることができるでしょう。
省略形を変数名に使用する場合があります。JavaScriptでは、HTML要素にアクセスするのに、documentオブジェクトを使用します。書籍「ハイパフォーマンスJavaScript」でも、グローバル関数にアクセスする回数を減らすため、documentをローカル関数に格納することを推奨しています。
この程度の関数だと、パフォーマンス効果は見られませんが、グローバル関数へのアクセスを3回から、1回に減らすことが出来ます。(本題の)省略形を使用するには、注意が必要です。その省略形は、チームメイトが意味を理解できるでしょうか？docや、stringの省略形strなどは、よく(エンジニア内では)使用されるので理解できますが、BackEndMangerの省略形BEManagerは、理解出来ません。省略形を使用する場合は、他人が見ても理解できるようにしましょう。
あくまでも、規約です。使うかどうかは、自分自身やプロジェクトメンバーで決めるといいと思います。どんな規約にしても、プロジェクトで一貫性を持たせることが重要です。
Top comments (0)