ソース管理において、多くのプロジェクトでGitが利用されています。
Gitでは「コミット」や「プッシュ」といったコマンドを実行してソースコードを格納しますが、ケアレスミスを含んだままコミットしてしまうことも少なくありません。
そのようなミスを防ぐツールとして便利なのが「Husky」です。
本記事では、Huskyの概要やメリット、使い方を詳しく解説します。
＼ 2週間無料でお試しできます！ ／
Unix/Linux系VPSをこの価格で！
・全プランSSD搭載でコストパフォーマンス◎
・豊富なOSラインアップ
・充実の無料サポート
VPSを使ってみる
目次
Huskyとは
概要
Huskyは、バージョン管理ツール「Git」のフック機能を簡単に利用できるツールのことです。
Gitフックとは、「コミット」「プッシュ」といった特定のアクションが発生したときに、自動でスクリプトを実行できるGitの標準機能を指します。
Huskyを利用することで、特定アクションのタイミングで、任意のコマンドやスクリプトを簡単に実行できるようになります。
例えば、Gitにコードを格納する前に簡単なチェック用スクリプトを実行し、エラーやスタイル違反のあるコードを事前に防ぐようにすることができます。品質の高いソースコードのみを格納する、ということも可能です。
関連記事：GitとGitHubの基礎知識 それぞれの違いまでわかりやすく解説！ | Winserverのススメ
Huskyのメリット
Huskyを利用する最大のメリットは、「コード品質の向上」と「開発効率の向上」です。
具体的に以下の処理が可能になります。
・コミット前にスクリプトを実行してコードチェックを行う
・プッシュ後にレビュー依頼などの通知を自動送信する
チーム開発では、開発者ごとのスキルや習慣により、ソースコードに不具合や脆弱性が混入するリスクがあります。
Huskyを活用することで、Gitに格納する前に自動チェックを行い、異常がある場合は格納できないようにできます。
また、格納後にレビュー依頼を自動送信する運用も合わせて行えば、確認作業の手間を大幅に省くことも可能です。
Huskyと関連ツールの連携
Huskyは、他のツールと組み合わせることで、より高度なコードチェックや整形処理を実行できます。
代表的な連携ツールには次のようなものがあります。
・ESLint：JavaScript または TypeScript向けのの静的解析ツール。構文ミスやスタイル違反を検出。
・PHPStan：PHP向けの静的解析ツール。プログラムを実行せずにコードの問題や脆弱性を検出。
・Prettier：コードフォーマッター。ソースコードのスタイルを自動的整形。
・Lint-staged ：変更されたファイルに対してのみ、指定したコマンドを実行できるツール。設定ファイルでファイル種別に応じたコマンドを定義可能。
一般的な設定例）
・.js ファイル：ESLint + Prettier でコードチェック＆整形
・.css ファイル：Stylelintでスタイルの静的解析
これらを組み合わせることで、Gitに格納するコードの品質と一貫性を大幅に高めることができます。
＼ 2週間無料でお試しできます！ ／
VPSを使ってみる
Huskyの使い方
ここからは、Huskyを実際にインストールし、動作確認できるところまでの手順を紹介します。
先述のとおり、Huskyは関連ツールと組み合わせて使われるケースが多いため、今回は Lint-staged もあわせて導入します。
前提条件
本手順は、以下の環境を前提としています。
今回は、ミライサーバーのVPSを利用し、仮想マシン上に構築されたUbuntuを使用します。
・CPU：4コア
・メモリ：4GB
・ディスク：SSD300GB
・OSバージョン：Ubuntu 22.04.2 LTS
※ミライサーバーでは、Ubuntu 22.04.2 LTSを含む各種OSをインストール済みの状態からお使いいただけます。
Huskyのインストールには、JavaScrpitのパッケージ管理ツールであるnpm（Node Package Manager）を使用します。
nodejs および npm がインストールされていない場合は、以下のコマンドで事前にインストールしておきます。
| $ sudo apt update $ sudo apt -y install nodejs
$ sudo apt -y install npm |
インストール後は、次のコマンドでバージョン情報を確認できます。
| $ node –version $ npm –version |
HuskyおよびLint-stagedのインストール
今回はHuskyだけでなく、Lint-stagedをインストールします。
以下のコマンドを実行します。
| $ npx husky-init $ npm install $ npm install –save-dev lint-staged |
インストールが完了すると、以下のコマンドでパッケージのバージョンを確認できます。
| $ npm view husky version $ npm view lint-staged version |
＼ 2週間無料でお試しできます！ ／
VPSを使ってみる
Lint-stagedで実行するタスクを定義する
Lint-stagedを実行するため、その中で実行するタスクを定義します。
同じ階層に「package.json」ファイルがあるので、以下の青字箇所を追加します。
| { “devDependencies”: { “husky”: “^8.0.0”, “lint-staged”: “^15.5.1” }, “scripts”: { “prepare”: “husky install” }, “lint-staged”: { “src/**/*.{ts,tsx}”: [ “cspell”, “prettier –write”, “eslint –fix” ], “src/**/*.scss”: [ “cspell”, “prettier –write”, “stylelint –fix” ] } } |
この設定により、次の処理がコミット前に実行されるようになります。
・.ts もしくは .tsx ファイルに対して：cspell、prettier、eslint
・.scss ファイルに対して：cspell、prettier、stylelint
cspellは、コマンドラインのスペルチェックを行うコマンドです。
Git hooksの設定ファイルを準備
Huskyのインストールが完了すると、プロジェクト直下に.huskyというディレクトリが生成されます。
この中に、pre-commitの設定ファイルを用意していきます。
以下のコマンドでpre-commitで実行するタスクとして「npx lint-staged」をセットします。
| npx husky set .husky/pre-commit “npx lint-staged” |
ここまでの設定でGitにcommitを実行した時、自動的にHuskyから lint-staged が実行され、静的解析やスペルチェックが実行されるようになります。
これにより、コード品質を保ちながら効率的に開発を進めることが可能です。
＼ 2週間無料でお試しできます！ ／
VPSを使ってみる
まとめ
本記事では、Gitのフック機能を活用できるツール「Husky」について解説しました。
HuskyはGitにおいて「コミット」や「プッシュ」といった特定のアクションが発生したときに任意のスクリプトを自動実行できる便利なツールです。
また、Lint-stagedなどの関連ツールと組み合わせることで、Gitにファイルを格納する前に静的解析やコード整形を自動で行い、コードの品質を保つ運用が可能になります。
特にGitを使用して複数人との共同開発においては、コードのばらつきやミスを減らすうえで非常に有効です。
Gitを利用して開発を行っている方は、ぜひ本記事を参考に、Huskyの導入をご検討ください。
ミライサーバーでは、高性能なVPSや専用サーバーを低価格でご提供しています。
VPSは初期費用無料で、開発環境の構築やツールの動作検証にも最適です。
Huskyの検証やCI/CD環境のテスト用途にも、ぜひミライサーバーをご活用ください。
UbuntuをVPSで利用するならミライサーバー
ミライサーバーは、アシストアップ株式会社が提供している、Unix系サーバーに特化したホスティングサービスです。
ミライサーバーのVPSでは、高速処理が可能なSSDを全プランに搭載しています。
OSは、UbuntuやDebian、AlmaLinuxなどの豊富なラインアップから選択することができます。
2週間無料トライアルを実施しておりますので、まずはお気軽にお試しください。
プランの選択でお困りの場合は、ぜひ一度お問い合わせください。
2023.08.03
VPSに申込み、SSH接続するまでの流れ【ミライサーバー】
オンラインビジネスやWebサイトの運営を始める際には、ホスティングサービスの中から自分の用途に合ったサーバー環境を利用することが一般的です。...
