🚦 Lintってなに？初心者でもわかるESLintとGitHub Actionsの自動チェック入門

〜フロントとバックの両方を動かして学ぶ〜

🧩 はじめに

チーム開発をしていると「Lintエラーが出てます！」と言われることがあります。
でも初心者のうちは、「Lintって何？」「どこで動いてるの？」がわかりにくいですよね。

この記事では、

• Lintの基本
• ファイルの役割
• フロントエンドとバックエンドでどう使うのか
• GitHub Actionsでの自動チェック
  を「1行ずつコメント付き」で解説します。

---

1. Lintとは？なぜ必要なの？

💡 一言で言うと：

Lintは「コードの書き方を自動チェックしてくれる先生」みたいなものです。

例えば次のようなミスを自動で見つけます：

よくあるミス	Lintの指摘例
セミコロンを忘れた	Missing semicolon
使ってない変数がある	'data' is defined but never used
== と === を混同してる	Expected '===' and instead saw '=='

チームで同じルールで書くことで、読みやすさとバグの少なさを両立できます。

---

2. プロジェクト全体の構成（Monorepo例）

まず全体のファイル構成を見ましょう👇

repo-root/
├─ frontend/                 # フロントエンド（画面を作る）
│  ├─ src/
│  ├─ eslint.config.js       # フロントのLint設定
│  └─ package.json           # 実行スクリプトの定義
├─ backend/                  # バックエンド（サーバー側）
│  ├─ api/
│  │  ├─ src/
│  │  ├─ eslint.config.js    # バックエンドのLint設定
│  │  └─ package.json
├─ .github/
│  └─ workflows/
│     └─ lint-backend.yml    # 自動でLintを回すGitHub Actions設定
└─ package.json              # ルート（共通設定）

frontend → ユーザーが触る部分（画面）
backend → データを扱う部分（APIや処理）
.github/workflows → 自動チェックを設定する場所（CI）

---

3. ファイルの役割まとめ（初心者でもわかる表）

ファイル	役割	なくてはダメ？
eslint.config.js	「どんなルールでチェックするか」を定義	✅ 必須（ルールブック）
package.json	実行コマンドや依存関係を管理	✅ 必須（プロジェクトの設計図）
.github/workflows/lint-backend.yml	GitHub上で自動チェックを実行	⚙ あれば便利（手動チェックを自動化）

---

4. フロントエンドのLint設定（コメント付き）

// ESLintのコア設定とTypeScript、React用の設定を読み込み
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import reactHooks from "eslint-plugin-react-hooks";

// ここでESLintの設定をまとめてexport（他ファイルで利用）
export default tseslint.config(
  js.configs.recommended,          // JavaScriptの基本ルール
  tseslint.configs.recommended,    // TypeScriptの基本ルール
  {
    languageOptions: { ecmaVersion: "latest" }, // 最新の構文を許可
    plugins: { "react-hooks": reactHooks },     // React Hooksのチェックを有効化
    rules: {
      "no-unused-vars": "warn",        // 未使用変数があれば警告
      "semi": ["error", "always"],     // セミコロン必須
      "quotes": ["error", "double"],   // ダブルクォート統一
      "react-hooks/rules-of-hooks": "error",  // Hooksルールを強制
      "react-hooks/exhaustive-deps": "warn"   // 依存配列の警告
    }
  }
);

// package.json の一部
{
  "scripts": {
    // Lintを実行するコマンド。ターミナルで「npm run lint」でOK
    "lint": "eslint . --ext .ts,.tsx"
  }
}

🧠 これで、npm run lint を叩くとフロントのコード全体がチェックされます。

---

5. バックエンドのLint設定（GitHub Actionsで自動チェック）

次は「サーバー側（バックエンド）」で自動的にLintを走らせる設定です👇

# Backend 用 ESLint workflow
# → backendディレクトリに変更があったときだけLintを自動実行
name: Lint (backend)

# いつ動くか：pushやPRのたびに
on:
  push:
    paths:
      - 'backend/**'
  pull_request:
    paths:
      - 'backend/**'

# 実際に行う処理
jobs:
  lint-backend:
    runs-on: ubuntu-latest  # GitHubが用意してくれるUbuntu環境を使う

    strategy:
      matrix:
        node-version: [22.x]  # Node.jsのバージョンを指定

    steps:
      # ① GitHub上のコードをRunner（仮想環境）にダウンロード
      - name: Checkout
        uses: actions/checkout@v4

      # ② Node.jsをインストール
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

      # ③ 依存パッケージをインストール（CI用のクリーンインストール）
      - name: Install dependencies
        run: npm ci

      # ④ ESLintを実行（backend/apiのコードをチェック）
      - name: Run ESLint (backend/api)
        run: |
          echo "Running backend/api lint..."
          npm run --workspace=backend/api lint

---

6. フロントエンドも自動Lintしたい場合（おまけ）

name: Lint (frontend)

on:
  push:
    paths:
      - 'frontend/**'
  pull_request:
    paths:
      - 'frontend/**'

jobs:
  lint-frontend:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22.x
      - name: Install dependencies
        run: npm ci
      - name: Run ESLint (frontend)
        run: npm run --workspace=frontend lint

こうすることで、フロントもバックもGitHubが自動でLintチェックしてくれます。
どちらかの変更だけでも、対応するワークフローが自動で動きます。

---

7. まとめ

• Lintは「書き方の先生」。エラーを出すのは悪ではなく「お知らせ」
• フロント・バック両方に設定を入れることで、全体の品質を自動で管理できる
• GitHub Actionsを使うと、pushしただけで自動チェックできる

---