0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

LeftHookでUI開発もAPI開発もどっちも捗った話

Last updated at Posted at 2025-01-26

初投稿です。
DevContainerを用いたフルスタックでの開発にLeftHookがとてもマッチしたので紹介します。
UI側はBun(Node.js)、API側はPythonを使用しています。

LeftHookとは

LeftHookは一言でまとめると「マルチプラットフォーム対応のGitフック管理ツール」です。
似たようなツールとしてはHuskypre-commit等があります。

機能のざっくり説明

コミット前やプッシュ前に任意のコマンドを実行できます。

例(以下のようなことができます)

  • コミット前にステージングされているファイルに対してフォーマットを行い、修正された内容も含めてコミットを上げる
  • コミット前にリントやビルドを実行して、なんらかのエラーがあった場合はコミットさせない
  • コミット前にコミットメッセージの検証を行い、エラーがあった場合はコミットさせない

上記で挙げた例以外にも、プッシュ前に何か行ったり、上記のすべてを同時に行ったり等も可能です。

なぜLeftHookなのか

例に挙げた内容は上述したHuskyやpre-commit等でも可能です。
その中で私がLeftHookを推す理由はひとえにマルチプラットフォーム対応だからです。

他にもいいとこいっぱいあるよ

Huskyの場合は導入にNode.jsが必須です。
ただ、私の場合はDevContainerで開発を行っているため、API側にHuskyを導入したい場合は、そのためだけにPythonのDevContainerにNode.jsも入れないといけません。逆も然りです。
これは正直微妙だと思いました。

かといって、UI側はHusky、API側はpre-commitとそれぞれ別のツールを導入するとその分学習コストが増し、管理も大変そうです。

この点、LeftHookは環境の差異を気にしないでいいのがとても良い点だと思いました。

導入について

詳細はこちら

UI側もAPI側もやることは同じです。

インストールしてlefthook.ymlを書いてlefthook installするだけです。
そうしたら、lefthook.ymlに書いた通りにGitフックが作成されて実行されます。

参考までに私のlefthook.ymlを置いておきます。

UI側のlefthook.yml

コミット時にBiomeのリントとNext.jsのビルドを並列実行して、エラーがあった場合はコミットさせない設定です。

pre-commit:
  parallel: true # 並列実行
  commands:
    check:
      run: bunx biome check
    build:
      run: bun run build
API側のlefthook.yml

コミット時にRuffのリントを実行して、エラーがあった場合はコミットさせない設定です。

pre-commit:
  commands:
    check:
      run: ruff check

欲を言えばコミットメッセージのリントも行いたかったのですが、マルチプラットフォーム対応のcommitlintが見つからなかったため断念しました...
何かいいリンターがあったら教えていただけると嬉しいです。

その他の構築例もこちらにいくつかあるので興味があったら見てみてください。

実行

UI側(Next.js)での実行結果です。
Hello Worldを表示するだけのページを作成しました。
image.png

適当な場所に以下のような、constで定義した定数に値を代入しようとしてエラーになる文を追加します。

const test = 1;
test = 2;

ステージングに上げてコミットすると
git add .
git commit -m "test"

lefthook.ymlに定義したcheckとbuildが走り...
image.png

エラーによりコミットが中断されます。
image.png

エラー文によると「定数に代入はできないよ」ということなのでletに直します。

- const test = 1;
+ let test = 1;
test = 2;

再コミット
git add .
git commit -m "test"

先ほどと同様checkとbuildが走り...
image.png

今度はエラーが無いためコミットが完了しました。
image.png

プッシュを忘れずに
git push

まとめ

以上です。
個人的に積極的に使っていきたいと思えるツールでしたので記事を書かせていただきました。

誤字・脱字・ご指摘点等ありましたらコメントで教えていただけると助かります。

LeftHookで良いコミットライフを!

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?