web100tips’s blog

webエンジニアが知っておくべきこと100を1日1投稿します

Linterとは？ESLint導入からCI連携まで完全ガイド【Webエンジニア向け】

 

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の導入手順

  1. Node.jsがインストールされていることを確認
  2. プロジェクトディレクトリで以下を実行: 
    npm install eslint --save-dev
  3. 初期設定ウィザードを起動: 
    npx eslint --init
  4. プロジェクトに合わせて設定ファイル（.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との連携

以下の拡張機能をインストールすることで、保存時に自動修正が可能になります：

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-prettier

CIとの統合

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エンジニアにとって必須スキルともいえるでしょう。