どうも7noteです。一通りコーディングが終わった後の最後のチェック方法について

やっとこさコーディングが完了したと思って油断したら、後から「よく見たらなんか崩れてる」なんてことも。

そうならないためにもセルフチェックのスキルはとても重要です。特に1人で開発している人は自分が見落とせばもう取り返しはつかないので、必須スキルになります。

でも始めたての頃はどのように何をチェックしたらいいのかわからない方も多いと思うので、初心者の方が抜けやすいポイントを抑えながら、基本的なチェック方法を確認していきます。

コーディングのセルフチェック方法

〜必須チェック項目！〜

デザインと見比べて差異がないか目視でチェック。
aタグなどのリンク先が抜けてたり間違いがないか。
画像のaltに抜けがないか。
テキストのコピペミスや誤字脱字がないか。（英語のスペルミスもチェック）
javascriptがきちんとすべて動作しているかチェック。
異なるブラウザ（特にIE）で見ても綺麗に見えるか。
マウスホバー時の処理が適切にできているか。
タグ構造に間違いがないか。（タグの閉じ忘れ等。）
ダミーの情報やすかし入りの画像が使われていないか。
フォームのあるサイトなら、ちゃんとメール送信ができているか。
ウィンドウ幅を大きくしたり小さくしたりしてレイアウトが崩れないか。

〜レスポンシブサイトならチェックしておきたい事〜

必ず実機のスマホでチェック。とくにiPhone。（inputやselectのデザインが変わってしまうので注意。）
幅指定の影響で、横スクロールができてしまわないかチェック。
画像がぼやけてないかチェック。
検証ツールを使って、幅320pxのような画面の小さいスマホで見ても崩れないか。
タップするところが押しやすい作りになっているか。

〜細かいところもしっかりチェック！！！〜

aタグのクリック範囲は適切か。
javascriptは後で見た時に何をしているかわかりやすくコメントを残しているか。（必須ではない）
使っていないゴミclassが残っていないか。
CSSはショートハンドをしっかり使っているか。
marginの相殺が起こっていないか。
faviconやogp画像は設定されているか。
「&」を「&」で記述できているか。
上下中央に配置した要素は、しっかりドンピシャで上下中央ですか？

〜SEO対策をするなら・・・〜

titleタグやmeta情報はきちんと設定されているか。
アナリティクスのタグは入っているか。
サーチコンソールは設定しているか。
画像イメージを圧縮などして、最適化しているか。
サイトマップは作成しているか。
robots.txtの記述が適切か。
canonicalの設定がきっちりできているか。

ポイント解説

チェックする時は必ず目視でチェックしましょう！ツールを使ってデザインデータと重ねてチェックする方法などもあるので、より正確にチェックをするのであればそのようなツールを使うことをおすすめします！
関連記事→「1pxのズレもなくコーディングするための便利ツール」

またよくやってしまいがちなのがwidth指定が適切でなく、横スクロースバーが出てしまう現象です。
特にスマホで見た時に対処していないと見た人が下にスクロールしたつもりが斜め下方向に移動してしまい、見たい箇所が見切れてしまうということが起きます。
些細なことですが、小さな気配りができていないためユーザーが不快な思いをしてせっかくみていたページを閉じてしまうかも！！！

いざ完成して見直ししていると、たまに使っていないclassやCSSの指定が残っていたりします。
数カ月後に見直した時に、なんの役割を果たしているのかわからなくなってしまうので、ゴミclassは忘れずに削除しましょう。