DAY43.実務でよく使うアニメーションの付け方編 品質を担保するテスト

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

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

・誤字脱字がないか　テキスト比較ツールで比較
・改行位置は適切か　タブレットやスマホ時の<br>
・フォントは適切か　WhatFontで確認
・色が適切か　デベロッパーツールでcolorをデザインカンプと比較
・スムーズにレスポンシブ化されるか　目視確認
・スマホ(320px)tab(768px)PC(カンプ)表示に崩れはないか　目視確認
・水平スクロールしないか　目視確認
・リンク要素（ボタン等）のホバー時の挙動設定　実際に確認(指示書)
・JavaScriptの挙動　実際に確認(指示書)
・altが正しく設定されているか　Alt &Meta Viewerなど
・見出し構造が不自然ではないか　ブックマークレット
・TDK(Title, Description, Keyword)を正しく設定　ブックマークレット
・閉じタグチェック　HTMLエラーチェッカー
・W3Cチェック（HTML、CSS）
・デザインカンプの効果をCSSで表現（box-shadow、opacityなど）目視
・デザインカンプとWebサイトを見比べてズレがないか　PerfectPixel
・Chrome、FireFox、IE、Safari、Edgeで表示崩れ　目視確認
・対応しているブラウザverを把握しているか　対応ブラウザの要望確認
・リンク切れが起きていないか　Frogを回して確認
・コンソールエラーが出てないか　デベロッパーツール
・画像が圧縮されているか　gulpで吐き出す
・画像が同じか　目視

02.コーディング後のチェックの重要性

サーバーサイドで大きめの開発現場だと、プログラムを書いた後に
テスト項目を箇条書きでまとめた「テスト指示書」を作成し、
想定されるリスクを洗い出してチェックするという工程がある
単体テスト、機能テスト、結合テストとスケールを大きくし何度もやる

コーダーも完成度の高い状態で納品するために最低限のチェックはするべき

「クロスブラウザ対応・W3C準拠はチェック済みです」などと伝える
ことで、『品質管理が行き届いているコーダー』として大きな差別化