129.3K Views
August 15, 25
スライド概要
非エンジニアのためのGit/GitHub勉強会( https://vibe-beginner.connpass.com/event/364161/ ) でのGitHubパートの解説とハンズオン資料です。
バックエンドエンジニア。 主にC#, Azure, Terraform, GitHub Actionsをいじっています。Microsoft MVP for Azure, AI Platform
GitHub入門&ハンズオン 非エンジニアのためのGit/GitHub勉強会 2025/08/15 Maki Nagase
Maki Nagase ( X : @yuma_prog ) • My Info • 株式会社ゼンアーキテクツ所属 • Microsoft MVP for Azure, AI Platform • 運営・主催コミュニティ • GitHub dockyard, JAZUG(Japan Azure User Group), Azureわいがや会, Hack Everything., AI駆動開発勉 強会,Azure AI Developers Community(JP) • 好きな技術 • Azure PaaS, Azure AI, C#, Terraform, GitHub Copilot • 趣味 • 技術コミュニティ,アニメ,キャンプ,しゃぼん玉, 法螺貝,サバゲ,などなど
今日のゴール •GitHubとGitの違いがわかる人になる •GitHubでファイル管理ができる
アジェンダ • GitとGitHubの違い • GitHubとは • GitHubの便利機能をちょっとだけ紹介 • ハンズオン • 修正~プルリクエストマージまで
GitとGitHubの違い
Gitの良さの振り返り 変更の理由や日時が残る 不具合が出ても “戻せる” ので「だれが・いつ・な 安心感(過去バージョン にを」をすぐ追える にロールバック) こまめに保存=あとから 比較・差分確認ができる
Gitだけだと困ることも… PC が壊れたり紛失すると今までのすべてが消える! 別の PC・スマホから触れない 人に見せたい時、共有・レビューのやりとりが難しい(メール添付の往復…?)
GitHubを使うと PC が壊れたり紛失すると今までのすべて クラウドにバックアップされ、どこからで が消える! もアクセス可能 別の PC・スマホから触れない URL ひとつで共有。プレビューや差分も Web で見える 人に見せたい時、共有・レビューのやり プルリクエストとレビューコメントで「見 とりが難しい(メール添付の往復…?) える化された提案・合意形成」
GitとGitHubの違い Git GitHub PC上(ローカル)の道具 インターネット上(クラウド)の場所 コマンドで操作 Webブラウザで操作可能 個人での作業向け チームでのコラボレーションにも向いている オフラインで動作 オンラインサービス
GitHubとは
GitHubとは • Git をインターネット上で使えるようにし て、共有・コラボに特化した仕組みを加え たサービス • 世界最大級のコード/コンテンツ共有プ ラットフォーム • 開発の中心としてプロジェクト管理や課題 管理、AIを利用した開発支援ツール (GitHub Copilot)なども展開 • Microsoft傘下のGitHub社が運営している • が、GitHub CEOが辞任を発表し、Microsoft のCore AIチームに取り込まれることに…!
非開発者も活用しやすいGitHubの機能 • オンラインでのファイルのバージョン管理 • 議事録、企画書、手順書、スクリプト等 • 変更履歴とコメントで “意思決定の経緯” を残せる • Issue/ GitHub Projects でタスク管理。担当・期限・チェックリストも • Wiki・README でナレッジ共有(検索もしやすい)
GitHubの便利機能をちょっとだけ紹介
GitHubはオンラインでファイルを共有できるサービス 便利機能1 リポジトリの可視性 そのままだと全世界に企業秘密なコード・恥ずかしいメモまで公開 されてしまう 誰から見えるリポジトリかを管理できる機能が必要
便利機能1 リポジトリの可視性 3種類の可視性(誰から見えるか)を設定可能 Public だれでも閲覧可 Private 招待した人だけ Internal 組織メンバー
どんな機能? • 「変更内容の承認依頼フォーム」。チーム開発では必須 便利機能2 プルリクエスト • 自分の変更を「チームや管理者に確認してもらい、問題な ければ反映(マージ)してほしい」とお願いする仕組み この機能のメリット • 確認・承認フローができる:他の人が必ず内容をチェック し、意見をもらえる • 透明性アップ:誰が何をどこまで直したかが一目瞭然 • 記録が残る:修正経緯ややりとりがすべて自動保存される ので、振り返りやすい • 品質と安全性が上がる:テストや複数人の目を通してから リリースできるのでミスが減る
どんな機能? • 特定のブランチに、色々なルールを設けられる 便利機能3 ブランチ保護 ルール • よく使うのは「マージ前にプルリクエストを要求する」機能 この機能のメリット • 誤操作防止:重要なブランチをうっかり直接書き換え、上書き ができなくなる • 品質を担保:他の人のチェックや自動テストを必須にできる • プロジェクト全体が安定:大事なファイルやシステムが守られ やすくなる
GitHubハンズオン
ファイル修正の流れ
ハンズオンでやること 1. GitHubでリポジトリ作成 2. 自分のPCにクローン 3. 作業ブランチ作成 4. ファイルの変更 5. 変更のステージ 6. コミット 7. プッシュ 8. GitHubでプルリクエスト作成&コメントしてみる 9. マージ
1. GitHubでリポジトリ作成 https://github.com/ にアクセスして左 上の方にある「New」をクリック
1. GitHubでリポジトリ作成 Repository nameを好きに入れ、 「Add README」をOnにして Create Repository
2. GitHubのリポジトリを自分のPCに クローン(コピー) VS Codeで「GitHub Pull Requests」と いう拡張機能をインストール これを入れるとVS Codeからプルリク エストが出せて便利です!
2. GitHubのリポジトリを自分のPCに クローン(コピー) VS Code左下の人物アイコンをクリッ ク →「GitHub pull ~GitHubでサインイ ンします」をクリック →ブラウザが開くのでそこでログイ ン
2. GitHubのリポジトリを自分のPCに クローン(コピー) GitHubで先ほど作成したリポ ジトリを開く →「Code」をクリック →「HTTPS」タブでURLをコ ピー
2. GitHubのリポジトリを自分のPCに クローン(コピー) VS Codeで Windowsの人は「Ctrl + Shift + P 」 Macの人は「Command + Shift + P 」 を押して出てきたバーで「clone」と打つと「Git: Clone」が出るのでそれをクリッ ク (「 Git: Clone」で検索してもOK)
2. GitHubのリポジトリを自分のPCに クローン(コピー) 出てきたバーに、先ほどコピーしたリポジトリのURLを貼り付け リポジトリをコピーしたい場所を選んで進む エクスプローラーが出てくるので、好きな場所にフォルダを作成してEnter(その 場所にGitHubで作成したリポジトリのファイルがダウンロードされます)
2. GitHubのリポジトリを自分のPCに クローン(コピー) これが出てきたら「信頼します」
2. GitHubのリポジトリを自分のPCに クローン(コピー) VS Codeで左上のファイルマークを開くと、先ほどGitHubで作ったリポジトリがコ ピーされている! これでクローン完了です
2. GitHubのリポジトリを自分のPCに クローン(コピー) VS Codeで左上のファイルマークを開くと、先ほどGitHubで作ったリポジトリがコ ピーされている! これでクローン完了です
3. 作業ブランチ作成 VS Codeでブランチ(自分の作業場所)作成
3. 作業ブランチ作成 好きなブランチ名を入れてEnter →VS Code左下に、ここで打ち込んだブランチ名が表示される
4.ファイルの変更 何でもいいのでREADME.mdを更新 左の一番上のファイルマークのボタン(エクスプローラー)からファイルを開いて 編集 編集したら必ず保存する!(保存しないと次の手順のような画面にならない)
5.変更のステージ ソース管理で変更したREADMEの横の+ボタンをクリック すると「ステージされている変更」に移動してコミット(保存)対象に
6.コミット コミットメッセージを入れてコミット ここではどんな変更をしたのか(もしくは変更目的)を書くと後から履歴を追いや すい
7.プッシュ まだプッシュしていない場合は「Branchの発行」と表示されるのでクリック
7.プッシュ GitHubを見に行くと先ほどプッシュしたブランチ名が!
8. GitHubでプルリクエスト作成 &コメントしてみる GitHubのリポジトリを開いてCompare & pull requestをクリック(mainブランチと差 分があるブランチがプッシュされると表示されます)
8. GitHubでプルリクエスト作成 &コメントしてみる プルリクタイトルと内容を埋め てCreate チーム開発ではここで変更の詳 細やレビューしてほしい観点な どを書きます
8. GitHubでプルリクエスト作成 &コメントしてみる 好きな行にコメント
9.マージ