コーディング時（後）に意識していること105点

コーディング時、またはコーディン後のテストアップやリリース時に考えていること（チェックしている箇所）をジャンル別にまとめました。是非参考にしてみてください。

HTML

• 正しいタグや属性でマークアップしているか
• バリデーションチェックに引っかかっていないか（https://validator.w3.org/#validate_by_input）
• コアウェブバイタルのスコアは低くないか
• クラス名は直感的か
• 共通パーツを意識しているか
• インデントは綺麗か
• 適切なaltを付けているか（空ならalt=""のようにする）
• imgタグにwidthとheightを付けているか
• 計測タグ（GoogleアナリティクスやSearch Console）は正しく記述しているか
• noindexタグは削除したか
• metaタグまわりは正しく設定されているか
• title, descriptionは正しく設定しているか（全ページ共通 or ページによって違う）
• ogpは正しく設定しているか
• og:imageのパスは絶対パスになっているか
• ファビコンは設定したか
• リンク切れは起きていないか
• リンクの新規タブで開くを指示どおり設定しているか
• 文字化けをしていないか（文字参照を正しく使えているか）
• SNSシェアボタンで記事シェア時に文字化けをしていないか（特にTwitter）
• 画像の切り替えはdisplay: noneではなくpicture要素で対応しているか
• 今どきの新しいタグはターゲットブラウザに対応しているか
• Webアクセシビリティ対策は正しく行っているか（タブキーでフォーカス移動など）
• タグに直接style属性でCSSを書いていないか

CSS

• 今どきの新しいCSSはターゲットブラウザに対応しているか
• 不要なセレクタやスタイルは削除したか
• 要素数が変わる系の箇所（記事一覧など）は、数が増減しても崩れないか
• 文字数が変わる系の箇所（記事タイトルなど）は、文字数が増減しても崩れないか
• 文字数が増えて2行以上になった際にline-heightは適切な値になっているか
• 画面幅が増減してもレイアウトや文字組みが崩れないか
• vwやvhを使っている場合、画面が大きくなっても変な見た目にならないか（2000pxくらいまでは担保したい）
• 横スクロールが発生していないか
• パンくずリストなど、スマホで見た時に画面幅を貫通していないか
• 意図なくheightに固定値を指定していないか（文字数が変わったらはみ出る可能性があるため）
• アニメーションは重くないか
• エンドレス系のアニメーションは2周目以降も正しく動くか
• 見た目が変わる系の要素（ハンバーガーメニューなど）は、全パターンで想定通りの見た目や挙動になるか
• 意味のない!importantは使っていないか
• ブレイクポイント前後の画面幅で表示確認をしたか（767pxがブレイクポイントなら、766px, 767px, 768pxで確認）
• inputの文字サイズがスマホで16px未満になっていないか（入力時に拡大してしまう）
• font-sizeは10px未満に指定していないか（10px未満にしても10pxにしかならない）
• 画像の縦横比が変わってもレイアウトは崩れないか（運用時に画像が変わる可能性があるため）
• iframe系を埋め込んだ際に、画面幅が小さくなってもはみ出さないか

JavaScript

• 不要ファイル（外部ライブラリなど）は読み込んでいないか
• 外部ライブラリを本当に使うべきか（自分でサクッと実装できるものでもライブラリを使っていないか）
• 外部ライブラリを使っている場合、その一覧をドキュメントなどにまとめているか
• jQueryを使っていないのに読み込ませていないか
• jQueryは適切なバージョンか
• グローバル変数を使っていないか（ちゃんとした意図があればOK）
• varを使っていないか（let or const）
• 要素の文字やclassが変わっても処理は適切に行われるか（要素の取得はできるだけid属性で行うべき）
• if文やfor文がネスト地獄になっていないか
• デベロッパーツールにエラーが出ていないか
• 特定のページのみで使用する処理は、他のページで「要素が無いよ」などのエラーが出ていないか
• 使い回せる値は変数・関数化しているか
• 変数・関数名は直感的に伝わるか
• 適切なコメントを残しているか（JSDocなど）
• 不要な記述を削除したか（例：console.logなどのデバック系）
• 処理が重すぎないか
• defer, asyncを適切に使っているか
• webpackなどを使っている場合、リリース前にちゃんとビルド（minifiy化）しているか
• 非同期処理などがある場合、例外処理を適切に行っているか
• URLまわりの取得方法は適切か
• URLまわりの処理はパラメータが付いても正しく動作するか

PHP

• PHPのバージョンは適切か
• 共通パーツはファイル分割しているか
• メニューなど連続する記述は配列化して繰り返し文で書いているか
• 使い回せる値は変数・関数化しているか
• 変数・関数名は直感的に伝わるか
• 不要な記述を削除したか（例：var_dumpなどのデバック系）
• エラーやwarningは出ていないか（できればサーバーログでちゃんと確認したい）
• 適切なコメントを残しているか
• URLまわりの取得方法は適切か
• URLまわりの処理はパラメータが付いても正しく動作するか

WordPress

• ログインURLをデフォルトから変更したか
• /wp-loginや/wp-adminでアクセスしてもログイン画面にリダイレクトされないようになっているか
• /?author=1でアクセスしてもユーザ名が表示されないようになっているか
• WP REST APIを無効にしたか（使わない場合）
• 不要なプラグインは削除したか
• 必要以上にプラグインを使っていないか
• WP本体のバージョンは適切か
• 現在のWP本体のバージョンに対して、使用しているプラグインは検証済みになっているか
• カスタムフィールドや固定ページなどの必要なデータはちゃんとインポートしたか
• データを一括でインポートした場合、ちゃんとインポートされているか全て確認したか
• 投稿や固定ページに不要なデータが残っていないか
• ゴミ箱に不要なデータが残っていないか
• メディアに不要な画像は残っていないか（ゴミ箱も）
• メディアの最大アップロードサイズやsvg許可/拒否は適切か
• ユーザ権限は適切か
• 記事中のスタイルはちゃんと定義したか（h◯, li, blockquoteなど）
• フォームのメールはちゃんと届くか（管理者側、ユーザ側ともに）
• メールは文字化けしていないか
• フォームのメール本文やアドレスは正しいか
• ページャーの2ページ目以降は正しく表示されるか
• 設定画面の「サイトタイトル」や「キャッチフレーズ」は適切か
• 設定画面の「管理者メールアドレス」は適切か
• 設定画面の「1ページに表示する最大投稿数」は適切か
• 設定画面の「検索エンジンでの表示」にチェックは入っていないか

画像

• 適切な拡張子で書き出しているか（写真はjpg、ベタ塗りや透過はpng、ベクターはsvgなど）
• 連続するアイコンは全て同じサイズで書き出しているか（周りに透明の余白を作ってサイズ調整をする）
• 適切な大きさで書き出したか（無駄に大きくなっていないか）
• ファイルサイズを圧縮したか
• 圧縮後に画像がぼやけていないか
• 書き出した画像のまわりなどに不要な線などが含まれていないか
• サイト上で画像の縦横比がおかしくなっていないか
• svg画像にフォント情報が残っていないか（文字が含まれる場合はアウトライン化してから書き出す）
• ダミー画像は残っていないか

その他

• 404ページはあるか
• SSL化しているか
• httpはhttpsにリダイレクトするか
• wwwあり/なしは統一されているか（必要に応じてリダイレクト）
• 対象ブラウザで表示確認をしたか
• 実機（iPhone, Android）で表示確認をしたか
• キャッシュを完全に削除した状態で表示確認をしたか