GitHubハンズオン@デジLIGエンジニア勉強会

2025/8/9に開催された第2回デジLIGエンジニア勉強会の資料です。

Transcript

2. 本日のゴール GitHubを理解し VSCodeで操作できるようになる
3. GitHub Hands-on %$ GitHubを理解する
4. 6 エンジニア募集要項のほとんどに記 6 卒制サイトのコードを紛失しても復旧できる なぜGitHubを学ぶのか？
5. Q. GitHubって何？
6. とあるエンジニアの回答 え？そんなことも知らないんですか？ GitHubというのはソースコードのバックアップや共有が できるエンジニア向けのクラウドサービスです。 複数のエンジニアでソースコードの共有ができるので チーム開発においてはもはや必須ですね。個人においても 各々のPCで保存しておくこととは違ってソースコード変 更時の差分比較機能が備わっていてエンジニアなら知って おかなければならない必須ツールですよ？なのでそんな 質問してきたあなたに大変驚いていたところでした。 ところであなたエンジニア歴何年目なんですか？ ブツ ブツ ブツ
7. LINEアルバムのような写真共有サービスと同じ！ 身近な例で理解しよう アップロード ダウンロード
8. ソースコードのアップロード/ダウンロードが可能 身近な例で理解しよう アップロード (push) ダウンロード (Clone)
9. ソースコードのアップロード/ダウンロードが可能 身近な例で理解しよう アップロード (push) ※リポジトリとは？：ソースコードを管理する単位（写真のまとまりであるアルバム機能のようなもの） ダウンロード (Clone) リモートリポジトリ ローカルリポジトリ
10. 身近な例で理解しよう LINEアルバム アルバム機能 リポジトリ アップロード push ダウンロード clone GitHub
11. GitHub Hands-on " ハンズオ ン - 準備
12. 基本的にVSCode上でGit操作 P 準備時のみ黒い画面(CLI)操0 P あとはVSCodeで直感的にGit操作 ※Gitとは？：Gitはツールの名前で、GitHubはWebサービスの名前。 この2つの関係は「メールとGmail」の関係に似ている。
13. 準備するもの 1. Gitのインストール/GitHubアカウントの作成 2. VSCodeのインストール
14. 準備するもの 1. Gitのインストール/GitHubアカウントの作€ ” Windowsの方:「【入門】GitHubの使い方｜設定や基本操作など」 　　〜「5.ローカルリポジトリを作成する」まで https://www.kagoya.jp/howto/it-glossary/develop/howtousegithub/
15. 準備するもの 1. Gitのインストール/GitHubアカウントの作Q a Macの方:「【Mac】Gitの環境構築をしよう！」 　　〜「4. GitHubの設定」の「GitHubアカウントの作成」まで https://prog-8.com/docs/git-env
16. 準備するもの 2. VSCodeのインストール https://python-engineer.co.jp/python-vscode-install/
17. 準備するもの ※ VSCodeを日本語設定にすI E 拡張機能「Japanese Language Pack for Visual Studio Code」をインストールする https://www.javadrive.jp/vscode/install/index4.html
18. GitHub Hands-on $# ハンズオ ン - Push
19. Git Pushまでの3つの状態 43 add （ファイルをコミット対象として選択） b3 commit （リモートリポジトリへ送るファイルを確定） …3 push （実際にリモートリポジトリへ送り届ける） ソースコードをPushするまでを郵便物を送るときに例えると... ポストに投函 郵送先へ届ける 手紙を封筒に入れる
20. ハンズオン： ソースコードのアップロード（Git Push） まず作業用フォルダを作成しVSCodeで開く ③フォルダーを開く ①デスクトップに 「github_handson」という フォルダーを作成 ④作成したフォルダーを選択 ②エクスプローラーを選択
21. ハンズオン： ソースコードのアップロード（Git Push） フォルダへのアクセスを許可します ※既にアクセスしたことがある方はスキップで大丈夫です 「許可」を選択
22. ハンズオン： ソースコードのアップロード（Git Push） < > < > < > < >私の初めてのGitHub</ > </ > < > < >Hello, GitHub!</ > < >あなたの名前: ここに名前を入力 </ > </ > </ > !DOCTYPE html head title title head body h1 h1 p p body html html ご自身の名前に変更してください 簡単なHTMLファイルを作成し、自身の名前へ変更 コピペはこちらのリンクから：https://qiita.com/cv_carnavi/items/2d787e8c0814e879a86d index.html
23. Ea ソース管理タブを開き「リポジトリを初期化する」を押7 &a 変更されたファイルが「変更」に表示され2 Xa +ボタンでファイルを「ステージされている変更」に移È Ça コミットメッセージを入% Âa ボタンでコミット実行 VSCodeでファイルをステージング ハンズオン： ソースコードのアップロード（Git Push） commit: ポストに投函 add: 手紙を封筒に入れる
24. Å" ソース管理タブを開き「リポジトリを初期化する」を押す ハンズオン： ソースコードのアップロード（Git Push） ①ソース管理タブを開く ②「リポジトリを初期化する」を押す
25.  変更されたファイルが「変更」に表示される ハンズオン： ソースコードのアップロード（Git Push） 「変更」の下に 「index.html」が表示されて いることを確認
26. É +ボタンでファイルを「ステージされている変更」に移動 ハンズオン： ソースコードのアップロード（Git Push） 「+」を押すことで 「ステージされている変更へ 移動し、ファイルを コミット対象として選択する add: 手紙を封筒に入れる
27. A コミットメッセージを入力 ※「誰が、いつ、何のために、どのような変更を行ったか」を記録するための重要な履歴 ハンズオン： ソースコードのアップロード（Git Push） 「htmlファイルを追加」と入力
28. B ボタンでコミット実行 ※「誰が、いつ、何のために、どのような変更を行ったか」を記録するための重要な履歴 ハンズオン： ソースコードのアップロード（Git Push） 「 コミット」を押すことでリモートリポジトリへ 送るファイルを確定する commit: ポストに投函
29. ix VSCodeの「Branchの発行」ボタンをクリッU Sx 「Push to GitHub private repository」を選& $x ブラウザのGitHubでフォルダの内容がアップロードされており、 自身の名前に変更されていることを確認 リモートリポジトリにアップロード ハンズオン： ソースコードのアップロード（Git Push） push: 郵送先へ届ける
30. % VSCodeの「Branchの発行」ボタンをクリック ハンズオン： ソースコードのアップロード（Git Push） 「Branchの発行」ボタンをクリックすることで 実際にリモートリポジトリへ送り届ける push: 郵送先へ届ける
31. É 「Push to GitHub private repository」を選択 ハンズオン： ソースコードのアップロード（Git Push） 「private」ボタンをクリックすることで “自身にのみが見れるリモートリポジトリ”にpushできる
32. 3 ブラウザのGitHubでフォルダの内容がアップロードされ ており、自身の名前に変更されていることを確認 URL： https://github.com/{自身のユーザ名} ハンズオン： ソースコードのアップロード（Git Push） ¢3 ブラウザで上記URLから自身のGitHubの ページへアクセス後、「Repositories」タブ をクリックし手元からpushしたフォルダが アップロードされていることを確x j3 index.htmlの自身が名前に変更されている ことを確認
33. 卒制・自主制作サイトを アップロードして紛失事故から守ろう
34. GitHub Hands-on %$ ハンズオ ン - Clone
35. ‰t 「clone_here」というフォルダを新たに作T Gt GitHubにアップしたリモートリポジトリのURLをコピ9 $t コマンドパレットを開く（Ctrl(Command) + Shift + P4 Èt 「git clone」と入力し「Git: クローン」を選Æ Åt リモートリポジトリのURLを入D Ät 「clone_here」以下にダウンロードされていることを確認 別の場所にダウンロード ハンズオン： ソースコードのダウンロード（Git Clone）
36. ! 「clone_here」というフォルダを新たに作成 ハンズオン： ソースコードのダウンロード（Git Clone） デスクトップ以下に「clone_here」 というフォルダを新たに作成
37. !% GitHubにアップしたリモートリポジトリのURLをコピー ハンズオン： ソースコードのダウンロード（Git Clone） ①Codeを押下 ②URLをコピー
38. 21 コマンドパレットを開く（Ctrl(Command) + Shift + P） ハンズオン： ソースコードのダウンロード（Git Clone）
39. % 「git clone」と入力し「Git: クローン」を選択 ハンズオン： ソースコードのダウンロード（Git Clone）
40. ハンズオン： ソースコードのダウンロード（Git Clone） 40 リモートリポジトリのURLを入力 ①リモートリポジトリのURLを入力 ②「clone_here」というフォルダを選択
41. ハンズオン： ソースコードのダウンロード（Git Clone） U9 「clone_here」以下にダウンロードされていることを確認 ②「clone_here」以下にダウンロードされていることを確認 ①「開く」を押下 VSCode Finder
42. 自他がアップしたソースコードを ダウンロードできる
43. GitHub Hands-on # 知っ ておきたい用語
44. ブランチ（branch’ ƒ 複数人で並行して開発するときに1つのソースコードをリアルタイム編集しているとバッ ティングが起きc ƒ 例：フォトフレームを入れたあと写真含めた全体の色を変えるとフォトフレームの色まで変 わってしまW ƒ なので作業方針単位で枝葉（ブランチ）として切り出した後そこで作業する マージ（merge’ ƒ 別ブランチで作業後に順番整理や衝突（コンフリクト）解消してから合流させc ƒ 例：写真を含めた全体の色を変えた後にフォトフレームを入れる チーム開発する際に出てくるGit用語
45. ブランチの切り出しとマージの流れ main (本番稼働用) release (本番リリース用) develop (開発統合用) feature A (機能A開発用) feature B (機能B開発用) ① 開発統合用への切り出し v0.1 v0.2 ③ 開発統合用へマージ ④ リリース用へマージ ⑤ 本番へマージ ② 各機能用への切り出し
46. H Pull Request - 変更内容のレビュー依G H Fork - 他人のリポジトリを自分のアカウントにコピ% H Issue - タスク管理・バグ報告 その他のGit用語
47. 2 「GitHub使ったことあります！」と言え% 2 卒制・自主制作サイトを紛失事故から守れ% 2 他の人のイケてるコードをcloneして使える 本ハンズオンを通してできるようになったこと
48. 質問