LoginSignup
8
11

More than 5 years have passed since last update.

@tenko

gitがはじめてなフレンズへ向けたチュートリアル（for GitHub and SourceTree)

Last updated at Posted at 2017-02-13

gitがはじめてなフレンズへ向けたチュートリアル

※注意※
このチュートリアルは以下の条件が揃っているフレンズが対象だよ！

  1. HTMLでHelloWorldを表示させたことのあるフレンズ
  2. Gitのお勉強を少しでもして、単語の意味が軽く分かるフレンズ
  3. GitHub、アトラシアンの各アカウントが開設済みなフレンズ
  4. SourceTreeのインストールがおわっているフレンズ
  5. SSHの接続がおわっていて、gitHubからクローンが出来るフレンズ

当てはまらないフレンズはページの一番下に追記してある解説がすっごーい上手なフレンズが書いた記事を読もう！

あと、この資料を人に教える時に使ってくれるフレンズのために向けたメッセージも一番下に書いておいたよ！

それでは、仕様の確認から一気にいくよ！

仕様

・　indexページを作ってもらいます。
・　仕様が全部確定していないので、都度指示を出します。
・　"test"というリモートブランチを作成しクローンしてくること

masterブランチの作成

1.　SorceTreeを使ってクローンしてきたファイル（gitから保存したファイル）を開きます。
ここでは、"test"
方法：左側のレポジトリ名を右クリックし、エクスプローラーで表示を選択

2.　開いたファイルの中に、新たに右クリックで、新しいテキストファイルを作ります。名前は "README.md" にしてください。
方法：新規作成→テキスト文章　を選択し、名前を入力する。

3.　SourceTreeの画面に戻り、 "コミットされていない変更があります" をクリックし、左上にある　"コミットボタン" を押してください。

4.　作業ツリーのファイル　というタブの中にある、"README.md"をクリックし、真上にある"Stage All"というボタンをクリックしてください。

5.　"README.md"が上のタブ（ステージ）に移動した事を確認してから下にあるテキストエリアへ " 初回コミット "と入力　その後、コミットと書いてあるボタンをクリックしてください。

6.　左上にある”プッシュ”というボタンを押し、　masterの横にある対象にチェックを入れ、右下の”プッシュ”というボタンを押してください。

これがgitにおける1連の流れとなり、以上で、masterブランチの作成が完了しました。画像のように表示されていれば成功です！

作業用(develop)ブランチの作成

SourceTreeの画面を開いてください
先ほどクローンしてきたプロジェクトが見えると思います。
現在のあなたが居るブランチは　"ローカルのmasterブランチ"　です。
マスターは編集してはいけないのでブランチを切りましょう。

  1. 上のコンソールにある　ブランチ　をクリックしてください。

  2. 現在のブランチがmasterであることを確認し、新規ブランチの名前を付けます。
    　今回はdevelopに設定しましょう。
    コミットは "作業コピーの親" を指定、"新規ブランチを作成してチェックアウト" にもチェックを入れたら "ブランチを作成"　を押してください。

3.　再度ファイルを開き、test配下に　viewと名前を付けたフォルダを作り、その中にindex.htmlを作ってください。

4.　SourceTreeに戻ってください。　ファイルステータスタブを選択すると、作業ツリーファイルに先ほど編集したファイルが表示されていると思います。
　　今度はドラッグ&ドロップでIndexにステージしたファイルへ移動をしてください。

5.　先ほどと同じようにコミットメッセージを記入した後に、”コミット”ボタンをクリックし"プッシュ"ボタンを押してください。
　　今度はdevelopにプッシュするので、developにチェックを入れ、リモートブランチの欄にdevelopと入力してから右下のプッシュボタンを押してください。

これで、作業用のdevelopブランチを切ることができました。

追加機能用ブランチ(feature)の作成

・index.htmlの作成

機能追加をする専用のブランチfeatureを作っていきます。
先に作ったmasterやdevelopとは違い、機能ごとに作っていくので、実際のプロジェクトでもブランチ名の先頭に" feature/ "とついたものが幾つか作られます。

  1. SourceTreeを開き、ブランチボタンを押して新規ブランチに　feature/index_page と入力し、ブランチを作成をクリックしてください。

2.　先ほど作ったindex.htmlへ下のコードを張り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>git勉強会</title>
  </head>
  <body>
    <p>現在gitの勉強回をしています。</p>
  </body>
</html>

  1. これも、先ほどと同じくindex.htmlをステージへ移動させ、メッセージに" [機能追加] indexページ追加" と記入してからコミットをしてください。

  2. プッシュボタンをクリックし、ローカルのfeature/index_pageを対象にしてからプッシュをしてください。

  3. ここで1度、developブランチの中を見てみましょう。　下のタブから”ログ”を選択し、表に書いてあるdevelopを右クリックし、チェックアウトを選択してください。

先ほどのfeature/index_pageからdevelopというブランチに戻ったので、feature/index_pageで作業した内容が存在しないことが分かります。
これは、削除したわけではなく、index.htmlが存在するブランチから存在しないブランチへ移動した、というだけになりますので安心してください。

  1. 次に、index.htmlをdevelopにも反映させようと思ったのですが、aboutページも作る事となりましたので、先に作って行きたいと思います。
・aboutページの作成

  1. 今度はfeature/about_pageというブランチを作成してください。

  2. viewフォルダの中にabout.htmlというファイルを作り、下のコードを追加してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>あああああああ</title>
  </head>
  <body>
    <p>あああああああああああ</p>
  </body>
</html>

  1. これも同じくabout.htmlをステージへ移動させ、メッセージに" [機能追加] aboutページ追加" と記入してからコミットをしてください。

  2. プッシュボタンをクリックし、ローカルのfeature/about_pageを対象にしてからプッシュをしてください。

・２つの機能を結合

developレポジトリにもindexページとaboutページを持たせてあげます。

  1. 下のタブから”ログ”を選択し、表に書いてあるdevelopを右クリックし、チェックアウトを選択してください。

  2. 表に書かれているfeature/indexを右クリックし、マージを選択してください。また同様にfeature/aboutも右クリックをしてマージを選択してください。

これで、developにはfeature/indexとfeature/aboutブランチにて追加したindexページとaboutページが追加されました。
一旦ページを確認してみましょう。

・修正

よく見るとindexページに誤字があります。これを修正していきましょう。
このような場合、bugfix/と呼ばれるブランチを切ることがしばしあります。

  1. SourceTreeを開いてください。　上にあるブランチボタンを押して、bugfix/rewordというブランチ名でブランチを作成してください。

  2. まず、index.htmlのpタグ内を修正しましょう。

誤 : <p>現在gitの勉強回をしています。</p>
正 : <p>現在gitの勉強会をしています。</p>

  1. ついでに、about.htmlの”ああああ"にも他の文字を記入しましょう。

タイトルは
<title>アバウトページ</title>

pタグ内は
<p>これはgithubによって管理されているプロジェクトです。</p>

  1. いつも通り、index.htmlとabout.htmlを上のステージに上げ、下のテキストエリアに”indexページとaboutページの文言修正”と記入し、コミットボタンを押してください。

  2. 上のプッシュボタンを押し、bugfix/rewordを対象にしてプッシュボタンを押してください。

  3. 下のタブをログに切り替え、表に書かれているdevelopという部分を右クリックし、チェックアウトを選択してください。

  4. 表に書かれているbugfix/rewordを右クリックし、マージを選択します。その後、プッシュボタンを押しdevelopを対象にしてプッシュをしてください。

一連の流れをまとめると
developから修正用ブランチを作成　-> 修正 -> 修正用ブランチにコミットとプッシュ　→　developに修正したものを取り込む
という作業になります。

masterへのプルリクエスト

今までは全ての変更点をdevelopにまとめていたと思います。今度はそれを本番環境に取り込んでいきましょう。

  1. githubのページを開き、右上のアイコンボタンを押しドロップダウンから Your profileを選択してください。testと書かれたものをクリックしてください。

  2. ページ中央の若干上にある　"Branches"をクリックしてください。左に５と表示されているはずです。

  3. リストからdevelopという行を見つけ、右側にある"New pull request"と書かれたボタンを押してください。

  4. ページの下側にある"Create pull request"というボタンをクリックしてください。

これで、今まで作業していたdevelopの中身をmasterへ反映させる準備が整いました。　通常であれば、ここで他の人に自分の書いたものをチェックしてもらい、不備があればコメントにてやり取りをすることになるでしょう。
今回は特に問題が無いので、masterへ内容を反映させます。

  1. "merge pull request" ボタンを押し、"confirm merge"ボタンを押してください。

お疲れ様です。以上でgithub開発に於ける一連の流れを経験することが出来たと思います。

　オススメ解説

githubのアカウントを作ったことのないフレンズにオススメだよ！

Githubのアカウント作成方法
http://qiita.com/rshibasa/items/f62db870ed573ca4dced

windowsを使っているフレンズにオススメな記事だよ！

SourceTree 設定手順 覚書【Windows】
http://qiita.com/redamoon/items/5928ecab7e36f23b81ee

Macを使っているフレンズにおすすめな記事だよ！

Mac で SourceTree のインストールから GitHub 連携までまとめ
http://qiita.com/ryosuke_sato/items/3503752162104d443da4

絵がすっごーい上手なフレンズのgitがわかりやすいページだよ！

本当は怖くない！デザイナーがGitを大好きになった♡５つの理由
http://qiita.com/yunico-jp/items/de191a15ac07651abdea

この資料を使ってみようか検討してくれているフレンズへ

この資料は、主に手を動かしてなれるという所から入っていって貰うことを目的として作っているので、解説に主を置いてません。
その点だけご理解下さい。

8
11
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
11