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

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

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

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

Kazumi IWANAGA

June 08, 2023
Tweet

More Decks by Kazumi IWANAGA

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. GitHub最新情報

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. GitHub Copilot

    View full-size slide

  21. GitHub Copilot

    View full-size slide

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

    View full-size slide

  23. ① GitHub Copilotを有効化する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. GitHub Copilotを業務で使う

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. データの扱いに関するドキュメント
    • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  37. GitHub Copilot、ぜひ体験してみて!

    View full-size slide

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

    View full-size slide

  39. GitHub Codespaces

    View full-size slide

  40. 最近の開発環境事情?

    View full-size slide

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

    View full-size slide

  42. GitHub Codespaces とは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. GitHub Codespaces ポイント

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. マシンタイプ
    マシンタイプ メモリ ストレージ 備考
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Dev container でカスタマイズ

    View full-size slide

  62. prebuild で素早く立上げる

    View full-size slide

  63. 課金体系
    • 利用時間とストレージの使用量で算出
    • 個人アカウントには、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
    32 core $2.88
    ストレージ量 ストレージ量の価格/月
    1 GB $0.07

    View full-size slide

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

    View full-size slide

  65. 使用状況(CSV)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. 管理(Organization)

    View full-size slide

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

    View full-size slide

  73. GitHub中級テクニック

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. Dependabotの有効化

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. Thank you so much🍩.

    View full-size slide