gitのcherry-pickを使ってみた
なぜこの記事を書こうと思ったのか
Reactを使用したフロントエンドエンジニアとしての経験がようやく2年目となりました。
Gitに関して、vscodeのGUIやコマンドでadd, commit, push, checkoutなど。
ブランチ操作やコミットなどもまだまだ自分で好き勝手やってしまっているかなぁという状態です。
入場初日はほんとにブランチの切り方もプルリクの送り方もわからない。そんな状態でしたが、現場で経験して体に覚え込ませるイメージはとても重要で、最近はわりかし使えるようにはなったかなと思ってます。
ただ食わず嫌いしてしまっているコマンドもあるのが現状です。（ここでの発信を機に使いこなせるようになりたい
前提
実はお恥ずかしながらcherry-pickはコマンドとして知ってから一年経ってしまっていました。
当時Gitの使い方がそもそも分かってなかったということが原因だったのですが解説ページ見ても意味が全然わかりませんでした。
この業界、とりあえずなんか動くもの作ってみろ！！！っていう考え方も多数あるのですが、プログラミングをしていく上ではやっぱり基礎的なことを固めていけた方が浮き足立たないというか、地が固まりますね。
とりあえず今回記事を書こうと思ったのは、
「Gitの基本はなんとなく分かったから！！」です。
積み上げを大切にしたいと思います。 それではよろしくお願いします。。
git cherry-pickって何？
cherry-pickについて
Google検索から引用したもの。
「git cherry-pick は任意の Git コミットを参照できるようにするとともに、現在作業中の HEAD にそのコミットを追加できる強力なコマンドです。 チェリー ピックとは、あるブランチのコミットを別のブランチに適用する操作のことです。 git cherry-pick は変更を元に戻す際に便利です。」
「HEAD」はまず、自分が現在作業している、最新の「コミット」のことですね。
で、上に書かせてもらった説明文をもう少し簡単に言うと。
〜〜〜〜〜〜〜〜〜〜〜
「現在自分が作業している場所で、過去の必要なコミットIDを選んであげればマージができるよ」
〜〜〜〜〜〜〜〜〜〜〜
って言うことなんですね。
「適用」 = マージで日本語って本当に難しいですね。なのでなるべく簡単に伝わるといいなと思います。
（本当はこう言うのを自分で噛み砕いてすぐ理解できたらいいんですが、難しい....涙）
実際にやってみる
まずは以下のような買い物カゴを想定したindex.htmlを用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>これは買い物カゴです</h1>
<ul>
</ul>
</body>
</html>
このulタグ内に、買い物かごに入れたい商品名を一つ一つ追加して、追加するごとにコミットを残しておきます。
このような形となりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>これは買い物カゴです</h1>
<ul>
<li>りんご</li>
<li>ぶどう</li>
<li>いちご</li>
</ul>
</body>
</html>
追加するごとにコミットを残しているため、
ローカルのgit logの出力結果を確認すると以下のようになっています。
991e7501b0eccc4ee4c9daa93d27d3fcc8e6fd0e 買い物かごにいちごを入れました (HEAD -> main)
58816ce78b254f51c325e3880b0b61c19f5e952b 買い物かごにブドウを入れました
ce7fcb27a5387014b0e139bb90ee69a719e4d91d 買い物かごにりんごを入れました
300c5f0d79efae3dd1d96257c3e7e65b1c98e55e 買い物カゴを用意しました
下から古いもので、現在自分がいる最新のブランチでは、HEADが存在している「いちご」を入れたコミットが最新のコミットになります。
そしたらいよいよ、cherry-pickを使用したいと思いますので、
まずは、買い物カゴを用意したコミットに、checkoutをしてブランチを切り、一度初期状態にしていきたいと思います。
以下を実行しました。
git checkout 300c5f0d79efae3dd1d96257c3e7e65b1c98e55e (初回のコミットID)
git checkout -b feature/newBox
これで、index.htmlは初回コミットの内容に戻っています。(feature/newBoxブランチ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>これは買い物カゴです</h1>
<ul>
</ul>
</body>
</html>
そして初回のmainブランチの最新状態。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>これは買い物カゴです</h1>
<ul>
<li>りんご</li>
<li>ぶどう</li>
<li>いちご</li>
</ul>
</body>
</html>
そしたら新しい、「feature/newBox」ブランチにて、mainブランチ上のコミットの最終コミット、「ぶどうを入れました」をcherry-pickして見ましょう。以下を実行します。
git cherry-pick 58816ce78b254f51c325e3880b0b61c19f5e952b
するとindex.htmlは以下のような状態になりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>これは買い物カゴです</h1>
<ul>
<li>りんご</li>
<li>ぶどう</li>
</ul>
</body>
</html>
ぶどうだけが追加された状態になるのかと思ってたのですが、どうやら指定したコミットの変更差分は持ってきてしまうみたいですね。
以下、親友より(chatGPT)
「git cherry-pickは、特定のコミットをそのまま現在のブランチにマージするコマンドです。そのため、コミット内の全ての変更がそのまま適用されます。これにはコミットメッセージや他の変更点も含まれます。」
備考
どうやら cherry-pick は「いいとこ取り」と言う意味らしいです。w
今回使ったgit コマンド
git logを出力する際に、ユーザー名などを伏せてくれる。記事書く用に便利かも。
git log --pretty=format:"%H %s %d" --decorate
感想
cherry-pickは知らなくてもどうにかなってた1年だったのですが
多分知ってたら今でも気づかないようなタイミングで業務がスムーズに進んでいたのかもしれません。
次回はrevert rebaseを書いていきたいと思います。閲覧いただきありがとうございました。