Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Ishimoto Tatsuya

January 28, 2023
Tweet

More Decks by Ishimoto Tatsuya

Other Decks in Technology

Transcript

  1. もう怖くない
    VS Codeで始める
    Git/GitHub実践入門
    日本仮想化技術株式会社
    VirtualTech.jp
    2023/01/28
    1

    View full-size slide

  2. ● 本名: 石本 達也
    ● 日本仮想化技術(VTJ) エンジニア
    ● 長崎出身→福岡→東京
    ● 2012年10月〜 OSC福岡で初めて学生として参加し、オープンソースを知る
    ● 2015年04月 新卒として商社系のSIerに入社
    ○ SAPの導入支援&アドオン開発を担当
    ● 2017年07月 ベンチャー系の人材紹介会社に入社
    ○ 大手通信会社の案件でサービス開発PJで要件調整やマルチベンダとの折衝や調整を担当
    ○ 社内に戻りディレクション業務とRPA開発チーム立ち上げをエンジニア兼務で担当
    ● 2022年01月 日本仮想化技術に入社(2年目)
    ○ インフラ・Ops寄りの強いイメージの会社ですが、珍しくDev寄りの人としてJoin
    ○ VS Codeを軸にした仕組み化や自動化しつつ、理想的な開発環境の探究
    ○ プロダクトやサービスを企画してDevOpsを取り入れた開発をしながら試行錯誤
    ○ フィードバック。社内からも積極的にDevOps支援サービス改善に繋げる
    自己紹介
    2

    View full-size slide

  3. どっち派ですか?
    コマンドライン
    3
    グラフィカル

    View full-size slide

  4. ● コンピューター上でファイルの変更履歴を管理することをバージョン管理といい、そのシステム
    のことをバージョン管理システムという
    ● バージョン管理のメリット
    ○ 編集過程を履歴として保持して、過去の状態や変更内容を好きな時に確認できるようになる
    ○ 複数人での開発でも誰がいつどのような内容で変更したのかを確認することもできる
    ● 歴史
    ○ …→SCCS→RCS→CVS→Subversion→Git…
    ○ 仕事でSubversionよりも前のツールを触ったことがない世代
    ○ インターンシップでギリギリSubversionを見た
    ● バージョン管理システムは集中型(クライアント・サーバー型)から分散型に
    4
    バージョン管理システム

    View full-size slide

  5. 集中型と分散型
    集中型
    5
    分散型

    View full-size slide

  6. Gitとは?
    6
    ● ソースコードなどの変更履歴を記録・追跡するためのバージョン管理システムの1つ
    ● Linuxカーネルのソースコード管理に用いるためにリーナス・トーバルズによって開発
    ○ 現在のメンテナは濱野純という方で、2005年7月から担当
    ● 各ユーザのワーキングディレクトリに、全履歴を含んだリポジトリの完全な複製が作られる
    ● リモートリポジトリにアクセスできない環境でも、ほとんどの作業を行うことができる
    ○ 分散型の特徴の1つ
    ● 一般的な開発スタイルでは、次のステップを繰り返す
    ○ ① クローン(git clone)
    ■ リモートリポジトリからローカルに複製する
    ○ ② コミット(git commit)
    ■ ローカルリポジトリに変更履歴を1つもしくは複数を記録する
    ○ ③ プッシュ(git push)
    ■ ローカルの変更履歴をリモートリポジトリに反映する
    ○ ④ プル(git pull)
    ■ 更新されたリモートリポジトリの変更履歴をローカルに反映する

    View full-size slide

  7. リモートリポジトリはどうする?
    7
    ● Gitをインストールしただけではリモートリポジトリは作成されない
    ● 自分で構築してアクセスしてもらうこともできるが上級者向け
    ● Gitベースのサービス
    ○ GitHub、GitLab、BitBucket、CodeCommit(AWS)、Cloud Source Repositories(GCP)、
    Azure Repos など
    ● まずはGitHubから使いこなそう
    ○ 多くの人の使用されているので情報も豊富
    ● GitHubは、Subversionのサポートを終了すると発表

    View full-size slide

  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

    View full-size slide

  9. ここから本題
    10

    View full-size slide

  10. プロジェクトを作成
    12

    View full-size slide

  11. 13
    VS Codeからファイルを開く方法は2つ
    ① VS Codeを開いてからフォルダを開く
    ② codeコマンドを使ってターミナルからフォルダを開く

    View full-size slide

  12. 🔰もう少し詳しく知りたい人向け🔰
    14
    https://speakerdeck.com/ismt7/visual-studio-codedechu-hui-puroziekutowokai-kufang-fa

    View full-size slide

  13. リポジトリの初期化(git init)
    15

    View full-size slide

  14. リポジトリの初期化(git init)
    ● https://git-scm.com/docs/git-init
    ● 0からソースコード管理を始める場合には、おまじないのように毎回実行するもの
    ● 初期化することでこれ以降のファイルの変更を追跡してくれる
    ● デフォルトで作成されるブランチは、”master” or ”init.defaultBranch”で指定したもの
    16

    View full-size slide

  15. 18
    初期化ボタンが表示されている方は、ボタンをクリックします

    View full-size slide

  16. 🔰もう少し詳しい手順を知りたい人向け🔰
    19
    https://speakerdeck.com/ismt7/gitkomandowoinsutorusurufang-fa

    View full-size slide

  17. ブランチ名の変更(git branch)
    20

    View full-size slide

  18. 21
    https://github.blog/changelog/2020-10-01-the-default-branch-for-newly-created-repositories-is-now-main/

    View full-size slide

  19. それで?
    22
    ● GitHubはmainになっているが、Gitはmaster
    ○ ややこしいので統一しておきたい
    ● やり方
    ○ Gitのオプションコマンドからinit.defaultBranchに設定することで可能
    ○ 既に作ってしまっているブランチに対しては変更されないので、手動で変更が必要

    View full-size slide

  20. オプションの取得と設定(git config)
    ● https://git-scm.com/docs/git-config
    ● リポジトリまたはグローバル オプションの取得と設定ができるコマンド
    ● 「git config --global {オプション名}」で取得
    ● 「git config --global {オプション名} {値}」で設定
    ● 「git config –global init.defaultBranch main」
    ● VS Codeでは多分できない?(見つけられていない)
    23

    View full-size slide

  21. 24
    ブランチ名変更の練習を兼ねて、変更してみましょう
    アクティビティバー>ソース管理を開く
    プライマリーサイドバー内の右上にある「・・・」をクリック
    ブランチのセクション内にある「ブランチ名の変更」をクリック

    View full-size slide

  22. 25
    表示されたダイアログ上に「main」と入力して、エンターを押下します

    View full-size slide

  23. 26
    現在のブランチは左下のステータスバーのところで確認できます
    変更後のブランチ名の「main」で表示されていたら成功です

    View full-size slide

  24. コミット(git add / commit)
    コーディングしながら任意のタイミングで繰り返す
    27

    View full-size slide

  25. git add …
    ● https://git-scm.com/docs/git-add
    ● ステージエリアに追加するコマンド
    ● コミット前には必ずこの操作が必要
    git commit …
    ● https://git-scm.com/docs/git-commit
    ● ステージエリアにある変更を確定するコマンド
    コミットの頻度は?
    ● こまめにコミットすることが望ましい
    ● つまみ食い的なコーディングをやるとステージエリア
    での編集の手間が増える
    あど?すてーじえりあ?こみっと?
    28

    View full-size slide

  26. 30
    コードを変更していきます
    赤枠で囲まれたアイコンをクリックすることで、ファイルを作成できます

    View full-size slide

  27. 32
    適当にプログラムを記述

    View full-size slide

  28. 33
    ステージエリアに変更を追加します
    アクティビティバー>ソース管理を開く
    「+」ボタンをクリックして、コミットしたい変更をステージに上げる
    行単位で変更をステージすることも可能

    View full-size slide

  29. 34
    コミットメッセージを入力して、コミットボタンをクリック

    View full-size slide

  30. 35
    このようになると、成功です
    ※リモートリポジトリと接続していない場合は、「Publish Branch」と表示されます

    View full-size slide

  31. 36
    もし、このようなエラーが表示された場合、
    gitの設定でuser.nameとuser.emailを設定してください

    View full-size slide

  32. 🔰もう少し詳しい手順を知りたい人向け🔰
    37
    https://speakerdeck.com/ismt7/gitdeyuzaming-tomeruwoshe-ding-surufang-fa-visual-studio-codebian

    View full-size slide

  33. ブランチ作成(git branch)
    38

    View full-size slide

  34. ● git branch …
    ● https://git-scm.com/docs/git-branch
    ● 履歴の分かれ目
    ● 複数のブランチを作成できる
    パブリックなブランチ
    ● main、develop、feature…などのxxx-Flow系
    プライベートなブランチ
    ● ローカルリポジトリで開発者自身で一時的に分岐さ
    せるもの
    ぶらんち?
    39

    View full-size slide

  35. パブリックなブランチの代表例
    40

    View full-size slide

  36. ブランチ作成(git branch)
    「ブランチの作成...」
    ● 現在のブランチから分岐するブランチを作成
    「ブランチの作成元...」
    ● 指定したブランチから分岐するブランチを作成
    41

    View full-size slide

  37. 🔰もう少し詳しい手順を知りたい人向け🔰
    43
    https://speakerdeck.com/ismt7/visual-studio-codedegitwocao-zuo-sitemiyou-burantizuo-cheng-bian

    View full-size slide

  38. ブランチを合流(git merge / rebase)
    44

    View full-size slide

  39. まーじ?りべーす?
    git merge(画像左)
    ● https://git-scm.com/docs/git-merge
    ● 分岐元に変更を反映
    ● ブランチの軌跡は残る
    ● 非破壊的な変更
    ● マージコミットを作成して反映
    git rebase(画像右) 💀
    ● https://git-scm.com/docs/git-rebase
    ● 分岐元に変更を反映
    ● ブランチの奇跡は残らない
    ● 破壊的な変更
    ● 新しいコミットを反映先に作成
    ○ ハッシュ値も新しくなる
    45

    View full-size slide

  40. こんふりくと?
    ● 2つ以上のブランチで同じファイルを変更してマージした場合に起こりやすい
    ● コンフリクトが発生したら、手動で確認してマージする必要がある
    ● ブランチを分岐してからマージするまでの期間が長いほど発生しやすい
    ● Git-Flowはブランチが深く比較的発生しやすい
    ● VS Codeでは、v1.69で3way merge editoが追加されてグラフィカルに操作できるようになった
    ○ まだ発展途上で賛否が分かれている
    50

    View full-size slide

  41. ブランチを削除(git branch -d)
    56

    View full-size slide

  42. ブランチ削除
    ● 分岐したブランチを削除する
    ● 増えすぎると邪魔になってくるので、定期的に棚卸し
    ○ マージ済みのブランチ
    ○ マージ予定がないブランチ
    57

    View full-size slide

  43. GitHubのリポジトリ作成/
    GitHubへのプッシュ
    62

    View full-size slide

  44. 拡張機能のインストール
    64

    View full-size slide

  45. 65
    プルリクエストには、次の拡張機能が必要です。
    - GitHub Pull Requests and Issues

    View full-size slide

  46. 66
    サインインが完了したら
    すでに作成されているプルリクエストやイシューを一覧で見ることができます。
    ※今回は、いずれも未作成です

    View full-size slide

  47. 67
    プルリクエストを作成します

    View full-size slide

  48. 68
    マージ元とマージ先が間違っていなければ、作成をクリックします

    タイトルや説明欄は、後で編集することも可能です。

    View full-size slide

  49. 69
    GitHubっぽい画面ですが、完全にシュミレートしているわけではない
    日々のアップデートで徐々に使い勝手はよくなっている印象

    View full-size slide

  50. プルリクエストへのコメント
    70

    View full-size slide

  51. 71
    プルリクエストを作成後は、コードの数字上にカーソルを持
    っていくと、+ボタンが表示されるようになる
    +ボタンをクリックすると、コメントを追加できる

    View full-size slide

  52. 73
    パネルからコメントを一覧で確認することもできる

    View full-size slide

  53. プルリクエストをマージ
    74

    View full-size slide

  54. 🔰もう少し詳しい手順を知りたい人向け🔰
    77
    https://speakerdeck.com/ismt7/visual-studio-codedeisiyuyapururikunozuo-cheng-karamazimadewoyatutemiyou

    View full-size slide

  55. 既存のリポジトリからクローン
    (git clone)
    78

    View full-size slide

  56. 80
    コマンドパレットから「Git: クローン」を実行

    View full-size slide

  57. 81
    「GitHubから複製」をクリック

    View full-size slide

  58. 82
    クローンしたいリポジトリを選択

    View full-size slide

  59. 🔰もう少し詳しい手順を知りたい人向け🔰
    84
    https://speakerdeck.com/ismt7/visual-studio-codedegitwocao-zuo-sitemiyou-kuron-bian

    View full-size slide

  60. ● 個人的にはVisual Studio Code上でグラフィカルに操作していくことは”あり”
    ○ アプリケーション間の移動を減らせることも嬉しい
    ● コマンドの細部を意識しなくていいので、雰囲気で操作して慣れてもらえそう
    ● ネクストステップへのスキルアップとして、実際に動いているコマンドを見てもらう
    ○ パネル>アウトプット>Gitから実際に裏で実行されているコマンドを見れる
    最後に
    85

    View full-size slide

  61. お問い合わせ先
    86
    [email protected]
    開発環境の悩み、インフラの悩み
    話してみませんか?
    ❏ オンラインでのお打ち合わせOK
    ❏ 相談ベースからでもOK

    View full-size slide

  62. おすすめのGit設定
    88

    View full-size slide

  63. ● Visual Studio Codeでは、標準の設定や拡張機能に関する設定ができる
    ● 設定した内容は全てsettings.jsonに記載
    ● ユーザー、ワークスペース、フォルダの
    最大で3つのスコープで定義可能
    ● ユーザー以外は他人と共有することを前提
    設定とは?
    89

    View full-size slide

  64. 定期的にリモートリポジトリから情報を取得したい時
    ● Git: Autorefresh
    ○ リモートリポジトリから新しい情報を定期的に取得する
    ○ デフォルトの設定は、180秒間隔
    90

    View full-size slide

  65. 決まったブランチ名を含んだ名前で作成したい時
    ● Git: Branch Prefix
    ○ ブランチを作成する時に先頭に固定してつけたいキーワードを定義する
    ○ 「feature/」など
    91

    View full-size slide

  66. 特定のブランチにコミットしたくない時
    ● Git: Branch Protection
    ○ 特定のブランチにコミットしようとした時に警告してくれる
    ○ 「main」や「develop」など直接コミットしないようなブランチを登録するといい
    92

    View full-size slide

  67. ステージエリアの追加が面倒な時
    ● Git: Enable Smart Commit
    ○ ステージエリアを使わずに変更内容を全てコミットしたい時に便利
    ○ この設定を有効にすると、ステージエリアに追加することなくコミットできる
    93

    View full-size slide

  68. コメントからイシューを作成したい時
    ● Github Issues: Create Insert Formt
    ○ コードを書いている時に、「TODO: 〜〜」から始まるコメントを書くと作成できる
    ■ 反応させたいキーワードを設定から指定することもできる
    94

    View full-size slide

  69. おすすめの拡張機能 + α
    95

    View full-size slide

  70. Git関連でオススメの拡張機能
    Git History
    96
    ● Gitのログや履歴を検索する機能を提供
    ● VS Codeの公式サイト上でお墨付き
    GitLens
    ● Blameなどの機能を提供
    ● 行を最後に編集した人などを表示できる
    ● VS Codeの公式サイト上でお墨付き

    View full-size slide

  71. Git関連でオススメの拡張機能
    Git Graph
    97
    ● グラフ表示をサポート
    ● VS Codeの公式サイト上でお墨付き
    Git History Diff
    ● 変更履歴をDiff形式での確認をサポート
    ● VS Codeの公式サイト上でお墨付き

    View full-size slide