【初心者向け】CIを初めて構築してみた

## はじめに
今回は、自分が`GitHub Actions`を使って`CI（継続的インテグレーション)`を初めて構築してみたので、備忘録として記録しておきます。

## 基本内容

### CI/CDとは...
 まず`CI（Continuous Integration：継続的インテグレーション)`とは、コードの品質を維持するための自動化されたチェックプロセスです。
通常、チーム開発では、`プルリクエスト（PR）`を作成し、コードレビュー後に`mainブランチ`へマージ する流れが一般的です。しかし、`CI`を活用しない場合、コードの品質を手動でチェックする必要があり、手間がかかります。`CI`を導入することで、コードのチェックを自動化し、バグの混入を防ぐことができます。
一方、`CD（Continuous Delivery：継続的デリバリー）`とは、アプリケーションを 自動的にデプロイ し、ユーザーに継続的に提供できるようにするプロセスです。

### GitHub Actionとは...
`GitHub Actions`は、`GitHub`が提供する ワークフロー自動化サービス です。
`GitHub`のリポジトリで特定のイベント`（例: push, pull_request）`が発生した際に、自動的に一連のコマンドを実行できます。

例として、以下のようなタスクを自動化できます。
　①`CI/CD`の実行
　②Lint / フォーマットチェック
　③ユニットテストの実行
　④デプロイの自動化

詳しくは公式ドキュメントを参照してください。


https://github.co.jp/features/actions


## 実装方法
今回は `Next.js`を使って開発していることを前提に、`ESLint`と`Prettier`を導入し、`PR`作成時に`GitHub Actions`で自動チェックを実行する方法を解説します。


## prettierの導入
まずは、`Next.js`にはデフォルトで`Prettier`が導入されていますが、
追加のルールを適用できるようにするため、以下のコマンドで必要なパッケージをインストールします。
```
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-json
```

ルートディレクトリに`.prettierrc`を作成し、以下のように記述してください。



```
{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

```

中身について以下に解説します。
これで、command+sを押した時に、以下のルールに沿った形でコードが整理されまs
<table>
  <thead>
    <tr>
      <th>設定</th>
      <th>説明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>semi: true</td>
      <td>文の最後にセミコロンを追加</td>
    </tr>
    <tr>
      <td>tabWidth: 2</td>
      <td>インデントのスペース数を2に設定</td>
    </tr>
     <tr>
      <td>printWidth: 80</td>
      <td>80 文字を超える場合に改行</td>
    </tr>
     <tr>
      <td>trailingComma: "all"</td>
      <td>配列やオブジェクトの末尾にカンマを追加</td>
    </tr>
    <tr>
      <td>singleQuote: true</td>
      <td>シングルクォートを使用</td>
    </tr>
  </tbody>
</table>

これでESlintとprettierの設定をすることができました。

## Eslintの導入
次に以下のコマンドを実行して`ESLint`をインストール します。

```
npm init @eslint/config@latest
```
`TypeScript`を使っている場合、以下のオプションを選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749225/5429b9a2-685f-4011-8888-4aceafdfb389.png)


`eslint.config.mjs`というファイルが自動作成されますが、
`.eslintrc.json`の方が一般的で見やすいので、`eslint.config.mjs`を削除し、
プロジェクトのルートディレクトリに`.eslintrc.json`を作成してください。

```json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "json"],
  "rules": {
    "no-console": 1,
  },
  "ignorePatterns": [
    "package.json",
    "package-lock.json",
    "tsconfig.json",
    ".eslintrc.json"
  ]
}
```
中身について解説します。

<table>
  <thead>
    <tr>
      <th>設定</th>
      <th>説明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>extends</td>
      <td>Next.js + TypeScript の推奨ルールを適用</td>
    </tr>
    <tr>
      <td>parser</td>
      <td>TypeScript のコードを解析できるようにする</td>
    </tr>
     <tr>
      <td>plugins</td>
      <td>@typescript-eslint（型チェック）、json（JSONチェック）を追加</td>
    </tr>
     <tr>
      <td>rules</td>
      <td>no-console: 1（console.log を警告レベルに設定）</td>
    </tr>
      <tr>
      <td>ignorePatterns</td>
      <td>package.json などの設定ファイルをチェック対象外にする</td>
    </tr>
  </tbody>
</table>



これでEslintの設定がうまくいきました。
試しに、以下のコマンドを実行し、正常に動作するか確認しましょう。
```
npm run lint
```

## GitHub Actions に追加
最後に、PR 作成時に`ESLint & Prettier`を自動実行する`GitHub Actions`を設定します。

1. `.github/workflows/ `ディレクトリを作成
2. `lint-check.yml`を作成し、以下を記述


必ずルートディレクトリに、`.github`ディレクトリを作成してください！
さらにこの名前で作成しないと、`GitHub`が識別してくれないので注意が必要です。
自分も最初ルートディレクトリに作成できていないくて少し沼りました。

```yaml:.github/workflows/lint-check.yml
name: Lint & Prettier Check

on:
  pull_request:
    branches:
      - main

jobs:
  lint:
    name: Run ESLint & Prettier
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run Prettier Check
        run: npm run prettier:check
```
最後にpackage.jsonのscripts内に以下を追記してください。
これをしないと、上記のprettierのチェックコマンドが走りません。

```
"prettier:check": "prettier --check ."
```

これで、プルリクエスト作成時に自動で ESLint & Prettier のチェック が走ります！

## 終わりに

初めて CI を構築しました。
今後は テストの自動実行 や 型チェック も CI に組み込んで、より強固なワークフローを作っていきます。
最後まで読んでいただき、ありがとうございました^^