絶対できる!Source Treeの使い方を初心者向けに説明してみた!

侍エンジニア塾ブログ編集部


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは!侍エンジニア塾ブログ編集部です。

Git習得のためにSource Treeを使って行きたいけど、いまいち使い方がわからない!

最近、そんな声をよく聞きます。

Gitをコマンド操作ではなく、グラフィカル(クリックなどでぽちぽち)な操作で扱える「Source Tree」はGit初心者にとって大変おすすめなツールです。

しかし、いくら初心者でも扱えると言われても、わかりづらい部分もあるかと思います。

そこで今回は、初心者の方でも絶対にできるように、Source Treeの使い方をわかりやすく説明していきます!

インストールから基本的な操作方法まで詳しく解説しますので、これからGitを学習していきたい、Source Treeを使って行きたいという方はぜひ参考にしてみてください。

まずはじめに

shutterstock_226224313

Gitとは?

そもそも、「Gitってなに?」という方もいるかと思います。
そんな方はまず概要から押さえた方が良いので、こちらを参考にしてみてください。

Source Treeとは?

「Source Treeって?」という方もいるでしょう。
Source Treeとはどんなもので、なにが良いのか?という概要などをまとめた記事がありますので、気になる方はそちらも覗いてみてください。

Source Treeの使い方をみていこう!

それでは早速、Source Treeの使い方を説明していきます。
Mac/Windowsで若干違ってくるのですが、操作方法はほぼ一緒ですので、今回はMacでの説明を進めて行きます。

インストール

スクリーンショット_2016-06-15_16_21_43

まずはこちらからダウンロードを進めていきましょう。

ダウンロードしてきたdmgファイルをダブルクリックし、SourceTreeをApplicationsにドラック&ドロップするだけです。

これでインストールは完了です。

GithubやBitbucketのアカウントを持っていない方は、アカウント作成しますか?というページが出ると思います。

まだアカウントを持っていない方は、これからGitを使っていく上で便利なので、これを機にアカウントを作成しておきましょう。

手順は該当項目を埋めていくだけですので、なんら問題ないかと思います。

初期設定

インストールしたSourceTreeを起動すると、設定画面が出ます。
次の画面の、「本名」「メールアドレス」を入力してから「次の」ボタンをクリックします。
capture_intro2_2_2_mac_1

次の画面は、何も入力せずに「次の」ボタンをクリックします。

capture_intro2_2_3_mac_1

次の画面も、何も入力せずに「仕上げ」ボタンをクリックします。

capture_intro2_2_4_mac_1

これで初期設定は終了になります。
シンプルで簡単ですね。

リポジトリの作成

リポジトリとは、これから管理するファイルの入れ物のことです。

表示されたSource Treeのウィンドウの+新規リポジトリボタンを押します。

スクリーンショット_2016-06-15_16_48_04

出てくるメニューから、「ローカルリポジトリを作成」を選択しましょう。

スクリーンショット_2016-06-15_17_00_34

ここではわかりやすいように、先にフォルダを作っておきました。

同じように進めたい方は、デスクトップに Testというフォルダを作って、それを指定しましょう。

スクリーンショット_2016-06-15_17_36_24

Source Treeでリポジトリが作成されるので、それを指定します。

スクリーンショット_2016-06-15_17_16_23_1

ファイルのコミット

リポジトリに新しいファイルを作成した場合、あるいは変更した場合はその変更を反映させるためにコミットする必要があります。

ここではその手順を説明します。

まず先ほど作ったTestフォルダ内で適当なファイルを作成しましょう。

スクリーンショット_2016-06-15_17_17_47

ファイル名はなんでも大丈夫です。

ここではtest.txtとしています。

スクリーンショット_2016-06-15_17_18_03

テキストが開かれるので、なにか文字を入れて編集してみましょう。

スクリーンショット_2016-06-15_17_20_20

すると、先ほどはなにもなかったSource Tree上に編集されたファイルが表示されます。

そこにチェックを入れましょう。

スクリーンショット_2016-06-15_17_20_48

そうすると、選択したファイルが上に上がって、コミットできる準備が整いました。

スクリーンショット_2016-06-15_17_21_08

あとはコミットメッセージを書いて、ボタンを押せばコミット完了です。

スクリーンショット_2016-06-15_17_21_53

履歴を見る

リポジトリで行われたコミットの履歴を確認することができます。

視覚的にコミットのログが確認できることがSource Treeの大きなメリットでもあります。

スクリーンショット_2016-06-15_17_26_24

リモートリポジトリへPush

ローカルでコミットした内容をリモートリポジトリにpushします。
操作は簡単で、まずはプッシュボタンを押します。

スクリーンショット_2016-06-15_17_26_47

あとはリモートリポジトリのURLを指定し、プッシュするブランチを選択するだけです。

スクリーンショット_2016-06-15_17_26_33

リモートリポジトリからPull

リモートリポジトリのファイル変更等をローカルに反映させます。
こちらもプッシュと同様に、まずはプルボタンを選択します。

スクリーンショット_2016-06-15_17_24_30_1

あとはプルする元のURLを指定して、ブランチを選択するだけです。

スクリーンショット_2016-06-15_17_26_55

これで基本的な使い方は以上になります。

リモートリポジトリについてや、他の操作に関してはこちらも参考にしてみてください。

まとめ

いかがでしたか?
Source Treeのインストールから基本的な使い方などを説明してきました。

初心者の方にとってとっつきずらく感じるGitも、Source Treeを使えば、簡単に扱うことができます。

これを参考に、是非Sourcr TreeやGitを使いこなしてほしいと思います。


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

侍エンジニア塾ブログ編集部

侍エンジニア塾ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去100人以上のフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
ホームページはこちら
ツイッターはこちら
フェイスブックはこちら