GitHubキャッチアップやハンズオン（GitHub Actions）座学

GitHubキャッチアップや ハンズオン 【Waveleap主催】エンジニアのためのGitHub勉強会 https://sister.connpass.com/event/314872/

• https://sister.connpass.com/event/314872/

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

• https://code-polaris.connpass.com/
• https://github-dockyard.connpass.com/
• https://hack-everything.connpass.com/
• https://twitter.com/dz_
• https://github.com/dzeyelid
• https://www.youtube.com/@dzeyelid
• https://www.twitch.tv/dzeyelid

現在、妊娠30週4日 妊娠中大変なこと 妊娠中でもできること • 体調・症状が人それぞれで予測でき ない • 非同期に進められるタスク • どんな仕事でも効率落ちる • 長時間作業できない • 予定が立てにくい • 物理的な移動が大変 • 配慮とのギャップ（±どちらも） • うしろめたさと悔しさ • 期日まで余裕のあるタスク ひとこと これまでできていたことができなくて、 一番つらいのは妊婦自身。 「大変そうだから」と相談なしに 仕事や役割から外されるとつらいです。 相談してほしいです🫶

GitHubキャッチアップ

コード管理だけじゃないGitHub 一言ポイント GitHub機能 AIによるコーディング支援 GitHub Copilot リモート開発環境 GitHub Codespaces CI/CD、DevOpsなど自動化 GitHub Actions コラボレーション GitHub Projects, GitHub Discussions 静的サイトのホスト GitHub Pages セキュリティ Dependabpot, Secret scanning, Code scanning

AIによるコーディング支援 GitHub Copilot

GitHub Copilot https://github.com/features/copilot

• https://github.com/features/copilot

GitHub Copilotの機能 機能 GA 説明 Code completion 2022年1月 Copilotによるコード補完。IDEで利用する。 Chat 202４年1月 Copilotとコーディングに特化した会話ができる。エディタで表示 しているファイルなどをコンテキストに含められる。IDEで利用する。 Chat in GitHub.com 2024年2月 チャットをGitHub.comで利用でき、リポジトリやナレッジベースを コンテキストとして指定し会話できる。 Knowledge bases （ナレッジベース） 2024年2月 ドキュメント（.md、.mdx）を含むリポジトリのセットを作成し、 Copilotとの会話でコンテキストとして指定できる Pull request summaries 2024年2月 Copilotにより、プルリクエストのサマリを生成する。GitHub.com で利用する。 In the CLI 2024年3月 ターミナルで自然言語を用いて質問できる。対象は、GitHub CLI（gh）、Gitコマンド、一般的なシェルコマンド。GitHub CLIの 拡張機能として提供される。

• https://github.blog/changelog/2022-06-21-github-copilot-is-now-available-to-individual-developers/
• https://github.blog/changelog/2024-01-11-github-copilot-chat-now-generally-available-for-organizations-and-individuals
• https://github.blog/changelog/2024-02-27-copilot-enterprise-is-now-generally-available

GitHub Copilotの機能 機能 GA 説明 Code completion 2022年1月 Copilotによるコード補完。IDEで利用する。 Chat 202４年1月 Copilotとコーディングに特化した会話ができる。エディタで表示 しているファイルなどをコンテキストに含められる。IDEで利用する。 Chat in GitHub.com 2024年2月 チャットをGitHub.comで利用でき、リポジトリやナレッジベースを GitHub Enterprise コンテキストとして指定し会話できる。 Knowledge bases （ナレッジベース） 2024年2月 ドキュメント（.md、.mdx）を含むリポジトリのセットを作成し、 Copilotとの会話でコンテキストとして指定できる。 GitHub Enterprise Pull request summaries 2024年2月 Copilotにより、プルリクエストのサマリを生成する。GitHub.com GitHub Enterprise で利用する。 In the CLI 2024年3月 ターミナルで自然言語を用いて質問できる。対象は、GitHub CLI（gh）、Gitコマンド、一般的なシェルコマンド。GitHub CLIの 拡張機能として提供される。

• https://github.blog/changelog/2022-06-21-github-copilot-is-now-available-to-individual-developers/
• https://github.blog/changelog/2024-01-11-github-copilot-chat-now-generally-available-for-organizations-and-individuals
• https://github.blog/changelog/2024-02-27-copilot-enterprise-is-now-generally-available

GitHub Copilotの利用形態 利用形態 説明 GitHub Copilot Individual 個人アカウントで有効化して利用する。 プロンプトと候補のデータの収集と利用の可否について、設定で変更できる。 GitHub Copilot Business OrganizationまたはEnterpriseで有効化して利用する。 プロンプトと候補のデータは収集されない。 GitHub Copilot Enterprise 2024年2月GA。 Copilot Businessの機能に加え、「Chat in GitHub.com」が利用できる。 ファインチューニングはadd-onになるそう。 プロンプトと候補のデータは収集されない。

エディタから利用する • コード補完 • チャット • コーディング特化 • エディタ上で差分表示 • スラッシュコマンド / • コンテキスト変数 # • エージェント @ 2024年3月GA

GitHub Business GitHub Enterprise Content exclusions Configuring content exclusions for GitHub Copilot - GitHub Enterprise Cloud Docs

• https://docs.github.com/en/enterprise-cloud@latest/copilot/managing-github-copilot-in-your-organization/configuring-content-exclusions-for-github-copilot

GitHub Enterprise GitHub.comから利用する https://github.com/copilot

• https://github.com/copilot

GitHub Enterprise リポジトリのコードベースをコンテキストに リポジトリをインデックスすることで、Copilot がリポジトリのコードやドキュメントを解釈して 会話してくれる

GitHub Enterprise ナレッジベースでドキュメントをコンテキストに ナレッジベースとして指定されたリポジトリの Markdownファイルをコンテキストに含め、 Copilotと会話できる

GitHub Enterprise GitHub.comでコードについて説明させる

GitHub Enterprise Pull request summaries

データの扱いが不安な方は、FAQ参照 https://github.com/features/copilot#faq

• https://github.com/features/copilot

リモート開発環境 GitHub Codespaces

GitHub Codespaces • コンテナベースの環境をGitHubがホストしてくれる • ブラウザや、VS Code、JetBrains IDEs(Beta)から接続できる • 課金: 稼働時間+ストレージ • 個人アカウント向けに無料枠あり（ 2core 60h/月、ストレージ 15GB/月） • 参考: GitHub Codespaces の請求について - GitHub Docs

• https://docs.github.com/ja/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces

手元のマシンでコンテナ環境で開発の例 エディタ コンテナ インスタンス コンテナ ランタイム

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

Codespacesの細かい機能 • ポリシーで制御 • タイムアウト（稼働時間の節約） • 自動削除までの日数（ストレージ利用量の節約） • など • 拡張 • devcontainerによるカスタマイズ • prebuild

CI/CD、DevOpsなど自動化 GitHub Actions

GitHub Actions • CI/CD、DevOpsに欠かせない自動化の処理を構成できる • もちろん、イシューのトリアージのような小さな自動化も • GitHubにおける様々なイベントを契機で実行できるほか、手動や APIによる実行もできる • プッシュ、プルリクエストの作成・編集など • GitHub提供のランナーでも、独自のランナーでも実行できる • ハンズオン座学にて解説

コラボレーション GitHub Projects, GitHub Discussions

GitHub Projects • アイテム（イシューやプルリクエスト）を整理・管理できる • 3つのレイアウト（テーブル、ボード、ロードマップ） • 独自フィールドを追加できる • 文字列、数値、日付、リスト、イテレーション • アイテムの簡易的なグラフ化ができる • Projectsのワークフロー機能により、簡易な自動化ができる • 条件に一致したアイテムのインポートや、ステータス更新、アーカイブなど

テーブルレイアウト たとえば、 Iterationフィールドをグループ化すると、 スクラムで利用しやすいレイアウト

ボードレイアウト 旧Projectsでもあったボードレイアウト。 シンプルな視覚化にはちょうどよい

ロードマップレイアウト タイムラインでアイテムを表示できるレイアウト。 Dateフィールドと組み合わせて、線表のような 表示もできる

GitHub Discussions

静的サイトのホスト GitHub Pages

GitHub Pages • GitHubリポジトリにあるファイル、またはビルドした成果物を静的サイ トとしてホストできる • HTML/JavaScript/CSSまたはMarkdownファイルはそのまま • 静的サイトジェネレーターのビルド成果物 • ビルドにはGitHub Actionsを利用できる

セキュリティ Dependabot, Secret scanning, Code scanning

Dependabot • リポジトリのコードの依存関係をスキャンし、脆弱性の検出やバージョ ンの更新を検出してくれる Dependabotの機能 説明 Dependabot alerts 依存関係をスキャンし脆弱性が検出されると、アラートを発行す る。アラートは管理者に通知されるほか、GitHub.comで一覧・ 詳細を確認できる。 Dependabot security updates Dependabot alertsのアラートに対する修正案を、プルリクエ ストを作成して提案してくれる Dependabot version updates 依存関係をスキャンし最新バージョンとの差異が検出されると、 更新案をプルリクエストとして作成して提案してくれる

GitHub Secret scanning • リポジトリをスキャンし、提携しているプロバイダのシークレットを検出すると、 プロバイダへ連携する • プロバイダ側ではシークレット利用者への通知や無効化が行われる • スキャン対象 • Gitリポジトリの全ブランチのコード • イシュー/プルリクエスト/Discussions/Wikiへの入力 • プッシュ保護（push protection）を利用すると、リポジトリにプッシュする 前にシークレットスキャンを実行できる • AIによるプロバイダ以外のシークレットの検出も試みられている（Beta）

GitHub Secret scanning • パブリックリポジトリで利用できる • プライベートリポジトリで利用する場合は、GitHub Enterprise契約 にGitHub Advanced Securityライセンスの追加することで利用で きる

GitHub Code scanning • GitHubが提供するCodeQLで静的解析を行い、コードの脆弱性を GitHub上で管理でき、修正案をプルリクエストで受け取れる • 主要な言語に対するセットアップが容易 • autofix: AIによる修正の提案が試みられている（Ｂｅｔａ） • サードパーティ製静的解析ツールでも、SARIF形式のレポートであれ ば読込み統合管理できる • パブリックリポジトリで利用できる • プライベートリポジトリで利用する場合は、GitHub Enterprise契約に GitHub Advanced Securityライセンスの追加することで利用できる

ハンズオン座学

ハンズオンの目的 • Codespacesの環境を使ってみる • Copilotを体験してみる • Actionsを体験してみる • CI: プルリクエストでビルドとテスト • Codespacesの後始末

Actionsをもう少し詳しく

Actionsの仕組み • リポジトリ単位でActionsを管理する • 自動化でどんな処理をさせたいかを、ワークフローファイル（ｙｍｌ）に 記述する • そのワークフローをランナーで実行する • GitHubホステッドランナー • セルフホステッドランナー • GitHub上で実行結果を確認できる • エラーも • 参考: GitHub Actions を理解する - GitHub Docs

• https://docs.github.com/ja/actions/learn-github-actions/understanding-github-actions

ワークフローの実行結果一覧画面

エラーが起きた場合の実行結果画面

Actionsのワークフローについて

ワークフローの構成(最少構成の例）

ワークフローの構成 name: ワークフローの名前 on: トリガの定義 どの契機でワークフローを起動するかを定義する • プッシュされたとき、プルリクエストが作成されたとき、など 参考: ワークフローのトリガー - GitHub Docs jobs: ジョブ ジョブは一連の処理を定義する単位 ワークフローには、1つまたは複数のジョブを構成できる 参考: ワークフローでジョブを使用する - GitHub Docs

• https://docs.github.com/ja/actions/using-workflows/triggering-a-workflow
• https://docs.github.com/ja/actions/using-jobs/using-jobs-in-a-workflow

ジョブの構成 ジョブのID runs-on: ランナーの指定 ランナー=ジョブを実行する環境を指定する • Linux、Windows、MacOS、など 参考: ジョブのランナーを選択する - GitHub Docs steps: ステップ 実際の処理を記述していく コマンドの実行、または「アクション」を利用できる

• https://docs.github.com/ja/actions/using-jobs/choosing-the-runner-for-a-job

ステップの構成 uses: 「アクション」を使う アクション=処理を再利用できるようにまとめた部品 run: コマンドの実行 実行するコマンドを記述する

ワークフロー作成の始め方（GitHub.com）

ワークフロー作成の始め方（GitHub.com） ワークフローファイルは、 .github/workflows/ 配下に格納する

ワークフロー作成の始め方（GitHub.com） 編集中にControl+Spaceショートカットを 使うと、入力候補を表示してくれる

ワークフロー作成の始め方（GitHub.com） サイドバーでは、Marketplaceでアクション を検索したり、ドキュメントを確認できる

GitHub.com上でワークフローを編集する • dzeyelid/github-actions-petit-hands-onを開 き、.github/workflows/simple-sample.ymlを開く • Control+Spaceを実演する • サイドバーで、Marketplaceから任意のアクションを選択し、 READMEを確認する • サイドバーでドキュメントを確認する

• https://github.com/dzeyelid/github-actions-petit-hands-on

Actionsのアクションについて

アクション • アクション=処理を再利用できるようにまとめた部品 • Marketplaceから探すと便利 • Marketplace: https://github.com/marketplace • 基本的なアクションはGitHubから提供されている • actions/checkout, actions/setup-nodeなど • 誰でもアクションを公開できる

• https://github.com/marketplace

Marketplace

Marketplace（GitHub提供アクション） publisher:xx （例: actions）

Marketplace 個々のアクションの画面

Marketplace 個々のアクションの画面 ソースを確認してみよう

アクションはリポジトリで公開されている actions/checkout

アクションの実態 • １リポジトリにつき1アクション • action.ymlにアクションの定義が書かれている • name, inputs, outputs • アクションを利用するときは、READMEをよく読んで • ワークフローでアクションを指定するには、「オーナー名/リポジトリ名」 • actions/checkoutなど

ハンズオン実践

ハンズオン資料 • dzeyelid/github-actions-petit-hands-on

• https://github.com/dzeyelid/github-actions-petit-hands-on

Codespacesの開発環境を立 ち上げてみよう

Copilotを試してみよう コード補完、チャット

Actionsのワークフローを書いて みよう

Codespacesの後始末

Codespaceの停止・削除 • codespaceを停止しておけば、 稼働時間分の課金が停止する • 再度起動すれば、作業途中のまま 復帰させられる • ただし、ボリューム分のストレージ 料金が、自動削除までの間、かか り続ける • codespaceを削除すると、ボ リュームも削除され課金はなくな る

ハンズオン環境について • みなさんのライセンスはハンズオン終了後に解除します。 • codespaceも削除します。 • 私が全員分削除するのが大変（APIでしかできない）なので、皆さんで削除 しておいてもらえたら助かります。

Q&A

GitHubに関する疑問は • GitHub dockyardのDiscordでは、 GitHub好きが集まっているので、私を はじめ、GitHubの有識者が疑問に答え てくれるかもしれません。（あくまでコミュ ニティによるベストエフォートです） • 業務向けであれば、ぜひ弊社ZEN Architectsにお問い合わせください

• https://github-dockyard.connpass.com/
• https://zenarchitects.co.jp/devops-github