Contents
まとめ
- コーディングスタイルを使ってコードの品質を保ちましょう
pre-commitを使うとコミット時にコーディングスタイルをチェック出来ます- コーディングスタイルに関するレビューはもう終わりにしましょう
はじめに
コーディングスタイルについてのレビューって面倒くさいなと思ったことはありませんか？
そんな方に朗報です、コミット時にコーディングスタイルをチェックできる
pre-commit というツールが世の中にはあります。
このツールを使えば、指定したコーディングスタイルに反しているコードを強制的に修正できます。
結果として、コーディングスタイルについてのレビューなどをしなくて良い環境を構築できます。
自由度の高いプログラミング言語ほど、プログラマーの趣向が強く反映されがちで、 コーディングスタイルがめちゃめちゃになることが多いのではないでしょうか？ (JavaScript とか C 言語とか)
そのコーディングスタイルを揃えるためのレビューや修正は価値を感じず、 できればやりたくないと思う方が多いのではないでしょうか？
そんな方に、これから紹介する、pre-commit というツールを是非使って欲しいです。
コーディングスタイルにまつわる雑務からの解放が待っています。
pre-commit のインストール
まず、pre-commit をインストールします。
pip もしくは brew コマンドを使ってインストールするのが良いかと思います。
# pip の場合
$ pip install pre-commit
# brew の場合
$ brew update
$ brew install pre-commit正常にインストールされているか判断するために、pre-commit のバージョンを確認してください。
以下のように、バージョンが何かしら出力されれば ok です。
(出力されるバージョンの数字は異なるかもしれませんが、気になさらず)
$ pre-commit --version
pre-commit 2.9.3正常にインストールされていたことを確認できたら、次のステップに進んでください。
コーディングスタイルの指定と pre-commit の有効化
このステップでは、適用するコーディングスタイルの指定と、pre-commit の有効化を行います。
まずは、適用するコーディングスタイルを決めてください。
本記事では、適用するコーディングスタイルは JavaScript Standard Style に決めました。
JavaScript Standard Style > Git の pre-commit フックはありますか？
の内容を参考にして、pre-commit に必要な .pre-commit-config.yaml ファイルを用意します。
この .pre-commit-config.yaml は Git リポジトリのトップディレクトリに置いてください。
具体的に .pre-commit-config.yaml に記述する内容は以下の通りです。
- repo: https://github.com/standard/standard
rev: master
hooks:
- id: standardrepo に適用するコーディングスタイルのリポジトリの URL を記載します。
rev はそのリポジトリのどのバージョンを利用するかを記載します。
最新版を利用したいなら、‘master’ か ‘main’ と記載すると良いでしょう。
どちらを記載すれば良いかはリポジトリにアクセスして確認してください。
hooks にはフックの内容を記載します。
(詳細はこちらを確認: https://pre-commit.com/index.html#pre-commit-configyaml---hooks)
今回は、使用するコーディングスタイル JavaScript Standard Style の
standard を id として登録します。
他にも使用できるコーディングスタイルの ID がありますので、 Supported hooks を参照してもらえれば、他にも使いたいなと思うコーディングスタイルが見つかるかと思います。
.pre-commit-config.yaml の準備が完了したので、pre-commit を有効化します。
トップディレクトリに移動して、以下のコマンドを実行してください。
$ pre-commit install
pre-commit installed at .git/hooks/pre-commitこれで、コーディングスタイルの指定と pre-commit の有効化が完了しました。
現在のソースコードに一括でコーディングスタイルを適用したい場合は、以下のコマンドを実行してください。
$ pre-commit run --all-files
# 出力結果は省略しますこれにて、pre-commit の使える快適な開発環境が構築できました。
他の開発者も同じ環境を整備できるように、README などに
pre-commit のインストール方法と有効化の方法を記載しておくと良いです。
(この記事のリンクを貼っておくだけでも良いかと思いますが、README には抜粋した内容を書くことをお勧めします)
おわりに
pre-commit を活用した快適な開発環境の構築方法について説明しましたが、どうでしたか？
「お、良いじゃん、今日から使えそうだし、ちょっくら導入してみるか」と思っていただけたら嬉しいです！
是非、現在のプロジェクトにこういう開発環境がなければ、率先して導入してみてください。
大規模プロジェクトほど、必要な開発環境かなと思います。
「たまにくる、コーディングスタイルのレビューが面倒だな」と感じている人の助けになれば良いなと思います。
今後は、JavaScript Standard Style だけではなく、Markdown や Python、HTML CSS など、
他の言語での pre-commit の設定の仕方などを記事にしようかなと思っています。
良ければ、Twitter のフォローをお願いします。
最後までお読みいただきありがとうございました．
今日も良い一日をお過ごしください！
参考資料
執筆機材
- Xiser Pro Trainer (ステッパー)
- HHKB Professional 墨 (キーボード)
- HHKB キートップセット 白 (キートップ)
- Apple Magic Mouse 2 (マウス)
- Apple MacMini (PC)
- iiyama Display 27inch FullHD (ディスプレイ)
- KINTO UNITEA 550ml (コップ)
