Git操作編 Masaki Suzuki 2022/08/06 VS Code Meetup #21 | もう一度知りたい基礎編

アジェンダ 1. 自己紹介＆注意事項 2. 基本的な操作 3. その他の操作 • リポジトリ作成/ステージング・コミット・プッシュ/コンフリクト 4. プルリクエスト 5. 便利な拡張機能 6. まとめ 2

自己紹介 ◼ 名前：鈴木 正樹(Masaki Suzuki) ◼ 在住：愛知県 ◼ 職業：フリーランスエンジニア(ただし今月で一旦活動終了) ◼ 業務：クラウド全般(主にサーバーレス、及びバックエンド全般が好き) ◼ 技術： • AWS/Serverless Framework/AWS CDK/Terraform/その他サーバーレスバックエンド全般 • TypeScript/JavaScript/Jest/Vue/React(Next.js)/Haxe • CI/CD(GitHub Actions), コンテナ(Docker/ECR/ECS Fargate) etc. ◼ SNS： • @makky12 (SUZUKI Masaki＠クラウドエンジニア) • https://github.com/smt7174/ • http://makky12.hatenablog.com/ 3

注意事項 ◼ 今回の発表は、本当に「基礎編」の内容になります • VS CodeでのGit操作の本当に基礎的な部分のみの発表になります • その旨、ご了承ください ◼ Gitの仕様については、時間の都合上、説明は省略します • （例）「Gitってなに？」「コミットって何？」など • 必要に応じて、各自調べてください ◼ 本資料は、下記URLで公開しています • https://hogehoge.fugafuga.com 4

基本的な操作

基本的な操作 ◼ VSCodeのGit機能は、「ソース管理」(赤丸)アイコンから実施する • アイコンをクリックすると、左側に「ソース管理」が表示される • [表示]-[ソース管理]やCtrl+Shift+G→Gでも表示できる ◼ 「…」(青丸)をクリックすると、一覧メニューが表示される • VS Codeで実行できるGit機能は全てここから実施可能 • Gitでよく使う機能は、ほとんどが実施可能（※ただしプルリクエストは除く） ◼ チェックアウトと変更の同期(push&pull)は、ステータスバー左下から も実施可能 6 チェックアウト 変更の同期

GitHubへのサインイン ◼ VSCodeから、GitHubにサインインすることができる • 左下のサインインアイコンから実施 ◼ GitHubにサインインすることで、GitHubとの連携が可能 • リポジトリに対するpush, pullなど ◼ 一部の拡張機能は、GitHubへのサインインが必要 • GitHub Pull Request And Issues(後述)、GitHub Copilotなど 7

その他の操作

リポジトリ作成 9 ◼ 「リポジトリを初期化する」でローカルリポジトリの 初期化を行えます(git init) ◼ 初期化後「ブランチの発行」をクリックすることで、 リモートリポジトリを作成できます • public/privateどちらも作成可能 ◼ 「GitHubに公開」をクリックすれば、直接GitHub にリモートリポジトリを作成することもできます

ステージング・コミット・プッシュ 10 ◼ ファイルの変更を行うと、自動で「変更」欄に表示 される ◼ 右の「+」をクリックすると、該当ファイルがステー ジ状態になる • 「-」をクリックするとステージ状態を解除できます ◼ 上のテキストボックスにコミットメッセージを入力 して「コミット」をクリックすると、コミットされる ◼ コミット後に「変更の同期」をクリックすれば、コミッ トのプッシュ＆プルを行うことができる • プッシュのみしたい場合、一覧メニューの「プッシュ」を選択

コンフリクト解消 11 ◼ コンフリクトが発生した場合、ツリーの「変更のマー ジ」項目に該当ファイルが表示される ◼ 該当ファイルをクリックすると、コンフリクト発生個 所が色付きで表示されるので、差分を確認して、 マージ対象を指定する(詳細は次ページ) ◼ マージ対象指定の他にも、差分をファイル比較の 形で確認したり、 Live Shareセッションを起動(※) することも可能 ※ Live Share(拡張機能)のインストールが必要

コンフリクト解消 12 Conflict発生時の表示 マージ対象の指定の説明 項目名 説明 備考 Accept Current Change 現在の変更を有効にする Accept Incoming Change 取り込もうとしている変更を有効にする Accept Both Changes 現在の変更と取り込もうとしている変更を 両方有効にする Compare Changes 差分を比較する（ファイル比較の形で閲覧 できる） 標準表示よりだいぶ差分を確認しやす い。(前スライド参照) Start Live Share Session Live Shareセッションを開く Live Shareのインストールが必要

プルリクエスト

プルリクエスト作成 14 ◼ デフォルトでは、プルリクエストはVS Codeから作 成することはできない。 ◼ 「GitHub Pull Request And Issues」という拡張 機能をインストールすると、VS Code上でプルリク エスト(やIssue)を作成できる ◼ プルリクコメントも表示できる(GitHubなどで追加 されたコメントも閲覧可能) ◼ GitHubでファイル管理を行っている場合のみ有 効（？） • Azure DevOpsで管理している場合、作成ができなかった… ◼ https://marketplace.visualstudio.com/items?i temName=GitHub.vscode-pull-request- github プルリク作成 Issue作成 このアイコンをク リックする

プルリクエスト・Issue作成 15

便利な拡張機能

GitLens 17 ◼ ソース管理を便利にしてくれる、非常に便利な拡張機能 ◼ カーソル行やファイル、コードブロック(クラスや構造体など)の コードについて、誰がいつ書いたのかを表示できる • ポップアップから、各種情報にアクセスすることもできる ◼ ファイルの変更履歴の確認、及びファイル・ブランチ・コミットなど 様々な単位で内容の比較を行うことができる ◼ https://marketplace.visualstudio.com/items?itemName=ea modio.gitlens

Git Graph 18 ◼ リポジトリの変更履歴を、ブランチツリーで表示する拡張機能 • ブランチの変更内容やチェックアウト・マージ状態を容易に確認できる • ブランチツリーは赤丸のアイコンをクリックすると表示される ◼ 一部の操作は、ツリーから直接行うことができる • チェックアウト、マージ、タグ作成、Cherry Pickなど ◼ 検索する際「Git」と「Graph」の間に半角スペースを入れないと ヒットしないので注意 ◼ https://marketplace.visualstudio.com/items?itemName=m hutchie.git-graph

まとめ

まとめ ◼ VS Codeは、Git機能がめちゃくちゃ充実している • Gitのほとんどの操作は、VS Code上で実行可能 • Gitとの連携という意味では、VS Codeはかなりおススメ ◼ 拡張機能でさらに便利になる • 標準で出来ない機能も、拡張機能で出来る場合がある(プルリクエストなど) • それ以外にも、拡張機能を使うことでファイル管理がやりやすくなる ◼ CLIコマンドを知るのは大事 • 細かいオプション項目は、VS Codeでは対応しきれない場合がある • CLIコマンドを直接実行するケースも結構あったりする… • CLIコマンドに慣れるのも大事(最近はCLIベースで実施するツールも多いですし) 20

ご清聴ありがとうございました 以上です