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