YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2019.10.01

【コーディングチェック】Web制作で納品前に使えるコーディングの便利ツール!

【コーディングチェック】Web制作で納品前に使えるコーディングの便利ツール!

「コーディングが正確にできているか不安…」このように悩む人も多いのではないでしょうか? 初めはコーディングを完了させても自信がなかったり、エラーなどがないか不安も多いですよね。そんな時、おすすめなのが「コーディングチェックツール」! これを使えば、簡単にコーディングの悪い部分が可視化されチェックできる上に、スキルアップにも! そこで今回は、現役コーダーおすすめのチェックツールを厳選して紹介します。

「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にも響かないこと」を考慮に入れて、効率よく必要部分を修正するようにしましょう。
 
 

Recommend この記事を読んだ人はこんな記事も読んでいます

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

2019.09.13

【資格】フリーランスWebクリエイターが資格取得するメリット~後編~

■前編はこちら【資格】フリーランスのWebクリエイターが資格取得するメリット~前編~■資格取得前にキャリアアップの形成計画フリーランスが「資格取得」を最大限に有効活用する上で、まずやらなければならないことがキャリアアップやフリーランス...

【資格】フリーランスWebクリエイターが資格取得するメリット~前編~

2019.09.09

【資格】フリーランスWebクリエイターが資格取得するメリット~前編~

■後編はこちら【資格】フリーランスWebクリエイターが資格取得するメリット~後編~■フリーランスと「資格」の関係「会社」という枠から離れたフリーランス活動で大切なことのひとつに 「現状に満足しない」ことが挙げられます。「資格取得」と何の...

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

2019.08.30

【Adobe XD活用】Webディレクターに使ってほしい分かりやすいイメージ共有法 ~前編~

■Webディレクターの仕事効率アップ!! 覚えて損はない『Adobe XD』現在、Webディレクターをやっている方でもし「Adobe XD」を知らないなら、是非、この機会に覚えておくとよいでしょう。Adobe XDを使いこなせるだけで、作り...

【最新トレンド】現役デザイナー選出する2019年Webデザイントレンド

2019.08.23

【最新トレンド】現役デザイナー選出する2019年Webデザイントレンド

■ユーザーの視線を引きつける『太さと大きさを備えたタイポグラフィ』『太字で大きく表示されるタイポグラフィ』は、昨年ごろからジワジワと流行の兆しを見せはじめています。最も伝えたい・見せたいテキストを大きなサイズで配置することで、ユーザー...

【業務効率化】Webディレクター必見のGoogle検索新機能!

2019.08.15

【業務効率化】Webディレクター必見のGoogle検索新機能!

■Googleの新機能「アクティビティカード」とは?「アクティビティカード」とは、ユーザーが検索した過去のトピックスに再度アクセスしやすいように、一連の検索履歴をまとめて参照できる機能です。例えば、「旅行・ハワイ・シュノーケリング」と...

【新デジタル技術】海外で体験できるアナログとデジタルの融合!

2019.08.09

【新デジタル技術】海外で体験できるアナログとデジタルの融合!

■〈アメリカ〉“Lumin AR Tour” デトロイト美術館Copyright © 2018 Detroit Institute of Arts. All rights reserved デトロイト美術館で昨年1月より開始。...