DEV Community

Shibayama Hiroki
Shibayama Hiroki

Posted on • Edited on

4

フロントエンジニアのリーダブルコード #1 変数名で情報を伝える

この記事は、フロントエンジニア目線で書いています。フロントエンジニア、コーダーに参考になりそうなリーダブルコードテクニックをまとめました。参考コードは、JavaScriptで記述しています。

リーダブルコードとは、

自分のコードを、他人が見たときに、理解しやすく、読みやすいコードのことです。優れたコードは、人それぞれで概念は掴みづらいですが、優れていないコードの概念は掴みやすいです。

この記事では、優れていないコードを書かないための工夫を紹介していきます。優れていないコードの考え方や詳しい概要は説明しません。興味がある方は、今回参考にする書籍「リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック」を読んでみてください。

#1 変数名で情報を伝える

jQueryは、"$"(ドルマーク)を関数として扱います。"$"だけで呼び出した関数は、変数の頭文字に"$"をつけるというものです。

Alt Text

このようにすれば、変数がjQueryのオブジェクトだと明確にわかります。JavaScriptでは、HTMLCollectionを返すgetElementbyIdや、NodeListを返すquerySelectorなどがあります。変数名を工夫することで、変数にどのような情報(ノード、要素)が入っているか短時間で認識することが出来ます。

JavaScriptには、DOMによる文字サイズの変更、ウェブページの読み込み時間(サイトパフォーマンスを)計測するNavigation Timing APIなどがあります。ピクセルやミリ秒など値に単位が関わる変数には、変数名の末尾に_px、_msなど単位を追加するとわかりやすいでしょう。

HTML、CSSでは、属性名を工夫することが出来ます。id名の区切り文字はアンダースコアを、class名の区切り文字をハイフンにするのが有力です。アンダースコア、ハイフンに何かしらの意味を持たせると理解しやすいコードになります。

Alt Text

大文字にも、意味を持たせることできます。JavaScriptでは、ES2015(ES6)からclass構文が追加されました。class構文は、関数名を先頭大文字にすることで意味を持たせています。JavaScript(ES6以前)は、class構文がなかったため、模倣的にコンストラクタ関数(new演算子とともに利用されることを前提とした関数)を作成していました。ES6以前から、コンストラクタ関数名には、先頭文字を大文字にするよう多くの著者が、提唱しています。ですので、先頭大文字は、コンストラクタ関数名以外では使用しない方が良いでしょう。

Alt Text

全大文字変数は、定数、強い意味を持つ変数などに使用されています。稀に、HTML(DOM)を格納した変数も見かけます。JavaScriptは、ES6でconstが登場しました。再代入が不可能な定数です。しかし、IE10以前は、ES6が非対応です。全大文字変数にすることで、他の開発者に、書き換える(再代入する)べきではない意図を伝えることができるでしょう。

Alt Text

省略形を変数名に使用する場合があります。JavaScriptでは、HTML要素にアクセスするのに、documentオブジェクトを使用します。書籍「ハイパフォーマンスJavaScript」でも、グローバル関数にアクセスする回数を減らすため、documentをローカル関数に格納することを推奨しています。

Alt Text

この程度の関数だと、パフォーマンス効果は見られませんが、グローバル関数へのアクセスを3回から、1回に減らすことが出来ます。(本題の)省略形を使用するには、注意が必要です。その省略形は、チームメイトが意味を理解できるでしょうか?docや、stringの省略形strなどは、よく(エンジニア内では)使用されるので理解できますが、BackEndMangerの省略形BEManagerは、理解出来ません。省略形を使用する場合は、他人が見ても理解できるようにしましょう。

あくまでも、規約です。使うかどうかは、自分自身やプロジェクトメンバーで決めるといいと思います。どんな規約にしても、プロジェクトで一貫性を持たせることが重要です。

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more