はじめに
今回は、自分が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 / フォーマットチェック
③ユニットテストの実行
④デプロイの自動化
詳しくは公式ドキュメントを参照してください。
実装方法
今回は 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
| 設定 | 説明 |
|---|---|
| semi: true | 文の最後にセミコロンを追加 |
| tabWidth: 2 | インデントのスペース数を2に設定 |
| printWidth: 80 | 80 文字を超える場合に改行 |
| trailingComma: "all" | 配列やオブジェクトの末尾にカンマを追加 |
| singleQuote: true | シングルクォートを使用 |
これでESlintとprettierの設定をすることができました。
Eslintの導入
次に以下のコマンドを実行してESLintをインストール します。
npm init @eslint/config@latest
TypeScriptを使っている場合、以下のオプションを選択してください。
eslint.config.mjsというファイルが自動作成されますが、
.eslintrc.jsonの方が一般的で見やすいので、eslint.config.mjsを削除し、
プロジェクトのルートディレクトリに.eslintrc.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"
]
}
中身について解説します。
| 設定 | 説明 |
|---|---|
| extends | Next.js + TypeScript の推奨ルールを適用 |
| parser | TypeScript のコードを解析できるようにする |
| plugins | @typescript-eslint（型チェック）、json（JSONチェック）を追加 |
| rules | no-console: 1（console.log を警告レベルに設定） |
| ignorePatterns | package.json などの設定ファイルをチェック対象外にする |
これでEslintの設定がうまくいきました。
試しに、以下のコマンドを実行し、正常に動作するか確認しましょう。
npm run lint
GitHub Actions に追加
最後に、PR 作成時にESLint & Prettierを自動実行するGitHub Actionsを設定します。
-
.github/workflows/ディレクトリを作成 -
lint-check.ymlを作成し、以下を記述
必ずルートディレクトリに、.githubディレクトリを作成してください！
さらにこの名前で作成しないと、GitHubが識別してくれないので注意が必要です。
自分も最初ルートディレクトリに作成できていないくて少し沼りました。
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 に組み込んで、より強固なワークフローを作っていきます。
最後まで読んでいただき、ありがとうございました^^