小〜中規模サイトのフロントエンド・コーディング規約 HTML編

  • 41
    いいね
  • 0
    コメント

関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のHTMLコーディング規約です。
とても長いのですが、ここでは開発時に知っておいて欲しいことの概要を書きました。

前提知識としてちゃんと理解し、案件仕様にあわせて対応してもらえれば幸いです。
オライリー本はほんと勉強になるので、ぜひ読みましょう…!

関連ページです↓
環境構築編
CSS・JavaScript編

小〜中規模サイトのフロントエンド・コーディング規約 HTML編

マークアップ言語仕様

項目 定義内容
HTML規格 HTML5
DOCTYPE宣言 <!DOCTYPE html>
文字コード UTF-8
改行コード LF
静的ページ 拡張子 .html(.htmなどは使わない)
viewport(width) width=device-width,initial-scale=1
lang ja
正規化 canonicalタグで絶対パスを記述してください

viewport は iOS10 で user-scalable=no が無効になったため、 initial-scale のみ設定します。

動作保証対象OS・ブラウザ

基本的には、公式サポート有効内のOS・ブラウザをのみ対象にします。
サポート対象外のOS・ブラウザを使うことは

  • セキュリティパッチの無償提供が停止
  • 以後に発覚した脆弱性は修正されず、セキュリティ面でひどく脆くなってしまう
  • 攻撃を受けた際、その責任はブラウザ提供側でなくwebサービス提供側になる恐れがある
  • 古い環境ではできることが限られるため、開発&保守の難易度が上がる

上記のリスクを含むことを確認してください。

アクセシビリティ

最低限として、下記に配慮しましょう。

  • コンテンツに見合った自然なコーディング(厳格でない程度のセマンティックさを意識する)
  • 見出しの構造化(議論はありますが、<h1> はページに1回のみにします)
  • ユーザが操作できる要素は、フォーム要素以外では <a> もしくは <button> でマークアップする
  • 装飾以外の <img> にはaltを設定する
  • フォームの要素がどんな役割をもつか明示するために、要素ごとに <label> で関連づける
  • コーディング後に明らかに使いづらい箇所は、相談し、代替の方法を模索する

公的機関はもちろんですが、特に公共性が高い案件は下記も顧慮します。

WAI-ARIA の実装は bootstrap の components が参考になります。

集客や周辺コンテンツへの誘導に効果的な施策

こちらは案件内容によって適宜対応してください。

  • SNS へシェアさせる
  • AMP 対応を行う
  • JSON-LD を用いたページデータ構造化を行う
  • ディープリンクの設置

ページパフォーマンス最適化

ユーザの使い勝手向上やページのCVRアップにもつながるので、
パフォーマンス最適化は必ず行うようにします。

O'ReillyハイパフォーマンスWebサイトで挙げている14のルール

  1. HTTPリクエストを減らす
  2. CDNを使う
  3. Expiresヘッダを設定する
  4. コンポーネントをgzipする
  5. スタイルシートは先頭に置く
  6. スクリプトは最後に置く
  7. CSS expressionの使用を控える
  8. JavaScriptとCSSは外部ファイル化する
  9. DNSルックアップを減らす
  10. JavaScriptを縮小化する
  11. リダイレクトを避ける
  12. スクリプトを重複させない
  13. ETagの設定を変更する
  14. Ajaxをキャッシュ可能にする

この14のルールは現在では古く、使われていないもの・効果が薄いものもあります。
ですが、「何を目的にして項目化されたのか」を理解することはとっても大切です。

上記の中でも効果が高い施策は、
HTTPリクエストを減らす ことと
レンダリングブロックを最小限に抑える ことです。

HTTPリクエストを減らす

  • Expireヘッダの設定(リソースのキャッシュ設定)
  • DNSルックアップを減らす(プリフェッチはHTTP1.xでは有効)
  • 画像のCSSスプライト作成

CSS や JavaScript の結合は有効ですが、
やりすぎるとリソース自体が肥大し、古いブラウザなどで描画が遅くなる場合があります。

レンダリングブロックを最小限に抑える

  • SNSプラグインなど初期表示に関わらないリソースの読み込みを非同期にする
  • 正しいHTMLマークアップを行う
  • CSS のパースはページロードを止めてしまうので、<HEAD> 内で JavaScript の読み込みより前に行う

画像最適化

画像形式の選び方

  • アニメーション --- gif
  • 色数の多い画像 --- jpg
  • 色数が少なく、形状が単純なもの --- svg
  • それ以外、透過データがあるもの --- png
  • 管理画面など利用ブラウザを chrome に限定できる場合 --- WebP

CSSスプライトやSVG化、base64も有効なところで使い分けてください。
古いブラウザでCSSの描画コストが高くなる、「border-radiusとbox-shadowの組み合わせ」を画像に代替すると結果的に描画が早く終わることがあります。

複数サイズが用意できる運用だったら <img>の srcset 属性や <picture> でマークアップします。

画像圧縮

タスクランナーで画像圧縮するのが漏れがなく確実ですが、
下記の場合は手動で圧縮を勧めます。

  • モバイル用の画像が1ファイルで100k を越えたら、少しでもサイズを減らせないか工夫する
  • PNG24形式の画像は減色ツールで劣化を確認しながら減色する

コードの圧縮

リリース版では JavaScript, CSS を圧縮してください。
HTML は案件仕様にあわせて判断してください。

パフォーマンス最適化にあたっての注意点

  • ページ表示速度改善と運用コストはトレードオフの関係にあるので、できる範囲で行う(努力はもちろんする)
  • じっくり本格的に最適化を行うなら、まずは計測し、ボトルネックの発見から始める

計測ツール
・Chrome DevTools

有償のネットワーク監視ツール
Webサイトパフォーマンス計測・監視サービス一覧 2016年版

コーディングルール

項目 定義内容
インデント 半角スペース2つ
要素、属性 小文字で記述
(非推奨:<A HREF=""> 推奨:<a href="">
id名 キャメルケース
css名 キャメルケース、-(ハイフン)_(アンダーバー)使用可能
コメント おおまかな機能ごとにコメントで区切る
画像 基本的に、CSSモジュールで定義できる画像は CSS の background で読み込む
リソースのプロトコル 省略する

画像についての補足:

<!-- 非推奨 -->
<h1><img src="./img/logo.png" alt="サービスロゴ"></h1>
<button>
  <img src="./img/button.png" alt="ボタン">
</button>

↑でももちろん問題ないのですが、
仕様が激しく変わる案件や長期保守を行う場合は
システムから出力される画像以外は CSS で管理したほうが都合良い場合が多かったです。

<!-- 推奨 -->
<h1 class="service_logo">サービスロゴ</h1>
<button class="button__primary">ボタン</button>
<style>
.service {
  background-image: url("../img/logo.png");
}
.button__primary {
  background-image: url("../img/button.png");
}
</style>
<!-- 推奨 -->
<div class="media">
  <div class="media_userImg"><img src="/user/01/icon.png" alt="userName"></div>
  <div class="media_userName">user name</div>
</div>

後でプログラムを組み込む場合なども、見通しが良く作業負担が減ります。

ツール

静的ページ

共通項目の多いサイトなら、pug もしくは EJS を推奨します。
アプリケーションの性質が強ければ、JavaScriptフレームワーク(vue.js)の利用を推奨します。

「コーディングミスを減らし、管理が楽にする」「技術要求に応える」という目的から外れていなければ、ツールにこだわりはありません。