Zenn
⛳

ひとりぼっち開発を少しでも楽にするために使用しているツールたち

2024/06/26に公開
Git
GitHub
Laravel
React
TypeScript
tech

環境

大体いつもこんなかんじで開発しています

  • backend: laravel
  • frontend: react+typescript
  • others: github,docker

コミット規約とコーディング規約

昨日と今日の自分は別人マインドなのでコミット規約とコーディング規約は常に入れています。
一度環境作ってしまえば、あとはそれに（ほぼ自動で）従うだけなので運用コストも少なくてよいです。

コミット規約の使用ツール

  • git-cz
    • 対話型で統一されたコミットメッセージが作れます
    • 絵文字が入っていて、なんだか華やかでかわいいのがお気に入りです（もちろん絵文字を無効にすることもできます）
    • イメージ:公式リポジトリから引用
  • commitlint
    • コミットメッセージがルールに従ったものになっているかチェックしてくれます
    • 前項のgit-czである程度担保されているものの、複数人運用になった時のことなどを考えて念のために入れています

前述huskyのcommit-msgを使用してgit commit時にcommitlintを自動で走らせるようにしています。

.husky/commit-msg
npx commitlint --edit ${1}

コーディング規約の使用ツール

  • prettier
    • フロント用のコードを自動整形するツールです
    • ある程度の規則性のあるコードがかけていればいいので、ルールの内容自体は公式のものを適用させてます。
  • eslint
    • フロント用の、イケてないコードを書いているときに注意してくれるツールです
    • 例えばReactであればuseEffect内で使用している変数を第二変数に入れていなければ、注意してくれます
    • この行のコードイケてないんだけど、この行だけ無視して！みたいなこともできます
  • pint
    • php用のコードを自動整形するツールです
    • 最近のLaravelであれば標準で入っているらしい[1]です

huskyのpre-commitとlint-staged使用してgit commit時にチェックして、自動で修正するようにしています。

.husky/pre-commit
npx lint-staged
lint-staged.config.js
module.exports = {
    '*.{js,jsx,ts,tsx}': () => ['eslint --fix && prettier --write'],
    '*.{php,blade.php}': [
        () => './vendor/bin/pint --preset laravel',
    ],
}

huskyとlint-staged自動化

自動化にはhuskyとlint-stagedを使っています。

huskyはgitフックを利用したツールで、git push時やgit commit時など自分が決めたタイミングで自動で走らせるコマンドを登録することができます。
gitを実行するカレントディレクトリ内にhuskyディレクトリがあれば、huskyディレクトリ内にあるルールを自動で適用するので、huskyディレクトリごとリポジトリにあげると楽です。

lint-stagedはステージングされた gitファイルに対して特定のコードを走らせることができます。
huskyと組み合わせることで、git commitしたときに、コミットしたファイルに対して自動整形する。。。みたいなことができます。（実際の使用例は上述）

VSCodeの拡張機能で少しでも楽にする

コーディングを少しでも楽にするために、自動補完機能を主に入れています。

  • Auto Close Tag
    • 自動で終了タグを入れてくれます
    • <html>って入力したら</html>が勝手に入力される感じ
  • Auto Rename Tag
    • 開始タグor終了タグを書き換えたら、自動で対応するタグを修正してくれます
    • <div>を<span>にしたら</div>が自動で</span>になる感じ
  • Auto Import
    • ts/tsxファイルに自動でimportを追加してくれます
  • ESLint
    • 前述のコミット時だけでなく、開いているファイルのイケてないところを都度教えてくれます
  • Prettier
    • 前述のコミット時だけでなく、ファイル保存時に都度自動整形してくれうようになります
  • Laravel Pint
    • 前述のコミット時だけでなく、ファイル保存時に都度自動整形してくれうようになります
  • PHP Intelephense
    • 言わずもがな。php爆速開発くんです

テストが簡単に実行できるものも入れていたりします。

githubの操作はなるべくGitHub CLIで

ブラウザでポチポチ...が面倒なのでgithubの操作は基本的にローカルからghで操作しています。
次からよく使うコマンドを紹介してします。

gh pr

https://cli.github.com/manual/gh_pr

gh pr create
gh pr merge <issue no.>

gh pr createで現在のブランチからプルリクエストを作成→作成後マージしています。

gh pr mergeは対話式で「マージ後今のブランチを削除してmainブランチに戻る」ということができるので、ローカルに昔のブランチがたまりまくって汚い。。。みたいなことにならなくて好きです。

なおコードレビューもないしgithub actionsも使っていないので、プルリクエストはgithubにログを残すぐらいの目的でやっています。

gh release

https://cli.github.com/manual/gh_release

gh release create -F CHANGELOG.md --prerelease

CHANGELOGファイルをもとにgithub releaseをプレリリースとして作成しています。
-pオプションをつけるとプレリリースになるので、プレリリースでステージング環境に自動デプロイ→動作確認してOKだったら手動でリリース→本番環境に自動デプロイというリリースフローにしています。

なおCHANGELOGはstandard-versionで自動生成しています。
standard-versionはコミットメッセージをもとにバージョニングといい感じのCHANGELOGを自動で作ってくれます。

画像は公式リポジトリから引用

githubのアクションをトリガーにした自動化はwebhookで

https://docs.github.com/ja/webhooks/about-webhooks
「mainにpushされたら各サーバーに自動デプロイ」みたいなよくあるフローを実現するために、github actionsではなくwebhookを使っています。

一時期github actionsを使っていたのですが、無料枠を一度使い切ってしまったことがあり、それから制限を気にするのが嫌でwebhookを使うようになりました。

各サーバーの受信webhookはadnanh/webhookを使って待ち構えるようにしています。

脚注

  1. https://readouble.com/laravel/11.x/ja/pint.html ↩︎

Discussion