非エンジニアでもSourceTreeを使えば超簡単にGitでのバージョン管理ができる


   
みなさん、こんにちは!
引き続きGitの魅力にぞっこんのタカハシ(@ntakahashi0505)です。

さあ今回もステキなバージョン管理Gitについてのお話です。

Gitを使うとファイルを山ほど作らなくても、たった一つのファイルのままでその履歴を記録したり、前のバージョンに戻したり、分岐をさせてみたりというのが自在に行うことができます。

こちらの記事でそのあたりのことを紹介していますよ。

非エンジニアのためのバージョン管理Git~メリットと導入前の準備
バージョン管理システムGitについてお一人様かつ非エンジニアの皆さんがいざやってみようというときに読んで頂きたい記事です。Gitでできることと魅力、導入前に参考になるサイトなど紹介していきます。

ですが、本来はCUI、つまり真っ黒のコンソール画面で利用するツールで、エンジニアの皆さんはそれでガリガリ使ってらっしゃるのですが、いささか非エンジニアにはとっつきづらいですよね…。

今回はそんな非エンジニアでGit初心者の皆さんのために、SourceTreeというGitクライアントツールの使い方を解説しながら、リポジトリ、コミットなどのGitのバージョン管理の仕方についてお伝えしていきたいと思います。

スポンサーリンク

GitクライアントツールSourceTree

SourceTreeはWindows/Macで使えるGitのデスクトップクライアントです。なんと無料です。

お話してきたように、Gitをそのまま使おうとすると、真っ黒のコンソール画面でコマンドを打っていかないといけません。

ですが、このSourceTreeを使うと、非エンジニアでもとっつきやすいグラフィカルなインタフェースでGitを操作できるようになります。

そしてWindows版でも日本語化されました…ヤッター!

余談ですが、以前はTortoiseGitという別のGitクライアントを使っていました。このツールも今となっては良い味を出していたのですが、SourceTreeのほうが圧倒的に初心者には向いていますね…。

ということで、使わない手はないと思いますので、さっそくインストールしていきましょう。

SourceTreeのインストール

こちらのリンクからSourceTreeのダウンロードページへ行きましょう。

Sourcetree | Free Git GUI for Mac and Windows
A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac.

言われるまでもないですが、真ん中の「Douwnload Source Tree Free」ボタンをクリック。

SourceTreeをダウンロード

ダウンロードしたインストールをダブルクリックしてインストールをしましょう。

途中、「アカウントを追加」で「Bitbucketのアカウントをお持ちでない場合は無料でサインアップできます」などと聞かれるかも知れませんが、スキップしちゃってOKです。

また「SSHキーを読み込みますか?」ともきかれますが、「No」にしちゃってOKです。

あとは問題なくインストールができると思います。

ちなみに、Git自体をインストールしていない場合は一緒にインストールすることができます。

その場合は、途中でいくつかの選択肢があるのですが、こちらの記事を参考にしていただければと思います。

WindowsにGitをインストールする
まずはGitをインストールします。次のURLにアクセスし、OSに合ったインストーラーをダウンロード。...

SourceTreeでリポジトリを作成

ではSourceTreeを立ち上げてみましょう。

SourceTreeの初期画面

最初はこんな画面です。何をしていいかわかりませんね…。

まずGitでバージョン管理をする際は、リポジトリというものを準備する必要があります。

リ、リポジ…何それ?って感じだと思うのですが

リポジトリとは、ファイルやディレクトリの状態を記録する場所です。 保存された状態は、内容の変更履歴として格納されています。 変更履歴を管理したいディレクトリをリポジトリの管理下に置くことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができます。
引用:サルでもわかるGit入門

わかりやすいですね。

要はGitでバージョン管理をする対象のディレクトリを決めて、そのディレクトリの状態や変更履歴を記録する場所としてのリポジトリを用意しないと始まらないということです。

ではSourceTreeで実際にリポジトリを作成してみましょう。今回はデスクトップに「SourceTree練習」というフォルダを作ったので、そのフォルダ内をGitの管理下に置きます。

左上の「新規/クローンを作成する」アイコンをクリック、開いたウィンドウから「リポジトリを作成」タブを選択、「保存先のパス」に先ほど作成した「SourceTree練習」へのパスを指定して「作成」です。

SourceTreeでリポジトリの作成

これでリポジトリを作成できまして、ウィンドウの左側に指定したディレクトリが表示されます。

SourceTreeでリポジトリが作成された

この「エクスプローラーで開く」ボタンで対象のディレクトリを開くことができます。

ちなみに、このリポジトリの作成をコンソールで実行する場合のコマンドは

git init

で、現在いるディレクトリをGitの管理下に置くということです。コマンドだけ見ると簡単ですが…。

SourceTreeで初めてのコミットをしてみる

では実際にSourceTreeを使ってバージョン管理をしてみましょう。

適当にファイルを作って、先ほどGit管理下に置いたフォルダに格納してみます。

なんてことないファイルですが、sample.txtというファイルにTest1とだけ書いてみました。

サンプルテキストファイル

これを先ほどのGit管理下のフォルダに保存してみるとSourceTreeでは「ファイルステータス」の「作業コピー」の画面に保存されたファイルが出現します。

Git管理下に新規ファイルを保存

下側に作成したファイルsample.txtが表示されていて、右側にその内容が表示されていると思います。

では、この状態をコミットしていきます。コミットはこのディレクトリの変更や追加についてのリポジトリに記録することです。

コミットは作業を進めていく上でポイントポイントで都度実行していきます。このコミットのポイントが個々のバージョンということになりますね。Gitではこのコミットをした場所をマイルストーンとして前回との差分を見たり、その場所に戻ったりということを実現することができます。

では実際にSourceTreeでコミットをしていきましょう。

sample.txtですがチェックボックスがありますので選択をします。すると、「作業ツリーのファイル」というエリアから「Indexにステージしたファイル」というエリアに移動します。

それがこの状態です。

SourceTreeでコミットをする

画面下のほうに「コミットメッセージ」というテキストボックスがありますので、そこでメッセージを打ち込みます。このコミットメッセージがそのコミットのタイトルや説明になりますので、後で見返したときにわかりやすい内容にしておくのが良いです。

今回は「Test1を追加」としました。そして「コミット」ボタンをクリック。

「ブランチ」の「master」という画面でコミットとその内容を確認することができます。

SourceTreeでコミット

これで初めてのコミットは完了です。

ちなみに、この作業をコンソールで実行する場合のコマンドは

git add sample.txt
git commit

とするそうです。addはステージングに上げるというコマンドで、SourceTreeでいうと「作業ツリーのファイル」というエリアから「Indexにステージしたファイル」というエリアに移動させるのと一緒です。

いつか使うときが来るんですかね…?まあ、いいや。

まとめ

今回は非エンジニアのGit初心者向けということでSourceTreeのインストール、リポジトリの作成、そして最初のコミットまで進みました。

少し難しく見えるGitですが、リポジトリを作成した後は、いつもと同じように作業を進めて行って、適当な切りの良いタイミングでコミットをしてくというのを繰り返すだけでOKです。

Gitでのバージョン管理の真骨頂はコミットを重ねてから、差分を見たり、特定のコミットへ戻ったり、分岐をしたりなどですので、以降の記事できっちりその魅力をお伝えできればと思います。

次回はコチラの記事でリセット、つまりバージョンを戻す方法についてお伝えしています。

SourceTreeでGit管理しているファイルのバージョンをリセットする方法
初心者でもわかるSourceTreeを使った非エンジニア向けGitバージョン管理について、今回の記事では目的のバージョンに戻すコミットのリセット方法とオプションの使い分け方についてお伝えします。

どうぞお楽しみに!

連載目次:非エンジニアの初心者向けSourceTreeによるGitバージョン管理

  1. 非エンジニアのためのバージョン管理Git~メリットと導入前の準備
  2. 非エンジニアでもSourceTreeを使えば超簡単にGitでのバージョン管理ができる
  3. SourceTreeでGit管理しているファイルのバージョンをリセットする方法
  4. SourceTreeでバージョン履歴を分岐したりマージしたりする方法
  5. コンフリクトって!?Gitバージョン管理でマージしたときに発生した衝突を解決する
  6. 非エンジニアのためのGitバージョン管理~BitbucketとかGitHubって何?
  7. 非エンジニアのためのGitバージョン管理~Bitbucketの登録とはじめてのプッシュ
番外編:
',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました