diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 380694d4..220302e5 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -25,7 +25,7 @@ jobs: matrix: include: - slide: git - output_name: github-desktop-slide + output_name: git-vscode-slide - slide: design output_name: basic-design-slide - slide: about-webapp diff --git a/git/README.md b/git/README.md index aa5784a1..8184f8b2 100644 --- a/git/README.md +++ b/git/README.md @@ -1,29 +1,45 @@ # Git / Github 学習資料 ## 0. 事前準備 -### 0-1. Github Desktop をインストールする +### 0-1. Git をインストールする -以下URLから **Github Desktop** をインストールしてください。 -尚、既にGit/Githubに関する知識があり、使い慣れたツール等がある場合はスキップして構いません。 +本資料では、**Git** を利用します。以下を参考にインストールしてください。 +既にインストール済みの場合はスキップして構いません(ターミナルで `git -v` を実行して、バージョンが表示されれば導入済みです)。 -- [Github Desktop Installation](https://docs.github.com/ja/desktop/installing-and-configuring-github-desktop/installing-and-authenticating-to-github-desktop/installing-github-desktop) +- macOS: ターミナルで `xcode-select --install` を実行 +- Windows: [Git for Windows](https://gitforwindows.org/) をインストール ### 0-2. Visual Studio Code をインストールする -開発に利用するエディタが無い場合は、**Visual Studio Code** をインストールしてください。 -使い慣れたエディタがある場合は、そちらを利用していただいて問題ありませんが、導入を推奨します。 +本資料では、**Visual Studio Code**(VSCode)の Git 機能を利用して開発を進めます。 +以下 URL からインストールしてください。 -- [Visual Studio Installation](https://code.visualstudio.com/) +- [Visual Studio Code Installation](https://code.visualstudio.com/) + +### 0-3. Git の初期設定をする + +コミットの記録に使われる名前とメールアドレスを設定します。 +未設定のままだとコミットできないため、ターミナルで以下を実行してください。 + +```sh +git config --global user.name "自分の名前" +git config --global user.email "自分のメールアドレス" +``` + +### 0-4. Github アカウントを準備する + +[Github](https://github.com/) のアカウントを作成しておいてください。 +VSCode から Github へのサインインは、本編(2-5. push)の中で行います。 ## 1. 目次 1. [導入編 (10min)](./docs.md#1-導入編) - - 1-1. [Gitとは何か?](./docs.md/#1-1-gitとは何か) - - 1-2. [Githubとは何か?](./docs.md/#1-2-githubとは何か) - - 1-3. [Github Desktopとは何か?](./docs.md/#1-3-github-desktopとは何か) + - 1-1. [Gitとは何か?](./docs.md#1-1-gitとは何か) + - 1-2. [Githubとは何か?](./docs.md#1-2-githubとは何か) + - 1-3. [VSCodeのGit機能とは何か?](./docs.md#1-3-vscodeのgit機能とは何か) -2. [Github Desktopを触ってみよう (50min)](./docs.md#2-github-desktopを触ってみよう) - - 2-1. [clone: Githubリポジトリを丸ごとダウンロードしよう](./docs.md/#2-1-clone-githubリポジトリを丸ごとダウンロードしよう) +2. [VSCodeのGit機能を触ってみよう (50min)](./docs.md#2-vscodeのgit機能を触ってみよう) + - 2-1. [clone: Githubリポジトリを丸ごとダウンロードしよう](./docs.md#2-1-clone-githubリポジトリを丸ごとダウンロードしよう) - 2-2. [branch: 作業を枝分かれさせよう](./docs.md#2-2-branch-作業を枝分かれさせよう) - 2-3. [commit: 作業前と後の**差分を記録**しよう](./docs.md#2-3-commit-作業前と後の差分を記録しよう) - 2-4. [log: 作業の履歴を確認しよう](./docs.md#2-4-log-作業の履歴を確認しよう) @@ -35,4 +51,4 @@ ## 2. URL - テキスト: [資料](./docs.md) -- スライド: [プレゼンテーション表示](https://jigintern.github.io/intern-dev-tutorial/git/github-desktop-slide.html), [一覧表示](https://jigintern.github.io/intern-dev-tutorial/git/github-desktop-slide.pdf) \ No newline at end of file +- スライド: [プレゼンテーション表示](https://jigintern.github.io/intern-dev-tutorial/git/git-vscode-slide.html), [一覧表示](https://jigintern.github.io/intern-dev-tutorial/git/git-vscode-slide.pdf) diff --git a/git/docs.md b/git/docs.md index 74e049d3..e51824c6 100644 --- a/git/docs.md +++ b/git/docs.md @@ -1,13 +1,13 @@ -# Github Desktop を利用したチーム開発手法 +# VSCode の Git 機能を利用したチーム開発手法 -本項では、GitHub, Inc. が提供するアプリケーション [Github Desktop](https://docs.github.com/ja/desktop) を利用した開発手法について解説します。 +本項では、Visual Studio Code(VSCode)に標準搭載されているGit機能(ソース管理ビュー)を利用した開発手法について解説します。 この資料と同一のフォルダ内に、スライドも掲載しており、双方を参照することで学習を進めます。 基本的にはスライドで解説を進めるので、本項は必要に応じて参照してください。 ## 1. 導入編 -*Git・Github・Github Desktopについて知ろう!* +*Git・Github・VSCodeのGit機能について知ろう!* ### 1-1. Gitとは何か? @@ -50,26 +50,28 @@ Githubは、Gitのリポジトリをインターネット上で管理するた この資料も、Github上で公開されています。 Githubを活用した開発では、大まかに、以下のような手順で作業が進められます。 -1. clone: Githubリポジトリを丸ごと丸ごとダウンロードする +1. clone: Githubリポジトリを丸ごとダウンロードする 2. branch: 作業を枝分かれさせて、他の開発者との衝突を防止する 3. 通常通りに、プログラムを書く -4. commit: 作業前と後の**差分を記録**しよう +4. commit: 作業前と後の**差分を記録**する 5. push: 作業の成果をGithubにアップロードして共有する 6. Pull Request: 枝分かれした成果を結合する -### 1-3. Github Desktopとは何か? +### 1-3. VSCodeのGit機能とは何か? -> GitHub Desktop では、コマンド ラインや Web ブラウザーではなく GUI を使用して GitHub と対話できます。 -> 出典: https://docs.github.com/ja/desktop +> Visual Studio Code には統合されたソース管理機能(SCM)があり、Git のサポートが標準で組み込まれています。 +> 出典: https://code.visualstudio.com/docs/sourcecontrol/overview -Github DesktopはGit / Githubの機能をGUI(ボタン等でコンピュータに命令を送るもの)で操作するためのアプリケーションです。 +VSCodeには、Git / Githubの機能をGUI(ボタン等でコンピュータに命令を送るもの)で操作するための「ソース管理 (Source Control)」ビューが標準で搭載されています。 Gitは多くの場合、CUI(文字のみでコンピュータに命令を送るもの)で操作を行いますが、これに慣れるためには時間が必要なため、簡略化のために使用します。 +拡張機能のインストールは不要で、VSCodeさえ導入されていればすぐに使うことができます。ただし、Git本体のインストールは別途必要です(事前準備で導入済みのものとします)。 + > Topic: CUIでも操作できると、様々な環境に適応できるのでおすすめです -## 2. Github Desktopを触ってみよう +## 2. VSCodeのGit機能を触ってみよう -*Github Desktopを実際に使ってみよう!* +*VSCodeのGit機能を実際に使ってみよう!* ### 2-1. clone: Githubリポジトリを丸ごとダウンロードしよう @@ -85,28 +87,32 @@ Githubにアップロードされているリポジトリを丸ごと取得し 基本的には、開発の最初に各開発者が一度ずつ行う操作です。 -Github Desktopでは、以下のように操作することで、クローンの操作を行うことができます。 -例として、`git-tutorial-2025`のリポジトリで作業してみましょう。 +VSCodeでは、以下のように操作することで、クローンの操作を行うことができます。 +例として、`git-tutorial-2026`のリポジトリで作業してみましょう。
-練習: Github Desktopでクローンしてみよう +練習: VSCodeでクローンしてみよう + +1. 練習リポジトリのURLにアクセスして、「<> Code」ボタンをクリックし、表示されたHTTPSのURLをコピーします +> repository: https://github.com/jigintern/git-tutorial-2026 +![](./imgs/screen-shots/01_github_code_button.png) -1. 下記URLにアクセスして、「<> Code」のボタンをクリックします -> repository: https://github.com/jigintern/git-tutorial-2025 +2. VSCodeを開いて、「ようこそ」画面の「Git リポジトリのクローン... (Clone Git Repository...)」をクリックします +コマンドパレット(Cmd/Ctrl+Shift+P)で「Git: クローン (Git: Clone)」を選んでも、同じ操作ができます。 +![](./imgs/screen-shots/02_vscode_clone_repository.png) -2. 表示されたウィンドウの「Open with Github Desktop」をクリックして、Github Desktopを開きます -![](./imgs/screen-shots/01_github_open_with_github_desktop.png) +3. 画面上部の入力欄に、コピーしたURLを貼り付けて、Enterキーを押します +![](./imgs/screen-shots/03_clone_input_url.png) -3. 「Local Path」にPC上での保存先を設定し、「Clone」をクリックします -![](./imgs/screen-shots/02_clone_repository_github_desktop.png) +4. PC上での保存先のフォルダーを選択します +![](./imgs/screen-shots/04_clone_select_folder.png) -4. リポジトリがクローンできたことを確認します -以下のような画面になっていれば、問題ありません -![](./imgs/screen-shots/03_confirm_clone_repository.png) +5. 「クローンしたリポジトリを開きますか?」という通知が表示されるので、「開く」をクリックします +(「このフォルダー内のファイルの作成者を信頼しますか?」と確認された場合は、「はい、作成者を信頼します」を選択してください) +![](./imgs/screen-shots/05_open_cloned_repository.png) -5. 「Open in Visual Studio Code」をクリックして、リポジトリをVisual Studio Codeで開きます -問題無く、Githubにアップロードされていたファイルが取り込めているようです。 -![](./imgs/screen-shots/04_view_with_vscode.png) +6. エクスプローラーに、Githubにアップロードされていたファイルが表示されていることを確認します +![](./imgs/screen-shots/06_view_cloned_files.png)
@@ -135,26 +141,27 @@ gitGraph また、作業するブランチを切り替える操作を`checkout`(チェックアウト)と呼びます。 -Github Desktopでは、以下のように操作することで、ブランチを切る操作を行うことができます。 +VSCodeでは、以下のように操作することで、ブランチを切る操作を行うことができます。
練習: ブランチを切ってみよう -1. ブランチ操作用のフォームを開きます +1. 画面左下、ステータスバーに表示されているブランチ名(main)をクリックします +![](./imgs/screen-shots/07_statusbar_branch.png) -2. 「New Branch」をクリックして、新規ブランチの作成ウィンドウを開きます -![](./imgs/screen-shots/05_branch_form.png) +2. 画面上部に表示されるメニューから、「+ 新しいブランチの作成... (Create new branch...)」をクリックします +![](./imgs/screen-shots/08_create_new_branch.png) -3. 新規ブランチの名前を入力して、「Create Branch」をクリックします +3. 新規ブランチの名前を入力して、Enterキーを押します ブランチの名前は他の参加者と重複しないよう、自分の名前等で設定してください。 -![](./imgs/screen-shots/06_branch_name.png) -既にコードに変更を加えている場合は、以下のような画面が表示されるので、「Bring my changes to ...」を選択してください -![](./imgs/screen-shots/07_branch_bring_changes.png) +![](./imgs/screen-shots/09_branch_name_input.png) -4. 新しいブランチができるので、作業に取り掛かることができます。 +4. ステータスバーの表示が、新しいブランチ名に切り替わったことを確認します +![](./imgs/screen-shots/10_branch_switched.png)
+既にファイルに変更を加えていた場合、その変更は新しいブランチにそのまま持ち越されます。 ### 2-3. commit: 作業前と後の**差分を記録**しよう @@ -182,29 +189,33 @@ gitGraph > .DS_Store > ``` -Github Desktopでは、以下のように操作することで、コミットの操作を行うことができます。 +VSCodeでは、以下のように操作することで、コミットの操作を行うことができます。
練習: 作業してコミットしてみよう -1. Visual Studio Codeを開いて、ファイルを新規作成します +1. ファイルを新規作成します ファイルの名前は他の参加者と重複しないよう、自分の名前等で半角英数字で設定してください -![](./imgs/screen-shots/08_create_file.png) +![](./imgs/screen-shots/11_create_file.png) 2. 作成したファイルに、適当なプログラムを書き込みます -![](./imgs/screen-shots/09_write_python_code.png) +![](./imgs/screen-shots/12_write_python_code.png) -3. Github Desktopを開いて、差分が表示されていること、その差分が正しいことを確認します -![](./imgs/screen-shots/10_view_changes.png) +3. アクティビティバー(画面左端)の「ソース管理 (Source Control)」アイコンをクリックして、ソース管理ビューを開きます +「変更 (Changes)」に作成したファイルが表示されていること、ファイル名をクリックすると差分が表示されることを確認します +![](./imgs/screen-shots/13_scm_view_changes.png) -4. 画面左下、ユーザアイコンの横の入力フォームに、変更内容についての説明文(コミットメッセージ)を記載します +4. ファイル名にカーソルを合わせて「+」(変更をステージ / Stage Changes)をクリックし、「ステージされた変更 (Staged Changes)」に移動させます +![](./imgs/screen-shots/14_scm_stage_changes.png) -5. 「Commit to ...」をクリックします +5. 上部の入力欄に、変更内容についての説明文(コミットメッセージ)を記載し、「コミット (Commit)」ボタンをクリックします これでコミットが完了します -![](./imgs/screen-shots/11_input_commit_message.png) +![](./imgs/screen-shots/15_scm_commit.png)
+> Topic: ステージ(stage)は、「次のコミットに含める変更を選ぶ」操作です。今回のように変更をまとめてコミットする場合は、ステージを省略しても構いません(ステージせずにコミットすると、すべての変更をコミットするか確認されます)。 + ### 2-4. log: 作業の履歴を確認しよう @@ -212,37 +223,47 @@ Github Desktopでは、以下のように操作することで、コミットの 現在作業中のブランチでのコミットの履歴を確認し、作業内容を確認することができます。 作業を始める前やコミットが正しく完了したか、作業の開始地点が正しいかなどの確認のために用います。 -Github Desktopでは、以下のように操作することで、ログを確認することができます。 +VSCodeでは、以下のように操作することで、ログを確認することができます。
練習: コミットの履歴を確認しよう -1. 「History」をクリックして、コミットの履歴が表示されることを確認します -![](./imgs/screen-shots/12_view_history.png) +1. ソース管理ビューの「グラフ (Graph)」に、コミットの履歴が表示されることを確認します +![](./imgs/screen-shots/16_source_control_graph.png)
+> Topic: エクスプローラー下部の「タイムライン (Timeline)」では、開いているファイル単位の変更履歴を確認できます。 + ### 2-5. push: 作業の成果をGithubにアップロードして共有しよう `push`(プッシュ)は、現在のブランチの作業内容をGithub等にアップロードする操作です。 他の開発者に作業内容を共有する時、作業が一段落して、ブランチの内容を元のブランチに結合したい時などに行います(後述。ブランチの結合操作は他開発者に確認してもらうのが望ましいため、Github上で行います)。 -Github Desktopでは、以下のように操作することで、プッシュの操作を行うことができます。 +VSCodeでは、以下のように操作することで、プッシュの操作を行うことができます。
練習: 作業内容をプッシュしてみよう -1. 「Changes」をクリックして、元の画面に戻ります +1. ソース管理ビューの「Branch の発行 (Publish Branch)」をクリックします +![](./imgs/screen-shots/17_publish_branch.png) + +2. 初回はGithubへのサインインを求められるので、「許可 (Allow)」をクリックします +![](./imgs/screen-shots/18_github_signin_dialog.png) -2. 「Publish branch」をクリックして、変更内容をプッシュします -![](./imgs/screen-shots/13_publish_branch.png) +3. ブラウザが開くので、Githubにログインして「Authorize Visual-Studio-Code」をクリックし、VSCodeに戻ります +![](./imgs/screen-shots/19_github_authorize_browser.png) -3. ブラウザでGithubを開き、プッシュしたブランチが正しく反映されていることを確認します -![](./imgs/screen-shots/14_confirm_publish.png) +4. ブラウザでGithubを開き、プッシュしたブランチが正しく反映されていることを確認します +![](./imgs/screen-shots/20_confirm_publish.png)
+一度プッシュしたブランチにさらにコミットした場合は、「変更の同期 (Sync Changes)」ボタンでプッシュできます。 + +> Topic: サインインがうまくいかない場合は、GitHub CLI(`gh auth login`)やGit Credential Managerを導入することで解決できることがあります。 + ### 2-6. Pull Request: 枝分かれした成果を結合しよう @@ -280,25 +301,25 @@ Github上で、以下のように操作することで、Pull Requestの作成 1. Githubで「Pull requests」のタブをクリック 2. 「New pull request」をクリックします -![](./imgs/screen-shots/15_new_pull_request.png) +![](./imgs/screen-shots/21_new_pull_request.png) 3. 新規ブランチの名前、Pull Requestのタイトル、本文を入力します 他の開発者に確認してもらうものなので、作業内容が理解しやすい内容にすると良いです 4. 「Create pull request」をクリックすると、Pull Requestが作成されます -![](./imgs/screen-shots/16_write_pull_request.png) +![](./imgs/screen-shots/22_write_pull_request.png) 5. 他開発者に、Pull Requestの確認を依頼します SlackやGithub上でのコメントなど、適宜チーム内で決定した方法で依頼しましょう 6. 確認を依頼された人は、Pull Requestの変更内容等を確認して、問題箇所があればコメント等で指摘します 問題箇所が無い場合は、LGTM(Looks Good To Me: 私は良いと思います)等のコメントをつけて確認したことを報告しましょう -![](./imgs/screen-shots/17_view_pull_request.png) -![](./imgs/screen-shots/18_review_lgtm.png) +![](./imgs/screen-shots/23_view_pull_request.png) +![](./imgs/screen-shots/24_review_lgtm.png) 7. Pull Requestの作成者は、「Merge pull request」をクリックして、Pull Requestを元のブランチに結合します -![](./imgs/screen-shots/19_merge_pull_request.png) -![](./imgs/screen-shots/20_merged_pull_request.png) +![](./imgs/screen-shots/25_merge_pull_request.png) +![](./imgs/screen-shots/26_merged_pull_request.png) 8. `main`ブランチを確認して、変更内容が正しく取り込まれていることを確認します @@ -312,24 +333,26 @@ SlackやGithub上でのコメントなど、適宜チーム内で決定した方 一見すると違いがありませんが、`fetch`で行うのは変更が行われているかの確認のみで、実際にPC上のファイルの内容が書き換わることはありません。対して、`pull`を行った場合、変更内容がPC上のファイルに反映され、書き換えられます。 -Github Desktopでは、以下のように操作することで、これらの操作を行うことができます。 +VSCodeでは、以下のように操作することで、これらの操作を行うことができます。
練習: fetch / pullで変更後のGithubの内容を取り込もう -1. `main`ブランチに移動します -![](./imgs/screen-shots/21_checkout_main.png) +1. ステータスバーのブランチ名をクリックし、`main`ブランチに切り替えます +![](./imgs/screen-shots/27_checkout_main.png) -2. 画面上部の「Fetch origin」をクリックします -これだけでは変更内容は取り込まれませんが、Github上で変更があったことをGithub Desktopが認識します -(Github Desktopの自動更新がONになっている場合、既に変更が取り込まれている場合があります) -![](./imgs/screen-shots/22_fetch_origin.png) +2. ソース管理ビュー右上の「... (その他のアクション)」メニューから、「フェッチ (Fetch)」をクリックします +これだけでは変更内容は取り込まれませんが、Github上で変更があったことをVSCodeが認識します +![](./imgs/screen-shots/28_fetch_pull_menu.png) -3. 画面上部の「Pull origin」をクリックします +3. ステータスバーのブランチ名の横に、「2↓」のように取り込める変更の数が表示されます +同じ「...」メニューから「プル (Pull)」をクリックします(ステータスバーの同期ボタンをクリックしても同じです) これで変更内容が取り込まれ、PC上のファイルが更新されます -![](./imgs/screen-shots/23_pull_origin.png) +![](./imgs/screen-shots/29_sync_incoming.png) -4. 変更内容が取り込まれていることを、「History」から確認します -![](./imgs/screen-shots/24_results.png) +4. 変更内容が取り込まれていることを、ソース管理ビューの「グラフ (Graph)」から確認します +![](./imgs/screen-shots/30_pull_results.png) + +
- \ No newline at end of file +> Topic: VSCodeの設定で自動フェッチ(`git.autofetch`)を有効にしている場合、手順2を行わなくても「2↓」のような表示が現れることがあります(初回起動時などに、自動フェッチを有効にするか確認されることがあります)。 diff --git a/git/imgs/materials/03_github_desktop_home.png b/git/imgs/materials/03_github_desktop_home.png deleted file mode 100644 index 376cd1cb..00000000 Binary files a/git/imgs/materials/03_github_desktop_home.png and /dev/null differ diff --git a/git/imgs/screen-shots/01_github_code_button.png b/git/imgs/screen-shots/01_github_code_button.png new file mode 100644 index 00000000..90378824 Binary files /dev/null and b/git/imgs/screen-shots/01_github_code_button.png differ diff --git a/git/imgs/screen-shots/01_github_open_with_github_desktop.png b/git/imgs/screen-shots/01_github_open_with_github_desktop.png deleted file mode 100644 index 5be56e5f..00000000 Binary files a/git/imgs/screen-shots/01_github_open_with_github_desktop.png and /dev/null differ diff --git a/git/imgs/screen-shots/02_clone_repository_github_desktop.png b/git/imgs/screen-shots/02_clone_repository_github_desktop.png deleted file mode 100644 index 0102e8f0..00000000 Binary files a/git/imgs/screen-shots/02_clone_repository_github_desktop.png and /dev/null differ diff --git a/git/imgs/screen-shots/02_vscode_clone_repository.png b/git/imgs/screen-shots/02_vscode_clone_repository.png new file mode 100644 index 00000000..3b267c1d Binary files /dev/null and b/git/imgs/screen-shots/02_vscode_clone_repository.png differ diff --git a/git/imgs/screen-shots/03_clone_input_url.png b/git/imgs/screen-shots/03_clone_input_url.png new file mode 100644 index 00000000..e2fcb461 Binary files /dev/null and b/git/imgs/screen-shots/03_clone_input_url.png differ diff --git a/git/imgs/screen-shots/03_confirm_clone_repository.png b/git/imgs/screen-shots/03_confirm_clone_repository.png deleted file mode 100644 index ad443a96..00000000 Binary files a/git/imgs/screen-shots/03_confirm_clone_repository.png and /dev/null differ diff --git a/git/imgs/screen-shots/04_clone_select_folder.png b/git/imgs/screen-shots/04_clone_select_folder.png new file mode 100644 index 00000000..84f292c9 Binary files /dev/null and b/git/imgs/screen-shots/04_clone_select_folder.png differ diff --git a/git/imgs/screen-shots/04_view_with_vscode.png b/git/imgs/screen-shots/04_view_with_vscode.png deleted file mode 100644 index a1dff7fb..00000000 Binary files a/git/imgs/screen-shots/04_view_with_vscode.png and /dev/null differ diff --git a/git/imgs/screen-shots/05_branch_form.png b/git/imgs/screen-shots/05_branch_form.png deleted file mode 100644 index ced3d704..00000000 Binary files a/git/imgs/screen-shots/05_branch_form.png and /dev/null differ diff --git a/git/imgs/screen-shots/05_open_cloned_repository.png b/git/imgs/screen-shots/05_open_cloned_repository.png new file mode 100644 index 00000000..fabbd09a Binary files /dev/null and b/git/imgs/screen-shots/05_open_cloned_repository.png differ diff --git a/git/imgs/screen-shots/06_branch_name.png b/git/imgs/screen-shots/06_branch_name.png deleted file mode 100644 index 0fd11f20..00000000 Binary files a/git/imgs/screen-shots/06_branch_name.png and /dev/null differ diff --git a/git/imgs/screen-shots/06_view_cloned_files.png b/git/imgs/screen-shots/06_view_cloned_files.png new file mode 100644 index 00000000..6a332a0f Binary files /dev/null and b/git/imgs/screen-shots/06_view_cloned_files.png differ diff --git a/git/imgs/screen-shots/07_branch_bring_changes.png b/git/imgs/screen-shots/07_branch_bring_changes.png deleted file mode 100644 index 40ae3e45..00000000 Binary files a/git/imgs/screen-shots/07_branch_bring_changes.png and /dev/null differ diff --git a/git/imgs/screen-shots/07_statusbar_branch.png b/git/imgs/screen-shots/07_statusbar_branch.png new file mode 100644 index 00000000..97800af9 Binary files /dev/null and b/git/imgs/screen-shots/07_statusbar_branch.png differ diff --git a/git/imgs/screen-shots/08_create_file.png b/git/imgs/screen-shots/08_create_file.png deleted file mode 100644 index a1dff7fb..00000000 Binary files a/git/imgs/screen-shots/08_create_file.png and /dev/null differ diff --git a/git/imgs/screen-shots/08_create_new_branch.png b/git/imgs/screen-shots/08_create_new_branch.png new file mode 100644 index 00000000..5db37dd3 Binary files /dev/null and b/git/imgs/screen-shots/08_create_new_branch.png differ diff --git a/git/imgs/screen-shots/09_branch_name_input.png b/git/imgs/screen-shots/09_branch_name_input.png new file mode 100644 index 00000000..09a57a67 Binary files /dev/null and b/git/imgs/screen-shots/09_branch_name_input.png differ diff --git a/git/imgs/screen-shots/09_write_python_code.png b/git/imgs/screen-shots/09_write_python_code.png deleted file mode 100644 index d36bcf67..00000000 Binary files a/git/imgs/screen-shots/09_write_python_code.png and /dev/null differ diff --git a/git/imgs/screen-shots/10_branch_switched.png b/git/imgs/screen-shots/10_branch_switched.png new file mode 100644 index 00000000..11580fc5 Binary files /dev/null and b/git/imgs/screen-shots/10_branch_switched.png differ diff --git a/git/imgs/screen-shots/10_view_changes.png b/git/imgs/screen-shots/10_view_changes.png deleted file mode 100644 index e591ceb2..00000000 Binary files a/git/imgs/screen-shots/10_view_changes.png and /dev/null differ diff --git a/git/imgs/screen-shots/11_create_file.png b/git/imgs/screen-shots/11_create_file.png new file mode 100644 index 00000000..9a409713 Binary files /dev/null and b/git/imgs/screen-shots/11_create_file.png differ diff --git a/git/imgs/screen-shots/11_input_commit_message.png b/git/imgs/screen-shots/11_input_commit_message.png deleted file mode 100644 index 83939bc9..00000000 Binary files a/git/imgs/screen-shots/11_input_commit_message.png and /dev/null differ diff --git a/git/imgs/screen-shots/12_view_history.png b/git/imgs/screen-shots/12_view_history.png deleted file mode 100644 index 6e2b380f..00000000 Binary files a/git/imgs/screen-shots/12_view_history.png and /dev/null differ diff --git a/git/imgs/screen-shots/12_write_python_code.png b/git/imgs/screen-shots/12_write_python_code.png new file mode 100644 index 00000000..fde4a8ec Binary files /dev/null and b/git/imgs/screen-shots/12_write_python_code.png differ diff --git a/git/imgs/screen-shots/13_github_pull_request.png b/git/imgs/screen-shots/13_github_pull_request.png deleted file mode 100644 index d0dcf156..00000000 Binary files a/git/imgs/screen-shots/13_github_pull_request.png and /dev/null differ diff --git a/git/imgs/screen-shots/13_publish_branch.png b/git/imgs/screen-shots/13_publish_branch.png deleted file mode 100644 index 611c7dec..00000000 Binary files a/git/imgs/screen-shots/13_publish_branch.png and /dev/null differ diff --git a/git/imgs/screen-shots/13_scm_view_changes.png b/git/imgs/screen-shots/13_scm_view_changes.png new file mode 100644 index 00000000..f86a934b Binary files /dev/null and b/git/imgs/screen-shots/13_scm_view_changes.png differ diff --git a/git/imgs/screen-shots/14_confirm_publish.png b/git/imgs/screen-shots/14_confirm_publish.png deleted file mode 100644 index 7ebba49a..00000000 Binary files a/git/imgs/screen-shots/14_confirm_publish.png and /dev/null differ diff --git a/git/imgs/screen-shots/14_scm_stage_changes.png b/git/imgs/screen-shots/14_scm_stage_changes.png new file mode 100644 index 00000000..8fe40b8b Binary files /dev/null and b/git/imgs/screen-shots/14_scm_stage_changes.png differ diff --git a/git/imgs/screen-shots/15_scm_commit.png b/git/imgs/screen-shots/15_scm_commit.png new file mode 100644 index 00000000..a0b920fc Binary files /dev/null and b/git/imgs/screen-shots/15_scm_commit.png differ diff --git a/git/imgs/screen-shots/16_source_control_graph.png b/git/imgs/screen-shots/16_source_control_graph.png new file mode 100644 index 00000000..2ba92231 Binary files /dev/null and b/git/imgs/screen-shots/16_source_control_graph.png differ diff --git a/git/imgs/screen-shots/17_publish_branch.png b/git/imgs/screen-shots/17_publish_branch.png new file mode 100644 index 00000000..3684c955 Binary files /dev/null and b/git/imgs/screen-shots/17_publish_branch.png differ diff --git a/git/imgs/screen-shots/18_github_signin_dialog.png b/git/imgs/screen-shots/18_github_signin_dialog.png new file mode 100644 index 00000000..d3074a47 Binary files /dev/null and b/git/imgs/screen-shots/18_github_signin_dialog.png differ diff --git a/git/imgs/screen-shots/19_github_authorize_browser.png b/git/imgs/screen-shots/19_github_authorize_browser.png new file mode 100644 index 00000000..f193f4d5 Binary files /dev/null and b/git/imgs/screen-shots/19_github_authorize_browser.png differ diff --git a/git/imgs/screen-shots/20_confirm_publish.png b/git/imgs/screen-shots/20_confirm_publish.png new file mode 100644 index 00000000..1a75f637 Binary files /dev/null and b/git/imgs/screen-shots/20_confirm_publish.png differ diff --git a/git/imgs/screen-shots/21_checkout_main.png b/git/imgs/screen-shots/21_checkout_main.png deleted file mode 100644 index 1d8cd16c..00000000 Binary files a/git/imgs/screen-shots/21_checkout_main.png and /dev/null differ diff --git a/git/imgs/screen-shots/15_new_pull_request.png b/git/imgs/screen-shots/21_new_pull_request.png similarity index 100% rename from git/imgs/screen-shots/15_new_pull_request.png rename to git/imgs/screen-shots/21_new_pull_request.png diff --git a/git/imgs/screen-shots/22_fetch_origin.png b/git/imgs/screen-shots/22_fetch_origin.png deleted file mode 100644 index cc1ee137..00000000 Binary files a/git/imgs/screen-shots/22_fetch_origin.png and /dev/null differ diff --git a/git/imgs/screen-shots/16_write_pull_request.png b/git/imgs/screen-shots/22_write_pull_request.png similarity index 100% rename from git/imgs/screen-shots/16_write_pull_request.png rename to git/imgs/screen-shots/22_write_pull_request.png diff --git a/git/imgs/screen-shots/23_pull_origin.png b/git/imgs/screen-shots/23_pull_origin.png deleted file mode 100644 index 1ddfe7ed..00000000 Binary files a/git/imgs/screen-shots/23_pull_origin.png and /dev/null differ diff --git a/git/imgs/screen-shots/17_view_pull_request.png b/git/imgs/screen-shots/23_view_pull_request.png similarity index 100% rename from git/imgs/screen-shots/17_view_pull_request.png rename to git/imgs/screen-shots/23_view_pull_request.png diff --git a/git/imgs/screen-shots/24_results.png b/git/imgs/screen-shots/24_results.png deleted file mode 100644 index ccdace77..00000000 Binary files a/git/imgs/screen-shots/24_results.png and /dev/null differ diff --git a/git/imgs/screen-shots/18_review_lgtm.png b/git/imgs/screen-shots/24_review_lgtm.png similarity index 100% rename from git/imgs/screen-shots/18_review_lgtm.png rename to git/imgs/screen-shots/24_review_lgtm.png diff --git a/git/imgs/screen-shots/19_merge_pull_request.png b/git/imgs/screen-shots/25_merge_pull_request.png similarity index 100% rename from git/imgs/screen-shots/19_merge_pull_request.png rename to git/imgs/screen-shots/25_merge_pull_request.png diff --git a/git/imgs/screen-shots/20_merged_pull_request.png b/git/imgs/screen-shots/26_merged_pull_request.png similarity index 100% rename from git/imgs/screen-shots/20_merged_pull_request.png rename to git/imgs/screen-shots/26_merged_pull_request.png diff --git a/git/imgs/screen-shots/27_checkout_main.png b/git/imgs/screen-shots/27_checkout_main.png new file mode 100644 index 00000000..84782457 Binary files /dev/null and b/git/imgs/screen-shots/27_checkout_main.png differ diff --git a/git/imgs/screen-shots/28_fetch_pull_menu.png b/git/imgs/screen-shots/28_fetch_pull_menu.png new file mode 100644 index 00000000..95f514c1 Binary files /dev/null and b/git/imgs/screen-shots/28_fetch_pull_menu.png differ diff --git a/git/imgs/screen-shots/29_sync_incoming.png b/git/imgs/screen-shots/29_sync_incoming.png new file mode 100644 index 00000000..4195dfae Binary files /dev/null and b/git/imgs/screen-shots/29_sync_incoming.png differ diff --git a/git/imgs/screen-shots/30_pull_results.png b/git/imgs/screen-shots/30_pull_results.png new file mode 100644 index 00000000..3c03bd5c Binary files /dev/null and b/git/imgs/screen-shots/30_pull_results.png differ diff --git a/git/slide.md b/git/slide.md index f3fc861f..40aef7c5 100644 --- a/git/slide.md +++ b/git/slide.md @@ -4,17 +4,18 @@ theme: uncover paginate: true --- -# **Github Desktop** を +# **VSCode の Git 機能** を + # 利用したチーム開発手法 --- ## 1. 導入編 -*Git・Github・Github Desktop -について知ろう!* +_Git・Github・VSCodeのGit機能について知ろう!_ --- + @@ -28,7 +29,6 @@ header: 1-1. Gitとは何か? > Git(ギット)は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。 > 出典: https://ja.wikipedia.org/wiki/Git - --- ### 分散型……バージョン管理システム……? @@ -36,6 +36,7 @@ header: 1-1. Gitとは何か? --- ### **ゲームのセーブデータ**みたいに + ### 今の状態を保存しておくもの これをリポジトリ、と呼びます @@ -86,7 +87,6 @@ header: 1-1. Gitとは何か? ![bg right:40%](./imgs/materials/01_git_tree.png) - --- ### Gitとは何か? @@ -157,17 +157,17 @@ gitをオンラインで管理するやつ --- -## 1-3. Github Desktopとは何か? +## 1-3. VSCodeのGit機能とは何か? --- -### Github Desktopとは何か? +### VSCodeのGit機能とは何か? -> GitHub Desktop では、コマンド ラインや Web ブラウザーではなく GUI を使用して GitHub と対話できます。 -> 出典: https://docs.github.com/ja/desktop +> Visual Studio Code には統合されたソース管理機能(SCM)があり、Git のサポートが標準で組み込まれています。 +> 出典: https://code.visualstudio.com/docs/sourcecontrol/overview --- @@ -179,51 +179,33 @@ header: 1-3. Github Desktopとは何か? --- -### Github Desktopを使えば、**コマンド無し**で操作できます +### VSCodeの**ソース管理ビュー**を使えば、**コマンド無し**で操作できます -環境構築もインストールするだけ! -事前にインストールして貰いました +拡張機能のインストールも不要! +VSCodeを入れればすぐ使えます +(Git本体は事前準備でインストール済み) --- - -### UIはこんな感じ -表示されているのは、この資料を書いている時の様子です +### 今回はVSCodeのGit機能を使って開発します -![bg contain brightness:50%](./imgs/materials/03_github_desktop_home.png) +お気に入りのGitの操作方法があれば、そちらで進めていただいても問題ありません! --- - - -![bg contain](./imgs/materials/03_github_desktop_home.png) ---- - -### 今回はGithub Desktopを使って開発します -お気に入りのGitの操作方法があれば、そちらで進めていただいても問題ありません! - ---- - -## 2. Github Desktopを触ってみよう +## 2. VSCodeのGit機能を触ってみよう -*Github Desktopを実際に使ってみよう!* +_VSCodeのGit機能を実際に使ってみよう!_ --- - @@ -232,6 +214,7 @@ header: 2-1. clone: Githubリポジトリを丸ごとダウンロードしよう --- ### Githubからリポジトリをダウンロードしてみましょう + これをclone(クローン)と呼びます --- @@ -241,61 +224,62 @@ header: 2-1. clone: Githubリポジトリを丸ごとダウンロードしよう --- ### ブラウザで以下URLを開いてください + Zoomのチャット欄にも記載します -[https://github.com/jigintern/git-tutorial-2025](https://github.com/jigintern/git-tutorial-2025) +[https://github.com/jigintern/git-tutorial-2026](https://github.com/jigintern/git-tutorial-2026) --- -######  1. 「<> Code」のボタンをクリックします +###### 1. 「<> Code」ボタンをクリックし、表示されたHTTPSのURLをコピーします -![height:460px](./imgs/screen-shots/01_github_open_with_github_desktop.png) +![height:460px](./imgs/screen-shots/01_github_code_button.png) --- -###### 2. 表示されたウィンドウの「Open with Github Desktop」をクリックして、Github Desktopを開きます +###### 2. 「ようこそ」画面の「Git リポジトリのクローン...」をクリックします -![height:460px](./imgs/screen-shots/01_github_open_with_github_desktop.png) +![height:460px](./imgs/screen-shots/02_vscode_clone_repository.png) --- -######  3. 「Local Path」にPC上での保存先を設定し、「Clone」をクリックします +###### ex. コマンドパレットから「Git: クローン」を選んでも、同じ操作ができます -![height:460px](./imgs/screen-shots/02_clone_repository_github_desktop.png) +![height:460px](./imgs/screen-shots/02_vscode_clone_repository.png) --- -######  4. リポジトリがクローンできたことを確認します -![height:460px](./imgs/screen-shots/03_confirm_clone_repository.png) +###### 3. 画面上部の入力欄に、コピーしたURLを貼り付けて、Enterキーを押します + +![height:460px](./imgs/screen-shots/03_clone_input_url.png) --- -######  5. 「Open in Visual Studio Code」をクリックして、リポジトリをVisual Studio Codeで開きます -![height:460px](./imgs/screen-shots/03_confirm_clone_repository.png) +###### 4. PC上での保存先のフォルダーを選択します ---- +![height:460px](./imgs/screen-shots/04_clone_select_folder.png) -### Visual Studio Codeが開きます +--- -何か他のエディタを使用している場合はそちらで開くかも +###### 5. 「クローンしたリポジトリを開きますか?」という通知が表示されるので、「開く」をクリックします -![bg contain brightness:50%](./imgs/screen-shots/04_view_with_vscode.png) +![height:460px](./imgs/screen-shots/05_open_cloned_repository.png) --- - -![bg contain](./imgs/screen-shots/04_view_with_vscode.png) +###### 6. エクスプローラーに、Githubにアップロードされていたファイルが表示されていることを確認します + +![height:460px](./imgs/screen-shots/06_view_cloned_files.png) --- ### ダウンロードできてそうですね -![bg contain brightness:50%](./imgs/screen-shots/04_view_with_vscode.png) +![bg contain brightness:50%](./imgs/screen-shots/06_view_cloned_files.png) --- - @@ -304,53 +288,58 @@ header: 2-2. branch: 作業を枝分かれさせよう --- ### 作業を枝分かれさせてみましょう + これをbranch(ブランチ)と呼びます --- ### クラウドサービスで**ファイル共有**すると…… + 編集が重複したりして、片方の編集内容が消されることも --- ###### 枝分かれすると、複数人で同じファイルを触っても(ちょっと)安心です + ![height:400px](./imgs/materials/04_mermaid_branch.svg) --- ### では、ブランチを切ってみましょう + ブランチを作ることを、慣習的に「ブランチを切る」、といいます --- -###### 1. ブランチ操作用のフォームを開きます -![height:460px](./imgs/screen-shots/05_branch_form.png) +###### 1. 画面左下のステータスバーに表示されているブランチ名(main)をクリックします + +![height:460px](./imgs/screen-shots/07_statusbar_branch.png) --- -###### 2. 「New Branch」をクリックして、新規ブランチの作成ウィンドウを開きます -![height:460px](./imgs/screen-shots/05_branch_form.png) +###### 2. 表示されるメニューから「+ 新しいブランチの作成... (Create new branch...)」をクリックします + +![height:460px](./imgs/screen-shots/08_create_new_branch.png) --- -###### 3. 新規ブランチの名前を入力して、「Create Branch」をクリックします。ブランチ名の重複が発生しないように注意してください +###### 3. 新規ブランチの名前を入力して、Enterキーを押します。他の参加者と重複しないよう、自分の名前などで設定してください -![height:460px](./imgs/screen-shots/06_branch_name.png) +![height:460px](./imgs/screen-shots/09_branch_name_input.png) --- -###### ex. 既にブランチに変更を加えている場合は、以下のような画面が表示されるので、「Bring my changes to ...」を選択してください +###### 4. ステータスバーの表示が、新しいブランチ名に切り替わったことを確認します -![height:460px](./imgs/screen-shots/07_branch_bring_changes.png) +![height:460px](./imgs/screen-shots/10_branch_switched.png) --- -###### 4. 新しいブランチができるので、作業に取り掛かることができます。 - -![height:460px](./imgs/screen-shots/06_branch_name.png) +### 既にファイルに変更を加えていた場合、その変更は新しいブランチにそのまま持ち越されます --- - @@ -359,16 +348,19 @@ header: 2-3. commit: 作業前と後の**差分を記録**しよう --- ### 作業前と後の**差分を記録**してみましょう + これをcommit(コミット)と呼びます --- ### Gitはファイルの**現在の内容を保存**することを繰り返してログを作ると言いましたが…… + 実は、全てを保存するわけではありません --- ### 作業を重ねる程に**データが膨大**になってしまいます + これでは、いけませんね。しかし、解決する方法があります --- @@ -383,33 +375,37 @@ header: 2-3. commit: 作業前と後の**差分を記録**しよう --- -###### 1. Visual Studio Codeを開いて、ファイルを新規作成します。ファイル名が重複しないよう、自分の名前などを半角英字でつけてください +###### 1. ファイルを新規作成します。ファイル名が重複しないよう、自分の名前などを半角英数字でつけてください -![height:460px](./imgs/screen-shots/08_create_file.png) +![height:460px](./imgs/screen-shots/11_create_file.png) --- ###### 2. 作成したファイルに、適当なプログラムを書き込みます -![height:460px](./imgs/screen-shots/09_write_python_code.png) +![height:460px](./imgs/screen-shots/12_write_python_code.png) --- -###### 3. Github Desktopを開いて、差分が表示されていること、その差分が正しいことを確認します -![height:460px](./imgs/screen-shots/10_view_changes.png) +###### 3. ソース管理ビューを開いて、「変更」に作成したファイルと差分が表示されることを確認します + +![height:460px](./imgs/screen-shots/13_scm_view_changes.png) --- -###### 4. 画面左下のフォームから、変更内容についての説明文(コミットメッセージ)を記載します -![height:460px](./imgs/screen-shots/11_input_commit_message.png) +###### 4. ファイル名にカーソルを合わせて「+」(変更をステージ)をクリックし、「ステージされた変更」に移動させます + +![height:460px](./imgs/screen-shots/14_scm_stage_changes.png) --- -###### 5. 「Commit to ...」をクリックします。これで完了です -![height:460px](./imgs/screen-shots/11_input_commit_message.png) +###### 5. 上部の入力欄にコミットメッセージを記載し、「コミット (Commit)」ボタンをクリックします。これで完了です + +![height:460px](./imgs/screen-shots/15_scm_commit.png) --- - @@ -418,21 +414,24 @@ header: 2-4. log: 作業の履歴を確認しよう --- ### 作業の履歴を確認してみましょう + この履歴をlog(ログ)と呼びます --- -###### 「History」をクリックして、コミットの履歴が表示されることを確認します -![height:460px](./imgs/screen-shots/12_view_history.png) +###### ソース管理ビューの「グラフ (Graph)」に、コミットの履歴が表示されることを確認します + +![height:460px](./imgs/screen-shots/16_source_control_graph.png) --- ### よさそうですね -![bg contain brightness:50%](./imgs/screen-shots/12_view_history.png) +![bg contain brightness:50%](./imgs/screen-shots/16_source_control_graph.png) --- - @@ -441,6 +440,7 @@ header: 2-5. push: 作業の成果をGithubにアップロードして共有し --- ### 作業の成果をGithubにアップロードしてみましょう + これをpush(プッシュ)と呼びます --- @@ -449,22 +449,35 @@ header: 2-5. push: 作業の成果をGithubにアップロードして共有し --- -###### 1. 「Changes」をクリックして、元の画面に戻ります -![height:460px](./imgs/screen-shots/13_publish_branch.png) +###### 1. ソース管理ビューの「Branch の発行」をクリックします + +![height:460px](./imgs/screen-shots/17_publish_branch.png) + +--- + +###### 2. 初回はGithubへのサインインを求められるので、「許可 (Allow)」をクリックします + +![height:460px](./imgs/screen-shots/18_github_signin_dialog.png) --- -###### 2. 「Publish branch」をクリックして、変更内容をプッシュします -![height:460px](./imgs/screen-shots/13_publish_branch.png) +###### 3. ブラウザが開くので、Githubにログインして「Authorize Visual-Studio-Code」をクリックし、VSCodeに戻ります + +![height:460px](./imgs/screen-shots/19_github_authorize_browser.png) --- -###### 3. ブラウザでGithubを開き、プッシュしたブランチが正しく反映されていることを確認します -![height:460px](./imgs/screen-shots/14_confirm_publish.png) +###### 4. ブラウザでGithubを開き、プッシュしたブランチが正しく反映されていることを確認します + +![height:460px](./imgs/screen-shots/20_confirm_publish.png) --- - @@ -473,11 +486,13 @@ header: 2-6. Pull Request: 枝分かれした成果を結合しよう --- ### ブランチ機能で枝分かれさせた作業を結合させましょう + これをmerge(マージ)と呼びます --- ### 一応、手元でマージもできますが…… + マージする時は、バグ等の防止のため、他の人に確認して貰いたいです --- @@ -491,56 +506,66 @@ header: 2-6. Pull Request: 枝分かれした成果を結合しよう --- ###### 1. Githubで「Pull requests」のタブをクリック -![height:460px](./imgs/screen-shots/15_new_pull_request.png) + +![height:460px](./imgs/screen-shots/21_new_pull_request.png) --- ###### 2. 「New pull request」をクリックします -![height:460px](./imgs/screen-shots/15_new_pull_request.png) + +![height:460px](./imgs/screen-shots/21_new_pull_request.png) --- ###### 3. 新規ブランチの名前、Pull Requestのタイトル、本文を入力します。作業内容が理解しやすい内容にすると良いです -![height:460px](./imgs/screen-shots/16_write_pull_request.png) + +![height:460px](./imgs/screen-shots/22_write_pull_request.png) --- ###### 4. 「Create pull request」をクリックすると、Pull Requestが作成されます -![height:460px](./imgs/screen-shots/16_write_pull_request.png) + +![height:460px](./imgs/screen-shots/22_write_pull_request.png) --- -### 5. 他開発者に、Pull Requestの確認を依頼します +### 5. 他開発者に、Pull Requestの確認を依頼します + SlackやGithub上でのコメントなど、適宜チーム内で決定した方法で依頼しましょう --- -###### 6-1. 確認を依頼された人は、Pull Requestの変更内容等を確認して、問題箇所があればコメント等で指摘します -![height:460px](./imgs/screen-shots/17_view_pull_request.png) +###### 6-1. 確認を依頼された人は、Pull Requestの変更内容等を確認して、問題箇所があればコメント等で指摘します + +![height:460px](./imgs/screen-shots/23_view_pull_request.png) --- ###### 6-2. 問題箇所が無い場合は、LGTM(Looks Good To Me: 私は良いと思います)等のコメントをつけて確認したことを報告しましょう -![height:460px](./imgs/screen-shots/18_review_lgtm.png) + +![height:460px](./imgs/screen-shots/24_review_lgtm.png) --- ###### 7. Pull Requestの作成者は、「Merge pull request」をクリックして、Pull Requestを元のブランチに結合します -![height:460px](./imgs/screen-shots/19_merge_pull_request.png) + +![height:460px](./imgs/screen-shots/25_merge_pull_request.png) --- ###### 7. Pull Requestの作成者は、「Merge pull request」をクリックして、Pull Requestを元のブランチに結合します -![height:460px](./imgs/screen-shots/20_merged_pull_request.png) + +![height:460px](./imgs/screen-shots/26_merged_pull_request.png) --- ##### 8. mainブランチを確認して、変更内容が正しく取り込まれていることを確認します + Githubで開いてみましょう --- - @@ -549,6 +574,7 @@ header: 2-7. fetch / pull: Githubリポジトリの変更部分をダウンロ --- ### Githubの更新を、PC上に取り込みましょう + これをfetch(フェッチ) / pull(プル)と呼びます --- @@ -571,42 +597,51 @@ pull(プル)は、Github上のリモートリポジトリの**変更をダ --- -###### 1. mainブランチに移動します -![height:460px](./imgs/screen-shots/21_checkout_main.png) +###### 1. ステータスバーのブランチ名をクリックし、mainブランチに切り替えます + +![height:460px](./imgs/screen-shots/27_checkout_main.png) --- -###### 2-1. 画面上部の「Fetch origin」をクリックします -![height:460px](./imgs/screen-shots/22_fetch_origin.png) +###### 2-1. ソース管理ビュー右上の「...」メニューから、「フェッチ」をクリックします + +![height:460px](./imgs/screen-shots/28_fetch_pull_menu.png) --- -###### 2-2. これだけでは変更内容は取り込まれませんが、Github上で変更があったことをGithub Desktopが認識します +###### 2-2. これだけでは変更内容は取り込まれませんが、Github上で変更があったことをVSCodeが認識します -![height:460px](./imgs/screen-shots/22_fetch_origin.png) +![height:460px](./imgs/screen-shots/28_fetch_pull_menu.png) --- -###### 2-3. (Github Desktopの自動更新がONになっている場合、既に変更が取り込まれている場合があります) -![height:460px](./imgs/screen-shots/22_fetch_origin.png) +###### 3-1. ステータスバーのブランチ名の横に、「2↓」のように取り込める変更の数が表示されます + +![height:460px](./imgs/screen-shots/29_sync_incoming.png) --- -###### 3. 画面上部の「Pull origin」をクリックします -![height:460px](./imgs/screen-shots/23_pull_origin.png) +###### 3-2. 同じ「...」メニューから「プル」をクリックします + +変更内容が取り込まれ、ファイルが更新されます + +![height:460px](./imgs/screen-shots/29_sync_incoming.png) --- -###### 4. 変更内容が取り込まれていることを、「History」から確認します -![height:460px](./imgs/screen-shots/24_results.png) +###### 4. 変更内容が取り込まれていることを、ソース管理ビューの「グラフ (Graph)」から確認します + +![height:460px](./imgs/screen-shots/30_pull_results.png) --- - ## 3. まとめ -*できるようになったことを、振り返ろう* + +_できるようになったことを、振り返ろう_ --- @@ -617,10 +652,10 @@ section { } -1. clone: Githubリポジトリを丸ごと丸ごとダウンロードする +1. clone: Githubリポジトリを丸ごとダウンロードする 2. branch: 作業を枝分かれさせて、他の開発者との衝突を防止する 3. 通常通りに、プログラムを書く -4. commit: 作業前と後の**差分を記録**しよう +4. commit: 作業前と後の**差分を記録**する 5. push: 作業の成果をGithubにアップロードして共有する 6. Pull Request: 枝分かれした成果を結合する 7. review: 他の開発者の作業内容を確認する @@ -628,6 +663,7 @@ section { --- ### これでGit入門は完璧です + お疲れ様でした! -![bg height:550px brightness:50%](./imgs/materials/06_mermaid_all.svg) \ No newline at end of file +![bg height:550px brightness:30%](./imgs/materials/06_mermaid_all.svg)