こんにちは。
CI系のツールの中で1番手軽に始めやすいのが、GitHub Actionsではないでしょうか。
これまでCircleCIやGitLab CI/CDなどを使ってきましたが、GitHub Actionsもしばらく使っていく中で理解が進んできたので、知識の整理も兼ねてこれから初めてみようという人向けに基本の「キ」編としてまとめました。

GitHub Actions以外にも類似ツールの基本的な使い方を解説しています。

GitHub Actionsとは

GitHub Actionsとは、GitHub上で提供されている継続的インテグレーション (CI) と継続的デリバリー (CD) を自動化するためのツールです。
GitHubが標準で提供しているため、GitHubを使用しているユーザーにとっては使い始めやすいツールとなっています。
また、他のCIツールと比べるとGitHubとの連携がしやすいことも特徴の1つです

GitHub Actions を理解する - GitHub Docs

準備

以下についての説明は省略させて頂きます。

リポジトリの作成
Visual Studio Codeのインストールと初期設定
Node.jsの実行環境

リポジトリのクイックスタート - GitHub Docs

拡張機能をインストール

Visual Studio Codeで拡張機能をインストールします。
以下のリンクからアクセスしてインストールしても、Visual Studio Codeのアクティビティバー＞拡張機能からインストールしてもどちらでも構いません。

GitHub Actions - Visual Studio Marketplace

※GitHub Actionsという名称で類似の拡張機能が複数存在するため、インストール間違いに注意してください。

サンプルプロジェクトの作成

プロジェクトを作成します。0から用意するのも大変なので Create React App を使ってデフォルトのプロジェクトを作成していきます。

まずは任意のディレクトリを作成して、移動しておきます。

mkdir vscode-github-actions
cd vscode-github-actions

次にCreate React Appのコマンドを実行します。

npx create-react-app . --template typescript

プロジェクトが作成できたら成功です。
今回は、アプリケーションを実際に動かすところはそこまで重要ではないため省略しますが、もし動かしたい方はnpm startを実行してみてください。

次にCIツールで実行する予定のテストコードが正しく動作するかを確認します。
次のコマンドを実行してテストが実行されるかを確認してください。

npm test

テストの動作確認ができたら準備完了です。

GitHub Actionsの設定

次に本題のGitHub Actionsの処理を書いていきます。
0から書いていくこともできますが、GitHubのWebサイトからテンプレートを選択して作成することもできます。

GitHubのWebサイトからテンプレートを選択して作成する場合は、リポジトリのトップページからActionsをクリックします。
何も設定されていない場合は、このような画面が表示されます。
一番上に表示されているSimple workflowをクリックします。

このようにサンプルコードが表示されます。
ここではblank.ymlからmain.ymlに変更しています。

コード編集はVisual Studio Codeから行いたいので、このままコミット&プッシュしておきます。

成功したらこのようにファイルが追加されていることが確認できます。

Quickstart for GitHub Actions - GitHub Docs

このあとCircleCIではリポジトリの有効化などが必要ですが、GitHub Actionsは特にそのような手順は不要です。

Actionsの修正

先ほどGitHubのWebサイトから作成したmain.ymlをVisual Studio Codeで開きます。
最終的にはこのような形になります。

name: CI

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

  workflow_dispatch:

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 18.4.0
      
      - run: npm ci

      - run: npm test

実行

コミット&プッシュが完了するとジョブが実行されます。まずはGitHubのWebサイトから確認してみましょう。
リポジトリのトップページからActionsをクリックします。

ジョブの実行結果が表示されていることが確認できます。

テストの実行結果もこのように表示されています。

Visual Studio Codeから確認

次にVisual Studio Codeからアクセスしていましょう。アクティビティバーからGitHub Actionsを表示します。

初めて使用する場合は、ログインを求められるので、ログインしてください。

Visual Studio Codeからはこのようにジョブの実行結果を確認することができます。

おわりに

今回は、Visual Studio Codeの拡張機能を使ってGitHub Actionsの基本的な使い方を解説しました。
今回でGitLab、CircleCI、GitHub Actionsの3つのツールを全て触ることができたのですが、改めて振り返ってみると、共通する機能に関してはどのツールも同じように提供されていて、操作性もほとんど大差ないなと感じました。
あえて、CIツール機能の充実度を上げるとCircleCIでしょうか。

皆さんの良いVisual Studio Codeライフを！