Github Actionsの「アクション」を作成する ~~基礎編~~

初めに

こんにちは！
株式会社おてつたびでフルスタックエンジニアをしています、ぶりぼんこと橋本です。主にフロントエンド領域を開拓しており、React や TypeScript が最も得意です。

みなさんは、Github Actionsを使っていますか？
実装の手軽さとGithubとの連携のしやすさから、多くの開発者がCIツールとして使っているのではないのでしょうか。
しかし、ワークフローファイルで各種アクションを組み合わせてワークフローを作成したことがあっても、Github Actionsのアクション自体を開発したことがある方は少ないのではないでしょうか。

本記事では、Github ActionsのアクションをNode.jsで開発し、実際のワークフロー上で利用する方法を解説します。
量が多くなるので、以下の通り3部作で解説していきたいと思います。

• Github Actionsの「アクション」を作成する ~~基礎編~~
• Github Actionsの「アクション」を作成する ~~応用編~~
• Github ActionsでNotion連携するアクションを作成する

事前準備

Node.jsの環境が必要なので、Node.jsのインストールをお願いします。
アクションで使用できるバージョンが12と16のみですので、バージョン12か16をインストールすることをお勧めします。
（私が実際にアクションを作成した際は、アクションのNodeはv12で、 PCのNodeはv14で開発しました。）

必要なライブラリをインストールしましょう。
yarn initを実行するなどして、package.jsonを作成してください。

{
  "name": "zenn-github-actions-sample",
  "version": "1.0.0",
  "main": "dist/index.js",
  "author": "ryubb",
  "license": "MIT",
  "private": true
}

アクションを各種ワークフローで実行するには、Webpack等でビルドしてから公開した方が良いです。
今回はWebpackとTypeScript環境で開発をするので、それらの設定を記載します。

yarn add typescript ts-loader webpack webpack-cli

const path = require("path");

module.exports = {
  mode: "production",
  target: "node",
  entry: { app: "./src/index.ts" },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
  },
};

{
  "compilerOptions": {
    "module": "es2022",
    "target": "es2017",
    "noImplicitAny": false,
    "moduleResolution": "node",
  },
  "exclude": [
    "node_modules"
  ]
}

TSファイルをビルドするためのコマンドを、package.jsonのscriptsに入れておきましょう。
最終的なpackage.jsonは以下のようになります。

{
  "name": "zenn-github-actions-sample",
  "version": "1.0.0",
  "main": "dist/index.js",
  "author": "ryubb",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "yarn checkTs && webpack",
    "checkTs": "tsc -noEmit"
  },
  "dependencies": {
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  }
}

上記のWebpackの設定では、srcディレクトリ配下のindex.tsをエントリポイントとして設定しています。
srcディレクトリとindex.tsファイルを作成しましょう

mkdir src
touch src/index.ts

yarn buildを実行して、distディレクトリ配下に空のindex.jsファイルが作成されたら、環境構築は終わりです。
次からはいよいよ、アクションの作成に移ります。

アクションの作成

action.yml

Github Actionsのアクションは、action.ymlという設定ファイルを使用します。
先に、actions.ymlの内容を記載します。

name: 'zenn-github-actions-sample'
description: 'zennテックブログで解説用のアクションです。'
inputs:
  test-inputs:
    description: "inputsのテストです"
    required: true
    default: "foo"
outputs:
  test-output:
    description: 'outputsのテストです'
runs:
  using: 'node12'
  main: 'dist/index.js'

name

その名の通り、アクション名です。
ここに記載した名前が、Marketplaceで表示されたり、ワークフローファイルのusesで指定するアクション名となります。

description

これもその名の通り、説明です。
Marketplaceの一覧で、記載した内容がアクションの概要として表示されます。

inputs

ここら辺から特に重要になってきます。
ワークフローファイルでアクションを使用する際、引数のようにwithオプションで値を渡すということを行ったことはありませんか？
この引数のように値を受け取る設定がinputsです。
上記の例ですと、test-inputsという名前でwithオプションから値を受け取ります。
requiredで必須かどうか、defaultで値を渡れなかった場合の初期値の設定ができます。

outputs

工事中……

runs

この設定により、アクションがどの環境で実行され、どのファイルを実行するかが決定されます。
全章でも述べた通り、実行環境はNodeのバージョン12、ビルド後のファイルはdist/index.jsとなりますので、そのように設定しています。

以上がaction.ymlの簡単な紹介でした。
公式ドキュメントに詳細が記載してありますので、気になる方はご確認ください。

アクションの作成

まずは、シンプルにHello world!してみましょう。
サンプルコードです。

function run() {
  console.log("Hello world!");
}

run();

アクションはNodeで動かせるため、consoleメソッドを使用してGithub Actions上で出力することができます。
このアクションを使用するためのワークフローを作成しましょう。
.github/workflowsというディレクトリを作成してください。

name: test
on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: ryubb/zenn-github-actions-[email protected]

以上のコードを作成できたら、yarn buildして、distファイルも含めてコミットします。
node_modulesだけコミットに含めたくないので、.gitignoreでignoreします。

node_modules/

コミットしたら、Githubのリポジトリにpushしてください。

ここまでのソースコードは、こちらのリポジトリのこちらのコミットをご確認ください。

アクションの公開

ここからは、作成したアクションを利用してワークフローを実行します。
Githubのリポジトリを開き、サイドバーのReleaseという箇所のCreate a new releaseをクリックしてください。

Choose a tagをクリックして、バージョン名を入力し、Create a new tagをクリックしてタグを作成します。
一旦は、v0.0.1としておきましょう。

Publish this Action to the GitHub Marketplaceにチェックは入れないままにしましょう。
チェックを入れなくてもアクションを使用することはでき、チェックを入れることでGithubのMarketplaceへ公開され、検索することができます。
Marketplaceへの公開も同時に行いたいという場合、チェックを入れるようにお願いします。

Release titleの箇所もタグと同じバージョン名にしておきます。
ここまで入力が完了したら、Publish releaseをクリックします。

これで、アクションの公開は完了です。

作成したGithub Actionsのワークフローを実行

GithubからActionsを開いてください。
push時にワークフローが実行される設定になっているので、ワークフローが失敗していると思います。
Re-run jobsで再実行しましょう。
※ Releaseを作成時にワークフローが実行されていますが、一旦は無視してください。

以下の通り、Hello worldと表示されていることを確認してください。

ここまでで、アクションを作成するための基本的な設定とコーディングの仕方を紹介しました。
実際にアクションを作成する際は、単にワークフロー上に文字を出力するだけということは少なく、各種APIを叩いたりPRの内容を取得して自動化したりということがほとんどだと思います。
次回の記事で、もう一歩踏み込んでアクションを作成していきたいと思います。

終わりに

最後に、会社の宣伝だけさせてください。
株式会社おてつたびでは一緒に働く仲間を募集しています！

Webアプリでのみサービスを展開してましたが、ネイティブアプリの開発も進んでいます。
Webエンジニア、iOSアプリエンジニア、バックエンドエンジニア、フロントエンドエンジニア、などなど募集していますので、少しでも興味がある方は、私たちと一度お話をしましょう！
Meety から私個人のカジュアル面談のお申し込みもできますので、おてつたびに関してやGithub Actionsに関してなど、お気軽にお話ししましょう。

長くなりましたが、最後までご覧いただき、大変ありがとうございました！

採用ページ
Wantedly 採用ページ