初心者でも簡単にできるGitHub ActionsのESLintの使い方

GitHub Actionsとは

開発ワークフローのすべてのステップを自動化する仕組み。

例えばローカルでESLintをインストールしている場合、npm run eslintのようなコマンドでESLintを実行するが、GitHub Actionsを設定すればGitHubにプッシュされたら自動的にESLintを実行するなどの自動化ができる。

GitHub Actionsの設定方法

まずリポジトリを作成するところから説明するので、GitHubのリポジトリ作成ページからgithub-actions-eslintというリポジトリを作成してください。(ESLintの自動化のサンプルを作成します)

手順はRepository nameにgithub-actions-eslintと入力してAdd .gitignoreをNodeに設定して「Create repository」ボタンを押すだけです。

次にActionsのタブをクリックしてGitHub Actionsに必要な.ymlファイルを作成します。

Actionsのページ内に「set up a workflow yourself」というデフォルトの.ymlファイルを作成するページへのリンクがあるのでこれをクリックします。

「set up a workflow yourself」の遷移先の右上に「start commit」をいうボタンがあるので、これを押して表示されるポップアップの「Commit new file」を押してmain.ymlファイルをコミットします。

GitHub Actionsの.ymlファイルは「.github/workflows/」に保存されています。

git cloneでローカルで確認

前述の.ymlファイルの作成まで完了したら一旦git cloneでローカルに保存して確認します。

git clone https://github.com/[アカウント]/github-actions-eslint.git

git cloneが完了したら「cd github-actions-eslint」で移動します。

github-actions-eslint内の「.github/workflows/main.yml」にGitHubで作成したymlファイルがあるので開いてください。(.githubは不可視フォルダ)

開くと以下のようなコードが確認できます。

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      # Runs a single command using the runners shell
      - name: Run a one-line script
        run: echo Hello, world!

      # Runs a set of commands using the runners shell
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

コメントがたくさんあるので正規表現の「^\s*#.+\n」でコメントと改行を置換して削除してください。

実行すると以下のようになります。

※ 正規表現がよくわからない場合は以下をコピペで問題ないです。

name: CI
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run a one-line script
        run: echo Hello, world!
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

コメントと空行が削除されてシンプルになりました。

main.ymlの概要

name:

ワークフローの名前です。

ワークフローは、1つ以上のジョブを実行する設定可能な自動化されたプロセスです。

デフォルトだとCI (Continuous Integration) という名前になっています。

on:

on:にはワークフローの実行を引き起こせるイベントが定義されています。

デフォルトのmain.ymlにはpush, pull_request, workflow_dispatchが定義されており、これはプッシュ、プルリク、手動実行のときにワークフローが実行されます。(手動実行についてはあとで説明)

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

jobs:

ワークフローは1つ以上のジョブで構成されており、それらのジョブはデフォルトでは並列に実行されます。

jobsにはbuild:というジョブがデフォルトであり、build:の配下にあるruns-on:で指定したランナー環境で実行されます。(通常はubuntu-latestを設定しておけば問題ない)

runs-on:の次のsteps:には各ステップの処理を書きます。

main.ymlのsteps:は以下のようになっていますが、これは「uses: actions/checkout@v3」でレポジトリのデータを読み込んだあと、「name: Run a one-line script」を「run: echo Hello, world!」で実行して、次に「name: Run a multi-line script」を「run: | (以下略)」で実行しています。

run:が複数行の場合は「 |」をrun:のあとに追加して複数行の処理を以下のように書きます。

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run a one-line script
        run: echo Hello, world!
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

試しにname: CIから始まるコメントなしのmain.ymlを保存してgit addで追加したとgit commitしてgit pushしてみてください。

git add .github/workflows/main.yml
git commit -m "main.ymlのコメントを削除"
git push

プッシュが完了したあとにGitHubのActionsを見るとmain.ymlのコメントを削除 CI #2のコミットのrun:のechoの処理などが確認できる。

※ 作成者のアカウントでないとJobsのRun a one-line scriptの部分などを開いて実行結果の詳細を見れないため、ご自身のGitHubアカウントで試して確認してください。

main.ymlでon: => push: => branches: [ "main" ] というmainブランチにプッシュされたらワークフローを実行するよう書いていたので実行されました。

on:
  push:
    branches: [ "main" ]

pull_request: も設定したのでプルリクも同じワークフローが実行される。

workflow_dispatch: はイベントではなくワークフローのページのRun workflowのボタンを押して手動で実行する。

背景色が青の箇所には「This workflow has a workflow_dispatch event trigger.」と書かれています。

ESLintをGitHub Actionsで実行する

次にESLintをインストールしてプッシュ後にGitHub Actionsのワークフローで実行できるようにします。

まず以下のコマンドでESLintをインストールする。

ルール設定を簡略化するためにCybozuのESLintルールをインストールしています。

npm init -y; npm i -D eslint @cybozu/eslint-config

次にtouchコマンドで.eslintrc.ymlというファイルを作成します。

touch .eslintrc.yml

.eslintrc.ymlファイルには以下のように書いて保存します。

env:
  browser: true
extends: '@cybozu'

次にESLintで処理するためのJavaScriptファイルをjs/hello.jsで作成します。

mkdir js
touch js/hello.js

hello.jsの中身はテストのためセミコロンなしでconsole.log('Hello')と書いてください。

設定したESLintのルールではセミコロンなしだとwarningが表示されます。

console.log('Hello')

次にnpm run eslintコマンドでjsフォルダ内のすべてのJavaScriptファイルを対象にするためにpackage.jsonのscriptsに下記を追加します。

"scripts": {
  "eslint": "eslint js/**/*.js"
},

これでnpm run eslintコマンドでESLintが実行可能になりました。

ESLintを実行すると「warning Missing semicolon」とセミコロンがないと警告が表示されます。

ここまでできたら一旦すべてコミットしてください。(pushはまだしない)

git add --all
git commit -m "ESLintとhello.jsを追加"

GitHub Actionsでも実行可能にする

GitHub Actionsでもnpm run eslintでESLintを実行するには.github/workflows/main.ymlにnpm ciとnpm run eslintを実行する処理を追加します。(run: echo〜は削除します)

npm ciはpackage-lock.jsonから依存関係をインストールします。

※ npn ciはnpm runを実行するのに必要です。

name: CI
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: ci
        run: npm ci
      - name: ESLint
        run: npm run eslint

ここまでできたらコミットしてプッシュしてください。

git add .github/workflows/main.yml
git commit -m "main.ymlにESLintの処理を追加"
git push

プッシュしたらGitHub Actionsのワークフローのページを開いてください。

main.ymlにESLintの処理を追加 CI #3 が新たに実行されており、ESLintの処理などが確認できます。

ワークフローでwarningはアイコンが変わらない

GitHub ActionsのワークフローではESLintでwarningが発生したとしても⚠️(warning)のアイコンは表示されないです。

もしセミコロンなしをエラー扱いにする場合は.eslintrc.ymlにルールを追記します。

env:
  browser: true
extends: '@cybozu'
rules:
  semi: error

追加したらコミットしてプッシュしてください。

git add .eslintrc.yml
git commit -m ".eslintrc.ymlにsemi: errorのルール追加"
git push

再びワークフローのページを開いて確認すると、今度はセミコロンなしはエラーを返すようになったのでワークフロー上でもエラーと判定されてアイコンも✅ではなく❌になっています。

まとめ

GitHub Actionsは難しそうに見えるが、GitHub Actionsのタブから「set up a workflow yourself」をクリックしてmain.ymlを作成して、ここに設定を書けばローカルで実行しているnpm runがGitHub Actionsでも簡単に実行できる。

CSSのLinterとしてよく使用されるStylelintなども同様の手順で設定できる。

作成するための手順は少ないので何度か試せばすぐに習得することができるだろう。

今回作成したリポジトリは下記のURLなので、ご参考までに。

https://github.com/iwbjp/github-actions-eslint