10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@TOMOSIA-HieuNTin株式会社TOMOSIA VIET NAM

2026年AIを組み合わせたフロントエンドコーディング品質管理ツール

10
Posted at

5f07c60d-ec3e-486f-a538-d3fc8dee98fd.png

はじめに

現代のソフトウェア開発とAIの文脈において、コード品質管理はもはや選択肢ではなく、必須要件となっています。2026年のAIの急速な発展により、コード品質管理ツールは人工知能と深く統合され、これまでにない効率と生産性をもたらしています。本記事では、優先度別（必須 / 推奨 / 任意）に分類された必要なツールの完全なリストと、各ツールをいつ使用すべきかについての具体的なガイドを提供します。

ツール概要一覧

以下の表は、16の主要なツールグループとそれぞれの主要ツール、優先度をまとめたものです：

グループ 主要ツール 優先度 説明
1. Static Analysis & Linting ESLint, TypeScript, Stylelint, SonarCloud ⭐⭐⭐ 必須 開発段階から早期にエラーを検出し、コード品質を確保
2. Code Formatting & Style Prettier, EditorConfig, Biome ⭐⭐⭐ 必須 コードスタイルの一貫性を確保し、レビュー時間を短縮
3. Dead Code & Dependency Analysis Knip, dpdm, depcheck ⭐⭐⭐ 必須 未使用コードと依存関係を検出し、バンドルサイズを削減
4. Complexity & Maintainability ESLint complexity, CodeScene, CodeClimate ⭐⭐ 推奨 コードの複雑さを管理し、保守性を向上
5. Type Safety & Runtime Validation TypeScript, Zod, io-ts/yup ⭐⭐⭐ 必須 コンパイル時とランタイムの両方で型安全性を確保
6. Testing Framework Vitest/Jest, React Testing Library, Playwright, Storybook ⭐⭐⭐ 必須 品質保証の基盤となるテストフレームワーク
7. Test Coverage & Quality Metrics Istanbul, Vitest coverage, Coverage reporters ⭐⭐⭐ 必須 テストカバレッジの追跡と強制
8. Performance & Bundle Analysis Lighthouse, Webpack Bundle Analyzer, Vite Visualizer ⭐⭐⭐ 必須 パフォーマンスとバンドルサイズの最適化
9. Accessibility (a11y) axe-core, Lighthouse a11y, pa11y ⭐⭐⭐ 必須 すべてのユーザーがアプリケーションを使用可能に
10. Security & Vulnerability Scanning npm audit, Snyk, Dependabot, eslint-plugin-security ⭐⭐⭐ 必須 セキュリティの脆弱性からアプリケーションを保護
11. Visual Regression Testing Chromatic, Percy, BackstopJS, Applitools ⭐⭐⭐ 必須 意図しないUIの変更を防ぐ
12. Pre-commit & Git Hooks Lefthook, lint-staged, Commitlint ⭐⭐⭐ 必須 リポジトリへの悪いコードの侵入を防ぐ
13. CI/CD Integration GitHub Actions, GitLab CI, Quality gates ⭐⭐⭐ 必須 パイプラインでの品質チェックの自動化
14. API Testing & Mocking MSW, Pact/Pactflow ⭐⭐⭐ 必須 フロントエンドを独立してテスト
15. Error Tracking & Monitoring Sentry, Bugsnag, LogRocket ⭐⭐⭐ 必須 本番環境のエラーをキャッチしてデバッグ
16. 🤖 AI-Powered Tools GitHub Copilot, Cursor, DeepSource, Playwright Codegen ⭐⭐⭐ 必須 AIを活用して生産性とコード品質を向上

コード品質管理ツールのグループ

1. Static Analysis & Linting

このツールグループは、開発段階から早期にエラーを検出し、コード品質を確保することを目的としています。これはソフトウェア開発プロセスの最初の防御層です。

ESLint ⭐⭐⭐ 必須

ESLintは、すべてのJavaScript/TypeScriptプロジェクトに不可欠なツールです。コード記述中に構文エラー、コードスメル、アンチパターンを検出します。豊富なプラグインエコシステム（React、Vue、a11y、セキュリティ）により、ESLintは各プロジェクトの特定のニーズに合わせてカスタマイズできます。小規模から大規模まで、すべてのプロジェクトでESLintを使用することをお勧めします。コード品質を維持し、本番環境でのエラーを最小限に抑えるのに役立ちます。

TypeScript (tsc) ⭐⭐⭐ 必須

TypeScriptは、JavaScriptのスーパーセットであるだけでなく、強力な静的型チェックツールでもあります。コンパイル時にエラーを検出し、IntelliSenseを改善し、安全なリファクタリングをサポートします。すべてのTypeScriptプロジェクトは、型安全性を確保し、ランタイムエラーを最小限に抑えるために、TypeScriptコンパイラを使用する必要があります。

Stylelint ⭐⭐ 推奨

Stylelintは、CSS/SCSS/Less用のリンティングツールで、規約の強制と構文エラーの検出に役立ちます。プロジェクトに複雑なカスタムCSSが多数ある場合、このツールは特に重要です。ただし、Tailwind CSSまたはCSS-in-JSのみを使用している場合、Stylelintは不要かもしれません。

SonarCloud/SonarQube ⭐⭐ 推奨

SonarCloudとSonarQubeは、コードスメル、重複、複雑さ、保守性、セキュリティの脆弱性に関する包括的な分析を提供します。これらのツールは、エンタープライズプロジェクト、5人以上のチーム、または技術的負債を体系的に追跡する必要がある場合に特に重要です。

2. Code Formatting & Style

このグループは、コードスタイルの一貫性を確保し、不要な議論を減らし、コードレビューの時間を節約します。

Prettier ⭐⭐⭐ 必須

Prettierは、JS/TS/HTML/CSS/JSONのコードを自動フォーマットし、コードスタイルに関する議論を完全に排除します。レビューの時間を節約し、コードベース全体の一貫性を確保します。すべてのプロジェクトは、最高の体験を得るためにPrettierをESLintと統合する必要があります。

EditorConfig ⭐⭐ 推奨

EditorConfigは、インデント、エンコーディング、行末などの基本的な設定を異なるエディタ間で同期します。チームがVS Code、WebStorm、Vimなど複数のエディタを使用している場合、このツールは特に重要です。

Biome (Alternative) ⭐ 任意

Biomeは、ESLint + Prettierの新しい代替品で、Rustで書かれているため25倍高速です。ただし、エコシステムはESLintほど充実していません。最大速度を求め、プラグインが少なくても問題ない場合は、新しいプロジェクトでBiomeの使用を検討してください。

3. Dead Code & Dependency Analysis

このツールグループは、未使用のコードと依存関係を検出することで、コードベースをクリーンに保ち、バンドルサイズを削減するのに役立ちます。

Knip ⭐⭐⭐ 必須

Knipは、未使用のファイル、エクスポート、依存関係、設定ファイルをインテリジェントに検出します。モノレポを非常にうまくサポートし、中規模以上のプロジェクトでは定期的（週次/月次）に実行する必要があります。Knipはコードベースをクリーンに保ち、バンドルサイズを大幅に削減するのに役立ちます。

dpdm ⭐⭐ 推奨

dpdmは、循環依存関係（インポートサイクル）を検出します。これは、パフォーマンスの問題やコードの保守の困難を引き起こす可能性のある問題です。複雑なモジュールアーキテクチャを持つプロジェクトで使用し、CIで実行する必要があります。

depcheck (Legacy) ⭐ 任意

depcheckは、package.json内の未使用の依存関係を見つけるためのレガシーツールです。Knipを使用している場合、Knipの方が優れているため、depcheckは不要です。

4. Complexity & Maintainability

このグループは、コードが複雑になりすぎることを防ぎ、コードベースを読みやすく、保守しやすくします。

ESLint complexity plugin ⭐⭐ 推奨

ESLint complexity pluginは、循環的複雑度のしきい値を強制し、関数が複雑になりすぎることを防ぎます。すべてのプロジェクトで合理的なしきい値（10-15）を設定して、コードを読みやすく、テストしやすくする必要があります。

CodeScene ⭐ 任意

CodeSceneは、行動コード分析を提供し、ホットスポット（変更が多く複雑なコード）とチーム知識パターンを検出します。このツールは、エンタープライズプロジェクト、リファクタリング戦略が必要な場合、技術的負債の追跡に適しています。

CodeClimate ⭐ 任意

CodeClimateは、保守性スコア、技術的負債の推定、コード重複分析を提供します。これはSonarCloudの代替品で、よりシンプルなメトリクスが必要な場合に適しています。

5. Type Safety & Runtime Validation

このグループは、コンパイル時とランタイムの両方で型安全性を確保し、型関連のエラーからアプリケーションを保護します。

TypeScript + tsserver ⭐⭐⭐ 必須

TypeScriptとtsserverは、静的型付けとリアルタイムのエディタフィードバックを提供します。これは、すべてのTypeScriptプロジェクトの型安全性の基盤です。

Zod ⭐⭐⭐ 必須

Zodは、APIレスポンス、フォームデータ、環境変数のランタイムスキーマ検証です。重要な点は、TypeScriptはコンパイル時のみチェックし、ランタイムを検証しないことです。したがって、Zodは外部データ（API、ユーザー入力、環境変数）を持つすべてのプロジェクトに必須です。

io-ts/yup (Alternatives) ⭐ 任意

io-tsとyupは、Zodの代替品です。チームがこれらに慣れている場合、またはZodにない特別な機能が必要な場合は、これらの中から選択できます。

6. Testing Framework

テストは品質保証の基盤であり、コードが期待どおりに動作することを保証します。

Vitest/Jest ⭐⭐⭐ 必須

VitestとJestは、ユニットテスト、スナップショットテスト、モッキング用のテストフレームワークです。VitestはViteプロジェクトでは高速ですが、Jestはより一般的で、エコシステムが大きいです。すべてのプロジェクトは、これらのフレームワークのいずれかを持つ必要があります。

React Testing Library ⭐⭐⭐ 必須

React Testing Libraryは、コンポーネントの動作テストに焦点を当て、実装の詳細ではなく、ユーザーの操作のようにテストします。これは、すべてのReactプロジェクトのベストプラクティスです。

Playwright ⭐⭐⭐ 必須

Playwrightは、E2Eテスト、クロスブラウザー自動化、AIコード生成機能を提供します。すべての本番プロジェクトは、重要なユーザージャーニーが正しく動作することを保証するためにPlaywrightを使用する必要があります。

Cypress (Alternative) ⭐⭐ 任意

Cypressは、開発者体験が良く、デバッグが容易なPlaywrightの代替品です。チームが慣れている場合、またはタイムトラベルデバッグが必要な場合は、Cypressを選択できます。

Storybook ⭐⭐ 推奨

Storybookは、コンポーネントカタログで、分離された開発とドキュメントをサポートします。このツールは、再利用可能なコンポーネントを持つプロジェクトや、チームにデザイナーがいる場合に重要です。

7. Test Coverage & Quality Metrics

テストカバレッジの追跡と強制により、コードが十分にテストされていることを保証します。

Istanbul (nyc) ⭐⭐⭐ 必須

Istanbulは、テストカバレッジ（行、分岐、関数、ステートメント）を測定します。すべてのプロジェクトは、テスト品質を確保するために最小しきい値（70-80%）を設定する必要があります。

Vitest built-in coverage ⭐⭐⭐ 必須

Vitestには、カバレッジが組み込まれており、Vitestを使用する場合はIstanbulの代わりに使用できます。

Coverage reporters ⭐⭐ 推奨

カバレッジレポーターは、カバレッジを可視化し、CIでしきい値を強制し、時間の経過とともにカバレッジが低下することを防ぎます。

8. Performance & Bundle Analysis

このグループは、パフォーマンスとバンドルサイズの最適化を確保し、ユーザー体験に直接影響します。

Lighthouse ⭐⭐⭐ 必須

Lighthouseは、パフォーマンス、PWA、アクセシビリティ、SEOの監査を実行可能な推奨事項とともに提供します。Core Web VitalsはSEOとUXに直接影響します。すべてのWebプロジェクトは、本番ビルドのCIでLighthouseを実行する必要があります。

Webpack Bundle Analyzer ⭐⭐⭐ 必須

Webpack Bundle Analyzerは、バンドル構成を可視化し、大きな依存関係を見つけます。バンドルサイズはパフォーマンスに直接影響するため、このツールはすべてのプロジェクトに必須です。

Vite Visualizer ⭐⭐⭐ 必須

Vite Visualizerは、Viteプロジェクト用のバンドル分析で、Viteを使用する場合はWebpack Bundle Analyzerの代わりに使用します。

WebPageTest ⭐⭐ 推奨

WebPageTestは、実世界のパフォーマンスメトリクス、フィルムストリップビュー、接続スロットリングを提供します。Lighthouseは合成テストですが、WebPageTestは実際のユーザーに近いです。パフォーマンスが重要なアプリケーションで使用する必要があります。

SpeedCurve/Calibre ⭐ 任意

SpeedCurveとCalibreは、継続的なパフォーマンス監視、合成テスト、アラートを提供します。これらのツールは高価で、エンタープライズ、eコマース、または高トラフィックサイトに適しています。

9. Accessibility (a11y)

アクセシビリティは、多くの国で法的要件であり、すべてのユーザーがアプリケーションを使用できることを保証します。

axe-core ⭐⭐⭐ 必須

axe-coreは、自動化されたa11yテスト、WCAG準拠チェック、CI統合を提供します。すべてのプロジェクト、特に公開サイトは、axe-coreを使用する必要があります。

Lighthouse a11y ⭐⭐ 推奨

Lighthouse a11yは、Chrome DevTools内でクイックa11y監査を提供します。これは基本的なカバレッジなので、axe-coreと併用する必要があります。

pa11y ⭐⭐ 推奨

pa11yは、CLI/CI a11yテストと自動化された監査を提供します。このツールは、CIパイプラインでaxe-coreを補完します。

WAVE/tota11y ⭐ 任意

WAVEとtota11yは、視覚的なa11y評価用のブラウザ拡張機能です。これらのツールは、手動QAとa11yの問題の学習に適しています。

10. Security & Vulnerability Scanning

アプリケーションをセキュリティの脆弱性から保護することは、最優先事項です。

npm audit/yarn audit ⭐⭐⭐ 必須

npm auditとyarn auditは、組み込みの依存関係の脆弱性スキャンで、無料で自動実行されます。すべてのプロジェクトは、CIで実行する必要があります。

Snyk ⭐⭐⭐ 必須

Snykは、継続的なセキュリティ監視、自動化されたパッチPR、ライセンスコンプライアンスを提供します。npm auditよりも優れており、データベースが大きいです。無料ティアは小規模チームに十分です。

Dependabot/Renovate ⭐⭐⭐ 必須

DependabotとRenovateは、依存関係とセキュリティパッチを自動更新します。依存関係を最新に保つことで、脆弱性を減らします。DependabotはGitHubで無料です。

eslint-plugin-security ⭐⭐ 推奨

eslint-plugin-securityは、eval、正規表現DOS、XSSの原因となるコードなどの安全でないコードパターンを検出します。このツールは軽量で、一般的な間違いをキャッチします。

retire.js ⭐ 任意

retire.jsは、古い/脆弱なJavaScriptライブラリを検出します。Snykを使用している場合、retire.jsは不要です。

11. Visual Regression Testing

このグループは、意図しないUIの変更を防ぎ、一貫したインターフェースを保証します。

Chromatic ⭐⭐⭐ 必須

Chromaticは、視覚的な差分テストとStorybook統合を提供します。Storybookがある場合、意図しないUIの変更を防ぐためにChromaticは必須です。

Percy ⭐⭐ 推奨

Percyは、UI回帰テストとクロスブラウザー視覚差分のChromaticの代替品です。Storybookを使用しない場合に使用します。

BackstopJS ⭐ 任意

BackstopJSは、オープンソースの視覚回帰テストで、セルフホスト型です。予算の制約があり、DevOpsリソースがある場合に適しています。

Applitools ⭐ 任意

Applitoolsは、スマート差分機能を備えたAI駆動の視覚テストを提供します。このツールは高価で、複雑なレスポンシブデザインを持つエンタープライズに適しています。

12. Pre-commit & Git Hooks

このグループは、リポジトリへの悪いコードの侵入を防ぎ、品質の高いコードのみがコミットされることを保証します。

Lefthook ⭐⭐⭐ 必須

Lefthookは、高速なgitフックマネージャー（Goベース）で、並列実行とシンプルなYAML設定を提供します。Huskyより2-3倍高速です。すべてのプロジェクト、特にモノレポは、Lefthookを使用する必要があります。

lint-staged ⭐⭐⭐ 必須

lint-stagedは、ステージングされたファイルのみでリンターを実行し、コードベース全体をスキャンしません。これにより、pre-commitフックの速度が最適化されます。Lefthookと併用します。

Commitlint ⭐⭐ 推奨

Commitlintは、従来のコミットメッセージ（feat、fix、docsなど）を強制します。変更ログの自動生成とセマンティックバージョニングに役立ちます。オープンソース、大規模チーム、または変更ログの自動化が必要な場合に適しています。

Husky (Alternative) ⭐⭐ 任意

Huskyは、最も人気のあるgitフックマネージャーですが、Lefthookより遅いです。チームがHuskyに慣れている場合は選択できます。

13. CI/CD Integration

パイプラインでの品質チェックの自動化により、すべてのコードがマージ前にチェックされることを保証します。

GitHub Actions ⭐⭐⭐ 必須

GitHub Actionsは、CI/CD自動化を提供し、パブリックリポジトリでは無料で、GitHubと統合されています。すべてのGitHubプロジェクトは使用する必要があります。

GitLab CI/CircleCI ⭐⭐ 任意

GitLab CIとCircleCIは、代替のCIプラットフォームです。gitホスティングに基づいて選択するか、高度なCI機能が必要な場合に選択します。

Quality gates ⭐⭐⭐ 必須

品質ゲートは、品質しきい値（カバレッジ、複雑さ、脆弱性）を満たさない場合、CIビルドを失敗させます。すべてのプロジェクトは、現実的なしきい値を設定する必要があります。

14. API Testing & Mocking

フロントエンドを独立してテストし、実際のAPIを必要とせず、テストを高速かつ安定して実行できるようにします。

MSW (Mock Service Worker) ⭐⭐⭐ 必須

MSWは、テストとStorybookでAPIモッキングを提供し、ネットワークリクエストをインターセプトします。API呼び出しがあるすべてのプロジェクトは、フロントエンドを独立してテストするためにMSWを使用する必要があります。

Pact/Pactflow ⭐ 任意

PactとPactflowは、コンシューマー駆動の契約テストを提供し、フロントエンドとバックエンドの互換性を保証します。マイクロサービスアーキテクチャ、分離されたフロントエンド/バックエンドチームに適しています。

15. Error Tracking & Monitoring

本番環境のエラーをキャッチしてデバッグすることで、アプリケーションの品質を継続的に改善します。

Sentry ⭐⭐⭐ 必須

Sentryは、ランタイムエラートラッキング、スタックトレース、リリース追跡、パフォーマンス監視を提供します。すべての本番アプリは、Sentryを使用する必要があります。無料ティアは非常に充実しています。

Bugsnag ⭐ 任意

Bugsnagは、安定性スコアを備えた代替のエラー監視です。Sentryにない特定の機能が必要な場合に選択します。

LogRocket ⭐⭐ 推奨

LogRocketは、セッションリプレイ、コンソールログ、ネットワークログを提供し、バグの再現に役立ちます。このツールは、ユーザーがバグを報告した際のコンテキストを理解するのに役立ちます。B2Cアプリ、複雑なユーザーフローに適しています。

16. 🤖 AI-Powered Tools

このグループは、AIを活用して生産性とコード品質を向上させます。これが2026年の主要なトレンドです。

AI Code Assistant

GitHub Copilot ⭐⭐⭐ 必須

GitHub Copilotは、リアルタイムのコード提案、補完、ボイラープレート生成を提供します。生産性を20-40%向上させ、業界標準となっています。すべての開発者が使用すべきで、月額10ドルは非常に価値があります。

Cursor ⭐⭐ 推奨

Cursorは、AI駆動のIDEで、コードベースとのチャットとマルチファイル編集を可能にします。複雑なリファクタリングではCopilotよりも強力です。強力なAI支援が必要な開発者、VS Codeの代替に適しています。

Codeium ⭐⭐ 推奨

Codeiumは、無料のAI自動補完を提供し、Copilotの代替品です。Copilotの料金を支払いたくない個人開発者に適しています。

Tabnine ⭐ 任意

Tabnineは、プライバシー重視のAI補完で、セルフホストオプションを提供します。規制された業界、コードをクラウドに送信できない場合に適しています。

AI Code Review & Quality

DeepSource ⭐⭐⭐ 必須

DeepSourceは、AIを使用してバグ、セキュリティの問題を検出し、自動修正の提案を提供します。人間のレビュアーが見逃した問題をキャッチします。すべてのプロジェクトが使用すべきで、オープンソースは無料です。

Codacy ⭐⭐ 任意

Codacyは、AIパターン検出とコード品質スコアを提供します。これはDeepSource/SonarCloudの代替品です。DeepSourceを使用しない場合に選択します。

SonarLint AI ⭐⭐ 推奨

SonarLint AIは、IDE内でリアルタイムのAIフィードバックを提供します。SonarCloudと併用して、コミット前に問題をキャッチします。

AI Testing & QA

Playwright Codegen ⭐⭐⭐ 必須

Playwright Codegenは、AIを使用してテストを生成し、ユーザーの操作を記録してコードを生成します。Playwrightを使用している場合、E2Eテストの記述を高速化するためにCodegenは必須です。

Applitools Eyes ⭐⭐ 推奨

Applitools Eyesは、スマートな画像比較を備えたAI視覚テストを提供し、軽微な変更を無視します。ピクセル完璧な比較よりも優れています。視覚回帰テストとレスポンシブデザインに適しています。

Testim ⭐ 任意

Testimは、自己修復テストを備えたインテリジェントなテスト自動化を提供します。このツールは高価で、エンタープライズ、大規模なテストスイート、または不安定なテストの問題がある場合に適しています。

AI Documentation

Mintlify ⭐⭐ 推奨

Mintlifyは、コードコメントと構造からドキュメントを自動生成します。ドキュメントは常にコードと同期されます。オープンソースライブラリ、API、コンポーネントライブラリに適しています。

GitHub Copilot Chat ⭐⭐⭐ 必須

GitHub Copilot Chatは、コードを説明し、ドキュメントを生成し、コードベースに関する質問に答えます。Copilotサブスクリプションがある場合、これは必須です。新しいコードベースの学習、オンボーディング、コードレビューに適しています。

Swimm ⭐ 任意

Swimmは、AI駆動のドキュメントを提供し、コード変更とドキュメントを自動同期します。このツールはニッチで、複雑なドメインロジック、チーム知識管理に適しています。

AI Performance

Lighthouse AI insights ⭐⭐ 推奨

Lighthouse AI insightsは、AI駆動のパフォーマンス推奨事項を提供します。無料でChromeに組み込まれています。すべてのプロジェクトは、Lighthouseと併用する必要があります。

DebugBear ⭐ 任意

DebugBearは、AI駆動のパフォーマンス分析と監視を提供します。これはSpeedCurveの代替品です。パフォーマンスが重要なアプリケーション、継続的な監視が必要な場合に適しています。

推奨セットアップ

開発フローの概要

開発から本番環境までの単一フローを以下のように推奨します：

  1. 開発 → 2. Pre-commit → 3. CI/CD → 4. 本番監視

詳細なフロー：

開発者がコードを記述
    ↓
[AI Assistant: Copilot/Cursor] - コード提案、自動補完
    ↓
[TypeScript] - IDE内でのリアルタイム型チェック
    ↓
[ESLint + Prettier] - 自動リンティングとフォーマット
    ↓
[Git commit]
    ↓
[Pre-commit hooks: Lefthook + lint-staged] - ステージングされたファイルでリンターを実行
    ↓
[Commitlint] - コミットメッセージ形式の検証
    ↓
[リポジトリにプッシュ]
    ↓
[CI/CD Pipeline: GitHub Actions]
    ├─ [TypeScriptコンパイルチェック]
    ├─ [ESLint + Prettierチェック]
    ├─ [ユニットテスト: Vitest] + [カバレッジチェック]
    ├─ [E2Eテスト: Playwright]
    ├─ [セキュリティスキャン: Snyk + npm audit]
    ├─ [バンドル分析: Vite Visualizer]
    ├─ [Lighthouse CI] - パフォーマンス + A11y
    ├─ [品質ゲート] - しきい値を満たさない場合は失敗
    └─ [ステージング/本番環境にデプロイ]
    ↓
[本番環境]
    ├─ [Sentry] - エラートラッキング
    ├─ [LogRocket] - セッションリプレイ（オプション）
    └─ [パフォーマンス監視]

各技術のベストプラクティス

ESLint

ベストプラクティス：

  • 適切なプリセットを使用：@typescript-eslint/recommended、plugin:react/recommended
  • 厳格なルールを有効化：重要な問題にはerror、スタイルにはwarn
  • Prettierと統合：eslint-config-prettierを使用して競合を回避
  • チーム規約のカスタムルール（命名、インポート順序）
  • IDE（リアルタイム）+ pre-commit + CIで実行

コード例：

{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Prettier

ベストプラクティス：

  • プロジェクトのルートに.prettierrc設定ファイルを配置
  • IDEで保存時にフォーマット
  • pre-commitフック（lint-staged）で実行
  • .prettierignoreで生成ファイル、ビルド出力を無視

コード例：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

TypeScript

ベストプラクティス：

  • 厳格モード：tsconfig.jsonで"strict": true
  • any型を使用しない：unknownまたは適切な型を使用
  • noUnusedLocals、noUnusedParametersを有効化
  • 外部ライブラリの型定義
  • 必要に応じてテスト用に別のtsconfig.jsonを作成

コード例：

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true
  }
}

Playwright

ベストプラクティス：

  • 重要なユーザージャーニーをテスト、すべてをテストしない
  • 保守性のためにページオブジェクトモデルを使用
  • page.waitForSelectorまたは自動待機で要素を待機
  • 失敗時にスクリーンショット
  • CIで並列実行

コード例：

import { expect, test } from "@playwright/test"

test("user can complete checkout flow", async ({ page }) => {
  await page.goto("/products")
  await page.click('[data-testid="add-to-cart"]')
  await page.click('[data-testid="cart-icon"]')
  await page.click("text=Checkout")

  await expect(page).toHaveURL("/checkout")
  await expect(page.locator("text=Order confirmed")).toBeVisible()
})

Lefthook + lint-staged

ベストプラクティス：

  • ステージングされたファイルのみでリンターを実行（高速）
  • Lefthookで並列実行
  • --no-verifyでフックをスキップするのは本当に必要な場合のみ
  • .lefthook.ymlで設定

コード例：

# .lefthook.yml
pre-commit:
  parallel: true
  commands:
    lint:
      run: npx lint-staged
    type-check:
      run: npx tsc --noEmit
      glob: "*.{ts,tsx}"

Knip

ベストプラクティス：

  • 定期的（週次/月次）に実行してデッドコードを検出
  • knip.json設定ファイルで誤検知を無視
  • モノレポをサポート：各ワークスペースを個別に実行
  • CIに統合して未使用コードを防止
  • 削除前に慎重にレビュー：動的インポートまたは設定ファイルの可能性

コード例：

{
  "entry": ["src/index.tsx", "src/main.ts"],
  "project": ["src/**/*.{ts,tsx}"],
  "ignore": ["**/*.test.ts", "**/*.spec.ts"],
  "ignoreDependencies": ["@types/*"]
}

# Knipを実行
npx knip

# 未使用の依存関係のみをチェック
npx knip --dependencies

# 本番モード（厳格）
npx knip --production

Commitlint

ベストプラクティス：

  • 従来のコミットを強制：feat:、fix:、docs:、refactor:など
  • .commitlintrc.jsonまたはcommitlint.config.jsで設定
  • Lefthookと統合してpre-commitで実行
  • semantic-releaseと併用して変更ログを自動生成
  • チームトレーニング：全員が形式を理解していることを確認

コード例：

{
  "extends": ["@commitlint/config-conventional"],
  "rules": {
    "type-enum": [
      2,
      "always",
      ["feat", "fix", "docs", "style", "refactor", "test", "chore", "perf"]
    ],
    "subject-case": [2, "never", ["upper-case"]],
    "subject-empty": [2, "never"],
    "type-empty": [2, "never"]
  }
}

# .lefthook.yml - pre-commitに追加
pre-commit:
  commands:
    commitlint:
      run: npx commitlint --edit {1}
      stage: merge-commit

GitHub Actions CI/CD

ベストプラクティス：

  • 依存関係をキャッシュして速度を向上
  • 複数のNodeバージョン用のマトリックス戦略
  • 高速化：最初にクイックチェック（lint、type-check）を実行
  • 品質ゲート：カバレッジ < しきい値の場合、ビルドを失敗
  • 並列実行のための個別ジョブ

コード例：

name: CI
on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check
      - run: npm run test:coverage
      - run: npm run test:e2e

Sentry

ベストプラクティス：

  • バージョン番号でリリース追跡を設定
  • ノイズをフィルタリング：既知のエラーを無視、サンプルレートを設定
  • 読みやすいスタックトレースのためのソースマップ
  • ユーザーコンテキスト：可能な場合、ユーザーID、メールを設定
  • パフォーマンス監視：遅いトランザクションを追跡

コード例：

import * as Sentry from "@sentry/react"

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  release: process.env.REACT_APP_VERSION,
  tracesSampleRate: 0.1
})

AI Tools (Copilot/Cursor)

ベストプラクティス：

  • AIを使用してボイラープレートを生成、複雑なビジネスロジックではない
  • AI生成コードをレビュー：盲目的に信頼しない
  • プロンプトをカスタマイズ：AIがコンテキストを理解できるように明確にコメント
  • リファクタリング、ドキュメント、テスト生成にAIを使用
  • プライバシー：クラウドAIを使用する場合、機密データをコミットしない

コード例：

// Good: 明確なコメントがAIの理解を助ける
/**
 * APIからユーザーデータを取得し、Zodスキーマで検証
 * @param userId - 取得するユーザーID
 * @returns 検証されたユーザーオブジェクトまたはエラーをスロー
 */
async function fetchUser(userId: number): Promise<User> {
  // AIは明確な意図に基づいて実装を生成できる
}

結論

品質ツールを完全にセットアップすることは、ベストプラクティスであるだけでなく、プロジェクトの長期的な保守性への投資でもあります。2026年のAIの急速な発展により、AIツールをワークフローに統合することは、生産性を向上させるだけでなく、コード品質を大幅に向上させます。

私たちの推奨は、必須ツールから始め、その後AIツールを統合して開発速度を向上させることです。すべてのツールがCI/CDで実行され、品質基準が自動的に強制されることを確認してください。最後に、定期的にツールスタックをレビューおよび更新して、常に最高のテクノロジーを使用してください。

AIのトレンドは将来も継続して発展し、ツールはますますインテリジェントで自動化されるようになります。最新のテクノロジーに常に更新することは、現代のソフトウェア開発市場で競争優位を維持するために非常に重要です。

10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?