コードのコピペや自動生成をしたらまず一旦コミット

コードのコピペや自動生成をして、それに手を加えて実装を進めていくケース、結構ありますよね？ そんなときに、コミットをわかりやすくするための小技を紹介します。

これをやるだけで開発中の試行錯誤がしやすくなりますし、レビューもかなり楽になります。

コピペを元に実装していく場合は、コピペした時点で一旦コミットする

コピペしてちょこっとカスタマイズ、なんだかんだでよくやると思います。

• 既存の機能 A のコードを元にして、ちょっと違う機能 B を作りたい
• 公式ドキュメントや他の人の例を参考にして実装したい
• GitHub の issue に書かれている workaround を使いたい

いずれのケースであっても、まずコピペした時点で一旦コミットしてしまいましょう。「ペ」したらすぐにコミットです。動かなくてもかまいません。その後に、必要な変更を加えていきます。コミット履歴としては以下のようなイメージです。

1. aaaaaaa: https://example.com/awesome-post から一旦コピペ
2. bbbbbbb: コピペしてきたコードをこの機能に合わせてカスタマイズ
3. ccccccc: コーディングスタイルを揃える
4. …

そうしておけば、いつも通り Git のコミット履歴を見るだけで、コピペ元との差分を把握することができます。「うまく動かなかったのでちょっと立ち戻る」のも簡単です。「最後の行が切れていた」のような、つまらないコピペミスにも気づきやすくなります。

これをやっておかないと、コピペ元からどう変えたのか把握しづらくなり、本人としてもレビュワーとしても地味に面倒です。もちろん diff を使えば比較はできますが、コピペ元のファイルをいちいち指定するのは手間ですよね？ Web 上のコードからコピペしてきた際にはなおさらです。

なお、コミットメッセージにはコピペ元の URL やファイル名を含めておくのがおすすめです。

自動生成されたファイルを元に実装していく場合は、自動生成した時点で一旦コミットする

「ツールが自動生成したファイルに手を加えて使っていく」というシーンもよくあると思います。ここでいう自動生成とは、

• ツール導入時に、デフォルトの設定ファイルを作成する（例：$ npm biome init）
• アプリやファイルを scaffold する（例：$ npx create-next-app@latest）

といった類のものです。自動生成されたファイルに対して、次に

• 内容をカスタマイズする
• 不要なファイルを消す
• 自分たちのコーディングスタイルに合わせる

といったことをやっていくと思いますが、これもまずは自動生成されたファイルをそのままコミットしてしまいましょう。

1. aaaaaaa: $ npm biome init で生成された設定ファイルを一旦コミット
2. bbbbbbb: Biome の設定を調整
3. …

といった感じです。

そうすれば、どこが自動生成された内容でどこが改変した内容なのか、区別がつきやすくなります。コピペの場合と同じですね。また、自動生成される内容は、そのツールの「おすすめの設定・実装」であることが多いので、「本当にそこから外れていいのか？」「本当に必要なカスタマイズなのか？」ということを確認するきっかけにもなります。なじみの薄いツールであれば、なおさらです。

なお、コミットメッセージには実行したコマンドを含めておくのがおすすめです。

まとめ

ということで、コードのコピペや自動生成をしたらまず一旦コミットという小技を紹介しました。小技と言っても単にコミットするだけなので、誰でも今すぐに使えると思います。実際には、初学者の方ほど役に立つ場面が多いんじゃないでしょうか。

もちろん、

• コピペや自動生成の分量が少ない
• 加える変更が少なくて単純
• 同じことをよくやっていて、チーム内では自明

というようなケースでは、杓子定規に守らなくてもいいと思います。使いやすいように使ってみてください。