皆さんはコーディングを納品する時に、「コーディングチェック」って行っていますか？
目視で見てなんとなく大丈夫そうだし、表示も問題ないのでOKっしょ！
これ、やばいです。
信じられないような話ですが、制作会社の納品物だとしても、以下のようなコードが納品コードに含まれていることがあります。
どこが悪いか分かりますか？
<h1>This is a heading
<p>This is a paragraph inside a heading, which is invalid.</p>
</h1><ul>
<li>Item 1</li>
<div>Item 2</div>
<li>Item 3</li>
</ul><table>
<div>Invalid content in table</div>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table><dl>
<p>Invalid paragraph inside dl</p>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>何がダメなポイントかは分かったかと思いますが、これを目視で見つけるのって大変じゃないですか？
分かる人にはすぐ分かるミスですし、「あ〜このひとの書くコードはちょっと注意だな・・・」と思われてしまうのはリスクです。
そこで今回はコードチェックを自動化する「コーディングチェックツール」について解説します。
これを解説している私自身はWeb業界で6年ほど活動しており、対応案件も200件近くあり、スクールメンターもしつつ1000人ほどの初学者のレビューや制作会社の新人レビューもしていたりします。
今回の記事で紹介しているツールを導入すれば、HTML/CSSコードの品質を最低限クリアすることができるので、
是非最後まで見て頂き、導入までセットで行動頂ければと思います。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングを学習中の方はぜひご活用ください。
＼無料の入門編から本格企業サイトまで／
また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。
Nu Html Checker
Nu Html Checkerは、ウェブページのHTMLの構文をチェックするためのオンラインツールです。
このサービスを利用することで、自分のウェブページがHTML Living Standardに従って正しくマークアップされているかどうかを確認できます。
W3C Markup Validation Serviceの後継
以前はよくW3C Markup Validation Serviceが使われていました。
実はこちらを利用してもHTML Living Standardを参照していて結果は同じなので、問題なかったりします。
しかし、Nu Html Checkerの方が新しいのでこちらを紹介しています。
HTML Living Standardに対応している
う〜ん、HTML Living Standardってそもそも何？
W3Cに準拠したほうがいいとも聞くし、どっちがいいの？
と思われるかもしれません。
これは中々難しい質問ですが、基本的に令和以降はW3Cではなく、HTML Living Standardを参照したほうがいいというのは覚えておくといいと思います。
Nu Html Checkerは実はW3Cが運営しているチェックツールですが、WHATWGのHTML Living Standardの仕様に沿ってチェックしています。
Nu Html Checkerの使い方
Nu Html Checkerには3通りの方法でコードを確認してもらえます。これが便利。
- address（URLで確認）
- file upload（ファイルアップロード）
- text input（コードを直接コピペ）
❶address（URLで確認）
addressはURLを入力することでチェックしてくれる機能です。
すでにネット上にサイトが公開されている場合はこれを使うのが便利です。
このエラーを一つ一つ潰していくことになります。
❷file upload（ファイルアップロード）
file uploadはローカル環境などで開発の際に確認する時に使います。
注意点として、フォルダじゃなくファイル一個一個しか確認できません。なのでファイル数が多いと大変かもです。
❸text input（コードを直接コピペ）
text inputはコードを直接コピペして検証できる機能です。小さいスニペットレベルで検証するなら重宝します。
全ファイルチェックしないといけないの？
確認方法はわかったけど、これって実際プロジェクト全体で確認しないといけないの？
という疑問があるかと思います。ぶっちゃけ私は全部できているわけではないです笑
ただ全く確認していないわけではなく、VSCodeのプラグインを基本的に使用しつつ、不安な部分をこのNu Html Checkerにかけています。
では次に、VSCodeのプラグイン「Markuplint」を紹介していきます。
Markuplint(VSCodeプラグイン)
MarkuplintはHTMLやマークアップのコード品質をチェックするための静的解析ツールで、開発者は日本人の方です。
HTML StandardやWAI-ARIAなどの仕様を踏まえた上で、適合性チェックを行うことができます。
メリットとしては、Nu Html Checkerと違いコーディングしながらリアルタイムにエラーを発見してくれる所ですね。
アクセシビリティにも配慮してチェックしてくれます。
Markuplintの使いかた
VSCodeのプラグインとして提供されているので、気軽に導入することができます。
例えば導入すると、以下のように問題のある箇所に赤の波線が引かれて、指摘をしてくれます。
imgにwidthやheightを付与していない人も多いと思うので、多分同じエラーが出る人が多いと思います(^_^;)
他にも序盤で出した以下のコードを書くと・・・
<ul>
<li>Item 1</li>
<div>Item 2</div>
<li>Item 3</li>
</ul>きちんと（？）赤の波線が出てきました。
要素「ul」に要素「div」を含めることはできませんと指摘してくれています。とても分かりやすいですね！
学習中からコーディングチェックツールを導入しておこう！
今回は2つのコーディングチェックツールを紹介してきました。
- Nu Html Checker
- Markuplint
私の使い方としては、基本的にはMarkuplintで構文チェックを行い、不安な部分などはNu Html Checkerを用いて全体チェックにかけることが多いです。
コーディングの品質証明として案件で出せる人は信頼されるので、是非今すぐ導入してみてください。
このタイミングでセルフチェック体制を構築しよう
このサイトでは品質管理関係の記事をいくつか投稿しています。
例えば以下の記事ではセルフチェック項目について包括的に解説をしています。
また、私がレビューをしていて、万人が頻繁にミスするポイントも解説をしていますし、
今回の記事も大きい枠で言えば「セルフチェック」の内容になりますが、セルフチェックができないコーダーへの発注に二度目は無いので、
是非これらの記事もセットで見てみて、自分でどこまでできているかを確認してみてください。
私のコーディング課題でも徹底的にセルフチェックしてから提出してもらっており、レビューも受けられるので相当鍛えられると思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。
ご寄付を頂けると今後の更新の励みになります！
