Git&GitHubセミナーで使用したスライド

2. 目次
I N D E X
• 自己紹介 + Progate について
• Git・GitHub とは
• 実際にGitを使ってみよう

3. 自己紹介 + Progateについて
自己紹介
• よつ
⚬ 20歳
⚬ Progate Pathアンバサダーやってます
⚬ STECHメンバーになりました
⚬ Minecraft のプラグイン開発などをやってました
￭ Java (Kotlin) + Gradle

4. 自己紹介 + Progateについて
株式会社Progateのサービスについて
• 株式会社Progate とは？
￭ エンジニアのための学習サービス
• Progate
• Progate Path

5. 自己紹介 + Progateについて
Progateとは？
• Progate とは？
￭ 初心者エンジニア向けの学習サービス
￭ 実際に手を動かして学ぶことができる
￭ 一部有料（今回は有料部分もできます）

6. 自己紹介 + Progateについて
Progateとは？
• Progate とは？

7. 自己紹介 + Progateについて
Progateとは？
• Progate とは？

8. 自己紹介 + Progateについて
Progate Pathとは？
• Progate Path とは？
￭ 基本を学び終わった人向けの、より実践的な学習サービス
￭ より実務感の高いタスクが体験できる
￭ gate（門）を抜けた先のpath（道）を示す

9. 自己紹介 + Progateについて
Progate Pathとは？
• Progate Path とは？

10. Git & GitHub とは？
S E C T I O N # 1.

11. Git & GitHubとは？
Gitとは？
• Git とは？
⚬ コードの「変更」を記録してくれるアプリ
￭ パソコン上で動く
￭ 基本はコマンドで動かす（最近はGUIでも操作できるよ）

12. Git & GitHubとは？
Gitとは？
• 開発が進んでいくと、日々ファイルの内容は変わる
• 変更された内容を記録し、戻したり確認したりできるようにする
青にした 赤にした

13. Git & GitHubとは？
GitHubとは？
• GitHubとは？
• 複数人が記録した作業内容をまとめて管理するサービス
￭ ネットワーク上のフォルダに変更を保存していく

14. Git & GitHubとは？
GitHubがないとどうなってしまうのか
• GitHubなしでチーム開発をするとどうなる？
⚬ Aさん「コードを変更したから、これをコピペしてね」
⚬ B・C・D（コピーペーストﾎﾟﾁｰ）
⚬ Bさん「コード変更したからコピペしてな」
⚬ A・C・D（コピーペーストﾎﾟﾁｰ）
⚬ ...
• これを各自の作業ごとに行うことになる

15. Git & GitHubとは？
Git & GitHubがあるとできること
• 複数人で作業内容を共有できる
￭ チーム開発に必須
プッシュ プル

16. Git & GitHubとは？
GitHubがないとどうなってしまうのか
• GitHubなしでチーム開発をするとどうなる？
⚬ Aさん「ページの背景を赤にしたで」
⚬ その直後
⚬ Bさん「ページの背景を青にしたで」
• このとき、Aさんの作業内容は消えてしまう
⚬ 誰かが衝突内容を確認し、適切に対応する必要がある

17. Git & GitHubとは？
Git & GitHubがあるとできること
• 変更の上書き（コンフリクト）を検知してくれる
￭ 作業者に上書きしていることを伝える
￭ 修正を行った後、再度プッシュすることができるようになる
プッシュ プッシュ

18. Git & GitHubとは？
Git & GitHubがあるとできること
• プロジェクトをネット上に公開できる
￭ 成果物を置くポートフォリオなどにもできたり
￭ プロフィールに「こんな開発してます」という情報がのったりする
• 例

19. Git & GitHubとは？
Git & GitHubを使った作業の流れ
• フォルダをGitに登録する（init）
• Gitが自動で変更を検知してくれるようになる

20. Git & GitHubとは？
Git & GitHubを使った作業の流れ
• （もしくは）GitHubから複製する（clone）
• 既にプロジェクトがある場合は、そのデータをコピーすることができる

21. Git & GitHubとは？
Git & GitHubを使った作業の流れ
2. 作業を記録する
• 複数の作業内容から、コミット対象を選択する（add）
• 作業内容を記録する（commit）
• 作業内容はタイトルのみ、一文で表すことが多い
こんな感じ

22. Git & GitHubとは？
Git & GitHubを使った作業の流れ
3. 記録した内容をGitHubに送信する（push）
プッシュ

23. Git & GitHubとは？
おすすめのGit GUIアプリ
• GitHub Desktop

24. Git & GitHubとは？
おすすめのGit GUIアプリ
• VSCodeの機能にもある
これ

25. Git & GitHubとは？
おすすめのGit GUIアプリ
• VSCodeの機能にもある

26. 実際にGitを使ってみよう
S E C T I O N # 2.

27. 実際にGitを使ってみよう
Progateを使ってGitを学ぶ
• アカウント登録
￭ xxxxxxx@s.asojuku.ac.jp にURLを送信しています
招待
URL

28. 実際にGitを使ってみよう
Progateを使ってGitを学ぶ
• アカウント登録
￭ 必ず「学生用メールアドレス」で登録すること！
新規登録

29. 実際にGitを使ってみよう
Progateを使ってGitを学ぶ
• アカウント登録
￭ 必ず「学生用メールアドレス」で登録すること！
ユーザー名
（なんでもOK）
学生用メールアドレス
パスワード

30. 実際にGitを使ってみよう
Progateを使ってGitを学ぶ
• 登録が完了したら、左上からコース一覧へ飛ぶ
これ

31. 実際にGitを使ってみよう
Progateを使ってGitを学ぶ
• 「言語別コース一覧」-> 「Git」を選択
これ