本家のリポジトリから、コードブロックのカラーを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 rootrootで登録しています
git remote add root https://github.com/otoyo/easy-notion-blog続いて、対象のプルリクエストのCommitsのページに移動します。
コミットをgit cherry-pickで一つずつ取り込みます。
今回は6つです。
まずは一番上のコミットを取り込みます。
成功しました。
$ 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でコンフリクトが起きた場所を確認します。
上が取り込み前のコード（Current Change）、下が取り込み後のコード（Incoming Change）です。
今回は取り込み後のコード（Incoming Change）を採用したいので、「Accept Incoming Change」をクリックします。
これでコンフリクトが解消されました！
と言いたいところですが、エラーが出ました。
確認してみると、「RichTextが定義されていない」とエラーが出ています。
「コンフリクトは解消したはずなのに。。。」と思いつつ、原因を探します。
今回取り込んだコミットの内容をGitHubで確認してみます。
RichTextをクリックすると、以下のような内容が出てきました。
どうやら、どこかにRichTextが定義されていそうです。
VS Codeでsrc\lib\notion\interfaces.tsを確認してみると、RichTextがexportされていました。
エラーが出ているsrc\components\notion-blocks\code.tsxをGitHubで見てみると、RichTextをimportしていたので、自分のリポジトリでも同様の内容を追加します。
import { RichText } from '../../lib/notion/interfaces'しかし、まだエラーが出ています。
このエラーを解消するためには、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.css5つ目はコンフリクトが発生しました。
$ 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」をクリックすると、変更前と変更後のコードが比較できます。
左が今のコード、右が取り込もうとしているコードです。
基本的には、変更後のコードを採用していきます。
この画面は読み取り専用の画面なので、コピペで変更後のコードを貼り付けていきました。
しかし1箇所のみ、自分で変更したコードを採用します。
区切り線のCSSです。
区切り線のコードは自分のコードを採用し、無事コンフリクトを解消することができました。
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左が変更前、右が変更後です。
色がいい感じに変更できています。
コミットを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個進んでいます。
git log --oneline --graphでも履歴を見てみます。
リベースをしたので、履歴が枝分かれせず、まっすぐになっています。
mainブランチに切り替えます。
$ git switch main
Switched to branch 'main'
Your branch is up to date with 'origin/main'.もう一度、git log --onlineで確認してみると、featureブランチで取り込んだコミットはありません。
featureブランチがmainブランチよりも進んでいるためです。
ファストフォワードマージをします。
$ 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.cssmainブランチに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のコンフリクトと格闘した内容がメインでした。
これからプルリクエストを取り込んでコンフリクトが起きることは多々あると思いますが、冷静
に対応していきたいと思います。