GitHub Actionsとは
GitHubが提供するCI/CDサービス。
CI/CDは「継続的インテグレーション/継続的デリバリー」とは簡単に言うと開発での色々な処理の自動化を意味する。
例えばJavaScriptファイルをGitでGitHubでプッシュした際に自動的にGitHub上でLinterを実行させてコードをチェックさせることなどができる。
GitHub Actionsの使用方法
GitHub ActionsはGitがパソコンにインストールされていてGitHubのアカウントを持っていれば使用できる。
手始めにGitでGitHubにプッシュしたらGitHub ActionsでHello Worldを表示する方法について説明する。
まずGitHubでリポジトリを作成してgit cloneする。
(以降はhello-worldでリポジトリを作成してgit cloneした場合の例)
git clone https://github.com/iwbjp/hello-world.git
次にGitHub Actionsの実行に必要なフォルダとファイルを作成する。
cd hello-world mkdir -p .github/workflows/ touch .github/workflows/hello.yml
hello.ymlには以下を記述する。
name: Hello world! on: puth jobs: Hello-world: runs-on: ubuntu-latest steps: - run: echo "Hello world! 🎉"
あとはコミットしてプッシュすればGitHubのActionsにHello world! 🎉が表示される。
ESLintをGitHub Actionsで実行
LinterをGitHub Actionsでプッシュ時に実行するサンプルを作成するためにまずlint-sampleというリポジトリを作成して前述のhello-worldのときのようにgit cloneする。
次にGitHub Actionsの実行に必要なフォルダとファイルを作成する。
cd lint-sample mkdir -p .github/workflows/ touch .github/workflows/lint.yml npm init -y; npm i -D eslint @cybozu/eslint-config
これだけだとESLintが使えないので.eslintrc.ymlを作成して設定を以下の内容で保存する。
env:
browser: true
es2021: true
extends: '@cybozu'
parserOptions:
ecmaVersion: 12
sourceType: module
rules:
eqeqeq: error
今回はeqeqeq( != )がエラーになるようにrulesを追記。(@cybozuではwarnのため)
GitHub Actionsの処理では警告(warn)はsuccessとして通るので注意。
次にnpm run lintが実行できるようpackage.jsonに追記。
"scripts": { "lint": "eslint js/**/*.js" },
JavaScriptファイルはjsフォルダを作成してfoo.jsを入れた。
foo.jsの中身はESLintのeqeqeqでエラーが出るよう !== ではなく != にしてあります。
const a = 1;
const b = 2;
if (a != b) {
console.log('a & b is not equal!');
} else {
console.log('a & b is equal.');
}
この時点でESLintを実行してエラーが出るか確認する。
npm run lint
エラーが表示されたらESLintが機能しているので、次にlint.ymlファイルに以下を記述する。
name: Lint
on: push
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Set Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: ci
run: npm ci
- name: ESLint
run: npm run lint
以上の手順がすべて完了したらadd, commit, pushを行う。
git add --all git commit -m "first commit" git push
プッシュ後にGitHubのリポジトリのActionsを確認すると、ESLintが実行されてエラーになっていることが確認できる。
GitHub Actions ESLint 実行結果
foo.js内の != を !== に修正して再度プッシュすればエラーにはならないので試して見ると良いです。
htmlhintやStylelintなどのほかのLinterも似たような手順で追加可能。
今回は自身で1から作成したが、ESLintの処理であればRun eslint with reviewdogを使用したほうが見栄えが良くなるし簡単に作成できる。
name: reviewdog
on: push
jobs:
eslint:
name: eslint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- run: yarn install
- uses: reviewdog/action-eslint@v1
with:
reporter: github-check
eslint_flags: 'js/'