GitHub Actionsとhuskyについて調査

[kagomen]

関連するイシュー

#124

[kazzyfrog]

コードの品質を担保するための取り組みとして、以下のようなことがあります！：

• prettier（フォーマッター）：決められたルールに沿って、コードを整形してくれる
• ESLint（リンター）：単純な構文エラーや、プロジェクト固有のコーディング規約に沿っているかチェックしてくれる

他にも、テストとか、カバレッジ（コード全体の何％がテストされているかを測る）とかがある。

[kazzyfrog]

上記を導入したら、
継続的にそれらを実行することを自動化・仕組み化してしまえば、手動で実行する手間がなくなって、楽です！
忘れる心配もないので、安全！

[kazzyfrog]

それらをどのタイミングで、自動で実行させるかですが、大きく２つに分けられそうです！

• GitHub上
• ローカルのコミットやプッシュ前のタイミング

GitHub上なら、GitHub Actionsで自動化できます！
両方使い分けることも、できます！
参考：[Next.js]huskyとGitHubActionsで綺麗に開発し続けられる環境を整える

[kazzyfrog]

ローカルのコミットやプッシュ前のタイミングで実行する場合：

これは、ネイティブのGitにもともとGit hooks（公式）というのがある！
リファレンスのpre-commitフックの説明：

pre-commit フックは、コミットメッセージが入力される前に実行されます。 これは、いまからコミットされるスナップショットを検査したり、何かし忘れた事がないか確認したり、テストが実行できるか確認したり、何かしらコードを検査する目的で使用されます。 このフックがゼロでない値を返すと、コミットが中断されます。

つまり、Gitの機能として以下があります！

• コミットするタイミングで、決められたコマンド（テストやフォーマッター、リンターなど）を実行させる。
• それで、エラーが出たりしたらコミット失敗にする！

これは、ライブラリなしで、カスタマイズして使うことができる
参考：【Git hooks】pre-commitフック導入

[kazzyfrog]

ただ、このネイティブのGit hooksのカスタマイズ・管理・実行をより簡単に行うための、
ライブラリが結構たくさんあります！

フロント開発では、husky + lint-stagedが１番人気！
参考：git-hooks vs husky vs lefthook vs lint-staged vs pre-commit vs simple-git-hooks

[kazzyfrog]

ちなみに今は、GitHub上で、mainブランチにコミットされたら、
next buildとPagesへのデプロイが行われるように、GitHub Actionsでプロセスを自動化しています！

[kagomen]

大雑把にCI/CDとは？

ビルド、テスト、デプロイを自動化すること。
Circle CIやJenkinsなどが代表的なCI/CDツール

[kagomen]

大雑把なGitHub Actionsの使い方

.github/workflowにyamlファイルを置いて、設定を記述する
yamlファイルは複数作成可能

name: Deploy Next.js site to Pages // タイトル

on: // ここに発動条件を記述
  push:
    branches: ["main"]  // mainブランチにpushしたら発動させる

  workflow_dispatch:  // 手動実行で発動させる（オプション設定が必要なければ記述はこれだけでOK）

jobs:  // ここに発動内容を記述
  build: // 発動内容のタイトル
    runs-on: ubuntu-latest  // ランナーの指定
    steps: 
      - name: Checkout // アクションのタイトル
        uses: actions/checkout@v4  // GitHub Marketplaceから任意の発動内容（アクション）を探してきて記述
      - name: Detect package manager  // このように複数記述可能
        id: detect-package-manager

補足

• 希望のアクションが見つからない場合、自分でカスタムアクションを実装する必要がある
• jobsはデフォルトで並列実行される。上から順番に実行させたい場合はneedsを記述する

参考

GitHub Actions を使いこなせ！ -YouTube
GitHub Marketplace

[kagomen]

大雑把にGitHub ActionsとGit Hooksをどう使い分けるか？

ローカルのことはGit Hooks、リモートのことはGitHub Actions？

関連

#129 (reply in thread)