## 目次

1. はじめに
2. GitHub Actionsとは
3. ESLintとPrettierの概要
4. GitHub ActionsでESLintとPrettierを実行する手順
   - 4-1. 必要なファイルの準備
   - 4-2. GitHub Actionsのワークフローファイルを設定
5. ワークフローのテストと確認
6. まとめ

---

## 1. はじめに

コードの品質と一貫性は、ソフトウェア開発において非常に重要です。ESLintとPrettierは、JavaScriptベースのプロジェクトにおけるコードの一貫性と品質を維持するための強力なツールです。このガイドでは、GitHub Actionsを使用して、ESLintとPrettierをプルリクエスト時に自動で実行する方法を解説します。

## 2. GitHub Actionsとは

GitHub Actionsは、GitHubに統合されたCI/CDツールです。プロジェクトに対する変更をトリガーにして自動化されたワークフローを実行し、ビルド、テスト、コードの検査などを行うことができます。

## 3. ESLintとPrettierの概要

- **ESLint**: JavaScriptおよびTypeScriptコードの静的解析を行うツールで、コーディングスタイルの問題やエラーを検出します。
- **Prettier**: コードフォーマットを統一して、一定のスタイルに整えるために使用されるツールです。

## 4. GitHub ActionsでESLintとPrettierを実行する手順

### 4-1. 必要なファイルの準備

1. `package.json`内にESLintとPrettierの設定を追記します。ESLintとPrettierのパッケージをプロジェクトにインストールしてセットアップします。

   ```shell
   npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
   ```

2. `eslintrc.js`と`.prettierrc`ファイルを作成し、必要な設定を記述します。

   **`.eslintrc.js`**
   ```javascript
   module.exports = {
     extends: ["eslint:recommended", "plugin:prettier/recommended"],
     env: {
       browser: true,
       es6: true
     },
     rules: {
       // カスタムルールを設定
     }
   };
   ```

   **`.prettierrc`**
   ```json
   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "es5"
   }
   ```

### 4-2. GitHub Actionsのワークフローファイルを設定

1. リポジトリのルートディレクトリに`.github/workflows`フォルダを作成します。
2. 新規ファイル`lint.yml`をその中に作成し、以下の設定を追加します。

   **`lint.yml`**
   ```yaml
   name: Lint

   on: [pull_request]

   jobs:
     lint:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout repository
           uses: actions/checkout@v2

         - name: Set up Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '14'

         - name: Install dependencies
           run: npm install

         - name: Run ESLint
           run: npx eslint .

         - name: Run Prettier
           run: npx prettier --check .
   ```

このワークフローは、プルリクエストが作成されたときにトリガーされ、ESLintとPrettierを用いてコードを検査します。

## 5. ワークフローのテストと確認

GitHubのリポジトリにプルリクエストを作成することで、設定したワークフローが自動的に実行されます。GitHubのActionsタブからワークフローの実行ログを確認し、エラーや警告がないかをチェックしてください。

## 6. まとめ

セットアップが完了すれば、新しいプルリクエストに対して自動的にESLintとPrettierが実行され、コード品質の向上が期待できます。これにより、開発者の手間を削減し、コードスタイルの一貫性を維持することが可能です。今後のプロジェクト管理に是非活用してみてください。 [cv:issue_marketplace_engineer]

## 目次

1. はじめに
2. GitHub Actionsとは
3. ESLintとPrettierの概要
4. GitHub ActionsでESLintとPrettierを実行する手順
   - 4-1. 必要なファイルの準備
   - 4-2. GitHub Actionsのワークフローファイルを設定
5. ワークフローのテストと確認
6. まとめ

---

## 1. はじめに

コードの品質と一貫性は、ソフトウェア開発において非常に重要です。ESLintとPrettierは、JavaScriptベースのプロジェクトにおけるコードの一貫性と品質を維持するための強力なツールです。このガイドでは、GitHub Actionsを使用して、ESLintとPrettierをプルリクエスト時に自動で実行する方法を解説します。

## 2. GitHub Actionsとは

GitHub Actionsは、GitHubに統合されたCI/CDツールです。プロジェクトに対する変更をトリガーにして自動化されたワークフローを実行し、ビルド、テスト、コードの検査などを行うことができます。

## 3. ESLintとPrettierの概要

- **ESLint**: JavaScriptおよびTypeScriptコードの静的解析を行うツールで、コーディングスタイルの問題やエラーを検出します。
- **Prettier**: コードフォーマットを統一して、一定のスタイルに整えるために使用されるツールです。

## 4. GitHub ActionsでESLintとPrettierを実行する手順

### 4-1. 必要なファイルの準備

1. `package.json`内にESLintとPrettierの設定を追記します。ESLintとPrettierのパッケージをプロジェクトにインストールしてセットアップします。

   ```shell
   npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
   ```

2. `eslintrc.js`と`.prettierrc`ファイルを作成し、必要な設定を記述します。

   **`.eslintrc.js`**
   ```javascript
   module.exports = {
     extends: ["eslint:recommended", "plugin:prettier/recommended"],
     env: {
       browser: true,
       es6: true
     },
     rules: {
       // カスタムルールを設定
     }
   };
   ```

   **`.prettierrc`**
   ```json
   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "es5"
   }
   ```

### 4-2. GitHub Actionsのワークフローファイルを設定

1. リポジトリのルートディレクトリに`.github/workflows`フォルダを作成します。
2. 新規ファイル`lint.yml`をその中に作成し、以下の設定を追加します。

   **`lint.yml`**
   ```yaml
   name: Lint

   on: [pull_request]

   jobs:
     lint:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout repository
           uses: actions/checkout@v2

         - name: Set up Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '14'

         - name: Install dependencies
           run: npm install

         - name: Run ESLint
           run: npx eslint .

         - name: Run Prettier
           run: npx prettier --check .
   ```

このワークフローは、プルリクエストが作成されたときにトリガーされ、ESLintとPrettierを用いてコードを検査します。

## 5. ワークフローのテストと確認

GitHubのリポジトリにプルリクエストを作成することで、設定したワークフローが自動的に実行されます。GitHubのActionsタブからワークフローの実行ログを確認し、エラーや警告がないかをチェックしてください。

## 6. まとめ

セットアップが完了すれば、新しいプルリクエストに対して自動的にESLintとPrettierが実行され、コード品質の向上が期待できます。これにより、開発者の手間を削減し、コードスタイルの一貫性を維持することが可能です。今後のプロジェクト管理に是非活用してみてください。 

目次

1. はじめに

続きを読むには単価診断を受けてください（30秒）