今だから考えてみよう、コーディングのルールとチェック方法

「Akros Web & Business Design Academyの講師陣は前線で活躍するクリエイターである──」

誰が言ったかは不明ですが、実際の先生達はWEB制作の現場で活躍している人ばかりです。
僕もコーダーとして仕事をしているわけですが、コーダーの仕事内容は時代と共に変わり、HTMLとCSSだけではなく、jQueryやPHPといったプログラミングも扱うようになっています。
フロントエンジニアという言葉が生まれる理由も納得です。

そんな僕が先日、島村先生とコーディングルールについて会議(という名の趣味トーク?)をしていると、面白い問題にぶつかったようです

制作現場では、基本的に「コーディングルールには沿う」のが大前提となりますが、日々進化しているWEB業界では、コーダー(クリエイター)のちょっとした思いやりも必要な場面があります
そういった場面が頻繁に出現するようになったら、ルール変更のタイミングです。

僕自身、HTML5/CSS3を中心で問題ないと認識してはいますが、W3C側に重きを置くか、WHATWG側に重きを置くかでは大きな違いも発生してしまいます。
そこで今回は、コーディングルールというよりはチェック方法についてのお話しをしたいと思います。

コーディングは機械的、且つ人間的

最近よく「機械化(ロボット化)」を耳にします。
コンピューターで作成し、コンピューターで閲覧するWEBサイトは、機械化されてしまうでしょうか。
答えは「NO」だと思います。
先ほどもありましたが、「重きを置く」や「気遣い(思いやり)」というのは人間特有の発想ですので、完全自動化はまだまだできないかと思っています。
よってコーディングは人間的な行動で行う必要があるのですが、チェック作業については「文法」がある程度決まっている以上、機械化されることになります。
あ、デザイン構築については除きます。

いくつもあるチェック

WEBサイトのチェック項目はいくつもあります。

  • デザインに沿った構築がされているか
  • コーディングルールに従っているか
  • モバイルフレンドリーになっているか
  • ユーザビリティ、アクセシビリティはどうか
  • SEO対策はされているか    などなど

それぞれチェックする項目があり、きちんとした理由があります。
その中でも「コーディングルールに従っているか」という点では、最近のWeb Search Engineの挙動にも係わってきますので、コーダーを目指すのであれば、きちんと知っておいたほうが良いでしょう。

まず「自分の知識は時代にあっているか」ということもありますが「案件に沿ったルールで構築しているか」が大切です。
どれだけ最新の技術、知識を知っていたとしても「WebサイトがIE8まで対応したい」という要望だった場合には無意味です。
逆に古い知識を要求され、それを最新の技術で消化させなければいけません。

またどこかに所属しているのであれば、その所属している会社(または団体)が定めたルールに従いましょう。

コーディングチェック

その中でも「W3Cが定めているルールに従っている」必要があります。
全部が全部ではありませんが、まずは基本ですので、しっかりチェックしてください。
チェック方法には次のようなサービスが非常に役立ちます。

Markup Validation Service
https://validator.w3.org/


Another HTML-lint 5
http://www.htmllint.net/html-lint/htmllint.html

モバイルフレンドリーチェック

次にモバイルフレンドリーについてですが、これについては検索サイト側の問題が中心になります。
検索サイトとしても代表的なGoogleがテストできるサービスをいくつか提供しています。

screencapture-search-google-search-console-mobile-friendly-1489569827864
モバイルフレンドリーテスト

https://search.google.com/search-console/mobile-friendly?hl=ja

screencapture-testmysite-thinkwithgoogle-1489569837574
think with Google

https://testmysite.thinkwithgoogle.com/

最後はなんといっても

デザインに沿っているか、最終的なミスがないかチェックするには、やはり人力・・・

目視チェックです。

チームによってはチェッカーという方がいて、チェックをする場合もありますが、まずは自分でチェックしてみましょう。
ピクセルパーフェクトなサイトを求められているのであれば、フォトショップは必須ですね。

チェックの為にも効率のよいコーディング、ツール選びがキーになってきます
僕自身も5年前に比べると色々なツールを使っては変え・・・を繰り返し、ちょっと落ち着いてます。
その頃から比べると、コーディングスピードは約2倍になってたりします。

WEB制作の現場だからこそ学べることが多々ありますし、1度も経験していない人は、自分の環境や知識があっているか確かめるだけでも価値はあると思います。
そのようなお問い合わせも多数頂いているようですので、是非お問い合わせだけでもしてみてはいかがでしょうか。