# TypeScriptプロジェクトにCIを導入するGitHub Actions構成例

## 目次
1. 1-1 GitHub Actionsとは
2. 1-2 TypeScriptプロジェクトでのCIの重要性
3. 1-3 基本的なGitHub Actionsの設定
4. 1-4 TypeScript専用のCIワークフローの構築
    1. 1-4-1 ワークフローの作成と設定
    2. 1-4-2 TypeScriptコンパイルとテストの設定
    3. 1-4-3 ESLintによるコードスタイルチェック
5. 1-5 より効率的なCI/CDのためのヒント
6. 1-6 まとめ

## 1-1 GitHub Actionsとは

GitHub Actionsは、GitHubが提供する継続的インテグレーション（CI）／継続的デリバリー（CD）を行うためのインフラです。開発者は、リポジトリに対する変更（コミット、プルリクエスト、タグの作成など）が発生した際に、ワークフローと呼ばれるプロセスを自動的に実行できます。

## 1-2 TypeScriptプロジェクトでのCIの重要性

TypeScriptはJavaScriptを型安全に拡張した言語で、プロジェクトが大規模になるにつれ、その型チェックやトランスパイルに時間を要することがあります。したがって、CIを導入することで、コードの変更が他の部分に影響を与えないかを早期に検出することができ、品質の高いソフトウェアを迅速に提供することが可能になります。

## 1-3 基本的なGitHub Actionsの設定

GitHub Actionsを利用するためには、プロジェクトのレポジトリに`.github/workflows`ディレクトリを作成し、その中にYAMLファイルを設置します。このYAMLファイルにワークフローの詳細を記述します。

![img](/mosaic-code.jpg)

## 1-4 TypeScript専用のCIワークフローの構築

### 1-4-1 ワークフローの作成と設定

TypeScriptプロジェクトでは、JavaScriptにトランスパイルするために`tsc`を実行する必要があります。また、開発中のエラーを早期に発見するためのテストランナーの実行も含めるべきです。

### 1-4-2 TypeScriptコンパイルとテストの設定

`tsconfig.json`を設定し、TypeScriptのコンパイルを実行します。

![img](/mosaic-code.jpg)

続いて、CIで実行するnpmスクリプトを`package.json`に設定します。

![img](/mosaic-code.jpg)

### 1-4-3 ESLintによるコードスタイルチェック

`ESLint`を使用してコードの静的解析を行い、スタイルを一貫させます。

![img](/mosaic-code.jpg)

## 1-5 より効率的なCI/CDのためのヒント

- **キャッシュの活用**: 依存関係のインストールをキャッシュしてビルド時間を短縮します。
- **限定的なワークフロートリガ**: プッシュ先ブランチやコミットメッセージに基づいてワークフローの実行条件を制御します。

![img](/mosaic-code.jpg)

## 1-6 まとめ

GitHub Actionsを使用して、TypeScriptプロジェクトに効果的にCI/CDパイプラインを構築することは、プロジェクトの品質を高め、開発者の手間を減らすことにつながります。TypeScriptコンパイル、テスト、コードスタイルチェックを自動化することで、頻繁に発生する小さな不具合を回避し、プロジェクトのメンテナンス性を向上させましょう。 [cv:issue_marketplace_engineer]

# TypeScriptプロジェクトにCIを導入するGitHub Actions構成例

## 目次
1. 1-1 GitHub Actionsとは
2. 1-2 TypeScriptプロジェクトでのCIの重要性
3. 1-3 基本的なGitHub Actionsの設定
4. 1-4 TypeScript専用のCIワークフローの構築
    1. 1-4-1 ワークフローの作成と設定
    2. 1-4-2 TypeScriptコンパイルとテストの設定
    3. 1-4-3 ESLintによるコードスタイルチェック
5. 1-5 より効率的なCI/CDのためのヒント
6. 1-6 まとめ

## 1-1 GitHub Actionsとは

GitHub Actionsは、GitHubが提供する継続的インテグレーション（CI）／継続的デリバリー（CD）を行うためのインフラです。開発者は、リポジトリに対する変更（コミット、プルリクエスト、タグの作成など）が発生した際に、ワークフローと呼ばれるプロセスを自動的に実行できます。

## 1-2 TypeScriptプロジェクトでのCIの重要性

TypeScriptはJavaScriptを型安全に拡張した言語で、プロジェクトが大規模になるにつれ、その型チェックやトランスパイルに時間を要することがあります。したがって、CIを導入することで、コードの変更が他の部分に影響を与えないかを早期に検出することができ、品質の高いソフトウェアを迅速に提供することが可能になります。

## 1-3 基本的なGitHub Actionsの設定

GitHub Actionsを利用するためには、プロジェクトのレポジトリに`.github/workflows`ディレクトリを作成し、その中にYAMLファイルを設置します。このYAMLファイルにワークフローの詳細を記述します。

```yaml
name: TypeScript CI

on: 
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
      # Node.jsのセットアップ
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'

    - name: Install dependencies
      run: npm ci

    - name: Build
      run: npm run build
    
    - name: Run Tests
      run: npm test
```

## 1-4 TypeScript専用のCIワークフローの構築

### 1-4-1 ワークフローの作成と設定

TypeScriptプロジェクトでは、JavaScriptにトランスパイルするために`tsc`を実行する必要があります。また、開発中のエラーを早期に発見するためのテストランナーの実行も含めるべきです。

### 1-4-2 TypeScriptコンパイルとテストの設定

`tsconfig.json`を設定し、TypeScriptのコンパイルを実行します。

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
```

続いて、CIで実行するnpmスクリプトを`package.json`に設定します。

```json
{
  "scripts": {
    "build": "tsc",
    "test": "jest"
  }
}
```

### 1-4-3 ESLintによるコードスタイルチェック

`ESLint`を使用してコードの静的解析を行い、スタイルを一貫させます。

```yaml
    - name: Run ESLint
      run: npm run lint

# package.json
{
  "scripts": {
    "lint": "eslint 'src/**/*.{ts,tsx}'"
  }
}
```

## 1-5 より効率的なCI/CDのためのヒント

- **キャッシュの活用**: 依存関係のインストールをキャッシュしてビルド時間を短縮します。
- **限定的なワークフロートリガ**: プッシュ先ブランチやコミットメッセージに基づいてワークフローの実行条件を制御します。

```yaml
    - uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
```

## 1-6 まとめ

GitHub Actionsを使用して、TypeScriptプロジェクトに効果的にCI/CDパイプラインを構築することは、プロジェクトの品質を高め、開発者の手間を減らすことにつながります。TypeScriptコンパイル、テスト、コードスタイルチェックを自動化することで、頻繁に発生する小さな不具合を回避し、プロジェクトのメンテナンス性を向上させましょう。 

TypeScriptプロジェクトにCIを導入するGitHub Actions構成例

目次

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