モダンな Web アプリケーション開発において、コードの品質管理は開発者にとって永続的な課題となっています。特に、テストフレームワークの Jest とコードフォーマッターの Prettier を組み合わせる際、設定の競合や複雑な管理に頭を悩ませた経験はありませんか？

本記事では、Jest と Prettier を効果的に連携させ、チーム全体でのコード品質向上と開発者体験の改善を実現する方法をご紹介いたします。実際のエラー事例から具体的な解決策まで、実践的な内容をお届けしますので、ぜひ最後までお付き合いください。

背景

モダン開発環境での品質管理の重要性

近年の Web アプリケーション開発では、コードの可読性、保守性、そして信頼性が以前にも増して重要になってきています。特に TypeScript や React、Next.js を使った開発では、複雑性が増す分、しっかりとした品質管理体制が必要不可欠です。

Jest はその中でもテスト環境において標準的な地位を確立しており、一方で Prettier はコードフォーマッティングの分野で圧倒的な支持を得ています。この 2 つのツールを適切に連携させることで、開発チーム全体の生産性を大幅に向上させることができるのです。

なぜ Jest と Prettier の連携が重要なのか

要素	Jest 単体	Prettier 単体	連携時
1	テスト品質	コード統一	包括的品質管理
2	バグ検出	可読性向上	開発効率最大化
3	機能保証	チーム協調	持続可能な開発

しかしながら、これらのツールを個別に導入することは比較的簡単ですが、効果的に連携させるとなると、様々な課題に直面することになります。

課題

Jest と Prettier の設定競合問題

多くの開発者が最初に直面するのが、Jest と Prettier の設定ファイル間での競合問題です。特に以下のようなエラーに遭遇することがあります。

javascriptCopy code// よく見るエラーメッセージ
Error: Prettier and Jest have conflicting configuration
SyntaxError: Unexpected token 'import'
TypeError: Cannot read property 'testEnvironment' of undefined

これらのエラーは、通常以下のような状況で発生します：

1. モジュールシステムの不整合

   • Jest が CommonJS を期待している一方で、Prettier が ES Modules での処理を前提としている場合

2. 設定ファイルの読み込み順序

   • package.json での設定項目の競合や、設定ファイルの優先順位の問題

3. プラグインの重複

   • ESLint プラグインとの競合により、フォーマットルールが二重に適用される問題

コード品質管理の複雑さ

実際の開発現場では、Jest と Prettier に加えて、TypeScript、ESLint、Husk y など多数のツールを組み合わせて使用します。この複雑な環境下では、以下のような課題が発生しがちです。

bashCopy code# 典型的なエラー例
✗ prettier --check failed
✗ jest --coverage failed
✗ eslint . failed

Error: 'describe' is not defined
Error: Parsing error: Unexpected token =>

これらの問題が積み重なると、開発者は本来集中すべきビジネスロジックの実装から意識が逸れてしまい、設定ファイルの調整に多大な時間を費やすことになってしまいます。

開発者体験の悪化

品質管理ツールが適切に連携していない環境では、以下のような問題が発生し、開発者体験を著しく悪化させます：

課題	影響	頻発度
1	フォーマットエラーでテスト失敗	高い
2	設定変更による既存テストの破綻	中程度
3	新メンバーの環境構築困難	高い
4	CI/CD パイプラインでの予期しない失敗	中程度

特に厄介なのは、ローカル環境では正常に動作するのに、CI 環境でのみ失敗するケースです。

bashCopy code# CI環境でよく見るエラー
✗ Code style issues found in the following file(s):
✗ Test suites: 5 failed, 0 passed, 5 total
✗ Process exit code: 1

これらの問題は、開発チーム全体のモチベーション低下や、リリースサイクルの遅延につながる重大な課題となっています。

解決策

基本的な連携設定方法

Jest と Prettier を効果的に連携させるためには、段階的なアプローチが重要です。まず、基本的な設定から始めて、徐々に高度な機能を追加していくことをお勧めします。

1. 依存関係の整理

最初に行うべきは、必要なパッケージを正しくインストールすることです。

bashCopy code# 基本パッケージのインストール
yarn add --dev jest prettier
yarn add --dev @types/jest
yarn add --dev jest-environment-jsdom

2. package.json での基本設定

package.json ファイルで、Jest と Prettier の基本設定を行います。

jsonCopy code{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "jest": {
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.ts"]
  }
}

この設定により、テスト実行とコードフォーマットを独立して実行できるようになります。

ESLint を含めた三位一体の設定

真の威力を発揮するのは、Jest、Prettier、そして ESLint を組み合わせた三位一体の設定です。

ESLint と Prettier の競合回避

まず、ESLint と Prettier の競合を回避するための設定を行います。

bashCopy code# 競合回避のためのプラグインをインストール
yarn add --dev eslint-config-prettier
yarn add --dev eslint-plugin-prettier

続いて、.eslintrc.json での設定を行います。

jsonCopy code{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["prettier", "@typescript-eslint"],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "jest": true,
    "node": true,
    "es6": true
  }
}

この設定により、Prettier のフォーマットルールが ESLint のエラーとして表示されるようになり、統一されたコード品質チェックが可能になります。

設定ファイルの最適化

効率的な開発環境を構築するためには、各設定ファイルを最適化することが重要です。

Prettier 設定の最適化

.prettierrc ファイルで、チーム全体で統一されたフォーマットルールを定義します。

jsonCopy code{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Jest 設定の詳細化

jest.config.js ファイルで、より詳細なテスト環境を設定します。

javascriptCopy codemodule.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}',
  ],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.tsx',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

これらの設定により、コードカバレッジの目標値を設定し、品質の可視化が可能になります。

具体例

package.json 設定例

実際のプロジェクトで使用できる、完全な package.json 設定例をご紹介します。

jsonCopy code{
  "name": "jest-prettier-integration",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "quality": "yarn lint && yarn format:check && yarn test"
  }
}

この設定により、yarn qualityコマンド一つで、リント、フォーマット、テストをまとめて実行できるようになります。

.prettierrc 設定例

チーム開発に適した、実用的な Prettier 設定です。

jsonCopy code{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

jest.config.js 設定例

TypeScript と React を使用した現代的なプロジェクトに対応した Jest 設定です。

javascriptCopy codeconst nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapping: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!**/.next/**',
  ],
  coverageThreshold: {
    global: {
      branches: 75,
      functions: 75,
      lines: 75,
      statements: 75,
    },
  },
};

module.exports = createJestConfig(customJestConfig);

統合スクリプトの実装

開発効率を最大化するため、複数のツールを統合したスクリプトを作成します。

pre-commit フックの設定

husky と lint-staged を使用して、コミット前の自動チェックを設定します。

bashCopy code# 必要なパッケージのインストール
yarn add --dev husky lint-staged

package.json に husky の設定を追加します。

jsonCopy code{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "jest --bail --findRelatedTests",
      "git add"
    ]
  }
}

CI/CD 用の統合スクリプト

GitHub Actions 用の設定例です。

yamlCopy codename: Code Quality Check

on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run ESLint
        run: yarn lint

      - name: Check Prettier formatting
        run: yarn format:check

      - name: Run tests
        run: yarn test:coverage

この設定により、プルリクエストやプッシュのたびに自動的にコード品質チェックが実行されます。

まとめ

連携のメリット総括

Jest と Prettier の適切な連携により、以下のような素晴らしいメリットを享受できます：

メリット	効果	長期的影響
1	コード品質の自動保証	バグ減少、保守性向上
2	開発者体験の向上	生産性向上、ストレス軽減
3	チーム協調の促進	統一されたコードベース
4	CI/CD の安定化	リリース品質の向上

特に重要なのは、これらのツールが開発者の創造性を制限するのではなく、むしろ本来集中すべき課題解決に専念できる環境を提供してくれることです。

継続的な運用のポイント

成功する品質管理体制を維持するためには、以下のポイントを心がけましょう：

1. 段階的な導入

一度にすべての設定を完璧にしようとせず、チームの成熟度に合わせて段階的に機能を追加していくことが重要です。

2. チーム全体での合意形成

フォーマットルールやテスト方針は、チーム全体で議論し、全員が納得できる形で決定することが大切です。

3. 定期的な見直し

プロジェクトの進展に合わせて、設定を見直し、最適化を続けることで、長期的な価値を維持できます。

4. 新メンバーへの配慮

新しくチームに参加するメンバーが、迷うことなく開発環境を構築できるよう、ドキュメントの整備も忘れずに行いましょう。

コード品質の向上は、一朝一夕で達成できるものではありません。しかし、Jest と Prettier の連携という小さな一歩から始めることで、チーム全体の開発文化を大きく変革することができるのです。

皆さんも、今日からこれらのツールを活用して、より良い開発体験を実現してみてはいかがでしょうか。きっと、コードを書くことがより楽しく、より意味のある作業になることでしょう。

関連リンク

• Jest 公式ドキュメント
• Prettier 公式ドキュメント
• ESLint 公式ドキュメント
• Husky GitHub リポジトリ
• lint-staged GitHub リポジトリ
• Next.js with Jest 設定ガイド
• TypeScript ESLint 設定ガイド