GitHub ActionsをTypeScriptで開発する方法と移行のポイント
はじめに
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 ファイルにバンドルします：
# 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