Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GitHubでプロジェクトを共有してみよう (1)
東区フロントエンド勉強会 2016年 第1回
excode Inc. Toshimichi Suekane1
excode Inc. Toshimichi Suekane
今日やること
GitHubでプロジェクトを共有してみよう (1)
2
1. 事前準備の確認
2. 今日使う用語のかんたんな説明
3. リポジトリを作ってみよう
4. リポジトリに招待...
excode Inc. Toshimichi Suekane
今日はこちらを利用します
GitHubでプロジェクトを共有してみよう (1)
3
1. 事前準備の確認
git を共有するサービス git を管理するアプリケーション
https:/...
excode Inc. Toshimichi Suekane
2. 今日使う用語のかんたんな説明
GitHubでプロジェクトを共有してみよう (1)
4
2. 今日使う用語のかんたんな説明
1. Repository(リポジトリ)
2. Cro...
excode Inc. Toshimichi Suekane
1. Repository(リポジトリ)
GitHubでプロジェクトを共有してみよう (1)
5
様々なデータを入れる箱、バケツ
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
2. Crone(クローン)
GitHubでプロジェクトを共有してみよう (1)
6
同じ内容の複製
今回はリモート (GitHub) のリポジトリをローカル (PC) にクローンし...
excode Inc. Toshimichi Suekane
3. Pull(プル)
GitHubでプロジェクトを共有してみよう (1)
7
最新の内容を取ってくる
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
4. Push(プッシュ)
GitHubでプロジェクトを共有してみよう (1)
8
編集した内容を送る
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
5. Commit(コミット)
GitHubでプロジェクトを共有してみよう (1)
9
ローカルで編集した内容を記録すること
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
6. Conflict(コンフリクト)
GitHubでプロジェクトを共有してみよう (1)
10
内容が同一ではない、競合している状態
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
7. Collaborator(コラボレーター)
GitHubでプロジェクトを共有してみよう (1)
11
リポジトリの編集権限を持つ仲間
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
8. Fork(フォーク)
GitHubでプロジェクトを共有してみよう (1)
12
GitHub上での複製
オリジナルに対して、変更した内容を Pull Request することが...
excode Inc. Toshimichi Suekane
9. Branch(ブランチ)
GitHubでプロジェクトを共有してみよう (1)
13
編集履歴の派生(枝分かれ)を作る
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
10. Marge(マージ)
GitHubでプロジェクトを共有してみよう (1)
14
編集履歴を合流(結合)させる
2. 今日使う用語のかんたんな説明
excode Inc. Toshimichi Suekane
3. リポジトリを作ってみよう
GitHubでプロジェクトを共有してみよう (1)
15
3. リポジトリを作ってみよう
1. GitHub 上にリポジトリを作る
2. Source...
excode Inc. Toshimichi Suekane
3. リポジトリを作ってみよう
GitHubでプロジェクトを共有してみよう (1)
16
3. リポジトリを作ってみよう
ハンズオン
GitHub でリポジトリを作る
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
17
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
GitHub でリポジトリを作る (1/3)
GitHubでプロジェクトを共有してみよう (1)
18
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
GitHub でリポジトリを作る (2/3)
GitHubでプロジェクトを共有してみよう (1)
19
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
GitHub でリポジトリを作る (3/3)
GitHubでプロジェクトを共有してみよう (1)
20
3. リポジトリを作ってみよう
SourceTree アカウントを追加
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
21
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
SourceTree アカウントを追加 (1/3)
GitHubでプロジェクトを共有してみよう (1)
22
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
SourceTree アカウントを追加 (2/3)
GitHubでプロジェクトを共有してみよう (1)
23
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
SourceTree アカウントを追加 (3/3)
GitHubでプロジェクトを共有してみよう (1)
24
3. リポジトリを作ってみよう
SourceTree リモートのリポジトリを追加
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
25
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
SourceTree リモートのリポジトリを追加 (1/3)
GitHubでプロジェクトを共有してみよう (1)
26
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
SourceTree リモートのリポジトリを追加 (2/3)
GitHubでプロジェクトを共有してみよう (1)
27
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
SourceTree リモートのリポジトリを追加 (3/3)
GitHubでプロジェクトを共有してみよう (1)
28
3. リポジトリを作ってみよう
コミット & Push
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
29
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
コミット & Push (1/6)
GitHubでプロジェクトを共有してみよう (1)
30
3. リポジトリを作ってみよう
編集されたファイルの一覧
コミットしたいファイルを
こっ...
excode Inc. Toshimichi Suekane
コミット & Push (2/6)
GitHubでプロジェクトを共有してみよう (1)
31
3. リポジトリを作ってみよう
コメントを書いてコミットする
excode Inc. Toshimichi Suekane
コミット & Push (3/6)
GitHubでプロジェクトを共有してみよう (1)
32
3. リポジトリを作ってみよう
Push を押す
excode Inc. Toshimichi Suekane
コミット & Push (4/6)
GitHubでプロジェクトを共有してみよう (1)
33
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
コミット & Push (5/6)
GitHubでプロジェクトを共有してみよう (1)
34
3. リポジトリを作ってみよう
excode Inc. Toshimichi Suekane
コミット & Push (6/6)
GitHubでプロジェクトを共有してみよう (1)
35
3. リポジトリを作ってみよう
GitHub のリポジトリに変更内容が反映される
excode Inc. Toshimichi Suekane
4. リポジトリに招待してみよう

(Collaborator)
GitHubでプロジェクトを共有してみよう (1)
36
4. リポジトリに招待してみよう(Collaborator...
excode Inc. Toshimichi Suekane
4. リポジトリに招待してみよう

(Collaborator)
GitHubでプロジェクトを共有してみよう (1)
37
4. リポジトリに招待してみよう(Collaborator...
Collaborator で招待する
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
38
4. リポジトリに招待してみよう(Collaborator)
excode Inc. Toshimichi Suekane
Collaborator で招待する (1/3)
GitHubでプロジェクトを共有してみよう (1)
39
4. リポジトリに招待してみよう(Collaborator)
excode Inc. Toshimichi Suekane
Collaborator で招待する (2/3)
GitHubでプロジェクトを共有してみよう (1)
40
4. リポジトリに招待してみよう(Collaborator)
excode Inc. Toshimichi Suekane
Collaborator で招待する (3/3)
GitHubでプロジェクトを共有してみよう (1)
41
4. リポジトリに招待してみよう(Collaborator)
excode Inc. Toshimichi Suekane
5. リポジトリを Fork してみよう
GitHubでプロジェクトを共有してみよう (1)
42
5. リポジトリを Fork してみよう
1. 共有しているリポジトリを Fork...
excode Inc. Toshimichi Suekane
5. リポジトリを Fork してみよう
GitHubでプロジェクトを共有してみよう (1)
43
5. リポジトリを Fork してみよう
ハンズオン
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
44
5. リポジトリを Fork してみよう
相手リポジトリを Fork する
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
45
5. リポジトリを Fork してみよう
相手リポジトリを Fork する (1/3)
これを Fork したい
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
46
5. リポジトリを Fork してみよう
相手リポジトリを Fork する (2/3)
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
47
5. リポジトリを Fork してみよう
相手リポジトリを Fork する (3/3)
Fork できました
excode Inc. Toshimichi Suekane
まとめ
GitHubでプロジェクトを共有してみよう (1)
48
1. 使うボタン(=コマンド)は意外に少ない
2. 作業前には必ず Pull
3. キリのいいところで、早め々の P...
excode Inc. Toshimichi Suekane
GitHubでプロジェクトを共有してみよう (1)
49
お疲れ様でした
Upcoming SlideShare
Loading in …5
×

GitHubでプロジェクトを共有してみよう (1)

プロジェクトの共有、スマートにできていますか?
今回の勉強会では、GitHubを使いプロジェクトをスマートに共有するための基礎を勉強します。
また、単純にリポジトリを共有するスタイルと、ForkしてPullリクエストを送るスタイルの両方を学びます。
(勉強会資料のため要点のみの図解となります)

  • Login to see the comments

GitHubでプロジェクトを共有してみよう (1)

  1. 1. GitHubでプロジェクトを共有してみよう (1) 東区フロントエンド勉強会 2016年 第1回 excode Inc. Toshimichi Suekane1
  2. 2. excode Inc. Toshimichi Suekane 今日やること GitHubでプロジェクトを共有してみよう (1) 2 1. 事前準備の確認 2. 今日使う用語のかんたんな説明 3. リポジトリを作ってみよう 4. リポジトリに招待してみよう(Collaborator) 5. リポジトリを Fork してみよう 6. Pull Request してみよう
  3. 3. excode Inc. Toshimichi Suekane 今日はこちらを利用します GitHubでプロジェクトを共有してみよう (1) 3 1. 事前準備の確認 git を共有するサービス git を管理するアプリケーション https://www.sourcetreeapp.com/https://github.com/
  4. 4. excode Inc. Toshimichi Suekane 2. 今日使う用語のかんたんな説明 GitHubでプロジェクトを共有してみよう (1) 4 2. 今日使う用語のかんたんな説明 1. Repository(リポジトリ) 2. Crone(クローン) 3. Pull(プル) 4. Push(プッシュ) 5. Commit(コミット) 6. Conflict(コンフリクト) 7. Collaborator(コラボレーター) 8. Fork(フォーク) 9. Branch(ブランチ) 10.Marge(マージ)
  5. 5. excode Inc. Toshimichi Suekane 1. Repository(リポジトリ) GitHubでプロジェクトを共有してみよう (1) 5 様々なデータを入れる箱、バケツ 2. 今日使う用語のかんたんな説明
  6. 6. excode Inc. Toshimichi Suekane 2. Crone(クローン) GitHubでプロジェクトを共有してみよう (1) 6 同じ内容の複製 今回はリモート (GitHub) のリポジトリをローカル (PC) にクローンします 2. 今日使う用語のかんたんな説明
  7. 7. excode Inc. Toshimichi Suekane 3. Pull(プル) GitHubでプロジェクトを共有してみよう (1) 7 最新の内容を取ってくる 2. 今日使う用語のかんたんな説明
  8. 8. excode Inc. Toshimichi Suekane 4. Push(プッシュ) GitHubでプロジェクトを共有してみよう (1) 8 編集した内容を送る 2. 今日使う用語のかんたんな説明
  9. 9. excode Inc. Toshimichi Suekane 5. Commit(コミット) GitHubでプロジェクトを共有してみよう (1) 9 ローカルで編集した内容を記録すること 2. 今日使う用語のかんたんな説明
  10. 10. excode Inc. Toshimichi Suekane 6. Conflict(コンフリクト) GitHubでプロジェクトを共有してみよう (1) 10 内容が同一ではない、競合している状態 2. 今日使う用語のかんたんな説明
  11. 11. excode Inc. Toshimichi Suekane 7. Collaborator(コラボレーター) GitHubでプロジェクトを共有してみよう (1) 11 リポジトリの編集権限を持つ仲間 2. 今日使う用語のかんたんな説明
  12. 12. excode Inc. Toshimichi Suekane 8. Fork(フォーク) GitHubでプロジェクトを共有してみよう (1) 12 GitHub上での複製 オリジナルに対して、変更した内容を Pull Request することができる 2. 今日使う用語のかんたんな説明
  13. 13. excode Inc. Toshimichi Suekane 9. Branch(ブランチ) GitHubでプロジェクトを共有してみよう (1) 13 編集履歴の派生(枝分かれ)を作る 2. 今日使う用語のかんたんな説明
  14. 14. excode Inc. Toshimichi Suekane 10. Marge(マージ) GitHubでプロジェクトを共有してみよう (1) 14 編集履歴を合流(結合)させる 2. 今日使う用語のかんたんな説明
  15. 15. excode Inc. Toshimichi Suekane 3. リポジトリを作ってみよう GitHubでプロジェクトを共有してみよう (1) 15 3. リポジトリを作ってみよう 1. GitHub 上にリポジトリを作る 2. SourceTree に GitHub アカウントを設定 3. ローカルに Clone する 4. リモート ⇆ ローカルで Push してみよう
  16. 16. excode Inc. Toshimichi Suekane 3. リポジトリを作ってみよう GitHubでプロジェクトを共有してみよう (1) 16 3. リポジトリを作ってみよう ハンズオン
  17. 17. GitHub でリポジトリを作る excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 17 3. リポジトリを作ってみよう
  18. 18. excode Inc. Toshimichi Suekane GitHub でリポジトリを作る (1/3) GitHubでプロジェクトを共有してみよう (1) 18 3. リポジトリを作ってみよう
  19. 19. excode Inc. Toshimichi Suekane GitHub でリポジトリを作る (2/3) GitHubでプロジェクトを共有してみよう (1) 19 3. リポジトリを作ってみよう
  20. 20. excode Inc. Toshimichi Suekane GitHub でリポジトリを作る (3/3) GitHubでプロジェクトを共有してみよう (1) 20 3. リポジトリを作ってみよう
  21. 21. SourceTree アカウントを追加 excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 21 3. リポジトリを作ってみよう
  22. 22. excode Inc. Toshimichi Suekane SourceTree アカウントを追加 (1/3) GitHubでプロジェクトを共有してみよう (1) 22 3. リポジトリを作ってみよう
  23. 23. excode Inc. Toshimichi Suekane SourceTree アカウントを追加 (2/3) GitHubでプロジェクトを共有してみよう (1) 23 3. リポジトリを作ってみよう
  24. 24. excode Inc. Toshimichi Suekane SourceTree アカウントを追加 (3/3) GitHubでプロジェクトを共有してみよう (1) 24 3. リポジトリを作ってみよう
  25. 25. SourceTree リモートのリポジトリを追加 excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 25 3. リポジトリを作ってみよう
  26. 26. excode Inc. Toshimichi Suekane SourceTree リモートのリポジトリを追加 (1/3) GitHubでプロジェクトを共有してみよう (1) 26 3. リポジトリを作ってみよう
  27. 27. excode Inc. Toshimichi Suekane SourceTree リモートのリポジトリを追加 (2/3) GitHubでプロジェクトを共有してみよう (1) 27 3. リポジトリを作ってみよう
  28. 28. excode Inc. Toshimichi Suekane SourceTree リモートのリポジトリを追加 (3/3) GitHubでプロジェクトを共有してみよう (1) 28 3. リポジトリを作ってみよう
  29. 29. コミット & Push excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 29 3. リポジトリを作ってみよう
  30. 30. excode Inc. Toshimichi Suekane コミット & Push (1/6) GitHubでプロジェクトを共有してみよう (1) 30 3. リポジトリを作ってみよう 編集されたファイルの一覧 コミットしたいファイルを こっちへドラッグ
  31. 31. excode Inc. Toshimichi Suekane コミット & Push (2/6) GitHubでプロジェクトを共有してみよう (1) 31 3. リポジトリを作ってみよう コメントを書いてコミットする
  32. 32. excode Inc. Toshimichi Suekane コミット & Push (3/6) GitHubでプロジェクトを共有してみよう (1) 32 3. リポジトリを作ってみよう Push を押す
  33. 33. excode Inc. Toshimichi Suekane コミット & Push (4/6) GitHubでプロジェクトを共有してみよう (1) 33 3. リポジトリを作ってみよう
  34. 34. excode Inc. Toshimichi Suekane コミット & Push (5/6) GitHubでプロジェクトを共有してみよう (1) 34 3. リポジトリを作ってみよう
  35. 35. excode Inc. Toshimichi Suekane コミット & Push (6/6) GitHubでプロジェクトを共有してみよう (1) 35 3. リポジトリを作ってみよう GitHub のリポジトリに変更内容が反映される
  36. 36. excode Inc. Toshimichi Suekane 4. リポジトリに招待してみよう
 (Collaborator) GitHubでプロジェクトを共有してみよう (1) 36 4. リポジトリに招待してみよう(Collaborator) 1. お互いのリポジトリに Collaborator として招待しあう 2. リポジトリをローカル に Clone する 3. お互いに Push してコンフリクトを解決してみよう
  37. 37. excode Inc. Toshimichi Suekane 4. リポジトリに招待してみよう
 (Collaborator) GitHubでプロジェクトを共有してみよう (1) 37 4. リポジトリに招待してみよう(Collaborator) ハンズオン
  38. 38. Collaborator で招待する excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 38 4. リポジトリに招待してみよう(Collaborator)
  39. 39. excode Inc. Toshimichi Suekane Collaborator で招待する (1/3) GitHubでプロジェクトを共有してみよう (1) 39 4. リポジトリに招待してみよう(Collaborator)
  40. 40. excode Inc. Toshimichi Suekane Collaborator で招待する (2/3) GitHubでプロジェクトを共有してみよう (1) 40 4. リポジトリに招待してみよう(Collaborator)
  41. 41. excode Inc. Toshimichi Suekane Collaborator で招待する (3/3) GitHubでプロジェクトを共有してみよう (1) 41 4. リポジトリに招待してみよう(Collaborator)
  42. 42. excode Inc. Toshimichi Suekane 5. リポジトリを Fork してみよう GitHubでプロジェクトを共有してみよう (1) 42 5. リポジトリを Fork してみよう 1. 共有しているリポジトリを Fork する 2. Fork したリポジトリをローカル に Clone する 3. ローカルで編集して Push する 4. GitHub から Pull Request をする 5. Pull Request の内容を確認して Marge してみよう
  43. 43. excode Inc. Toshimichi Suekane 5. リポジトリを Fork してみよう GitHubでプロジェクトを共有してみよう (1) 43 5. リポジトリを Fork してみよう ハンズオン
  44. 44. excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 44 5. リポジトリを Fork してみよう 相手リポジトリを Fork する
  45. 45. excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 45 5. リポジトリを Fork してみよう 相手リポジトリを Fork する (1/3) これを Fork したい
  46. 46. excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 46 5. リポジトリを Fork してみよう 相手リポジトリを Fork する (2/3)
  47. 47. excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 47 5. リポジトリを Fork してみよう 相手リポジトリを Fork する (3/3) Fork できました
  48. 48. excode Inc. Toshimichi Suekane まとめ GitHubでプロジェクトを共有してみよう (1) 48 1. 使うボタン(=コマンド)は意外に少ない 2. 作業前には必ず Pull 3. キリのいいところで、早め々の Push ストレスのない共同作業を目指そう! まとめ
  49. 49. excode Inc. Toshimichi Suekane GitHubでプロジェクトを共有してみよう (1) 49 お疲れ様でした

×