第27回WordBench大阪「初心者向けGit/GitHubの基本解説とハンズオン」に参加して(3/16)


さてさて〜、今回も楽しそうなハンズオン。
GitHubは、ぼっちで開発したツールやプラグインを公開しているだけで、まだ共同作業的なことはやったことが
ありません。今日はそのあたりを正しく理解できればと思います。
フォーク?プルリクエスト?、、、、、現時点ではクローンしか用語を知りません。でも終わった頃には理解していることでしょう。

昼食 in 淀屋橋

ということでまずは昼食です。ビフカツです。13時30分始まりのため、10時40分ぐらいの電車にのったら12時30分ぐらいに淀屋橋に。au iPhoneって枚方あたりからつながりにいくですねぇ。この店は3Gで全然つながりませんでした・・・。

関連情報

会場やどこに!?

つるやビル〜

見えてきました、つるやホールのあるビルっぽいのが、、、でもね。

両隣のつるやビル

つるや本社ビルと、つるや第2ビルが両隣なんですよ。
そして第5会議室は両方ともにある。吸い込まれるように本社ビルの方にいったら、全く別のイベントが
やってました・・・・。まっ、まぁなんとかたどり着きました。

プログラム

第5会議室

WordBench大阪について

電源の口が四隅にしかないので、電源タップもってきたらよかったなぁ。

グループ分けの感じ

  • OS(MacとWindows)
  • GUIとCUI(真っ黒画面と言われるコマンドツールを使う)

あたりで分けるとのこと。

以下、登壇者が発表したメモ
「※」は筆者のメモ・補足

 

説明:WEBデザイナーが教える初めての人向けのGit(@maki_saki)

Gitは使うメリットあるの?

バージョン管理や、いつの間にかバグが入ってしまい、昨日まで動いていたコードに戻りたいということはありませんか。人のコードを上書きしたり、何もしていないのに急に動かなくなったことないですか?

そういうのを解決するのがGitなのです。

Gitって?

バージョン管理システムの1つ。
差分を見ることができるので、どこが変わったのか分かりやすい。
過去に保存したバージョンに簡単に戻れる。
誰がいつ書き換えたのかも一目瞭然のため、トラブルを減らすことができる。

Subversionってのも聞いたんだけど?

似て非なるもの。同じバージョン管理ツールの1つ

バックアップが容易

差分バックアップのため、気軽にバックアップ
本筋と外れたテストが可能。
複数人での開発が容易に。
作業を振り分けやすくなる。

用語説明

リポジトリ

どんなファイルが格納されているのかきちんとリスト化し、プログラムや文章などをタメておくファイルの貯蔵庫のこと。

コミット

リポジトリに対して、自分が編集したファイルを送りつけること(リポジトリへの保存)。

ブランチ

プロジェクトが枝分かれすること。

マージ

ブランチさせたコミットの差分を、本筋に統合させること。

流れ

修正→コミット、修正→コミット、修正→コミット、、、、、、テストしたくなったらブランチして問題なければマージ・・・のような感じ。

リモートリポジトリ

ネットワーク上に存在するリポジトリのこと
つまり共同作業が可能なリポジトリのこと

プッシュ

自前のローカルリポジトリからリモートリポジトリにコミットすること

プル

リモートリポジトリからローカルリポジトリにコミットデータを取得する

クローン

リモートリポジトリから最新版をローカルリポジトリにダウンロードする
初めて入った時など。プルは差分だが、クローンはすべてダウンロードすることになる。

ブッシュが出来ない場合がある

Aさんがプッシュしているときに、Bさんがプッシュできません。
どれが最新がわかんないので。
後からプッシュしたBさんは、フェッチしてマージ(プル)してから、プッシュすることになる。
つまり、Aさんのものをフェッチ(とってきて)、Bさんのローカルリポジトリのものとマージしてから、プッシュするってことか。。。。

GitHubって?

Gitのリモートリポジトリを提供している共有型サービス。公開版は、無償提供されている。

Gitサービス

以下すべて、基本的には無償で利用できる。

GitHub

容量無制限
有料版は非公開が可能

Bitbucket

容量無制限
日本語化されている。リポジトリの非公開、ユーザー数は5名まで、非公開OK
ぼっちには使えるかも

Backlog

日本語化が丁寧、100MB、ユーザーが10名まで、非公開OK

黒い画面(CUI)が怖い人は、「GUI」を使おう

Source Tree

Windows, Macintosh版の両方がある

tortoisegit

Windows版しかない。

NetBeansを使うと便利かも

(質問)フォーク(GitHub)とブランチの違いは?

※会場の誰か詳しい人が説明された

フォークは、リモートリポジトリをコピーして自前の環境を作成する。
ブランチは、自分のリモートリポジトリに対して枝わけする

 

実践

全体

講師の深沢氏

いろんな感じで

Windows (GUI)
Mac (CUI)
Mac (GUI)

のグループに分かれて作業。
私は、CUIは自分で分かるので、Mac (GUI) の使い方をマスターすべく、このグループに参加しました。

初期導入〜新規リポジトリ作成(GitHub)〜何かフォルダを入れてプッシュ

Mac (GUI) — Source Treeというソフトを使う

1. GitHub上で新規リポジトリを作成

*下記で図として使っているテストリポジトリはこの記事を公開する前に消します(削除済)。

下記のようにGitHub上で新規リポジトリを作成します。
GitHubの場合、説明にもありましたがPrivate(非公開)は有料会員になる必要があります。
またREADMEを作成するかどうかは、基本的にチェックをいれておいたほうがいいでしょう。
※これが何のためのものなのか、どう使うのかのメモですね。

GitHub上でリポジトリを作成する
GitHubで新しいリポジトリを作成2
GitHubで作成した新規リポジトリ画面

2. Source Treeの初期設定(GitHubのアカウント設定)

初期起動で下記のセットアップウィザードが走ります。
後から走らせるためには、上部メニューの「Source Tree」から「セットアップウィザード」を選択します。

Source Treeの初期設定1
Source Treeの初期設定2
「今すぐ検索」とすることで、すでにあるローカルリポジトリを探してくれます。
そこでリストアップされなかった場合には、後で表示→ブックマークを表示から、+ボタンで直接レジストリをクローンして追加していってください。

Source Treeの初期設定3

3. 作成したリポジトリをクローンして手持ちのローカルリポジトリーにコピー(Source Tree)

ブックマークの表示

GitHubのクローン

GitHubのリポジトリのURLと、それをパソコン内のどこに入れるか(フォルダが作成される)指定する。

4. ローカルリポジトリーにデータを入れる

とりあえずウェブサイトのカイワレ育成ってのが昔つくったので、それをまるごといれるか。。。

カイワレを入れた〜

25個追加されたか

5. コミットする(アップするファイルやフォルダを選択する)

ブックマークの部分をダブルクリックすると、大きなウィンドウが出てくる。
下側に入れたフォルダを上側に移す(これをステージングというらしい)と、コミットできる準備が完了。

ステージング

コミットする

「コミット」ボタンを押すと、上図のようにコミットする画面になるので、コミットメッセージを入れて「コミットする」ボタンを押す。

コミットした

上図のように、上部のフォルダが消えているはず。
上部のログ(ストップウォッチマークみたいな)を見ると
コミットしたよログ

6. プッシュ(GitHubサーバーへアップ)

コミットするだけではプッシュするためのファイルやフォルダを選んだだけ。
プッシュで実際にサーバーにアップすることになる。

プッシュボタン

のようにコミットができたら、「プッシュ」ボタンに数字が付くはず。
この状況で、「プッシュ」ボタンを押してください。

プッシュ

そしてそのままOKボタンを押します。
するとほれ、kaiwareフォルダがアップされてますよね

プッシュ完了の確認

ブランチをやってみよう!

機能AとBを同時開発していて、Aは途中、でもBを先に実装してみたい!
いままではAとBを別々のファイルで別管理していたかもしれないけれど、あとからAとBの両方を加えるのは面倒。これをブランチという機能を使えば、分けたファイルを後から纏めるときに自動でやってくれる便利さがある。

1. devというブランチを作ってみよう

ブランチの作成

ちゃんと、左サイドメニューのブランチの「dev」が太文字(いまこれが有効)になっていることを確認すること。masterが太文字で変更するとmasterが変更されちゃうよ!
スクリーンショット 2014-03-16 16.12.02

そうすると下図のようにGitHubにブランチが出来ているはずだ。
ブランチ確認

2. ローカルリポジトリ側のファイルを変更

これはフォルダからアクセスして何か変更すると
変更ファイルが作業コピー場所に出てくる

のようになるので、また上の方に持って行って、コミットしてください。

ブランチできた!

3. ブランチ間の移動

このことをチェックアウトという(Subversionとは意味が違う)
たとえばmasterへチェックアウトすると、devでの変更は元に戻っているはず。
このように
いろいろなバージョンの開発データを触ることができる

チェックアウト

左サイドメニューのブランチのそれぞれをダブルクリックすると、チェックアウトできる

4. ブランチからのマージ(devブランチをmasterへマージしてみる)

masterにチェックアウトした状態で、devを右クリックしてください。
マージ

マージ履歴

後は、「プッシュ」するとこでリモートリポジトリ(ここではGitHub)に反映される。

本番環境で使うには

PCのローカルリポジトリ〜リモートリポジトリで作業して、リモートリポジトリを最新にした状態で、それを本番サーバーに移行したいのなら、サーバーの方のgitコマンド(CUI)でプルすることになる。

これは真っ黒画面(CUI)でやる必要がある。

みんなどういうふうにブランチを切ってるの?

master
┗ dev
 ┣ Aプロジェクト
 ┣ Bプロジェクト
 ┗ Cプロジェクト

とかにして、A, B, Cそれぞれをdevにマージしながら、devはテスト用のサーバーでプルして、開発版としてクライアントに見てもらう。
これで問題なければ、devをmasterにマージして、このmasterを本番環境にプルすれば出来上がりという感じ

マージしたときにエラーでないの?

もちろんある。エラーは表示されるはずなので、それをよく見て指示に従って下さい。

2014年3月16日 木谷

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中