hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

GitHubの概要

GitHubとは

Gitを利用してチーム開発に便利な機能を提供するWebサービスGitHubである。Hub(ハブ)というのは「集まり」という意味。GitHubは世界中のGitのリポジトリが集まったハブの役割を担っているサービスということ。
 GitとGitHubは一緒のものではなく、GitHubはGitの仕組みを利用したWebサービス

「リモート環境を用意するためには外部のサーバ等が必要になり、なんだか難しそう。」といった煩雑なリモート環境の用意をしてくれ、それを簡単に使えるようにしてくれているのがGitHubなのである。

GitとGitHub

GithubとはGitにおけるリモートリポジトリの役割を担う。リモートリポジトリとは外部のサーバー上においたリポジトリのこと。GitHub上にチームで共有のプロダクト(ソースコード)を配置する。そして、開発チームのメンバーはGitHub上からソースコードをコピーしたり、逆にソースコードの変更を反映させることができる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//7ef3c2e52382ff354417e7267e39fdbe.png

なぜGitHubが必要なのか

企業のように複数人開発においてバージョン管理をするにはどうしたらよいのか?Dropboxなどを使いチームでファイルを共有している場合、二人で同じファイルを編集していて、先に編集した人の内容が後の人の上書きされて消えてしまうということもあり得る。

投稿画面

GitHubを使用することで自分の作業が他の開発者に影響を及ぼしたり、反対に他の開発者の作業が自分に影響を及ぼすことを避けて開発を進めることができる。

GitHubの特徴

GitHubの特徴は以下の3点。

  • 世界中のあらゆるプロダクトが保存、公開されている
  • グラフィカルな画面からGitを扱うことができる
  • チーム開発に便利な様々な機能が用意されている

世界中のあらゆるプロダクトが保存、公開されている

GitHubでは世界中の人々が自分のプロダクト(ソースコードやデザインデータなど)を保存、公開をすることができる。そのため様々な人のソースコードを読んだり、見知らぬ多くの人が一つのプロジェクトやソースコードの変更に関わることができる。

グラフィカルな画面からGitを扱うことができる

通常Gitはコマンドで扱うが、GitHubならWebサービス上の画面からグラフィカルにGitの操作を行うことができる。そのためミスも少なく気軽にGitを活用できる。

チーム開発に便利な様々な機能が用意されている

GitHubにはチーム開発を円滑に行うための機能がある。コードレビュー(コードの質のチェック)を行う仕組みやソースコード単位でコメントのやり取りをする機能、他の開発者のリモートリポジトリをコピーしてくる機能など便利な機能がいくつもある。

事前準備

まずはGitHubの使い方を練習するための準備を行う。

GitHubアカウントを作成

GitHubWebサービスなのでアカウントの作成が必要。

  1. GitHubのサイトに移動してアカウント登録
  2. プランを選択

GitHubのサイトに移動してアカウント登録

 

 会員登録時は、可能であれば、手持ちのポケットwifiテザリングなどで実施する。同じIPアドレスから同時にアカウント登録をすると一時凍結されてしまう場合がある。
 会員登録の際にはメールによる認証が必要となりますので、忘れずに行う。

GitHubトップ

「Usename」はIDとなるので、他の人と被らないIDを英数字で設定する。ニックネームで登録する方が多い。「Password」は15文字以上 もしくは 英字8文字以上且つ数字を含むもの で設定する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//669326a348dd84cc2ccb6ddf0399ea64.png

また、以下のようにユーザー検証のための機能が表示されることがある。指示に従って対応する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//79309f6b42bbb8a74533f9dcaa678f89.png

②プランを選択

GitHubのプランを選択できる。今回は無料のプランを選択。
チェックボックスにはチェックは付けずに進める。

https://tech-master.s3.amazonaws.com/uploads/curriculums//b5cafb6561d92e1b189aa1bd00f3b86b.png

https://tech-master.s3.amazonaws.com/uploads/curriculums//b1f34674c26a22432e3015a82ac2d9b1.png
次にアンケートページが出るが、記入する必要はないのでそのまま進める。

https://tech-master.s3.amazonaws.com/uploads/curriculums//0888e1e456ef0e525862b2b807e78225.png

 

ローカルリポジトリとリモートリポジトリを結びつける

リモートリポジトリを作成

リモートリポジトリはブラウザで作成することが出来る。

sampleという名前のリモートリポジトリを作成

まず新規リポジトリ作成画面へ移動。

https://tech-master.s3.amazonaws.com/uploads/curriculums//9eb588fbf014b553970ef3a2ee2b36b6.png

続いてリポジトリを作成する。今回はローカルリポジトリと同じ、sampleという名前のリモートリポジトリを作成する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//088c31fd24e62e74ea5d7eb170de03a3.png

以下の様な画面になれば、リモートリポジトリの作成は完了。

https://tech-master.s3.amazonaws.com/uploads/curriculums//0445387a240830804f8467fba837976c.png

ローカルリポジトリにリモートリポジトリを紐付ける

次にローカルリポジトリと先ほど作成したリモートリポジトリとを紐づける。

git remote add

ローカルリポジトリにリモートリポジトリの情報を付与して、紐づけを行うためのコマンド。

origin

リモートリポジトリの場所の別名。他の名前をつけることも出来るが、GitHubのリモートリポジトリに対してはoriginとすることが一般的。

紐づける操作を行う

まず次のURLをコピー。

https://tech-master.s3.amazonaws.com/uploads/curriculums//e6996208eb657a06538e26c13b94d324.png

次にコマンドで操作する。

ターミナル
1
2
3
4
$ cd ~/projects/sample
$ git remote add origin 先程コピーしたURL
# 例えば次のようなコマンドになる
# git remote add origin https://github.com/username/sample.git

以上で紐づけは完了。以下のコマンドで確認。

ターミナル
1
2
$ git remote
origin

ここでoriginと出力されれば完了。

これまでのローカルリポジトリでの作業をリモートに反映する

それでは紐づけが完了したので、ローカルリポジトリの現状の情報を、リモートリポジトリに反映してみる。

git push

ローカルリポジトリでのコミットをリモートリポジトリ(origin)に反映させる操作ができる。

リモートリポジトリに情報を反映

以下のコマンドを実行しておく。

ターミナル
1
2
$ cd ~/projects/sample
$ git push origin master #リモートリポジトリ(origin)に情報を反映
pushした際にユーザー名とパスワードの入力を求められることがある。その場合は以下のように入力する。
ターミナル(ユーザー名を求められる時)
1
Username for 'https://github.com' : #ここにGitHubのusernameのみを入力する
ターミナル(パスワードを求められる時)
1
Password for 'https://github.com' : #ここにGitHubのpasswordのみを入力する



それでは次にブラウザで確認してみる。先程のリモートリポジトリ作成後のページをリロードする。

https://tech-master.s3.amazonaws.com/uploads/curriculums//730b2158c4f25720cf46d4fa8ece6754.png

上記のような表示なっていれば正しく反映できている。

上記の様になっていない場合は、どこかで操作が正しく完了していない可能性がある。

ローカルリポジトリでの作業をリモートに反映する

コードの変更修正を行う

以下のように修正。

sample/sample.rb
1
2
3
4
5
def hello
  p "hello, GitHub."
end

hello

コミットしてプッシュする

インデックスに追加→コミット→プッシュまでを行う。

ターミナル
1
2
3
4
$ git status #現状の修正状況を確認
$ git add . #全ての修正をインデックスに追加
$ git commit -m 'replace the message' #コミットメッセージを付与してコミット
$ git push origin master #プッシュ

ブラウザで確認

以下のようにブラウザで確認。

https://tech-master.s3.amazonaws.com/uploads/curriculums//d9228838e4be207727ab15f24676224d.png

https://tech-master.s3.amazonaws.com/uploads/curriculums//9c332bfc6a50a4667a56343bf972ef26.png

上記のように確認できれば、正しく操作が行えたことになる。