はじめに

action.yamlにロジックが増えてきたので、JavascriptAction(TypeScriptAction)に移行してちゃんと書く準備をしていく話です。

TypeScript での GitHub Actions 開発環境のセットアップ

TypeScript で GitHub Actions を開発するための環境を整えましょう。以下は基本的なセットアップ手順です。

公式ドキュメントにはJavaScriptのセットアップ手順は紹介されています。

1. プロジェクトの初期化

まず、新しいディレクトリを作成し、必要なパッケージをインストールします：

# プロジェクトディレクトリの作成
mkdir my-typescript-action
cd my-typescript-action

# package.json の初期化
npm init -y

# TypeScript と必要なパッケージのインストール
npm install --save @actions/core @actions/github
npm install --save-dev typescript @types/node

@actions/core：actionで入力パラメータを受け取る際に利用する
@actions/github：actionsのコンテキスト情報を参照するために利用する

2. TypeScript の設定

tsconfig.json ファイルを作成して TypeScript の設定を行います：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules", "**/*.test.ts", "dist"]
}

3. ビルドスクリプトの設定

package.json にビルドスクリプトを追加します：

{
  "scripts": {
    "build": "tsc",
    "package": "ncc build --source-map --license licenses.txt",
    "all": "npm run build && npm run package"
  }
}

ここでは、ncc を使用して依存関係を含めた単一の JavaScript ファイルにバンドルします：

https://github.com/vercel/ncc

# ncc のインストール
npm install -g @vercel/ncc

TypeScript での関数実装例

入力値とコンテキストを取り扱う例

import * as core from '@actions/core';
import * as github from '@actions/github';

async function run() {
    const token = core.getInput('myToken');
    const octokit = github.getOctokit(token)

    const { data } = await getPullRequest(octokit)

    core.info(data)
}

run();

action.yml ファイルの作成

GitHub Actions では、アクションの定義を action.yml ファイルに記述します。TypeScript への移行時にも、この基本構造は変わりません。

以下は、pullRequestを取得する GitHub Actions の action.yml の例です

name: 'Example'
description: 'pull request all'
inputs:
  github_token:
    description: 'GitHub トークン'
    required: true
    default: ${{ github.token }}
runs:
  using: 'node20'
  main: 'dist/index.js'

TypeScript アクションに移行する際の action.yml における主要な変更点は runs セクションの main パスです。TypeScript をビルドしてバンドルした JavaScript ファイルのパスを指定します。

TypeScript アクションのテストと CI/CD

TypeScript で作成した GitHub Actions は、テストを書くことでより堅牢になります。Jest などのテストフレームワークを使って、関数やモジュールをテストできます。

テストの設定

# テスト関連パッケージのインストール
npm install --save-dev jest ts-jest @types/jest

jest.config.js ファイルを作成します：

module.exports = {
  clearMocks: true,
  moduleFileExtensions: ['js', 'ts'],
  testEnvironment: 'node',
  testMatch: ['**/*.test.ts'],
  transform: {
    '^.+\\.ts$': 'ts-jest'
  },
  verbose: true
}

テスト例

src/__tests__/index.test.ts などのファイルを作成しテストを実装していきます。

import * as core from '@actions/core';
import { getPullRequest } from '../index';

// モックの設定
jest.mock('@actions/core');
jest.mock('@actions/gihtub');

describe('GitHub Action Tests', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  test('example', async () => {
    const result = await getPullRequest();

    const expect = {...}

    expect(result).toBe(expect);
  });
});

CI/CD パイプラインの設定

GitHub Actions のワークフローファイルを使って、テスト、ビルド、デプロイの自動化をしていきます。
.github/workflows/test-build.yml など作成し実装していきます。

name: Test and Build

on:
  push:
    branches: [ main ]
    paths-ignore:
      - '**.md'
  pull_request:
    branches: [ main ]

jobs:
  build-test:
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: v1review

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

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20"
          cache: "npm"
          cache-dependency-path: v1review/package-lock.json

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Run tests
        run: npm test

      - name: Package
        run: npm run package

      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: v1review/dist
          retention-days: 5

  release:
    needs: build-test
    # それぞれの環境に合わせてreleaseフローを実装

まとめ

GitHub Actions を TypeScript に移行する際の主要なポイントをまとめます

@actions周り（@actions/core、@actions/github）とTypeScript関連ツールをインストール
nccを使用して依存関係を含めた単一のJavaScriptファイルにバンドルする
releaseフローの構築

TypeScript Actionsに移行する際には、yamlで書いていたcontextや入力値の取り扱いをうまく移行することと
releaseフロー（CI/CD）の構築を忘れずに組み込めると継続した開発につながると思います。

※上記観点を意識してバイブコーディングできると割とサクッと実装してくれます。

参考リソース

Discussion