個人的備忘録：GitHub Actions を活用した CI（継続的インテグレーション）の不明点をまとめてみた

## はじめに

近年、ソフトウェア開発において CI/CD（継続的インテグレーション/継続的デリバリー）が重要視されています。

:::note info
**特に、チーム開発ではコードの品質を維持しながら、迅速に新しい機能を追加することが求められます。**
:::

本記事では、同じメンバーの方が作成いただいたGitHub Actions を活用した CI ワークフローを紹介し、その詳細な処理内容を解説します。

## 書こうと思ったきっかけ

このワークフローを取り上げた理由は、プロジェクトの開発効率向上と品質保証のために、GitHub Actions を活用した自動化の重要性を改めて実感したからです。

また、私自身が理解できていない部分があったため、それを整理し、体系的に記事としてまとめようと思いました...！

## ワークフロー概要

この GitHub Actions のワークフローは、`develop` ブランチに対するプルリクエストが作成されたときに自動的に実行されます。

具体的には、以下の処理を行います。

1. リポジトリのコードをチェックアウト
2. Node.js のセットアップ
3. `node_modules` のキャッシュ
4. 依存関係のインストール
5. 静的解析（ESLint, 型チェック, Prettier）
6. セキュリティスキャン（npm audit）
7. テストとカバレッジ計測
8. ビルドの実行
9. ビルド成果物のアップロード

これにより、コードの品質を維持しつつ、安全に開発ブランチへ統合するための CI パイプラインを構築しています。

## 各ステップの詳細

### 1. リポジトリのチェックアウト
```yaml
- name: Checkout repository
  uses: actions/checkout@v4
```
GitHub のリポジトリの最新コードを取得します。

### 2. Node.js のセットアップ
```yaml
- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version-file: "skill-typing-front/.nvmrc"
    cache: npm
    cache-dependency-path: "skill-typing-front/package-lock.json"
```
`.nvmrc` に記載された Node.js のバージョンを利用し、`npm` のキャッシュを有効化することで、依存関係のインストール時間を短縮します。

### 3. `node_modules` のキャッシュ
```yaml
- name: Cache node modules
  uses: actions/cache@v4
  with:
    path: skill-typing-front/node_modules
    key: ${{ runner.os }}-node-${{ hashFiles('skill-typing-front/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-
```
依存関係をキャッシュすることで、不要なダウンロードを避け、CI の実行時間を短縮します。

### 4. 依存関係のインストール
```yaml
- name: Install dependencies (CI)
  working-directory: skill-typing-front
  run: npm ci
```
`npm ci` を使用し、クリーンな環境で依存関係をインストールします。

### 5. コードの静的解析
```yaml
- name: Run ESLint for static analysis
  working-directory: skill-typing-front
  run: npm run lint

- name: Run type check
  working-directory: skill-typing-front
  run: npm run typecheck

- name: Run Prettier check
  working-directory: skill-typing-front
  run: npm run format:check
```
ESLint を用いたコード品質チェック、TypeScript の型チェック、Prettier によるコードフォーマットの検証を行います。

### 6. セキュリティスキャン
```yaml
- name: Run npm audit for security scan
  working-directory: skill-typing-front
  run: npm audit --audit-level=high
```
`npm audit` を利用し、依存関係に潜む高リスクの脆弱性を検出します。

### 7. テストとカバレッジ計測
```yaml
- name: Run test coverage
  working-directory: skill-typing-front
  run: npm run test:coverage
```
ユニットテストを実行し、テストカバレッジを計測します。

### 8. ビルドの実行
```yaml
- name: Build project
  working-directory: skill-typing-front
  run: |
    VITE_COGNITO_AUTHORITY="${{ secrets.VITE_COGNITO_AUTHORITY }}" \
    VITE_COGNITO_CLIENT_ID="${{ secrets.VITE_COGNITO_CLIENT_ID }}" \
    VITE_COGNITO_REDIRECT_URI="${{ secrets.VITE_COGNITO_REDIRECT_URI }}" \
    VITE_COGNITO_RESPONSE_TYPE="${{ secrets.VITE_COGNITO_RESPONSE_TYPE }}" \
    VITE_COGNITO_SCOPE="${{ secrets.VITE_COGNITO_SCOPE }}" \
    VITE_COGNITO_LOGOUT_URI="${{ secrets.VITE_COGNITO_LOGOUT_URI }}" \
    VITE_COGNITO_DOMAIN="${{ secrets.VITE_COGNITO_DOMAIN }}" \
    VITE_API_URI="${{ secrets.VITE_API_URI }}" \
    npm run build
```
環境変数を GitHub Secrets から取得しながら、フロントエンドアプリケーションをビルドします。

### 9. ビルド成果物のアップロード
```yaml
- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-artifact
    path: skill-typing-front/build
```
ビルド後の成果物（`build` ディレクトリ）を GitHub Actions にアーティファクトとして保存します。

## まとめ

この CI パイプラインは、
- コードの品質保証（Lint, TypeScript チェック, Prettier）
- セキュリティチェック（npm audit）
- 自動テストとカバレッジ計測
- フロントエンドのビルド
- ビルド成果物の保存
を自動化し、**開発ブランチ (`develop`) へ安全に統合できる環境** を提供します。

継続的インテグレーション（CI）を導入することで、コードの安定性が向上し、チーム開発の効率化が期待できることがわかりました！