プログラミングの入門なら基礎から学べるProgate[プロゲート]ログイン新規登録レッスン一覧ヘルプGitなんて怖くない!超初心者向け、SourceTreeの使い方はじめの一歩!今回はGitを視覚的に操作できる、SourceTreeというツールをご紹介します。初心者はターミナル(Windowsならコマンドプロンプトと呼びます)で、コマンドを使ってGitを操作するのが難しいと感じてしまうこともあると思います。以下のステップを踏んでいきます。SourceTreeのインストール】それでは早速SourceTreeをインストールしていきましょう!SourceTreeはこちらのサイト(https://ja.atlassian.com/software/sourcetree/overview/)でダウンロードできます。下図のように、Mac用かWindows用を選ぶ箇所があるので、お使いの環境に合わせてダウンロードボタンを押してください。ダウンロードできましたでしょうか?ダウンロードができたら、ダウンロードしたファイルを開いてください。ここからはWindowsとMacで多少違う箇所があるので、別々に説明します。Windowsの場合ダウンロードしたファイルをクリックすると、「インストールウィザード」が開きます。以下の図に沿って進んでいきましょう。インストールが始まります。終わるまでしばし待ちましょう。下図のような画面が表示されれば、インストールの成功です。SourceTree」にチェックをいれて、Finishボタンをクリックしましょう。次にMacでのインストールを見てみましょう。ほとんどはWindowsのときと共通しているので、適宜「Windowsの場合」を参考にしてください。SourceTreeのサイトからMac用をダウンロードしたら、それを開きましょう。下図は「開く」をクリックします。こちらは試用版で問題ありませんので、そのまま進みましょう。SourceTreeのセットアップ】インストールが完了しSourceTreeを立ち上げたら、最初のセットアップを行います。下図のような画面が表示されますので、全てにチェックマークをいれて続行!すると下図のようになにやらダウンロードが始まります。完了したら「次へ」ボタンを押します。今回は下のアカウント設定は不要です。スキップしてください。続いても迷わず「No」を選択。SourceTreeの画面が表示されます。SourceTreeを使ってみる】それでは実際にSourceTreeを使ってみましょう。MacとWindowsでは、SourceTreeのデザインにはそこまでデザインの違いはありません。以下は基本的にWindowsの画面で進めていきます。やることは、「SourceTreeでGitを操作したいプロジェクトを選択し、SourceTreeで表示する」という作業です。これをSourceTreeは、ドラッグアンドドロップという非常に直感的な操作で実現してくれます。下図の赤枠を見てみましょう。ここに「Gitで管理している開発中のプロジェクトのフォルダ」をドラッグアンドドロップします(Macの場合は、ドロップする画面が別ウィンドウになっています)。Macの場合は、下図を参考にしてください。これで、Gitで管理されたプロジェクトをSourceTreeで表示し、SourceTree上でGitを操作する準備ができました。Gitには多くの機能があり、それゆえSourceTreeも豊富な機能を備えています。Gitのごくごく初歩的な機能だけを見てみましょう。そのほかの機能はいまはあまり気にしなくて大丈夫です!以下、SourceTreeの基本的な見方と、以下の3つのコマンドの操作方法を見ていきます。push・・・コミットされたファイルやフォルダをリモート(ここではGitHub)にプッシュするそれでは順に見ていきましょう!変更内容を確認するまず「作業コピー」で、現在のプロジェクトの状況を確認できます。前回のコミット以降変更がなければ、下図のようにきれいさっぱりなにもありません。そこで実際にプロジェクトの内容を少し変更してみましょう。ここでは、index.htmlとstylesheet.cssの内容を少しいじってみます。SourceTreeに戻って、「作業コピー」を見てみます。すると今度は、下図の赤枠の部分にindex.htmlとstylesheet.cssが現れました!ここには、変更されたファイルの一覧が表示されます。下図のように、右側の部分で選択中のファイルの変更内容を見ることができます。非常にわかりやすいですね!ここの「作業ツリーのファイル」とはまだ「add」されていない変更のことです。addするそれではこの変更を、addしてみましょう。ファイル名の左横の「チェックボックスにチェック」をいれるか、「hunkをステージへ移動」をクリックするだけでaddが完了します。addされると先ほどのファイルは下図のように「indexにステージしたファイル」に移動します。下図のようにaddしたり、反対にaddを取り消したり、というのも自由自在です。ちなみに、「作業ツリーのファイル」の左のチェックを入れると、変更されたファイル全てを一度にaddすることができます。commitするaddが完了したら、次はcommitをしてみましょう。commitするにはツールバーにある「コミット」ボタンを押します。"コミットメッセージ"というのがコミットするときのコマンドでしたね。このように、commitする時は、何のための変更なのかがわかるように、コミットメッセージというメモを残します。SourceTreeでは下図のフォームにコミットメッセージを入力します。コミットメッセージを入力したら、下部のコミットボタンをクリックします。これでコミットが完成します!ここまで皆様大丈夫でしょうか?最初は何やらボタンがいっぱいあったり、わけもわからない情報がいっぱいあって、戸惑ったかと思いますが、非常にシンプルではないでしょうか?最後にpushの仕方を見ていきます。pushするコミットが完了したら、ツールバーのプッシュボタンを押しましょう。すると下図のように画面がポップアップで表示されます。GitHubのリモートリポジトリと紐付けている方は下図のような画面が表示されると思います。masterのチェックボックスにチェックをいれ、「OK」を押しましょう。ちなみにMacだと少しデザインが異なります。下図を参考にしてください。これでプッシュが完了です。masterというコマンドと同じです(「origin」の部分は各自で決めたremoteの名前が入ります)。初回だけ下図のようなものが表示され、GitHubのユーザー名とパスワードを求められます。pushの一連の操作は終了です。最後にpushしたものがちゃんとGitHubに反映されているか確認してみましょう。いかがでしたでしょうか?Gitは何をやっているかよくわからなくて怖い。基づく表示プライバシーポリシーSNSFacebookTwitter法人向けサービス企業のプログラミング研修を支援する、法人のお客様向けの利用プランです。