こんにちわ、エンジニアのオオバです。

更新した画像をSourcetreeでプッシュできない!!

言い換えると
更新した画像がGitHubにアップロードできない!!

こういうトラブル起きますよね。

もしかすると、他の人と
同じタイミングで同じ画像を編集 しているのかも。

作業がかぶるとGitHubに作業をアップロードできないのです。

本記事は 作業がかぶって途方にくれている方 に向けて、
具体的な解決方法を解説します。

どちらかの作業を捨てる

結論を簡単にまとめます。

画像の編集作業がコンフリクトすると、
解決はできません

悲しいのですが
どちらかの作業を捨てて前に進みましょう。

コンフリクトを解決する具体的な方法
Sourcetreeを使って紹介します。

この記事の内容

コンフリクトする状況を理解しよう

まずはコンフリクトする状況を理解しましょう。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_0

この2つ、ともにimage.pngを編集します。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_1

work_aブランチが先にコミット、プッシュ、マージされました。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_2

work_bもimage.pngを編集して
コミット、プッシュ、プルリク作成まで進めます。

プルリク作成時、いつもと画面が違います。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_3

コンフリクトしているファイルは
image.png ということになります。

これがコンフリクトです。
同タイミングで同じ画像ファイルを編集 すると起きます。

コンフリクトしたら作業環境の最新化

ここからは残酷的な作業の削除です。
これをやらないと仕事が前に進まないため、
ドライに進めていきましょう。

まずは自分(Bさん)の 環境を最新化 します。
最新化はプルでしたね。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_4

プルをクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_5

プルするリモートのブランチmainブランチ にします。
これでmainブランチの内容が
自分のブランチ(work_bブランチ)に取り込まれます。

しかし、、、

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_6

ここで マージの競合 というダイアログが登場。
OKをクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_7

すると、左側のラインが グレー になりましたよね。

コンフリクト状態したでということです。
Uncommitted changes を選択しましょう。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_8

するとビックリマークのついたファイルが登場します。
ビックリマークがコンフリクトしているファイルの証。

コンフリクトした image.pngを解決していきます。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_9

ここから2つの選択肢が現れます。

自分、または相手、
どちらの作業を残すかということです。

パターンA. 自分の作業の削除

相手(Aさん)の作業を残す場合です。
つまり自分(Bさん)の作業を削除します。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_10

競合を解決 > 相手の変更内容で解決 をクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_11

OK ボタンをクリック。

パターンB. 相手の作業の削除

自分(Bさん)の作業を残す場合です。
つまり相手(Aさん)の作業を削除します。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_12

競合を解決 > 自身の変更内容で解決 をクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_13

OK ボタンをクリック。

コンフリクトが解決

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_14

このように左のグレーの線がなくなりました。

パターンA、Bどちらを選んでも
ここからの作業は同じです。

コミットして作業環境の最新化は完了

コンフリクトの解決を含めた内容をコミットして、
初めて 自分の作業環境は最新化 されます。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_15

いつもどおりコミットをクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_16

すると作業内容(コミットメッセージ)に
なにやら記載があります。

コンフリクトを解決したメッセージ
自動で挿入されているだけなので、無視して大丈夫です。

そのまま コミット ボタンをクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_17

すると origin/master ブランチが
work_bブランチに取り込まれました。
これでようやく作業環境が最新化されました。

つまり、 コンフリクトしたあとのプルがここで完了した ということです。

プッシュボタン をクリックします。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_18

work_bの作業内容をアップロードします。
OK ボタンをクリック。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_19

GitHubのページを見てみましょう。

このようにいつもの平和な画面が表示されました。

もし、自分自身の作業を削除した場合は、
このプルリクは残したままで大丈夫。

再び画像編集作業してコミット、プッシュ。

その後このプルリクをマージすればよいです。

まとめ : Sourcetreeでコンフリクトを直すのは簡単

記事の内容を簡単にまとめます。

こんな感じです。

コンフリクトが起きるとどうしても余計な手間が発生します。
できるかぎり コンフリクトが起きない体制 が大事。

よくある方法は、
ファイルをさわるまえに一声かけること。

Slackでこんな感じで共有します。

【UIデザイナー向け】Sourcetreeでコンフリクトを直す方法_20

しかし、 どうしてもコンフリクトが発生 することはあります。
そのときための解決方法として
本記事を参考にしていただければと思います。

基本はエンジニアにお願いするケースが多いと思います。
ただUIデザイナー自身で解決できると、
エンジニア的には すごいな って思いますね。

ぜひ 自分でコンフリクト解決 を試してみてはいかがでしょうか。


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

最後まで読んでいただきありがとうございました!
すばらしいGitHubライフをお過ごしください。

オススメ記事