ノウハウ

BubbleのMergeとSyncとHotfixの違いを知ろう!複数人でチーム開発する際のブランチ管理方法

Bubbleで使うMerge、Sync、Hotfixの違い

複数人で開発する際にはブランチ(branch)を作って開発することが多くなります。MergeSync、はたまたLiveで作成できるHotfixブランチ。違いを理解して使っていますか?

先日X(Twitter)でもこのような投稿を見かけました。

“Sync with Mainのボタンは、Mainから(pull)取り込むのか、Mainへpushするのか、どちらかわかりません”

さるくん
さるくん
よくわからないものは使用を避けたい気持ち、よくわかります。

上記の質問は「Pull」や「Push」が使われています。PullやPushも過去にエンジニア経験が無いとちょっとわかりにくい単語です。

今回はこれらの違いをエンジニア未経験の方にもわかりやすく解説していきます。

ブランチについて

まずはbranch(ブランチ)についてです。ブランチは理解できている方が多そうですがBubbleのブランチについて再度確認をしておきましょう!

ブランチはGrowthプラン以上で作成が可能です。プランによってブランチの上限数が異なり、Growhプランの場合は合計10個まで作ることができます。Enterpriseプランだと150個。プランによってかなりの差があります。

ブランチとは

異なるバージョンを作ることで、既存のアプリに影響を与えることなく作業を行うことができるようになります。木の枝(ブランチ)のようにMain(メイン)から分岐させ、例えばバク修正や新機能の開発を行います。

Mainから複数分岐させたり(左例)、ブランチからそのまた子ブランチを作ることもできます(右例)↓

分岐させたい元のブランチを選択し「Create a new brannch」のボタンをクリックします。下の右例「bug-toppage」は bug-fixを選択しそこから子ブランチを作成しました。

複数人で一つのアプリを開発する場合は「Main」での開発/変更/修正は行わず、ブランチを作成し各自がそれぞれのブランチで作業を行うと管理がしやすくなります。

Mainブランチは他ブランチと意味合いが異なります。最重要ブランチでLive(本番)環境へのDeploy(反映)はMainブランチからしか行えません。

つまり子ブランチを複数作り開発しても本番Deploy前にはMainへMergeすることになります。そのためMainブランチは作業を行うブランチではなく、Deploy用用(=Liveと同じ)としておくことが望ましいです。

*ブランチを作ることができないStarterプランは開発もバグ修正も全てMainブランチで行います。

Merge change from another branch (マージ)とは?

ブランチを作って開発していたものを他ブランチに取り込む際に Mergeを行います。

Merge(マージ)とは

他ブランチで行った修正や新しい機能などをを取り込む際に行われます。

例えば修正をbug-fixという名前のブランチで行います。完了した際にこの変更をMainブランチに取り込みます。これをMerge(マージ)と言います。

bug-fixブランチでの修正をMainにMergeする↓

STEP

①取り込む側のブランチを選択(Main)
②「Merge changes from another branch」ボタンをクリック
③どのブランチから取り込むかを選択
④確認メッセージが表示されるので「Continue」を押す
⑤変更内容とConflict(衝突)のチェックが行われるので問題なければ「Confirm changes」や「Continue」をクリックし進める
⑥最終確認のメッセージが表示させるので「Confirm」を押しMergeが完了

Merge (マージ)の方法を動画でも解説↓

Sync with Main や Sync with Live (シンク)とは?

自分のブランチがMainブランチやLiveブランチから「遅れている」ときにSync(同期)を行います。

Sync(同期)とは

作業を行なっている自分のブランチが Mainブランチや Liveから遅れている場合に、遅れた分の変更を取り込む際に行われます。

例えば以下のケースでSyncが必要になります。

  • あるAブランチで開発したものを→Mainにマージ。しかしBブランチにはMainにマージされた変更が反映されていない(Mainから遅れをとっている)
  • あるAブランチで開発したものを→Mainにマージ→その後すぐにLiveへDeploy(本番反映)を行う。しかしBブランチにはLiveへの変更が反映されていない(Liveから遅れをとっている)
  • Mainブランチで変更/修正し→その後LiveへDeploy(本番反映)する。しかしその他全てのブランチでその変更が反映されていない(Liveから遅れをとっている)

Syncの方法↓

STEP (MainブランチからのSyncの場合)

①変更を取り込みたいブランチを選択
②「Sync with Main」ボタンをクリック

④確認メッセージが表示されるので「Continue」を押す
⑤変更内容とConflict(衝突)のチェックが行われるので問題なければ「Confirm changes」や「Continue」をクリックし進める
⑥最終確認のメッセージが表示させるので「Confirm」を押しSyncを完了

STEP (LiveからのSyncの場合)

①変更を取り込みたいブランチを選択
エラーが表示されているので右横の青フォント「Sync」をクリック

④確認メッセージが表示されるので「Continue」を押す
⑤変更内容とConflict(衝突)のチェックが行われるので問題なければ「Confirm changes」や「Continue」をクリックし進める
⑥最終確認のメッセージが表示させるので「Confirm」を押しSyncを完了

Growth以上のプランに出会ったらとにかくMergeやSyncを試してみてください。数回試すと理解できるようになります。

Hotfix (ホットフィックス)とは?

次はHotfixです。単語にfixが付いているので何かを「直すこと」と推測ができます。

Hotfix(ホットフィックス)とは

通常の開発やバグ修正は、Development(開発環境)で行われます。クライアント等も含め十分に確認をとった後にLive(本番)ヘDeployします。

しかし以下のような迅速に対処する必要があるケースではLive(本番)でブランチを作り修正を行い、そのまますぐに本番に反映させます。これをHotfixと言います。

緊急のバグ修正が必要な場合、特にアプリケーションの正常な動作に影響を与える場合
セキュリティ上の脆弱性が見つかった場合
・データの整合性に影響を与える場合

Hotfix の方法↓

STEP

①Liveで行います。Liveをクリック
②「Create a hotfix」ボタンをクリック

④「Create a hotfix」の確認メッセージが表示されるので「Confirm」を押す。
*Hotfixブランチが作成されそこで修正作業を行います。Hotfixブランチが存在する間はMainブランチからは動作を行えません

⑤hotfix用のエディタが表示されるので、そこで緊急の修正を行います。
⑥修正が完了したら「Deploy to Live」をクリックし修正の内容をDescriptionに記載します。
⑥Deployの完了メッセージが表示されればHotfixは完了です。

👉 最後に忘れてはいけないのが、Mainやその他のブランチにLiveの変更をSyncすることです。

Hotfix (ホトフィックス)の方法を動画でも解説↓

History タブで今までDeployされた履歴を辿ることができます。必要があれば過去のDeployポイントRestore(復元)することも可。(プランにより復元可能な日数は異なります。Growthプランの場合は14日前まで)

ただし LiveからのRestoreやHotfixは「本当に緊急性がある時だけ」にとどめます。開発環境のMergeやSyncのとは異なり、変更内容の確認Conflict(衝突)のチェックが行われません。確認なしに本番へ反映されてしまうためシステムに予期しない不具合が生じる可能性があります。Liveからの変更は慎重に行いましょう。

複数人で開発する際に私が気をつけていること

さるくん
さるくん
チーム開発する際に気をつけているポイントです!参考にどうぞ!

  • Mainブランチでの作業は基本行わない
    MainからのみLiveへDeployできるため、Mainはいつでも使用できるよう待機させておく。Mainブランチ=Liveブランチにしておく。
  • 一つのブランチに1人の開発者
    一つのブランチで複数の開発者が作業するのを避ける。必要ならブランチを分ける。
  • ブランチの開発が完了したら、Mainへマージし他の開発者へ伝える
    他の開発者はMainからSyncし自分のブランチに変更を取り入れる。
  • Deployが完了し不必要になったブランチはDelete(削除)する
    誤った使用を避ける、またGrowthプランの場合ブランチの上限数(10)にすぐに達してしまうため。

Bubble開発者さんで他に気をつけていることがあれば是非教えてください^^

まとめ:MergeとSyncとHotfixの違い

Merge、Sync、Hotfixの違いを解説してきました。

ミニまとめ

Merge他ブランチで行った修正や新しい機能などをを自分のブランチに取り込むこと
SyncMainブランチやLiveブランチとの差異(遅れ分)を自分のブランチに取り込むこと
Hotfix:緊急性がある修正をLiveのHotfixブランチで行い、そのままLiveへDeployすること

Bubbleはコードを書くプログラミング同様、ブランチを分けることで既存のアプリに影響を与えず検証や新機能を追加できるようになっています。Mergeの際の確認やConflictの画面もとても見やすく直感的に扱えるので理解し問題なく使えるようになっておきましょう。Hotfixだけは使用の際に十分お気を付けください。

知れば知るほど楽しくなるBubble!
今日も一歩前進、楽しんでいきましょう^^


Bubble構築のご相談や代行も承っております。
お気軽にご連絡ください。

お問い合わせはこちら

ABOUT ME
おばとりっぷ
専業Bubbleエンジニア▷元webデザイナー/ディレクター▷CSSをBubbleに実装するのが得意▷日本国内のトップBubbleエンジニアとしてwebアプリ開発に携わる▷Bubble講師▷フルスクラッチ開発のアプリで起業した経験あり▷スタートアップ・起業家のBubbleアプリ開発の支援を積極的に行う。