Chapter 07

コミットフックを導入しよう

Kei Touge
Kei Touge
2022.05.17に更新

⛓️ Git によるバージョン管理

前章のコーディング規約と同様に重要なのが、バージョン管理です。本書では、バージョン管理のツールに git を利用します。

.gitignore の作成

git に管理させたくないファイルやフォルダをあらかじめ .gitignore へ登録しておくと後々に困ることが少なくなります。

プロジェクトフォルダ直下に .gitignore ファイルを作成します。

.gitignore
node_modules
coverage
.env
.DS_Store

git レポジトリとして初期化する

では、このプロジェクトを git レポジトリとしましょう。

zsh
% git init
Initialized empty Git repository in /Users/zenn/my-hello-lib/.git/

// ステージング
% git add -A

// 初コミット
% git commit -m "first commit"
[main (root-commit) ca27c1a] first commit
 22 files changed, 6152 insertions(+)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.json
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc.json
 create mode 100644 .vscode/extensions.json
 create mode 100644 .vscode/settings.json
 create mode 100644 dist/bin/index.js
 create mode 100644 dist/esm/index.d.ts
 create mode 100644 dist/esm/index.d.ts.map
 create mode 100644 dist/esm/index.js
 create mode 100644 dist/index.js
 create mode 100644 jest.config.ts
 create mode 100644 package.json
 create mode 100644 src/bin/index.ts
 create mode 100644 src/index.ts
 create mode 100644 tests/index.test.ts
 create mode 100644 tsconfig.esm.json
 create mode 100644 tsconfig.json
 create mode 100644 yarn.lock

🔧 コミットフックの導入

simple-git-hooks のインストール

前章で eslintprettier を導入しましたが、コミットするたびにテストやリント&フォーマットが自動的に実行されると便利です。また、前章で見たコーディング規約的にも、これに違反するようなコミットを自動的に防ぐことも可能となります。

これを行うのがコミットフックですが、本書では設定が容易な simple-git-hooks をフックツールとして導入します。

zsh
% npm i -D simple-git-hooks

NPM スクリプトのアップデート

NPM スクリプトにリント&フォーマットのコマンドを追加し、npm install 時に実行される prepare コマンドに simple-git-hooks を指定します。

package.json
  "scripts": {
    "lint": "run-s lint:*",
    "lint:eslint": "eslint . --ext .ts,.tsx --fix",
    "lint:prettier": "prettier --write .",
    "prepare": "simple-git-hooks"
  }

simple-git-hooks エントリの作成

simple-git-hooks というエントリを新設し、コミットするたびに自動的にテストとリント&フォーマットがコミット前に実行されるよう設定します。

package.json
  "simple-git-hooks": {
    "pre-commit": "npm test && npm run lint"
  }

コミットフックの動作を確認

では、npm install を実行してコミットフックを作成させたあと、コミットしてみましょう。

zsh
% npm install

> my-hello-lib@1.0.0 prepare
> simple-git-hooks

[INFO] Successfully set the pre-commit with command: npm test && npm run lint
[INFO] Successfully set all git hooks

up to date, audited 631 packages in 1s
zsh
% git add -A
% git commit -m "simple-git-hooks を追加"

> my-hello-lib@1.0.0 test
> jest

 PASS  tests/index.test.ts
  hello() のテスト
    ✓ Hello. と出力 (1 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |
 index.ts |     100 |      100 |     100 |     100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.288 s, estimated 1 s
Ran all test suites.

> my-hello-lib@1.0.0 lint
> run-s lint:*

> my-hello-lib@1.0.0 lint:eslint
> eslint . --ext .ts,.tsx --fix

> my-hello-lib@1.0.0 lint:prettier
> prettier --write .

.eslintrc.json 11ms
.prettierrc.json 1ms
jest.config.ts 10ms
package-lock.json 115ms
package.json 18ms
src/bin/index.ts 3ms
src/index.ts 3ms
tests/index.test.ts 6ms
tsconfig.esm.json 2ms
tsconfig.json 2ms

テストを無事通過すると、リント&フォーマットも自動的に実行されました。