フロントエンドの慣習のまとめ #JavaScript

1. はじめに

フロントエンドを始めたばかりの頃、参考書や参考サイトで当然のように使われているものの、特に說明がないような**「慣習」や「テクニック」**に困惑したり、その理由が気になった経験を思い出したので、その一部を簡単にまとめてみました。

2. HTML

2-1. iタグでアイコン

<i class="icon"></i>テキスト

HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。

<i>: 興味深いテキスト要素 - HTML: HyperText Markup Language | MDN

仕様上は適切な使用方法ではなさそうですが、「Bootstrap Icons」や「Font Awesome」などでも採用されているように、普及している印象があります。

ちなみにHTML4.01ではテキストを斜体（イタリック）にするものとして定義されていました。

2-2. ボタンのマークアップ

<a href="#">こちらをクリック！</a>
<button type="button">こちらをクリック！</button>

そのボタンがリンク機能を持つ場合はaタグで、それ以外はbuttonタグを使用することが多いです。
inputタグにもtype="button"がありますが、デザイン調整のしづらさ（疑似要素が使えない）からあまり使われることはありません。
divやspanでも作成できますが、フォーカスが効かない、エンターキーやスペースキーでの操作ができない、スクリーンリーダーに対応していないなどのデメリットがあり、別途対応の手間がかかってしまいます。
ちなみにbuttonタグのtypeを明記しない場合はsubmitが既定値になります。
ボタンは<button>で実装しよう - Qiita

2-3. 一部分だけタグが改行されていない or タグ間の謎のコメントアウト

<ul>
  <li>hoge</li><li>fuga</li><li>piyo</li>
</ul>

<ul>
  <li>hoge</li><!--
  --><li>fuga</li><!--
  --><li>piyo</li>
</ul>

display:inline-block;は横並び時に不要な隙間ができてしまうので、それを防止するテクニックのひとつです。
他者が作成した上記のようなHTMLをメンテする際、その意味を確認せず整形したりコメントアウトを除去してしまうと、デザイン崩れを引き起こす可能性があります。
そのため基本的にはCSSでの対応がおすすめです。
inline-blockの隙間をなくす方法 - Qiita

2.4. scriptタグをbody閉じタグ直前に設置

<body>
  ...
  <script src="hoge.js">
</body>

scriptタグはhtmlのどこにでも記述可能ですが、JavaScriptの読み込み中はレンダリングがストップしてしまい表示が遅くなってしまうということと、JavaScriptでDOM操作をする場合、DOM構築が完了している必要があるため、scriptタグをbody閉じタグ直前に設置するという慣習が生まれました。
ちなみにheadタグ内にscriptタグを記述した場合でもdefer属性をつけることで上記の問題は解決できます。
<script>: スクリプト要素 - HTML: HyperText Markup Language | MDN

3. CSS

3-1. クリアフィックス

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

最近では要素の横並びはFlexboxを使用する機会が増え、floatを使うことは少なくなりましたが、これはfloatを解除するためのテクニックです。
float適用要素もしくはそのラッパー要素のafter疑似要素で解除することで、次に続く要素の先頭での解除を不要にします。
overflow: hidden;でも解除できますが、内包要素が親要素からはみだすようなデザインの場合には不向きです。
IEが非対応ならdisplay: flow-root;という方法もあります。
Clearfix · Bootstrap v5.0

3-2. 表示上は何も変わらないtransform設定

transform: translate3d(0,0,0);
transform: translateZ(0);
backface-visibility: hidden;

これらの設定によりCSSアニメーションにGPU処理が取り入れられるようになり、アニメーションがスムーズになるケースがあります。

また、最近では以下のようなプロパティによる設定方法もあります。
will-change - CSS: カスケーディングスタイルシート | MDN

しかしこれらはいずれも乱用すべきテクニックではないため使用には注意が必要です。
CSS アニメーションについて深く知る - Qiita

3-3. ズーム率を等倍

zoom: 1;

IE7までは内部にhaslayoutという値をもっており、これがデフォルトでfalseだったため、レイアウトが崩れるという事象がありました。
上記コードによりtrueへと変更することで、レイアウト崩れを直せるケースがありました。
目にすることはあっても、もう自分で書く機会はないと思います。

4. JavaScript

4-1. for文のカウンタ変数「i」

for (let i = 0; i < 9; i++) {
  console.log(i);
}

FORTRANという世界最初の高水準プログラミング言語があり、その言語では変数名は一文字だけしか使用できず、そのうち整数をあらわすものはI～Nの６個だけだったことによる慣習らしいです。
Index,Iterator,Integerなどの頭文字というわけではなかったんですね。
iのほかにもそれに続くj,kなどが使用されたりします。
なぜループカウンタ変数のほとんどに “i”が使用されるのか？ - Qiita

4-2. $から始まる変数

const $hoge = $('.hoge');

先頭に**「$」を付与することで、ひと目でjQueryオブジェクト**が格納されていることがわかります。

4-3. that, _this, selfという変数名

const that = this;

thisの参照を保存するためによく使われる変数名ですが、Airbnbのスタイルガイドでは

アロー関数かFunction#bindを利用すること

が推奨されています。

4-4. アンダースコアから始まる変数・関数名

const _hoge = 'hoge';
function _doSomething() {…};

JavaScriptには仕様上、アクセス修飾子（public,private,protected,static）がないため、**プライベート（ローカルスコープ内だけでの使用を想定）**であることを明示したいときなどに使われることがあります。
また「_this」のように予約語を回避するために使用されることもあります。
ちなみにAirbnb JavaScript スタイルガイドでは、

JavaScriptは、プロパティやメソッドについてのプライバシーの概念を持っていません。先頭のアンダースコアは「非公開」を意味する一般的な規則ですが、実際にはこれらのプロパティは完全に公開されているため公開APIの一部です。この規約により、開発者は変更が壊れているとは見なされない、またはテストが必要ではないと誤って考える可能性があります。

として、「末尾または先頭のアンダースコアを避ける」ことが推奨されていました。

4-5. クラス名はアッパーキャメル

class HogeFuga {...}
const hogeFuga = new HogeFuga();

ちなみにAirbnb JavaScript スタイルガイドにも

オブジェクト、関数、インスタンスにはキャメルケース（小文字から始まる）を使用すること。
クラスやコンストラクタにはパスカルケース（大文字から始まる）を使用すること。

と明記されています。
クラス名を**アッパーキャメル（パスカルケース）にしておくと、インスタンス化する時にローワーキャメル（キャメルケース）**にするだけでいいという利便性もあります。

4-6. 定数は大文字

const HOGE_FUGA = 42;

定数は大文字をアンダースコアでつないだアッパースネークケースで書かれることがあります。
MDNには

定数は大文字または小文字で宣言することができますが、すべて大文字で宣言するのが慣例です。

と書かれておりますが、Airbnb JavaScript スタイルガイドでは、

ファイル内の定数には大文字を使用しないでください。ただしエクスポートされた定数には使用する必要があります。

となっています。

4-7. 即時関数によるスコープ

;(function() {...})();

即時関数（即時に実行される関数式）により、スコープを作るテクニックです。
スコープとは**「変数の名前や関数などの参照できる範囲を決めるもの」です。
functionの前に「(」があるのは、これがないと関数式ではなく関数宣言だと構文解析されエラーになってしまうから（+や!などが使われているパターンも）。
先頭に「;**」が付けられていることもありますが、これはファイル結合された場合、直前のファイルの最後にセミコロンが抜けていると構文エラーになってしまうことを防止するためです。
(function($){…})(jQuery);のように引数が渡されている場合もありますが、これは変数$の衝突を回避するためです。

4-8. 名前空間パターン

const Hoge = window.Hoge || {};
Hoge.Fuga = function() {...}:

グローバル空間に公開するオブジェクトを最小限にし、予期せぬ名前の衝突を防ぐテクニックです。
「||」は論理和演算子で、左辺と右辺のいずれかがtrueの場合trueとなり、その値を返却します。
つまり**「もし変数Hogeがすでに設定されていたならそれを流用し、未使用なら新規オブジェクトを代入する」**ことにより、すでにある変数の上書きを回避します。

5. その他

5-1. ほげ

const ary = ['hoge','fuga','piyo'];

メタ構文変数（メタこうぶんへんすう、metasyntactic variable）はプログラミング言語の記述で使われる識別子の一種。サンプルプログラムなどで意味のない名前が必要な場合に利用される、「意味のない名前」であることが広く知られた識別子のことである。

メタ構文変数 - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E6%A7%8B%E6%96%87%E5%A4%89%E6%95%B0#hoge%E3%81%A8piyo

日本で主に使用されているメタ構文変数です。
由来についてはいくつか仮説があるものの、よくわかっていないようです。
使用する順番が決まっており、たとえばいきなりfugaから使用するということはありません。
ちなみに英語圏ではfoo,bar,bazなどが採用されています。

5-2. 英文のダミーテキスト「Lorem ipsum」

<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。

lorem ipsum - Wikipedia https://ja.wikipedia.org/wiki/Lorem_ipsum

もとは古代ローマの政治家・哲学者キケロの**『De finibus bonorum et malorum』**（善と悪の究極について）という著作から取られているそうです。
デザインよりも文章の内容に意識が集中しないようにするための工夫です。

ちなみにHTMLやCSSを省略記法で簡潔に記述するためのツール「Emmet」に対応したエディタで、「lorem」と入力し変換すると、毎回、ランダムなlorem ipsumを生成してくれるので便利です。

5-3. TODOというコメントアウト

// TODO: totalはオプションパラメータとして設定されるべき。
// FIXME: グローバル変数を使用するべきではない。

アノテーションコメントといい、問題を指摘して再考を促す場合や、問題の解決策を提案する場合に使用されます。
上記以外にも種類があり、エディタによってはこれらをハイライトや一覧で見ることができます。
TODO: 以外のアノテーションコメントをまとめた - Qiita

5-4. READMEファイル名を大文字にする

README.md

リードミー（Readme）とは、ソフトウェアを配布する際の添付文書のひとつ。配布物の一般的な情報を記載したファイルである。多くの場合、そのソフトウェアをインストールし使用する前に読むべきものとされている。

リードミー - Wikipedia https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%BC%E3%83%89%E3%83%9F%E3%83%BC

なぜ大文字なのかということについては、**「目立つから」「並び順が小文字よりも先になるから」**といった理由が散見されました。

6. おわりに

まだまだ挙げればキリがありませんが、あらためて感じたことは、たいていの慣習にはなんらかの理由や目的があるということでした。
このような慣習に対する深い理解は、応用や発展に向けて有用だと思いました。

フロントエンドの慣習のまとめ