Check! GitHub Actions で導入しておきたい自動化 5つ（GitHubブログ要約）
Prologue
こんにちは、 @dz_ こと、大平かづみです。
今回はこのブログ記事 "5 automations every developer should be running" が気になったので、ちゃんと読むついでに要約してみました。（ブログ駆動）
なお、英語の能力は高くないので、誤訳などありましたらご連絡いただけたらうれしいです🙇🏻♀️
要約: "5 automations every developer should be running"
TL;DR: セキュリティ脆弱性との闘いや動かないボタン、遅いサイト、リリースノートを手書きすることを避けたいエンジニアの君に捧ぐ
テストを書くことや改善のための自動化を行うことは大事ではあるが、実際のところもっとコードを書いた方が楽しい！
さいわいなことに、GitHub Actions ではたくさんのコミュニティで作られたテストやオートメーションのコードが提供されています。
ここにいくつか紹介しましょう💡
1. CodeQL によるセキュリティチェック
- Step up your security with CodeQL
開発しているコードに潜むセキュリティ脆弱性への対応は骨が折れます。
CodeQL を利用した良い方法があります。CodeQL は、GitHub が提供するコードの構文解析エンジンです。リポジトリ上にあるコードに対してセキュリティチェックを行い、脆弱性を素早く特定することができます。また、言語やパッケージを横断してセキュリティアドバイザリ（改善案）も検出し、リポジトリの Security タブでその情報を提供します。
この CodeQL を用いてセキュリティチェックを行うには、すでに用意されている、GitHub Actions の CodeQL アクション がおすすめです。GitHub Actions のワークフローでセットアップすることができ、プルリクエストやコードマージの契機で既知の脆弱性のスキャンを素早く行うことができます。
これにより、自分で Hacker News や Twitter を巡回して脆弱性対策に頭を悩ますことを、格段に減らすことができるのです。
2. GitHub Actions ワークフローで npm test を実施してコードを保とう
- Run
npm testin your workflows to push the latest and greatest
ほとんどの開発者が、npm test コマンドを実行してコードをテストしていることでしょう。npm test を実行して package.json （アプリケーションのパッケージ管理ファイル）に書かれたスクリプト実行することで、アクセシビリティからセキュリティの範囲まで幅広くテストすることができて、非常に有用です。
これを GitHub Actions のワークフローで都度実施することで、コードをよりよく保つことができるのです。このテストが成功すれば、本番環境へプッシュする自信が持てますよね。
例えば、下記のチェックがよく行われているのでご参考ください。
- すべての HTML 要素に
ariaが指定されているか確認する（参考: Accessibility testing in React with jest-axe - DEV Community） - 全てのリンクに対して、リンク切れになっていないか確認する
- ボタンがちゃんと動作するかなど、UIコンポーネントのユニットテストを実行する（参考: Authentication | Playwright）
3. UIの自動テストを検討してみる
- Take a look at your build with automated visual tests
ボタンが正しく動いていることを、見た目上確認することも非常に重要なことです。（機能を完全に移植したのにそもそもそのボタンがなかった、なんてことも実際にあったようです）
GitHub Marketplace には、例えば Cypress によるアクション のように UI の自動テストを行うためのアクションが提供されていて、自身のワークフローに組み込むだけで利用できます。
ヘッドレスブラウザによるテストは、そうあるべきように見えることを確認でき、リアルタイムのログを得ることもできて大変有用です。
4. Lighthouse を使ってウェブサイトの速度をテストする
- Use Lighthouse to make sure you’re not slowing your website down
Lighthouse は、コードなどの変更により、パフォーマンスなどの品質低下を未然に防ぐために非常に有用です。
Lighthouse は Chrome DevTools に組み込まれているオープンソースの軽量なツールで、コマンドラインや、Node.js のモジュールとして利用でき、下記のようなウェブサイトの品質に関するテストをすることができます。
- アクセシビリティ
- パフォーマンス
- PWA (Progressive web apps)
- SEO
Lighthouse も GitHub Marktetplace で lighthouse-check アクション が提供されているので、GitHub Actions ワークフローにすぐに組み込むことができ、CI パイプラインで自動的にサイトパフォーマンスへの影響をテストすることができます。
Pro tip: Lighthouse は CLI としても利用できるので、GitHub Actions のワークフローで直接実行するのも可能
Google Chrome チームも、この GitHub Actions ワークフローがウェブテストをシンプルにしてくれたとツイートしています。
5. リリース作業を GitHub Actions で自動化する
- Automate your releases (and release notes) with GitHub Actions
開発者は、プロジェクトをリリースしたあととても気分がよいこと、そしてそのあとリリースノートを書くことに時間を費やさなければならないことを、筆者は知っている。
GitHub Release の最新版では、リリースノートの自動生成と自動リリースに対応しました！
以下を参考に、リリースの自動化を自身のワークフローに組み込むことができます。（Node.js による例）
- GitHub Release のリリースを作成するワークフローを GitHub Actions ワークフローに追加する
- バージョンの更新 (Bump version) を行う、スタンドアロンの GitHub Actions ワークフローを作成する
- リリースリクエストをマージし、手動で Bump version ワークフローを実行する
この手順では、Bump version ワークフローを実行すると、npm version コマンドにより更新したバージョンのタグがプッシュされます。すると、1. で作成したワークフローが実行され、npm への公開と、自動生成された changelog （リリースノート）とともに GitHub Release のリリースが作成される、という仕組みになっています。
簡単ですね。信じられない人は、元記事 同章の動画も併せてご覧ください。
さいごに
The bottom line
自動化や自動テストは、恩恵が多いのに、ほとんどの人がやっていないといった現状です。実は、たったいくつかの簡単な対応を行うだけで、コードをセキュアをセキュアに保つことができ、アプリケーションを高速にすることができ、よりスムーズにリリースできる便利なものなのですよ💡
参考
- [Resource] How automation and CI/CD work on GitHub
- [Blog] 10 GitHub Actions resources to bookmark
- [Blog] 7 advanced workflow automation features with GitHub Actions
Epilogue
意外と時間かかりましたが、一通り読むことができました😌
GitHub Actions をはじめ、GitHub のプラットフォームは日々進化していて、もともと便利なところがさらに便利になっています。
これを使わない手はありません。小さなところひとつずつ、導入して快適に素早く安全な開発ライフを手に入れましょう！🤓
Discussion