TR Output

フロントエンドエンジニアの備忘録

フロントエンドの個人的なレビュー観点

最近社内で新卒・初学者向けにフロントエンドのコードレビューをする機会が増えたので、自分のためにもレビューの観点をまとめておこうと思います。

共通

  • エラーチェック(バリデーションチェック)
  • 使われていないコード、コメントアウトがないか
  • インデントが揃っているか
  • 機種依存文字、無駄なホワイトスペース

HTML

  • ダグの使い方が適切か・意味のあるタグを使っているか
  • 見出しやセクションが整っているか
  • imgタグのalt属性が適切か

CSS

  • marginとpaddingの適切な使い分け
  • margin、paddingの方向(topやbottomなど)に統一感があるか
  • id属性の重複チェック
  • クラスに関して
    • 採用した設計手法(BEMやFLOCSSなど)の一般的なルールに沿っているか
    • クラス名の簡潔さ、予測可能かどうか、適切な英単語かどうか
    • CSSプリプロセッサを利用している場合、ファイルの分け方が適切か
    • 詳細度が低く保たれているか
  • 崩れがないか・レスポンシブの場合どの幅でもきれいに見えるか
  • アクセシビリティチェック)

JavaScript

  • 変数名、関数名の分かりやすさ、英単語
  • if文、for文の乱用、多段ネスト、複雑な条件式
  • DRY原則に則っているか
  • エラーハンドリング
  • console.log()等の消し忘れ
  • JSでスタイルの変更を行う際に、JS側でスタイルの情報を持っていないか
  • CSSで再現できる処理、アニメーション等がないかどうか

ブラウザチェック

  • ターゲットブラウザできちんと動作するか
  • 見た目に差が出ていないか

その他

  • Lighthouseでのパフォーマンスチェック

【2020年10月】読了記事

HTML

CSS

JavaScript

フロントエンドほか

ブラウザ

Web系ほか

デザイン / UI / UX

PHP

Python

開発 / インフラ / ツール

SEO / マーケティング

その他

【2020年9月】読了記事

HTML

CSS

JavaScript

フロントエンドほか

ブラウザ

Web系ほか

デザイン / UI / UX

PHP

Python

開発 / インフラ / ツール

SEO / マーケティング

機械学習

アルゴリズム

その他