「コーディングが正確にできているか不安…」このように悩む人も多いのではないでしょうか？ 初めはコーディングを完了させても自信がなかったり、エラーなどがないか不安も多いですよね。そんな時、おすすめなのが「コーディングチェックツール」！ これを使えば、簡単にコーディングの悪い部分が可視化されチェックできる上に、スキルアップにも！ そこで今回は、現役コーダーおすすめのチェックツールを厳選して紹介します。
目次
■「HTML・CSS」を同時にチェック
「Dirty Markup」は、「HTML・CSS」を併せてチェックできるツール。とてもモダンで見やすく、使い勝手のよいオンラインチェックツールです。
特徴は何といっても、汚いコード部分をキレイに整形してくれるところ。他のチェックツールでは修正部分が羅列されるだけなので、修正の手間も省ける・キレイなコーディングの見本になるなど、勉強にもなります。
また、HTMLとCSSだけではなく、「JavaScript」にもマルチに対応、ツール切り替えの手間もなく、正確なコードが書けるところも嬉しいポイントです。
■HTMLをチェックできるツール 3種
次はHTMLをチェックできるツールを3種類ご紹介したいと思います。
1.Another HTML -lint
2.HTMLエラーチェッカー
3.W3C Markup Validation Service
1.「Another HTML -lint 」
こちらのツールは、初心者コーダーなら「必ず入れておいてもいい」というくらいおすすめのツール。なぜかと言うのも、以下のように書いたコードを評価してくれるからです。
エラーの重要度
エラーの詳細と解決策
なぜエラーなのかの解説
100点満点での総合評価
このような評価があると、自分の上達度も測れる上に、モチベーションにも繋がります。ただし、かなり細かくチェックされるので、全部を修正するのではなく、後述するような判断基準に沿って修正をすることがポイントでしょう。
2.「HTMLエラーチェッカー 」
こちらはWebサービスではなく「Chrome」の拡張機能です。調査したいページを開きChromeの右側アイコンをクリックするだけで、簡単にコーディングをチェックすることが可能です。
「閉じタグの忘れ」などをビジュアル的にわかりやすく表示してくれるのでスピーディかつ、正確に修正ができるのがよいところでしょう。
3.「W3C Markup Validation Service」
これは、『W3C（＝World Wide Web Consortium）』というHTMLとCSSの文法ルールを定める非営利団体が提供しているチェックツールです。ルールを定めているだけあり精度は高く、コーダーからの信頼性も高いです。
他のチェックツールは、URLを入力するタイプが多いですが、HTMLをそのまま貼り付け確認もできるので、サーバーアップロードや納品前の確認もできます。 ただし、エラーが英文表示なので英語が苦手な人には少々わかりづらいかもしれません。
HTMLとCSSの文法は、先述のW3Cでによって世界基準が設けられています。 実際に、下記公式サイトでHTML5のルールが確認できます。コーダーの人は、一度確認してみるのもよいでしょう（英文表記のみ）。
W3C公式サイト
■CSSをチェックできるツール「W3C CSS Validation Service」
最後は、先述した『W3C』が提供するCSSをチェックできるツールです。 URLだけではなく、アップロードしたCSSファイルや貼り付けたCSSコードでの検証が可能なので、プロジェクトのシチュエーションによって使いわけられます。
また、HTMLのチェックは英語のみでしたが、こちらはエラーを日本語表示してくれるので英語が苦手でも使いやすいツールとなっています。
■コーディングは「どこまで正確であるべきか」
様々なチェックツールを紹介してきましたが、これらを通してコーディングを修正するべき箇所は以下の3点がポイントとなります。
1.表示に影響がないか
2.ブラウザやデバイスの互換性に問題がないか
3.修正がしやすいか
その理由を見てみましょう。きっちり修正しなければ「文法（コード）エラーがSEOに響くのでは？」と思う人もいるかもしれませんが、SEOの評価に直接響くことはありません。
そのことは、「Google」のスパム対策チームのリーダーであるMatt cutts（マットカッツ）氏による以下の発言からもわかります。
『僕たちは、（W3C標準に）準拠しているからといって、Webページの順位を上げるようなことは何もしてない。Webにある大多数のページは、準拠してないからね』
実際に、正しい文法で書かれているWebサイトは世界中でも5%未満であるとも言われています。そして、実はGoogleのWebサイトでさえも、W3Cの基準に沿っていない文法エラーがたくさんあるのです。
それらがなぜかと言うと、以下のような理由が挙げられます。
・表示速度を速くするため
1日に何億というWebページを処理しなくてはいけないので反応の軽さを優先
・ブラウザの互換性を保つため
様々なブラウザや端末環境でも平等に使用できることを優先
このように、文法エラーがSEOの評価に繋がらないことがわかります。特に1の「表示に影響がないか」と2の「ブラウザやデバイスの互換性に問題がないか」に関しては、ユーザーの使いやすさにも影響し、結果的にSEOの評価を下げてしまうので重要です。
あくまでW3Cは「仕様」であることを理解し、検索順位に関するルールを握るGoogleの意向に従う方がよいでしょう。
■まとめ
正しいコーディングを行うためのチェックツールは色々な種類があり、その特徴も様々です。 これらを使って、納品前にチェックしておくことでクライアントへの評価も上がり、自分のコーディングの勉強にもなります。
しかし「エラーは細かく修正してもキリがないこと」、「SEOにも響かないこと」を考慮に入れて、効率よく必要部分を修正するようにしましょう。
