DAY12:コーディング後の品質を担保するテスト

コーディングの品質を担保するために、最低限チェックしておいた方がいい(と思う)項目がいくつかあります。

わたしは新卒でシステムエンジニアとして働いていたのですが、プログラミング(実装)後は「テスト指示書」というテスト項目を箇条書きでまとめたものをガッツリと作成し、想定されるリスクを洗い出してチェックするという工程がありました。
(2重チェックして、さらに上司の印鑑をもらう、そして書棚に保存するみたいなガチガチな感じ…)

コーダーでも、こういうテストは最低限はすべきという思いがあって、自分なりに必要そうな項目を洗い出してチェックするようにしています。

テストはなんのためにするかというと、ざっくりとは品質を担保するためです。

プログラマーみたくガッツリしたテストは必要ないですが、コーダーならではのチェックはしておいた方が品質は高まりますので、完成度の高い状態で納品するために最低限のチェックはしておきましょう!

課題:コーディングしたものをチェックする

わたしの現時点のチェック項目を共有します!この中から、以下の項目だけでも実際にやってみてください。

特に、W3CのチェックとIEチェックはWeb制作会社が好みがちです。

  • W3Cチェック(HTML、CSS)
  • 見出し構造が不自然ではないか
  • altが正しく設定されているか
  • 閉じタグチェック
  • 水平スクロールしないか
  • Chrome、FireFox、IE、Safari、Edgeで表示崩れが起きていないか → 特にIEとSafari

チェック方法は次の「チェック項目の一覧とチェック方法」にまとめていますが、あまりにざっくりしていているので、足りなそうな部分は以下の記事で補っていただけたらと思います。

W3Cの使い方
web制作会社が紹介するW3Cチェック(validator)の使い方

見出し構造については「論理的な記事構成にするコツ」を参照してください。
【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?

Windowsの方は「Safari」のチェックができないので、今回は不要です。
(コーダーとしてフリーでやるならMacも一応持っておいたほうがいいかもしれません。勤めるなら会社が持っているはずなので、問題はないかと)

Macの方は、IEのシミュレーションができるそうなので、IEについてはこちらでチェックしてみてください。
Internet Explorer(インターネットエクスプローラー)をMacで使う方法

チェック項目の一覧とチェック方法

自分のメモ書きをほぼそのまま移しただけで恐縮ですが、、、基本的にはツールを使う感じになります。

※ 今回チェックしてほしいものにマーカーしました!

チェック項目 チェック方法
誤字脱字がないか https://difff.jp/で比較
改行位置は適切か タブレットやスマホ時の<br>
フォントが適切か WhatFont(https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja)
色が適切か ColorPick Eyedropper or デベロッパーツールから設定されているcolor、gackground-color、border-colorをデザインカンプと比較
スムーズにレスポンシブ化されるか Firefoxのレスポンシブデザインモードで目視確認
スマホ(320px)、タブレット(768px)、PC(カンプ)の3パターンの表示に崩れはないか Firefoxのレスポンシブデザインモードで目視確認
水平スクロールしないか Firefoxのレスポンシブデザインモードで目視確認
リンク要素(ボタン等)のhover時の挙動は設定されているか 実際に確認(人的作業なので、何をチェックしたかの指示書があるといいかもしれない…)
JavaScriptの挙動は正しいか 実際に確認(何をチェックしたかの指示書が別にあるといいかもしれない…)
altが正しく設定されているか ブックマークレットで確認(https://www.trustworks.biz/blog/2008/04/alt.html)
見出し構造が不自然ではないか ブックマークレットで確認(https://www.pixelimage.jp/blog/2015/08/bookmarklet_seo.html)
TDKは正しく設定されているか 同上
閉じタグチェック 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)で確認
代替→ブックマークレットで確認(http://tockri.blog78.fc2.com/blog-entry-168.html)
W3Cチェック(HTML、CSS) HTML → https://validator.w3.org/
CSS → http://jigsaw.w3.org/css-validator/
デザインカンプの効果をCSSで表現できているか(box-shadow、opacityなど) 目視確認
デザインカンプとWebサイトを見比べてズレがないか デザインカンプを画像で書き出して、PerfectPixel(http://www.welldonecode.com/perfectpixel/)でチェック。
Chrome、FireFox、IE、Safari、Edgeで表示崩れが起きていないか 実際に各ブラウザから目視で確認
担保しているブラウザverを把握しているか sassのAutoprefixerで担保。デフォルトは、browserl.ist(http://browserl.ist/?q=%3E+1%25%2C+last+2+versions%2C+Firefox+ESR)から確認可能
リンク切れが起きていないか Frogを回して確認(https://www.screamingfrog.co.uk/seo-spider/)
コンソールエラーが出てないか デベロッパーツール
画像が圧縮されているか gulpで吐き出す
画像が同じか 目視

チェック項目としては、ざっくりと以下の記事でまとめてあります(上記よりはちょっと丁寧なはず…)

Webコーディング後にチェック(テスト)しておくべき20のチェックポイント!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事