【修正版】もう怖くないVS Codeで始めるGit/GitHub実践入門

2023/01/28のオープンソースカンファレンス 2023 Online/Osakaで登壇した際に使用したスライドです。
https://event.ospn.jp/osc2023-online-osaka/session/744343

※2023/02/20に一部表示画像に不備があったため、修正版をアップロードしています

Transcript

1. もう怖くない VS Codeで始める Git/GitHub実践入門 日本仮想化技術株式会社 VirtualTech.jp 2023/01/28 1
2. • 本名: 石本 達也 • 日本仮想化技術(VTJ) エンジニア • 長崎出身→福岡→東京 • 2012年10月〜 OSC福岡で初めて学生として参加し、オープンソースを知る • 2015年04月 新卒として商社系のSIerに入社 ◦ SAPの導入支援&アドオン開発を担当 • 2017年07月 ベンチャー系の人材紹介会社に入社 ◦ 大手通信会社の案件でサービス開発PJで要件調整やマルチベンダとの折衝や調整を担当 ◦ 社内に戻りディレクション業務とRPA開発チーム立ち上げをエンジニア兼務で担当 • 2022年01月 日本仮想化技術に入社(2年目) ◦ インフラ・Ops寄りの強いイメージの会社ですが、珍しくDev寄りの人としてJoin ◦ VS Codeを軸にした仕組み化や自動化しつつ、理想的な開発環境の探究 ◦ プロダクトやサービスを企画してDevOpsを取り入れた開発をしながら試行錯誤 ◦ フィードバック。社内からも積極的にDevOps支援サービス改善に繋げる 自己紹介 2
3. どっち派ですか？ コマンドライン 3 グラフィカル
4. • コンピューター上でファイルの変更履歴を管理することをバージョン管理といい、そのシステム のことをバージョン管理システムという • バージョン管理のメリット ◦ 編集過程を履歴として保持して、過去の状態や変更内容を好きな時に確認できるようになる ◦ 複数人での開発でも誰がいつどのような内容で変更したのかを確認することもできる • 歴史 ◦ …→SCCS→RCS→CVS→Subversion→Git… ◦ 仕事でSubversionよりも前のツールを触ったことがない世代 ◦ インターンシップでギリギリSubversionを見た • バージョン管理システムは集中型(クライアント・サーバー型)から分散型に 4 バージョン管理システム
5. 集中型と分散型 集中型 5 分散型
6. Gitとは？ 6 • ソースコードなどの変更履歴を記録・追跡するためのバージョン管理システムの1つ • Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発 ◦ 現在のメンテナは濱野純という方で、2005年7月から担当 • 各ユーザのワーキングディレクトリに、全履歴を含んだリポジトリの完全な複製が作られる • リモートリポジトリにアクセスできない環境でも、ほとんどの作業を行うことができる ◦ 分散型の特徴の1つ • 一般的な開発スタイルでは、次のステップを繰り返す ◦ ① クローン(git clone) ▪ リモートリポジトリからローカルに複製する ◦ ② コミット(git commit) ▪ ローカルリポジトリに変更履歴を1つもしくは複数を記録する ◦ ③ プッシュ(git push) ▪ ローカルの変更履歴をリモートリポジトリに反映する ◦ ④ プル(git pull) ▪ 更新されたリモートリポジトリの変更履歴をローカルに反映する
7. リモートリポジトリはどうする？ 7 • Gitをインストールしただけではリモートリポジトリは作成されない • 自分で構築してアクセスしてもらうこともできるが上級者向け • Gitベースのサービス ◦ GitHub、GitLab、BitBucket、CodeCommit(AWS)、Cloud Source Repositories(GCP)、 Azure Repos など • まずはGitHubから使いこなそう ◦ 多くの人の使用されているので情報も豊富 • GitHubは、Subversionのサポートを終了すると発表
8. • Visual Studio Code=VS Code、code • 主な機能 ◦ シンタックスハイライト、スニペット、インテリセンス、リファクタリング、デバッグ、テスト • 元々はHTML5ベースのWebブラウザーで動くエディター&ツールフレームワークとして開発 ◦ Internet Explorer(IE)やMicrosoft EdgeのF12開発者ツール など • ブラウザー版で一定の成功を納めたのち、より高みを目指してデスクトップ版の開発にも着手 ◦ Electron上で構築 • 2015年04月 Build 2015(Microsoftの開発者向けカンファレンス)でプレビュー版が発表 ◦ 「Code editing, redefined」(コードエディターの再定義)のスローガンを掲げている ◦ 統合開発環境(IDE)とテキストエディターの中間的な位置付け • 2015年11月にオープンソースとして公開 ◦ オープンソースな場で開発を行い、ブランド製品としてリリースしている(Chromiumと同じようなスタイル) ◦ Visual Studioからより高速に開発サイクルを回すために機能を絞って軽量なエディターとして作られた • 拡張機能から拡張APIを通じてほぼすべての機能にアクセス可能 • リリースサイクルは、毎月第1金曜あたり。 ◦ Youtubeでリリースパーティがライブ配信される Visual Studio Codeとは？ 8
10. ここから本題 10
11. 流れ 11
12. プロジェクトを作成 12
13. 13 VS Codeからファイルを開く方法は2つ ① VS Codeを開いてからフォルダを開く ② codeコマンドを使ってターミナルからフォルダを開く
14. 🔰もう少し詳しく知りたい人向け🔰 14 https://speakerdeck.com/ismt7/visual-studio-codedechu-hui-puroziekutowokai-kufang-fa
15. リポジトリの初期化(git init) 15
16. リポジトリの初期化(git init) • https://git-scm.com/docs/git-init • 0からソースコード管理を始める場合には、おまじないのように毎回実行するもの • 初期化することでこれ以降のファイルの変更を追跡してくれる • デフォルトで作成されるブランチは、”master” or ”init.defaultBranch”で指定したもの 16
18. 18 初期化ボタンが表示されている方は、ボタンをクリックします
19. 🔰もう少し詳しい手順を知りたい人向け🔰 19 https://speakerdeck.com/ismt7/gitkomandowoinsutorusurufang-fa
20. ブランチ名の変更(git branch) 20
21. 21 https://github.blog/changelog/2020-10-01-the-default-branch-for-newly-created-repositories-is-now-main/
22. それで？ 22 • GitHubはmainになっているが、Gitはmaster ◦ ややこしいので統一しておきたい • やり方 ◦ Gitのオプションコマンドからinit.defaultBranchに設定することで可能 ◦ 既に作ってしまっているブランチに対しては変更されないので、手動で変更が必要
23. オプションの取得と設定(git config) • https://git-scm.com/docs/git-config • リポジトリまたはグローバル オプションの取得と設定ができるコマンド • 「git config --global {オプション名}」で取得 • 「git config --global {オプション名} {値}」で設定 • 「git config –global init.defaultBranch main」 • VS Codeでは多分できない？(見つけられていない) 23
24. 24 ブランチ名変更の練習を兼ねて、変更してみましょう アクティビティバー＞ソース管理を開く プライマリーサイドバー内の右上にある「・・・」をクリック ブランチのセクション内にある「ブランチ名の変更」をクリック
25. 25 表示されたダイアログ上に「main」と入力して、エンターを押下します
26. 26 現在のブランチは左下のステータスバーのところで確認できます 変更後のブランチ名の「main」で表示されていたら成功です
27. コミット(git add / commit) コーディングしながら任意のタイミングで繰り返す 27
28. git add … • https://git-scm.com/docs/git-add • ステージエリアに追加するコマンド • コミット前には必ずこの操作が必要 git commit … • https://git-scm.com/docs/git-commit • ステージエリアにある変更を確定するコマンド コミットの頻度は？ • こまめにコミットすることが望ましい • つまみ食い的なコーディングをやるとステージエリア での編集の手間が増える あど？すてーじえりあ？こみっと？ 28
30. 30 コードを変更していきます 赤枠で囲まれたアイコンをクリックすることで、ファイルを作成できます
32. 32 適当にプログラムを記述
33. 33 ステージエリアに変更を追加します アクティビティバー＞ソース管理を開く 「＋」ボタンをクリックして、コミットしたい変更をステージに上げる 行単位で変更をステージすることも可能
34. 34 コミットメッセージを入力して、コミットボタンをクリック
35. 35 このようになると、成功です ※リモートリポジトリと接続していない場合は、「Publish Branch」と表示されます
36. 36 もし、このようなエラーが表示された場合、 gitの設定でuser.nameとuser.emailを設定してください
37. 🔰もう少し詳しい手順を知りたい人向け🔰 37 https://speakerdeck.com/ismt7/gitdeyuzaming-tomeruwoshe-ding-surufang-fa-visual-studio-codebian
38. ブランチ作成(git branch) 38
39. • git branch … • https://git-scm.com/docs/git-branch • 履歴の分かれ目 • 複数のブランチを作成できる パブリックなブランチ • main、develop、feature…などのxxx-Flow系 プライベートなブランチ • ローカルリポジトリで開発者自身で一時的に分岐さ せるもの ぶらんち？ 39
40. パブリックなブランチの代表例 40
41. ブランチ作成(git branch) 「ブランチの作成...」 • 現在のブランチから分岐するブランチを作成 「ブランチの作成元...」 • 指定したブランチから分岐するブランチを作成 41
43. 🔰もう少し詳しい手順を知りたい人向け🔰 43 https://speakerdeck.com/ismt7/visual-studio-codedegitwocao-zuo-sitemiyou-burantizuo-cheng-bian
44. ブランチを合流(git merge / rebase) 44
45. まーじ？りべーす？ git merge(画像左) • https://git-scm.com/docs/git-merge • 分岐元に変更を反映 • ブランチの軌跡は残る • 非破壊的な変更 • マージコミットを作成して反映 git rebase(画像右) 💀 • https://git-scm.com/docs/git-rebase • 分岐元に変更を反映 • ブランチの奇跡は残らない • 破壊的な変更 • 新しいコミットを反映先に作成 ◦ ハッシュ値も新しくなる 45
50. こんふりくと？ • 2つ以上のブランチで同じファイルを変更してマージした場合に起こりやすい • コンフリクトが発生したら、手動で確認してマージする必要がある • ブランチを分岐してからマージするまでの期間が長いほど発生しやすい • Git-Flowはブランチが深く比較的発生しやすい • VS Codeでは、v1.69で3way merge editoが追加されてグラフィカルに操作できるようになった ◦ まだ発展途上で賛否が分かれている 50
56. ブランチを削除(git branch -d) 56
57. ブランチ削除 • 分岐したブランチを削除する • 増えすぎると邪魔になってくるので、定期的に棚卸し ◦ マージ済みのブランチ ◦ マージ予定がないブランチ 57
62. GitHubのリポジトリ作成/ GitHubへのプッシュ 62
64. 拡張機能のインストール 64
65. 65 プルリクエストには、次の拡張機能が必要です。 - GitHub Pull Requests and Issues
66. 66 サインインが完了したら すでに作成されているプルリクエストやイシューを一覧で見ることができます。 ※今回は、いずれも未作成です
67. 67 プルリクエストを作成します
68. 68 マージ元とマージ先が間違っていなければ、作成をクリックします 。 タイトルや説明欄は、後で編集することも可能です。
69. 69 GitHubっぽい画面ですが、完全にシュミレートしているわけではない 日々のアップデートで徐々に使い勝手はよくなっている印象
70. プルリクエストへのコメント 70
71. 71 プルリクエストを作成後は、コードの数字上にカーソルを持 っていくと、＋ボタンが表示されるようになる ＋ボタンをクリックすると、コメントを追加できる
73. 73 パネルからコメントを一覧で確認することもできる
74. プルリクエストをマージ 74
77. 🔰もう少し詳しい手順を知りたい人向け🔰 77 https://speakerdeck.com/ismt7/visual-studio-codedeisiyuyapururikunozuo-cheng-karamazimadewoyatutemiyou
78. 既存のリポジトリからクローン (git clone) 78
79. 流れ 79
80. 80 コマンドパレットから「Git: クローン」を実行
81. 81 「GitHubから複製」をクリック
82. 82 クローンしたいリポジトリを選択
84. 🔰もう少し詳しい手順を知りたい人向け🔰 84 https://speakerdeck.com/ismt7/visual-studio-codedegitwocao-zuo-sitemiyou-kuron-bian
85. • 個人的にはVisual Studio Code上でグラフィカルに操作していくことは”あり” ◦ アプリケーション間の移動を減らせることも嬉しい • コマンドの細部を意識しなくていいので、雰囲気で操作して慣れてもらえそう • ネクストステップへのスキルアップとして、実際に動いているコマンドを見てもらう ◦ パネル＞アウトプット＞Gitから実際に裏で実行されているコマンドを見れる 最後に 85
86. お問い合わせ先 86 sales@VirtualTech.jp 開発環境の悩み、インフラの悩み 話してみませんか？ ❏ オンラインでのお打ち合わせOK ❏ 相談ベースからでもOK
87. おわり 87
88. おすすめのGit設定 88
89. • Visual Studio Codeでは、標準の設定や拡張機能に関する設定ができる • 設定した内容は全てsettings.jsonに記載 • ユーザー、ワークスペース、フォルダの 最大で3つのスコープで定義可能 • ユーザー以外は他人と共有することを前提 設定とは？ 89
90. 定期的にリモートリポジトリから情報を取得したい時 • Git: Autorefresh ◦ リモートリポジトリから新しい情報を定期的に取得する ◦ デフォルトの設定は、180秒間隔 90
91. 決まったブランチ名を含んだ名前で作成したい時 • Git: Branch Prefix ◦ ブランチを作成する時に先頭に固定してつけたいキーワードを定義する ◦ 「feature/」など 91
92. 特定のブランチにコミットしたくない時 • Git: Branch Protection ◦ 特定のブランチにコミットしようとした時に警告してくれる ◦ 「main」や「develop」など直接コミットしないようなブランチを登録するといい 92
93. ステージエリアの追加が面倒な時 • Git: Enable Smart Commit ◦ ステージエリアを使わずに変更内容を全てコミットしたい時に便利 ◦ この設定を有効にすると、ステージエリアに追加することなくコミットできる 93
94. コメントからイシューを作成したい時 • Github Issues: Create Insert Formt ◦ コードを書いている時に、「TODO: 〜〜」から始まるコメントを書くと作成できる ▪ 反応させたいキーワードを設定から指定することもできる 94
95. おすすめの拡張機能 + α 95
96. Git関連でオススメの拡張機能 Git History 96 • Gitのログや履歴を検索する機能を提供 • VS Codeの公式サイト上でお墨付き GitLens • Blameなどの機能を提供 • 行を最後に編集した人などを表示できる • VS Codeの公式サイト上でお墨付き
97. Git関連でオススメの拡張機能 Git Graph 97 • グラフ表示をサポート • VS Codeの公式サイト上でお墨付き Git History Diff • 変更履歴をDiff形式での確認をサポート • VS Codeの公式サイト上でお墨付き