58.コードをチェックしよう ～品質を担保する～
自分でコーディングをした後、正しいかどうかチェックする。
特に自分で書いたものは、どうしても正しいと思い込んでしまいますよね。
主観にとらわれず、チェックするにはどうしたら良いのでしょうか。
それではやっていきましょう。
チェックするポイント
- カンプとWebサイトがズレていないか
- HTMLとCSSの記述におかしいところがないか
- ページ動作がおかしくないか
大きく分けると、こうしたポイントに注意してチェックしていき、
適宜修正することで品質が保たれるということです。
１つずつ見ていきましょう。
カンプとWebサイトがズレていないか
こちらはChrome拡張のPerfectPixelを使って確認していきます。
カンプと実際のページがズレていないかを画像を重ねる形で確認できるすぐれものです。
おすすめの説明サイト
【Chrome拡張機能】ピクセルパーフェクトをPerfectPixelを使ってする方法 | HikoPro Blog
インストールから使い方まで説明してくださっています。
HTMLとCSSの記述におかしいところがないか
文法チェック
W3CのValidatorを使ってHTML、CSSの文法チェックを行います。
こちらでOKが出れば、文法にはお墨付きがいただけたようなもの。
画像のalt属性が設定されているか
画像の代替テキストとして、設定は必須と言っても良いのではないのでしょうか。
こんな便利なツールを提供してくれています。
urlを入力すれば、チェックできます。
alt属性の必要性や役割についてはこちらのページが参考になります。
閉じタグチェック
入れ子がたくさんになると、閉じタグを下記忘れてしまったりします。
なので、機械的に自動でチェックしてもらいましょう。
これもChrome拡張があります。
ページ動作がおかしくないか
ここは機械的にチェックするのは難しいです。
- スムーズにレスポンシブ化されるか
- 水平スクロールしないか
- JavaScriptを指定した箇所の挙動
これらは実際に動かして確認しましょう。
周りにテストしてくれる人がいると尚良いですよね。
先入観のない状態で触ってもらえるので、
自分では気が付かなかった所に気付けるかもしれません。
今日のまとめ
- コードを書き終えたら色々な視点からチェックする
- 納めるものなら、品質は信頼につながる
- 機械的にチェックできる仕組みを活用しよう
重大なミスや初歩的なミスをなくして、安心してお客さんに納品できるように
ここは、かなり力を入れたいポイントですね。
コードを書くことばかりに意識が向かっていましたが、
改めてコードを何の為に書いているのかを考えました。
では、また。
