GitHub最新情報キャッチアップ 2023年6月

TECH Streetさんのイベント「GitHub勉強会～最新情報・GitHub Copilot・GitHub Codespacesなど～」でお話した資料です。
https://tech-street.connpass.com/event/284813/

Transcript

1. GitHub最新情報
   キャッチアップ
   2023年6月
   GitHub勉強会～最新情報・GitHub Copilot・GitHub Codespaces
   など～ - TECH Street
   https://tech-street.connpass.com/event/284813/
   

   View Slide

2. 岩永かづみ / Kazumi IWANAGA
   • Microsoft MVP for Azure
   • ZEN Architects 所属
   • GitHub公認トレーナー
   • 得意な領域
   • Infrastructure as Code
   • GitHub Actions による自動化
   • 技術コミュニティ
   • Code Polaris / Hack Everything.
   • @dz_
   • @dzeyelid
   • @dzeyelid
   • dzeyelid
   

   View Slide

3. GitHub dockyard
   https://github-dockyard.connpass.com/
   

   View Slide

4. Microsoft Build Japan 2023 Day 1
   • 【H1-2】GitHub Copilotとの強力なタッグをいち早く取り入れるハ
   ンズオン（16:00-17:30）
   https://microsoft-events.connpass.com/event/286473/
   

   View Slide

5. Code Polaris Tech Book vol.1
   https://techbookfest.org/product/t5yrq2S40rRArJWuf1swPz
   

   View Slide

6. アジェンダ
   • GitHub最新情報
   • GitHub Copilot
   • GitHub Codespaces
   • GitHub中級テクニック
   

   View Slide

7. GitHub最新情報
   

   View Slide

8. っと、その前にGitHubをおさらい
   

   View Slide

9. GitHubプラットフォームは進化している
   コード管理の
   プラットフォーム
   運用のエコシステム 開発環境の革新へ
   

   View Slide

10. Gitによるコード管理のプラットフォーム
    リポジトリ
    Issues Pull requests
    Releases Wiki GitHubフローによる開発サイクルを
    実現するうえで欠かせない機能
    

    View Slide

11. 継続的なエコシステムを構築する機能続々
    リポジトリ
    GitHub
    Packages
    GitHub Pages
    GitHub
    Projects
    GitHub
    Sponsors
    GitHub
    Actions
    GitHub
    Discussions
    

    View Slide

12. 開発・運用を支えるセキュリティ機能
    Dependabpot
    Secret
    scanning
    Code
    scanning
    パブリックリポジトリ、またはGitHub
    Advanced Securityライセンスの
    もと利用可能
    どのリポジトリでも利用可能！
    

    View Slide

13. ここ数年のリリースの勢い
    GitHub Actions GA
    2019.11.11
    GitHub Packages GA
    2019.11.12
    GitHub Sponsors GA
    2019.11.4
    GitHub Discussions GA
    2021.8.17
    GitHub Copilot GA
    2022.11.9
    GitHub Codespaces GA
    2022.7.27
    GitHub Projects GA
    2022.7.27
    Renewal
    

    View Slide

14. ここ最近の注目
    • GitHub Codespaces
    • GitHub Copilot
    • GitHub Copilot X
    • GitHub Next
    

    View Slide

15. GitHub Copilot X
    • GitHub Copilot Chat
    • GitHub Copilot for Docs
    • GitHub Copilot for Pull Requests
    • GitHub Copilot for CLI
    Waitlist申込み受付中
    https://github.com/features/preview/copilot-x
    

    View Slide

16. GitHub Next
    https://githubnext.com/
    

    View Slide

17. 最新情報はここをみる
    • GitHubのTwitterアカウント
    • @github, @GHchangelog, @GitHubJapan
    • GitHub blog
    • Blog
    • Changelog ← GitHub自体の更新はこちら
    Twitch（ライブ） YouTube（アーカイブ）
    週刊でGitHubのアップデートをチェックする配信をして
    いるので、ぜひ見に来てください♪📻
    

    View Slide

18. GitHub Universe
    • GitHubのグローバルカンファレンス、例年11月開催
    https://githubuniverse.com/
    

    View Slide

19. GitHub Galaxy Tokyo
    • 2023/6/14（上限に達し、登録停止中）
    https://resources.github.com/galaxy/tokyo/
    

    View Slide

20. QA①
    

    View Slide

21. GitHub Copilot
    

    View Slide

22. GitHub Copilot
    

    View Slide

23. GitHub Copilotを使い始めるには
    ① GitHub.comのsettingsで、GitHub Copilotを有効化する
    ② エディタ/IDEにGitHub Copilotの拡張機能をインストールする
    Visual Studio Code/Visual Studio/Neovim/JetBrains IDEs
    ③ エディタ/IDEでGitHubにサインインする
    

    View Slide

24. ① GitHub Copilotを有効化する
    

    View Slide

25. ② 拡張機能をインストールする
    

    View Slide

26. ③ GitHubにサインインする
    

    View Slide

27. GitHub Copilotと仲良くコード
    を書くためのコツ
    

    View Slide

28. コンテキストをうまく渡してあげる
    開いているタブの情報もコンテキストに含まれ、
    より意図した提案を得られやすくなる
    コンテキストが少ないとフワッとした提案に…
    

    View Slide

29. GitHub Copilotを業務で使う
    

    View Slide

30. GitHub Copilotで扱われるデータはどうなるの？
    

    View Slide

31. GitHub Copilotで扱われるデータ
    Prompts
    User Engagement Data
    入力している内容、カーソルの前後のコードや
    コメント、開いているタブの内容
    提案の採用/却下などのアクション、メトリック
    やエラーなど一般的な使用状況
    Suggestions
    GitHub Copilotによる提案
    

    View Slide

32. GitHub Copilotで扱われるデータ
    入力している内容、カーソルの前後のコードや
    コメント、開いているタブの内容
    提案の採用/却下などのアクション、メトリック
    やエラーなど一般的な使用状況
    GitHub Copilotによる提案
    Prompts
    User Engagement Data
    Suggestions
    Suggestionsの生成や、分析やサービス
    改善のために利用される
    for Individualsの場合、保持・利用を許可
    するか/拒否するか、ユーザー設定による
    for Businessの場合、一律保持されない
    GitHub.com での GitHub Copilot 設定の構成 - GitHub Docs
    

    View Slide

33. FAQ - プライバシー for Individuals
    

    View Slide

34. FAQ - プライバシー for Business
    

    View Slide

35. データの扱いに関するドキュメント
    • GitHub Copilot for Individuals
    • FAQ - Privacy – Copilot for Individuals - GitHub Copilot
    • 追加の製品および機能に適用される GitHub 条件 - GitHub Docs
    • GitHub Copilot for Business
    • FAQ - Privacy – Copilot for Business - GitHub Copilot
    • GitHub Copilot for Business のプライバシーに関する声明 - GitHub
    Docs
    

    View Slide

36. GitHub Copilotを用いて書いたコード
    • GitHub Copilotの利用者に所有権と責任がある
    • パブリック コードに一致するコードは、提案に含めない設定ができる
    • GitHub.com での GitHub Copilot 設定の構成 - GitHub Docs
    

    View Slide

37. for Businessの適用のされ方
    for Individualsで契約していても、for
    Businessが適用されれば、設定が上書き
    される（for Individualsの課金は、日割り
    で返却される）
    

    View Slide

38. GitHub Copilot、ぜひ体験してみて！
    

    View Slide

39. 参考セッションアーカイブ
    • PWA Night vol.51 ～AI × フロントエンド開発〜
    https://www.youtube.com/watch?v=xpJ1rSgjE4E&t=814s
    

    View Slide

40. QA②
    

    View Slide

41. GitHub Codespaces
    

    View Slide

42. 最近の開発環境事情？
    

    View Slide

43. 例えば、コンテナを使って環境を統一
    コンテナ ランタイム
    エディタ コンテナ インスタンス
    

    View Slide

44. GitHub Codespaces とは
    

    View Slide

45. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス
    

    View Slide

46. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス
    ウェブブラウザ
    

    View Slide

47. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス
    

    View Slide

48. GitHub Codespaces の場合
    エディタ
    GitHub Codespaces
    codespace インスタンス dev
    エディタ codespace インスタンス review
    

    View Slide

49. GitHub Codespaces ポイント
    

    View Slide

50. 使い慣れたインタフェースから使う
    • ブラウザ、または対応したエディタやIDEから接続し、あたかもローカ
    ルで開発している感覚で利用できる
    • Visual Studio Code
    • JetBrains IDEs
    • JupyterLab (Visual Studio Code 拡張機能)
    

    View Slide

51. 使い慣れたインタフェースから使う
    • 参考: Visual Studio Code で GitHub Codespaces を使用する
    - GitHub Docs
    • 参考: JetBrains IDE で GitHub Codespaces を使う - GitHub
    Docs
    • 参考: 機械学習のための GitHub Codespaces の概要 - GitHub
    Docs
    

    View Slide

52. テンプレートから環境を立上げられる
    • テンプレートから立ち上げる場合は、リポジトリがなくても利用できる
    

    View Slide

53. リポジトリから環境を立ち上げられる
    • リポジトリを clone した状態で環境が立ち上がる
    

    View Slide

54. 必要な環境を数クリックで作成できる
    • 認証済み、またはコミュニティによるベースイメージが提供されている
    • Features （後述）で主要なCLIや言語をインストールできる
    

    View Slide

55. 必要な環境を数クリックで作成できる
    • 認証済み、またはコミュニティによるベースイメージが提供されている
    • Features （後述）で主要なCLIや言語をインストールできる
    

    View Slide

56. 必要な環境を数クリックで作成できる
    • 認証済み、またはコミュニティによるベースイメージが提供されている
    • Features （後述）で主要なCLIや言語をインストールできる
    

    View Slide

57. 誰でも同じ環境を立ち上げられる
    • 作成した環境設定（devcontainer.json）をリポジトリに置いて共有
    することで、誰でも同じ環境を立ち上げることができる
    

    View Slide

58. インスタンスはアカウントごと
    • 立ち上げたインスタンスはアカウントごとに分離されている
    • コラボレーションには、Live share やポートフォワーディング（後述）
    の公開を利用できる
    

    View Slide

59. インスタンスのスペックを選択できる
    

    View Slide

60. マシンタイプ
    マシンタイプ メモリ ストレージ 備考
    2 core 4 GB RAM 32 GB
    4 core 8 GB RAM 32 GB
    8 core 16 GB RAM 64 GB
    16 core 32 GB RAM 128 GB
    32 core 64 GB RAM 128 GB 申請が必要
    6 core (1 GPU) 112 GB RAM 128 GB 申請が必要
    

    View Slide

61. localhost へのポートフォワーディング
    • localhost にポートフォワードしてくれるため、あたかもローカル環境
    のようにシームレスに開発できる
    • パブリック、または Organization 内向けに公開することもできる
    

    View Slide

62. Dev container でカスタマイズ
    • Features による簡単インストール
    • VS Code のエクステンションのインストール
    • OnCreateCommand などのライフサイクルへのフック
    • Dockerfile を用いた、より自由なカスタマイズ
    

    View Slide

63. Dev container でカスタマイズ
    

    View Slide

64. prebuild で素早く立上げる
    

    View Slide

65. 課金体系
    • 利用時間とストレージの使用量で算出
    • 個人アカウントには、1ヶ月あたり無料利用枠がふくまれる
    • GitHub Free – 15GB/月のストレージ、120時間/コアの利用時間
    • GitHub Pro – 20GB/月のストレージ、180時間/コアの利用時間
    マシンタイプ 利用時間の価格/時間
    2 core $0.18
    4 core $0.36
    8 core $0.72
    16 core $1.44
    ３２ core $2.88
    ストレージ量 ストレージ量の価格/月
    1 GB $0.07
    

    View Slide

66. 課金の様子
    ※ GitHub Pro の無料利用枠が適用されています
    

    View Slide

67. 使用状況（CSV）
    

    View Slide

68. 課金体系（Organization）
    • Organization 配下のリポジトリで codespace を立ち上げる場合、
    Organization の設定によって、課金される対象が異なる
    説明 Organization の設定
    上限に達するまでは、Organization に課金される • そのユーザーに対して codespaces の利用が許
    可されている
    • spending limit の設定が 1 以上、または
    Unlimited spending
    codespace を起動するユーザーに課金される • 上記を満たさない
    

    View Slide

69. 課金周りのケース紹介
    ストレージの無料枠を使い切ったとき
    メール通知の例
    spending limit に達したとき
    spending limit に達した状態では、インスタンスを
    起動できない（Organization の例）
    Codespaces インスタンス一覧画面の表記
    （Organizationでの例）
    

    View Slide

70. 課金に関する資料
    • GitHub Codespaces の請求について - GitHub Docs
    • GitHub Codespaces の使用状況の表示 - GitHub Docs
    • GitHub Codespaces の使用制限の管理 - GitHub Docs
    

    View Slide

71. 管理
    • Dotfiles
    • シークレット
    • アカウント
    • リポジトリ
    • GPG verification
    • デフォルトのエディタ
    • アイドル タイムアウト
    • 保持期間
    • リージョン
    

    View Slide

72. 管理（Organization）
    • 利用可能なメンバー
    • ポリシー
    • マシンタイプ
    • ポートの公開範囲
    • アイドル タイムアウトの最大値
    • 保持期間の最大値
    • 利用可能なイメージの制限
    • API により、メンバーの利用状況を取得できる
    

    View Slide

73. 管理（Organization）
    

    View Slide

74. 参考セッションアーカイブ
    https://codezine.jp/devonline/archive/session/130
    • Developers Summit 2023
    • ［9-D-1］もう悩まされない開発環境、プロジェクトで統一した環境をいつで
    もどこでも
    

    View Slide

75. QA③
    

    View Slide

76. GitHub中級テクニック
    

    View Slide

77. 今すぐ効果のある中級テクニック
    • リポジトリ設定のPull Requests設定の見直し
    • Branch protection rulesの設定
    • Dependabotの有効化
    • Secret scanning
    • Code scanning
    • 新しくなったGitHub Projects
    • GitHub ActionsのOIDC接続
    

    View Slide

78. 今すぐ取り入れたいPull Requests設定
    • squash mergeがおすすめ🙌
    • タイトルはpull request title
    • マージ先のブランチの差分が
    ある場合、アップデートを促す
    • マージ後、自動でマージ元の
    作業ブランチを削除する
    

    View Slide

79. Branch protection rulesの設定
    ブランチの保護ルールを用いることで、
    開発フローを制御しやすくなる
    • 必ずプルリクエストの作成を要求する
    • 必ずapprovalsを1つ以上要求する
    など、ルールは増え続けている
    

    View Slide

80. Dependabotの有効化
    

    View Slide

81. GitHub Projects – イテレーション表示
    

    View Slide

82. GitHub Projects – ロードマップ表示
    

    View Slide

83. セキュリティ対策
    • Secret scanning
    • シークレットが検出されると、そのプロバイダへ通知され、対処される
    • Push protectionがパブリックリポジトリ、またはGHASで利用可能に
    • Code scanning
    • GitHubが提供する静的解析ツールCodeQLを用いて脆弱性検知
    • CodeQLまたはSARIF対応ツールの検知結果をGitHub上で管理
    

    View Slide

84. GitHub ActionsでOIDC接続を利用する
    • OpenID Connect を使ったセキュリティ強化について - GitHub
    Docs
    • アマゾン ウェブ サービスでの OpenID Connect の構成 - GitHub Docs
    • Azure での OpenID Connect の構成 - GitHub Docs
    • Google Cloud Platform での OpenID Connect の構成 - GitHub
    Docs
    

    View Slide

85. QA④
    

    View Slide

86. Thank you so much🍩.
    

    View Slide