Linterの役割と導入（ESLintなど）
はじめに
Web開発においてコードの品質を保つために欠かせないツールの一つが「Linter（リンター）」です。本記事では、Linterの基本的な役割から、代表的なLinterであるESLintの導入方法、設定、活用法までを1時間で学べる内容で網羅的に解説します。
Linterとは何か？
Linterとは、ソースコードを解析して構文ミスやスタイルの問題を検出する静的解析ツールのことです。主な目的は以下の通りです：
- コードの一貫性を保つ
- バグの原因となる記述ミスを未然に防ぐ
- チーム開発におけるコードスタイルの統一
- レビューコストの削減
代表的なLinterの種類
- JavaScript/TypeScript: ESLint, TSLint（※非推奨）
- HTML/CSS: stylelint
- Python: pylint, flake8
- Go: golint
- PHP: PHP_CodeSniffer
ESLintの導入手順
- Node.jsがインストールされていることを確認
- プロジェクトディレクトリで以下を実行:
npm install eslint --save-dev - 初期設定ウィザードを起動:
npx eslint --init - プロジェクトに合わせて設定ファイル（.eslintrc）を作成
よく使われるESLintの設定例
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
VSCodeとの連携
以下の拡張機能をインストールすることで、保存時に自動修正が可能になります：
- ESLint（拡張機能）
settings.jsonに以下を追加：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}Prettierとの併用
コード整形ツールであるPrettierとESLintを併用する場合、eslint-config-prettierやeslint-plugin-prettierを使って整合性を保ちます。
npm install --save-dev eslint-config-prettier eslint-plugin-prettierCIとの統合
CI/CDパイプラインにESLintを組み込むことで、プッシュ時に自動でコード品質をチェックできます：
# GitHub Actionsの例
name: Lint
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm install
- run: npx eslint .
まとめ
Linterは、単なる警告ツールではなく、コードの品質向上・チームの効率化・バグの予防などに直結する非常に強力なツールです。ESLintをはじめとしたLinterの導入は、Webエンジニアにとって必須スキルともいえるでしょう。
