WEB開発やWEBデザインの情報の収集、発信を目的としてTwitterのアカウントを作ってから、駆け出しの方のコーディングに対してレビューを何件かさせていただきました。
何度かやっていると同じ指摘もあったので、今後のレビュー前にチェックしてもらいたい項目をここにまとめたいと思います。
インデントは揃えましょう
HTMLはコードのインデントによるブラウザ表示への影響はありませんが、不規則になっていると可読性が損なわれ、ミスの記述ミスの原因となります。実際にインデントが揃っていないコードには閉じタグの記述漏れや、タグの入れ子の間違いなどがありました。
インデントは自分で揃えようとせずともコードエディターが自動で揃えてくれる機能や、コピペをすると自動で整形してくれるサービスもありますので、利用するといいでしょう。
Visual Studio Codeの拡張機能 「Beautify」
インストール：左メニューの「拡張機能」から「Beautify」を検索してインストール。
使い方：https://programming-engineer.com/vscode-beautify/
HTMLのコード生成ツール Syncer
https://lab.syncer.jp/Tool/HTML-PrettyPrint/
scriptの読み込みはbody閉じタグ前に書きましょう
JavaScriptの外部参照ファイルやCDNからの読み込みをhead内に記述してしまうと、HTMLの構造を読み込む前に読み込まれてしまうため、ページを表示するまでにかかる時間が長くなってしまいます。
Googleのタグマネージャーや、アクセス解析のトラッキングコードなど、読み込む位置を指定されていないものについては</body>タグの直前で読み込むようにしましょう。
こちらの図解がとてもわかりやすかったので紹介しておきます。
https://webukatu.com/wordpress/blog/39711/
レンダリング最適化のためにclassをつけましょう
CSSを記述する際に、class名をつけていないものに要素セレクターを使ってしまうと、 ブラウザのレンダリングが遅くなることがあります。HTMLタグにはなるべくclassをつけましょう。
参考：https://qiita.com/Yametaro/items/5c2d0267156ecc8562e4
classや画像ファイルの名前に連番を入れるのはやめましょう
連番による命名は変更する際のメンテナンス性に欠けます。
例
下記のようなliが連番になっている記述があったとします。
<ul class="itemList">
<li class="item01"><img src="img/001.jpg" alt="画像１"></li>
<li class="item02"><img src="img/002.jpg" alt="画像2"></li>
<li class="item03"><img src="img/003.jpg" alt="画像3"></li>
</ul>
この記述に新しい画像をもらい、１と2番目の間にliを足すとなるとどうでしょう？
<ul class="itemList">
<li class="item01"><img src="img/001.jpg" alt="画像１"></li>
<li class="item02"><img src="img/002.jpg" alt="画像2"></li>
<li class="item02"><img src="img/002.jpg" alt="画像2"></li>
<li class="item03"><img src="img/003.jpg" alt="画像3"></li>
</ul>
のように２が重なってしまうため、可読性を維持するにはもとの2、3は3、4と変更する必要が出てきてしまいます。連番は降らずともCSSには擬似セレクタのnth-of-typeで順番は指定できるので連番の記述は不要です。liごとに順番以外の理由で固有のclassを付けるのであれば下記のような記述が良いと思います。
<ul class="itemList">
<li class="item item__about"><img src="img/about.jpg" alt="about"></li>
<li class="item item__works"><img src="img/works.jpg" alt="works"></li>
<li class="item item__contact"><img src="img/contact.jpg" alt="contact"></li>
</li>
HTMLエラーチェッカーで確認しましょう
HTMLの記述に慣れている人でもミスはつきものであり、ミスがあっても正常に表示されてしまうこともあるため、HTML構文のミスは見逃されてしまうことがよくあります。また、CSSがうまく反映されないときにもHTML構文が原因のこともありますので、他の人に見てもらう前には必ず構文チェックを行いましょう。
構文チェックはブラウザの拡張機能がありますので、あまり時間をかけることなく実施できます。
Chromeの拡張機能「HTMLエラーチェッカー」
https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja
画像の容量を確認しましょう
WEBサイトを閲覧する際のデータ量の多くは画像や動画になります。画像は書き出しフォーマットが最適になっていない、圧縮がかけられていないなどの理由で想定外の容量になっていることがありますので、データ容量を必ずチェックしましょう。
例
- 長方形の写真がpngで書き出されていた
- スマートフォン向けの画像で横幅が2000pxもあった
- 納品された画像を圧縮したら、画像劣化もなく70%のデータ容量削減ができた。
終わりに
これまでレビューした中で多く上がったものを記載させていただきました。これからも増えるようであれば随時書き足していこうと思います。あくまで私の知識内のことなので、間違っている部分やもっと良いやり方を知っている方がいらっしゃいましたらご教示いただけると助かります。