![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/2e911e85-fe89-46f2-98ff-1ef50df2522c/2544ABD7-DB68-4786-95BD-F257B12ADAE0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=0138b817231029deeea7dc3e0d53d3233ac7a2bd7dc1723eaad363e64a93279e&X-Amz-SignedHeaders=host&x-id=GetObject)
本家のリポジトリから、コードブロックのカラーをNotionっぽい色付けに変更するプルリクがありました。
今回は、以下のプルリクを取り込んだ経緯の備忘録です。
筆者にとっては、初のコンフリクトでした。
ブランチを切り替える
Git初心者ということで、順を追って書いていきます。
まずはブランチを切ります。
$ git branch feature
ブランチを確認します。
ちゃんとブランチが作成されています。
$ git branch
feature
* main
ブランチを切り替えます。
$ git switch feature
Switched to branch 'feature'
これでfeature
ブランチに切り替えることができました。
git switch -c ブランチ名
git checkout
とgit switch
の違い
git checkout
はブランチを切り替える以外にも、コミットを復元するなど多機能です。
git switch
はgit checkout
からブランチの切り替え機能を切り出したイメージです。プルリクエストを取り込む
まずは本家easy-notion-blogリポジトリの最新の情報を取得します。
$ git fetch root
root
で登録しています
git remote add root https://github.com/otoyo/easy-notion-blog
続いて、対象のプルリクエストのCommitsのページに移動します。
コミットをgit cherry-pick
で一つずつ取り込みます。
今回は6つです。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/261a3afb-1fd0-4b59-9e06-b2b8ddc32f26/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=8d028aaccda62fab5c2df608637f0ac4af3d315c1778930f7ee6eed31273ba2d&X-Amz-SignedHeaders=host&x-id=GetObject)
まずは一番上のコミットを取り込みます。
成功しました。
$ git cherry-pick b2599227e7faaa5fe9ceb900e52e8d54505c725d
Auto-merging package.json
Auto-merging yarn.lock
[feature 1ea09a8] Install @types/prismjs
Author: otoyo <hiroki.t.1988@gmail.com>
Date: Mon Jul 18 11:23:15 2022 +0900
2 files changed, 7 insertions(+), 1 deletion(-)
はじめてのコンフリクト
続いて、二つ目のコミットを取り込みます。
コンフリクトが発生しました。
$ git cherry-pick d49d38cb23c8c438c24cabc35fd155b7dab48b87
Auto-merging src/components/notion-blocks/code.tsx
CONFLICT (content): Merge conflict in src/components/notion-blocks/code.tsx
error: could not apply d49d38c... Import language
hint: After resolving the conflicts, mark them with
hint: "git add/rm <pathspec>", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".
VS Codeでコンフリクトが起きた場所を確認します。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/bee3468e-40ac-481a-a8c6-1c00a970477c/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=058b0b45b6bb6bd56ab46e18df6688a951355746cdb403e189ad83a0fff29154&X-Amz-SignedHeaders=host&x-id=GetObject)
上が取り込み前のコード(Current Change
)、下が取り込み後のコード(Incoming Change
)です。
今回は取り込み後のコード(Incoming Change
)を採用したいので、「Accept Incoming Change
」をクリックします。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/82faef22-2e23-450e-a669-141f054b3122/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=d8bfd54f2b6d2645429a3e9c6eee914f7ff6ac2f55009d972092b3ede52cb7b7&X-Amz-SignedHeaders=host&x-id=GetObject)
これでコンフリクトが解消されました!
と言いたいところですが、エラーが出ました。
確認してみると、「RichText
が定義されていない」とエラーが出ています。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/a923cbfb-89a0-4d2a-ac62-ad16f7e22c2c/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=9a44af2909125b637744935e0118deedaef42dff3cf727a176b08764ef2e0e1c&X-Amz-SignedHeaders=host&x-id=GetObject)
「コンフリクトは解消したはずなのに。。。」と思いつつ、原因を探します。
今回取り込んだコミットの内容をGitHubで確認してみます。
RichText
をクリックすると、以下のような内容が出てきました。
どうやら、どこかにRichText
が定義されていそうです。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/7061dd62-da77-4b6e-bcbc-eb7a2edf6926/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=b981bbaf6e7b75d60126a083db512867b30cd2ffaa0fdf8562b4e7ba47ad6c24&X-Amz-SignedHeaders=host&x-id=GetObject)
VS Codeでsrc\lib\notion\interfaces.ts
を確認してみると、RichText
がexport
されていました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/da6d8be8-8067-4fd1-a1ad-c57818a64417/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=c890ec32924fc3eed95b925cd2874f37d76ef2de57a3a808403a3b2836dcf5db&X-Amz-SignedHeaders=host&x-id=GetObject)
エラーが出ているsrc\components\notion-blocks\code.tsx
をGitHubで見てみると、RichText
をimport
していたので、自分のリポジトリでも同様の内容を追加します。
import { RichText } from '../../lib/notion/interfaces'
しかし、まだエラーが出ています。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/5bbef902-677c-49d0-aae0-20287594a331/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=52c75d34390ebc26606228ffdfc089f29bddd34c62f1eb2b3f491ef651e3a8fc&X-Amz-SignedHeaders=host&x-id=GetObject)
このエラーを解消するためには、git add
とgit commit
が必要でした。
$ git add .
$ git commit -m "Import language"
これでようやく、エラーが解消できました。
import { RichText } from '../../lib/notion/interfaces'
はありませんでしたが、取り込んだコミットにはあったはず。
この部分はコンフリクトしていないので、git cherry-pick
で取り込めたはず。。。import { RichText } from '../../lib/notion/interfaces'
は含まれていなかったので、取り込めていなかったということでした。残りのコミットも取り込む
残り4つのコミットも取り込みます。
3つ目と4つ目は成功しました。
$ git cherry-pick f19fb73c24304b1bace02acd45df7bfe92f0bd8c
Auto-merging src/pages/_app.tsx
[feature 3e0cf48] Load syntax-coloring.css
Author: otoyo <hiroki.t.1988@gmail.com>
Date: Mon Jul 18 12:33:33 2022 +0900
1 file changed, 1 insertion(+)
$ git cherry-pick ee68f0e7a3f2b1f7b2012a1bdf89700005973c95
[feature c629678] Add syntax-coloring.css
Author: otoyo <hiroki.t.1988@gmail.com>
Date: Mon Jul 18 12:32:42 2022 +0900
1 file changed, 70 insertions(+)
create mode 100644 src/styles/syntax-coloring.css
5つ目はコンフリクトが発生しました。
$ git cherry-pick f19fb73c24304b1bace02acd45df7bfe92f0bd8c
Auto-merging src/pages/_app.tsx
[feature 3e0cf48] Load syntax-coloring.css
Author: otoyo <hiroki.t.1988@gmail.com>
Date: Mon Jul 18 12:33:33 2022 +0900
1 file changed, 1 insertion(+)
VS Codeで確認してみます。
今回はCSSファイルでコンフリクトが起きています。
このCSSファイルは、以前に自分が本家から変更しているファイルなので、慎重に見ていきます。
「Compare Changes」をクリックすると、変更前と変更後のコードが比較できます。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/30b64132-8a88-4665-abba-809745f8a5e0/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=d6a40615e2d9e3b214d383d6d9c2792cac4021b399508cb4a24dfeee068e127b&X-Amz-SignedHeaders=host&x-id=GetObject)
左が今のコード、右が取り込もうとしているコードです。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/5d756518-a47b-43be-a3b0-f29249583873/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=6737a8006fa8899c7fbf07039caaf97c7c6eeab0a919af60594f4c67f5b5052b&X-Amz-SignedHeaders=host&x-id=GetObject)
基本的には、変更後のコードを採用していきます。
この画面は読み取り専用の画面なので、コピペで変更後のコードを貼り付けていきました。
しかし1箇所のみ、自分で変更したコードを採用します。
区切り線のCSSです。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/06f9b075-638d-4372-8bec-5fe57465a82b/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=ba31f7239d75d577d185f409ad308ca4aaf68481f9adf442375658cb2e62deab&X-Amz-SignedHeaders=host&x-id=GetObject)
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/7c344751-8dbc-4ac4-a1aa-a480f0b2e7eb/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=e1ba65cd49d805214fbf7db6ac46ab7e07e2dd77cc2d50ace196bd61f9794e94&X-Amz-SignedHeaders=host&x-id=GetObject)
区切り線のコードは自分のコードを採用し、無事コンフリクトを解消することができました。
Incoming Change
に採用したいコードをコピペで貼り付けていったので、Incoming Change
をクリックすることで想定する内容でコンフリクトが解消できました。
上記と同様にgit add .
とgit commit
をしておきます。
git add .
git commit -m "Delete styles for syntax"
これで5つ目のコミットを取り込むことができました。
最後のコミットを取り込みます。
無事成功しました。
$ git cherry-pick f19fb73c24304b1bace02acd45df7bfe92f0bd8c
Auto-merging src/pages/_app.tsx
[feature 3e0cf48] Load syntax-coloring.css
Author: otoyo <hiroki.t.1988@gmail.com>
Date: Mon Jul 18 12:33:33 2022 +0900
1 file changed, 1 insertion(+)
開発環境で変更を確認する
ちゃんと変更できているのか、開発環境で確認してみます。
$ yarn dev
左が変更前、右が変更後です。
色がいい感じに変更できています。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/7304e633-530c-490d-9312-5952cf01d1b5/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=250112f6cb95cac18a9b600b344326e94c545da898794b493a31a957440bf503&X-Amz-SignedHeaders=host&x-id=GetObject)
コミットをmainブランチに取り込む
feature
ブランチで変更が完了したので、feature
ブランチのコミットをmain
ブランチへ取り込みます。
今回はgit rebase
を使ってみます。
リベースを使うと、コミットが枝分かれせずに1本化できるので、コミットの履歴がすっきりします。
@LAPTOP-LLOMAO1E MINGW64 ~/easy-notion-blog (feature)
$ git rebase main
Current branch feature is up to date.
feature
ブランチの履歴をgit log --online
で確認してみます。
6個のコミットをfeature
ブランチで取り込んだので、main
ブランチよりも6個進んでいます。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/2d2bc471-4f98-4742-90db-0035b6183071/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=8f04f6566266ff3ffc0f47a850ffabce3f2c7293a802edbfc469fb99a6d72b90&X-Amz-SignedHeaders=host&x-id=GetObject)
git log --oneline --graph
でも履歴を見てみます。
リベースをしたので、履歴が枝分かれせず、まっすぐになっています。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/499aa187-0cb1-480d-b14a-85994ab26678/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=a6b4383d5760bd8950b70f49319aa8e6fd4838045e66d4d1696d5abd0ccc2906&X-Amz-SignedHeaders=host&x-id=GetObject)
main
ブランチに切り替えます。
$ git switch main
Switched to branch 'main'
Your branch is up to date with 'origin/main'.
もう一度、git log --online
で確認してみると、featureブランチで取り込んだコミットはありません。
feature
ブランチがmain
ブランチよりも進んでいるためです。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/62abafd6-982e-4ecc-87b0-666fd00db0db/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240725%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240725T231229Z&X-Amz-Expires=3600&X-Amz-Signature=ce712d24788072567ba595a51471416537bf5571062a49977795663c95765faa&X-Amz-SignedHeaders=host&x-id=GetObject)
ファストフォワードマージをします。
$ git merge feature
Updating a6f6b9b..d6df5fd
Fast-forward
package.json | 3 +-
src/components/notion-blocks/code.tsx | 28 +++++--
src/pages/_app.tsx | 1 +
src/styles/global.css | 148 +---------------------------------
src/styles/notion-block.module.css | 3 +-
src/styles/syntax-coloring.css | 70 ++++++++++++++++
yarn.lock | 5 ++
7 files changed, 102 insertions(+), 156 deletions(-)
create mode 100644 src/styles/syntax-coloring.css
main
ブランチにfeature
ブランチの変更を取り込むことができました。
yarn dev
で確認してみると、変更がきちんと反映されています。
最後にリモートリポジトリへpushします。
$ git push -u origin main
Enumerating objects: 42, done.
Counting objects: 100% (42/42), done.
Delta compression using up to 8 threads
Compressing objects: 100% (30/30), done.
Writing objects: 100% (30/30), 3.38 KiB | 432.00 KiB/s, done.
Total 30 (delta 21), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (21/21), completed with 11 local objects.
To https://github.com/chabesu/easy-notion-blog.git
a6f6b9b..d6df5fd main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
無事、今回のプルリクエストをリモートへ反映することができました。
feature
ブランチは用済みのため、削除しておきます。
$ git branch -d feature
Deleted branch feature (was d6df5fd).
$ git branch
* main
終わりに
今回はプルリクエストを取り込むという内容よりも、Gitのコンフリクトと格闘した内容がメインでした。
これからプルリクエストを取り込んでコンフリクトが起きることは多々あると思いますが、冷静
に対応していきたいと思います。