太郎と私

やってるゲームとか趣味の事ばっか書いちゃうんです

【初学者用】GitHub勉強会資料

僭越ながらGitHub勉強会する事になりましたぽ太郎です。

勉強会用の資料ですが、初学者の人にも使える物であったらいいなぁと思ってブログにしました!

 

 

 

GitHubとは

何に使うのGitHub

開発している物のバージョンを管理するのに使うよ

なんで管理する必要があるの?

⇒自分自身が更新・作成した部分を見返ししやすくする為

⇒複数の人で管理する際に同じ個所を更新しない為

⇒なんかエラーが起きたら前のバージョンに戻せる為

⇒変更点が簡単に可視化できる為


こういう時に使えるよGitHub

⇒3ヶ月前の変更した箇所ってどこでしたっけ?と聞かれた時

⇒本番環境でエラー出てじゃんッッッ!!!

 

GitHubを使ってみよう

GitHubアカウントを作ろう

https://github.com/

github.com

f:id:sipotarou:20180517020852p:plain

 ここを押してアカウントをサインアップだ!

 

f:id:sipotarou:20180517020858p:plain

使いたいUsernameとEmail address(確認用に同じのを)を入力してください

 

その後記載したアドレスにメールが送られてくるので、

記載されてるURLをクリック!!


GitHubリポジトリに参加しよう

参加の仕方はリポトリの権限ある人からコラボレーターに招待してもらいましょう。

 

f:id:sipotarou:20180517020902p:plain

参加とは違うけど、ここを押せば自分のリポジトリーが作れます

 

そもそもリポジトリーって何?

ファイルやディレクトリの状態を記録する場所です。

 

作成したリポジトリに他の人を招待して一緒に管理したい場合は

 

f:id:sipotarou:20180517020905p:plain

リポジトリに入って

①[Settings]を押す

②[Collaborators]を押す

③招待したいユーザーの名前orメールアドレスを入力してAdd collaborator を押す

後は招待された側のユーザーがメールから確認URLを押せば招待完了です。

SourceTreeを使って見よう

今回は勉強会参加する人でSourceTree使ってるって人がいたのでSourceTreeの使い方を書きます。

WINの場合なのでMACユーザーの方は、その、気合いでお願いします…

まずはRemoteタブを押して

 

f:id:sipotarou:20180517020921p:plain

①赤丸の[アカウントを追加]をクリックしてください

ホスティングサービスを[GitHub]にして、プロトコルは[HTTPS]に

③認証を[Basic]にして[ユーザ名][パスワード]に自分のGitHubアカウント情報を入力してください


GitHubリポジトリをクローンしよう

GitHubアカウントをホスティングアカウントに設定すると、

参加しているリポジトリが一覧で出てきます。

そこからクローンしたいリポジトリの右端にある[clone]を押してください

f:id:sipotarou:20180517020924p:plain

こんなウィンドウに移ります。上から色々ありますが

とりあえずは上から2番目の

・Cloneするファイルの置き場所

を自分の好みの場所に変えるといいでしょう

 

クローンってなに?

クローンを実行すると、リモートリポジトリの内容をまるまるダウンロードしてきて、別のマシンにローカルリポジトリとして作成できます。

 

リモートリポジトリとローカルリポジトリって何?

リモートリポジトリ:オンライン上のリポジトリ

ローカルリポジトリ:自分のパソコン内のリポジトリ

と認識して頂ければ問題ないと思います

 

ブランチを作ってみよう

クローンしたリポジトリを見ると画面がガラッと変わると思います。

今回はブランチを作って見ましょう。

ブランチの作り方は

 

f:id:sipotarou:20180517020931p:plain

ブランチを切りたい場所をクリックしてから[ブランチ]ボタンをクリックしましょう。

ブランチを切る際は自分や相手が一眼見てどういう変更かわかるようにすると、

2、3ヵ月後にみて混乱が起きたりしません。私は起きました。つらかった。

 

ブランチとは?

ブランチとは、履歴の流れを分岐して記録していくためのものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ中で複数の変更を同時に進めていくことができます。

変更したブランチをプッシュしてみよう

次はブランチをプッシュしてみましょう。

クローンしたリポジトリを適当に変更してみましょう。

変更した後左上にある[コミット]をクリックすると画面が偏移します。

f:id:sipotarou:20180517020934p:plain

この画面でコミットしてリモートリポジトリに反映したいファイルを選択して

コミットコメントを入力してから右下のコミットを押しましょう。

コミットコメントは適当だとレビューする人や自分が困惑します。

自分は「いろいろPush」とかを都度入力して泣きたくなるほど困りました。

 

コミットしたら次はプッシュです。

プッシュボタンを押して自分のローカルブランチの変更をリモートブランチに反映させましょう。

GitHubで自分のプルリクを作ろう

プッシュしてからGitHubの Pushしたリポジトリを見て見ましょう

f:id:sipotarou:20180517020908p:plain

 

緑色のボタンと自分の作成したプルリクエストの名前があるので

緑色のボタンをクリック

プルリクエストの名前と説明を書いてpull requestを作成してください

プルリクにコメントしてレビューしてみよう

次は自分がコメントする側です。

レビューしたいプルリクの[File changed]を押してください

 

ファイルの変更箇所羅列されてるのですが、

レビューしたい箇所(行数あたり)にマウスカーソルを合わせると

[+]みたいなアイコンが出るのでクリックしてください。

そうするとコメントがかけるので書いて確定してください。

f:id:sipotarou:20180517020915p:plain

そんな感じで数カ所コメントしたら赤丸をのボタンを押してください。

ここでレビューをSubmitさせないと反映されないで、

他の人は見れないのでお気をつけて

 

 


レビューに対してコメントしてみよう

それではそのレビューに対してコメントをしましょう!

f:id:sipotarou:20180517020918p:plain

今回は[File changed]じゃなくて[Conversation]から(厳密には[File changed]からもコメント返信はできます)

返信したいコメントに対して返信を入力して[Comment]ボタンを押しましょう!

 

[Conversation]でもコメント開いてて邪魔だなぁと思うそこの貴方。

指摘されたファイルに変更を加えてプッシュするとコメントが閉じて見やすくなります!

備忘になりますね。

 

駆け足気味ですがとりあえず今回の勉強会資料はここまでです。

乱雑なので時間ある時に修正します。