← 解説「品質を道具で守る — lint・format・型・testの4点セット」に戻る

サンプルコードで身につける: 品質を道具で守る — lint・format・型・testの4点セット

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

14点セットを動かすコマンド一覧

lint・format・型・testは、それぞれ1つのコマンドで実行できます。まずは名前と役割の対応を覚えましょう。この4つがすべて通る状態を保つのが、品質管理の基本形です。

# lint(検査): 書き方の問題を見つける
ng lint

# format(整形): 見た目を機械的に揃える
npx prettier --write .

# 型(契約): コンパイルで型の矛盾を見つける
ng build

# test(検証): 動作が正しいかを確かめる
ng test

2機械に任せる指摘と、人が議論すること

同じコードでも、指摘には機械向きのものと人間向きのものがあります。整形や未使用変数は道具が一瞬で見つけます。人間は設計や命名など、正解が一つでない部分に集中します。

// レビューで挙がりがちな指摘の分類
//
// ── 機械に任せる(道具が自動で見つける)──
//   ・インデントがずれている           → Prettier
//   ・import した Router を使っていない → ESLint
//   ・null かもしれない値を参照している → TypeScript の型
//
// ── 人が議論する(機械には判断できない)──
//   ・この処理はサービスに置くべきでは?
//   ・この関数名は仕様の意図を伝えているか?
//   ・エラー時の挙動は要件どおりか?

3package.jsonに品質コマンドをまとめる

品質チェックのコマンドはnpm scriptsに登録しておくと、チーム全員が同じ手順で実行できます。新しいメンバーも「npm run lint を実行すればよい」とすぐ分かります。CIからも同じコマンドを呼び出せます。

// package.json(抜粋)— 品質チェックの入口を scripts に揃える
{
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "lint": "ng lint",
    "format": "prettier --write .",
    "test": "ng test"
  }
}

4道具が見つける問題の実例

一見動きそうなコードにも、道具は複数の問題を見つけます。未使用importはESLint、nullの可能性は型チェックが指摘します。直した後のコードは、指摘がそのまま品質の改善になっています。

// ── Before: 道具に指摘されるコード ──
// import { Router } from '@angular/router';  // ESLint: 未使用の import
//
// function firstName(names: string[]) {
//   return names.at(0).toUpperCase();  // 型: at(0) は undefined かもしれない
// }

// ── After: 指摘に従って直したコード ──
function firstName(names: string[]): string {
  // undefined の場合の扱いを明示する(?? で既定値を与える)
  return (names.at(0) ?? '').toUpperCase();
}

5push前のセルフチェックを習慣にする

レビューを依頼する前に、手元で4点セットを一通り実行しておくのがマナーです。機械に見つかる問題を先に潰しておけば、レビュアーの時間を設計の議論に使ってもらえます。

# push 前のセルフチェック(この順で実行する)

# 1. 整形を済ませる(差分が見た目の変更で汚れるのを防ぐ)
npm run format

# 2. 検査を通す
npm run lint

# 3. テストを通す
npm test

# 4. ビルドが通ることを確認してから push する
npm run build