チャベログ

easy-notion-blogでコードブロックの色付けを変更する ~中身はほぼGitコンフリクト対応の備忘録~

画像が読み込まれない場合はページを更新してみてください。

本家のリポジトリから、コードブロックのカラーをNotionっぽい色付けに変更するプルリクがありました。

今回は、以下のプルリクを取り込んだ経緯の備忘録です。

筆者にとっては、初のコンフリクトでした。

ブランチを切り替える

Git初心者ということで、順を追って書いていきます。

まずはブランチを切ります。

$ git branch feature

ブランチを確認します。

ちゃんとブランチが作成されています。

$ git branch
  feature
* main

ブランチを切り替えます。

$ git switch feature
Switched to branch 'feature'

これでfeatureブランチに切り替えることができました。

💡
ブランチの作成と切り替えを同時に行う場合 git switch -c ブランチ名
💡
git checkoutgit switchの違い git checkoutはブランチを切り替える以外にも、コミットを復元するなど多機能です。 git switchgit checkoutからブランチの切り替え機能を切り出したイメージです。

プルリクエストを取り込む

まずは本家easy-notion-blogリポジトリの最新の情報を取得します。

$ git fetch root
💡
自分の場合、本家リモートリポジトリをrootで登録しています 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".
💡
コンフリクトとは 同じ場所で、取り込み前のコードと取り込み後のコードの内容が違う場合に起こります。 Gitはどちらを取り込んだら良いかわからないので、自分で修正する必要があります。

VS Codeでコンフリクトが起きた場所を確認します。

画像が読み込まれない場合はページを更新してみてください。

上が取り込み前のコード(Current Change)、下が取り込み後のコード(Incoming Change)です。

今回は取り込み後のコード(Incoming Change)を採用したいので、「Accept Incoming Change」をクリックします。

画像が読み込まれない場合はページを更新してみてください。

これでコンフリクトが解消されました!

と言いたいところですが、エラーが出ました。

確認してみると、「RichTextが定義されていない」とエラーが出ています。

画像が読み込まれない場合はページを更新してみてください。

「コンフリクトは解消したはずなのに。。。」と思いつつ、原因を探します。

今回取り込んだコミットの内容をGitHubで確認してみます。

RichTextをクリックすると、以下のような内容が出てきました。

どうやら、どこかにRichTextが定義されていそうです。

画像が読み込まれない場合はページを更新してみてください。

VS Codeでsrc\lib\notion\interfaces.tsを確認してみると、RichTextexportされていました。

画像が読み込まれない場合はページを更新してみてください。

エラーが出ているsrc\components\notion-blocks\code.tsxをGitHubで見てみると、RichTextimportしていたので、自分のリポジトリでも同様の内容を追加します。

import { RichText } from '../../lib/notion/interfaces'

しかし、まだエラーが出ています。

画像が読み込まれない場合はページを更新してみてください。

このエラーを解消するためには、git addgit commitが必要でした。

$ git add .
$ git commit -m "Import language"

これでようやく、エラーが解消できました。

🤔
なぜエラーが発生したのか? 正直原因はわかっていません。 自分のコードにはimport { RichText } from '../../lib/notion/interfaces'はありませんでしたが、取り込んだコミットにはあったはず。 この部分はコンフリクトしていないので、git cherry-pickで取り込めたはず。。。
💡
後日追記 上記は自分の勘違いであり、code.tsxの差分を全て取り込むと勘違いしていました。 しかし、今回のコミットに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」をクリックすると、変更前と変更後のコードが比較できます。

画像が読み込まれない場合はページを更新してみてください。

左が今のコード、右が取り込もうとしているコードです。

画像が読み込まれない場合はページを更新してみてください。

基本的には、変更後のコードを採用していきます。

この画面は読み取り専用の画面なので、コピペで変更後のコードを貼り付けていきました。

しかし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.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のコンフリクトと格闘した内容がメインでした。

これからプルリクエストを取り込んでコンフリクトが起きることは多々あると思いますが、冷静

に対応していきたいと思います。

参考