Eyes, JAPAN Blog > 【SourceTree初心者向け】 更新作業の操作まとめ

【SourceTree初心者向け】 更新作業の操作まとめ

ishii

変更履歴が管理でき複数人数でプロジェクトを進める場合便利なSourceTreeですが、コミット、プッシュなど特徴的な言葉もあり初めは操作を覚えるのが困難でした。
しかし更新作業を行う中で少しずつ操作の流れを理解しはじめることができたので、SourceTreeを使いはじめの初心者にも分かるよう更新作業を例に操作をまとめました。
[作業環境:Mac  ※Windowsとは画面が異なる場合がございます。]

・Gitについてはこちらの記事もご覧ください。
【用語解説編】Gitの理解に苦労したので、解説してみる

Git、SourceTreeとは

Gitはローカルの変更履歴を管理する際に使用されるバージョン管理システムです。
特に複数人でWebの更新をする際は、誰が何をいつ変更したかが分かるため二重の作業等を防ぐことが出来ます。

今回使用するSourceTree(ソースツリー)は本来Gitコマンドを打つ操作がボタンを押すだけで実行できるGitクライアントソフトです。
特にコマンド操作に慣れていない非エンジニアにとって視覚的に管理管理が出来るためとても便利です。

基本情報

「テキストファイルの更新」を例に進めていきます。

今回は更新作業の説明のためクローン(ローカルに変更を加えるファイルを入れ込んだ状態)の後からになります。
※SourceTreeの導入方法は検索すると記事も多くありますので参照ください。

<ブランチについて>
変更を加える前にブランチ(変更履歴の保存場所)を作成するのですが、ここでは3つのブランチが登場します。
・master(メイン)
・develop(開発用)
・feature(作業用)

なぜ3つのブランチを使用するのかとややこしく感じますが、それぞれに()内の役割がありfeatureブランチは複数人数で開発する場合、各々の変更をdevelopにまとめることができます。
※矢印のようにファイルが動くイメージです。

SourceTreeの操作

1. masterブランチから切り離し、developブランチを作成する

※既にdevelopブランチが作成してある場合は次の項目に進んでください。
・masterブランチを右クリックでチェックアウトを選択します。(既にチェックアウトしてる場合は選択出来ないようになっています。)
・次に上部の「ブランチ」マークから新規のdevelopブランチを作成します。名前を入れて作成でOKです。

2. developブランチから切り離し、featureブランチを作成する

前述した様に、複数人数で開発する場合featureブランチを作成することで管理がしやすくなります。
先程と同じ手順で新規ブランチを作成します。
・developからチェックアウト→「ブランチ」マークから作成

ここでブランチの名称なのですが、feature/◯◯◯ としましょう(◯には自由な名前を入れてください。)
featureは下画像のアイコンの通りフォルダの様なイメージです。
この例では feature/test としましたが、もう1つ feature/test2… を作った際、2つのブランチをdevelopにまとめることが出来ます。
複数人数で管理がしやすくなるというのは、featureというフォルダに各々の変更ファイルをまとめることができるからです。

3. 変更を加える

クローンしたファイルへ変更を加えます。
ここで見落としがちなのですが、自分が今どのブランチにいるかを確認してください。
該当ブランチ名をダブルクリックするとマークが付きます。(下画像参照)
これが選択された状態です。この状態でファイルに変更を加えます。
変更を加えたいブランチ(ここではfeature/test)が選択されていないと異なる場所に反映されてしまいますので最初にチェックしておきましょう。

変更を加えるとSourceTree上ではUncommitted changesが作られます。
また上部左上のコミットマークに変更ファイル数が表示されるようになります。

4. コミットする

コミットは先程作成したブランチに変更内容を載せる作業です。
※ここでも自分が該当ブランチにいるか確認してみてください。

・コミットマークを選択するとこの内容で変更を加えていいか確認画面が出てきます。
・ここでは何を変更したかをコメントします。このコメントはSourceTreeの画面に表示されるので前回どの様な変更を加えたのか探すのに役立ちます。

5. プッシュする

次にコミットしたものをdevelopへ繋げる作業になります。
プッシュのイメージは先程コミットしたfeatureの内容をdevelopへ向けて押し出す作業です。

・プッシュマークから押し出すfeatureブランチを選択、OKでプッシュします。

6. developへマージする

マージとはブランチを繋げる作業です。フォルダを共有場所へ保存する様なイメージです。

・これから繋げる先であるdevelopをダブルクリックで選択された状態にし、feature/◯◯◯上で右クリック。「◯◯◯をdevelopへマージ」を選択してください。
developへマージするとで変更履歴が保存されるため、他の人がまたdevelopブランチから切って変更内容が加えられた所から作業をすることが出来ます。

7. masterへマージする

最後にメインのブランチであるmasterへマージします。
なおmasterへのマージは細かい変更を行ったまとめとして行うことが多いのでdevelop、featureで完結する場合もあります。

・繋げる先のmasterを選択されている状態にしdevelopを右クリック。「developをmasterへマージ」を選択してください。

これで変更作業は終了です。

最後に

今回は「Webサイトで文章の更新」を例にソースツリーで更新を行う際の基本操作をまとめました。
聞き慣れない言葉があり最初はイメージが掴みにくいですが一つひとつ確認しながら作業を重ねていくと理解を深めることができると思います。

  • このエントリーをはてなブックマークに追加

Comments are closed.