はじめに
WordPressの開発において、コード品質を保つために多くの開発者はGit pre-commitフックを使用します。これらのフックはコミット前に自動的に実行され、さまざまなチェックや処理を行います。しかし、手動でこのフックを作成し管理するのは煩雑であり、ミスの可能性も高まります。
Huskyというnpmパッケージを用いると、Git pre-commitフックの設定が大幅に簡素化され、開発プロセスを効率化することができます。これにより、WordPressプロジェクトにおけるコード品質管理や自動化ツールの統合が容易になります。
症状・背景
このテーマが必要になる主な場面:
- WordPressプラグインやテーマの開発時にコード品質を保つ
- コミット前の形式チェック（ESLint等）を自動化したい場合
- テストスクリプトの実行結果をコミット前に確認する必要がある場合
手順・設定方法
ステップ1: Huskyとnpm-check-updatesのインストール
# WordPressプロジェクトのルートディレクトリに移動します。
cd /path/to/wordpress-project
# Huskyとnpm-check-updatesをインストールします。
npm install husky --save-dev
npm install npm-check-updates --save-devステップ2: pre-commitフック設定ファイルの作成
# package.jsonにHuskyの設定情報を追加します。
npx husky install
# pre-commitフックを定義します。ESLintとJestを使用する場合、以下のコマンドを実行します。
echo 'npm run lint' > .husky/pre-commit
echo 'npm test' >> .husky/pre-commitステップ3: フックのテスト
# Huskyが正しく設定されているか確認するために、pre-commitフックをテストします。
npx husky install
npx husky run pre-commit --dry-runステップ4: 監視とトラブルシュート
# Gitのログを確認し、問題がないことを確認します。
git log --stat
# Huskyが正しく動作するように設定ファイルを調整します。
nano .husky/pre-commit注意事項
- HuskyはNode.jsのプロジェクトで最も有用ですが、WordPressテーマやプラグインでも同様に使用可能です。ただし、サーバー側のPHPコードに対するフロントエンドのJavaScriptやTypeScriptのチェックを自動化するために利用することが多いです。
- pre-commitフックを使用する際には、パフォーマンス低下を防ぐため、不要な処理は省くべきです。また、時間のかかる処理（例：大規模なユニットテスト）は別のフックで実行することを検討してください。
- セキュリティ面では、フロントエンドのJavaScriptコードに脆弱性がないことを確認するためにESLintやPrettierを使用することが推奨されます。また、npmパッケージの脆弱性チェックも定期的に行うと良いでしょう。
まとめ
1. Huskyのインストール: npm install husky --save-dev を実行してプロジェクトにインストールします。
2. pre-commitフックの定義: Huskyが自動的に生成した.husky/pre-commitファイルを編集し、必要なコマンド（ESLint, Jest等）を追加します。
3. フックのテスト: npx husky run pre-commit --dry-runでフックが正しく動作するか確認します。
4. パフォーマンスとセキュリティ: 必要なチェックだけを行い、不要な処理は省きます。また、脆弱性のあるnpmパッケージを定期的にチェックします。
関連記事: