GitHub ActionsでPrettierによる整形の確認を行った

GitHub ActionsでPrettierによる整形の確認を行う

概要

GitHub ActionsでPrettierによるコード整形の確認を行わせることにした．整形によって自動でコミットが増えるのを避けたいので，整形の自動適用は省略した．Pull Requestごとに整形を確認して，整形漏れがあればテストをfailさせて開発者に知らせる．

GitHub Actionsとは

GitHub Actions↗︎とは，GitHub上で，開発工程を自動化するための仕組み．ビルド，テスト，デプロイ，パッケージングなど多様な工程が対象となる．俗にいうCI/CDを実現するための手法の一つ．スクリプトを書いて処理を定義し，その処理をGitHubが用意する計算機上などで実行させることができる．

Prettierとは

Prettier↗︎とは，JavaScriptなどのソースコードやMarkdownなどの文書を，規則に従って整形するプログラム．設定ファイルを共有することで，複数人の共同開発でも書式を揃えることができる．書式を揃えることによって，ソースコードでの意思疎通や差分比較が容易になると期待される．

導入方法（Web UI）

1. GitHubのリポジトリページを開き，Actionsタブを開く．
2. New workflowのようなボタン，もしくはCreate your own workflowのようなリンクを押して，入力画面を開く．
3. 次のように入力して，適当な名前で保存する．

name: format-checker
on: pull_request
jobs:
  format:
    runs-on: ubuntu-24.04
    steps:
      - uses: actions/checkout@v1
        with:
          ref: ${{ github.head_ref }}
      - name: Prettier check
        run: npx prettier --check .

1. 何かPull Requestを作って，ファイルの整形テストが走ることを確かめる．

導入方法（ファイル直書き）

1. <repository_root>/.github/workflows/<whatever_name>.yamlに上記内容を書く．
2. Pull Requestを何か作って，動作を試す．

動作解説

jobs下に定義されたジョブが自動実行される．
ジョブの一意識別子がformatであり，Ubuntu上でsteps下のスクリプトが順次走る．
最終行の npx prettier --check . によって書式整形が済んでいるかを確認する．この時不備があればコマンドが0以外の値を返すので，actionの失敗を検出できる．

参考文献

Prettier CIについてはThe blog of Peter Evans↗︎を大いに参考にした．
GitHub Actionsの基礎的な内容についてはGitHub Actions を理解する↗︎を参照されたい．
YAMLファイルの構文についてはGitHub Actions　のワークフロー構文↗︎を参照されたい．