第5章:GitHub Desktop の活用

学習目標

この章を読み終える頃には、GitHub Desktopアプリをインストール・設定し、ローカル環境(手元のPC)でより効率的にGitHub作業ができるようになります。Web画面での基本操作に加えて、デスクトップアプリでの快適な作業環境を手に入れましょう。


5.1 GitHub Desktop のインストールと設定

なぜGitHub Desktop を使うのか

GitHub Desktop概要

第4章では、GitHubのWebサイト上でファイルの編集や管理を行いました。この方法でも基本的な作業は可能ですが、以下のような場面では少し不便です:

Web画面での制約

  • 大きなファイルや複数のファイルを一度に編集するのが大変
  • インターネット接続が必要(オフラインでは作業できない)
  • 高機能なテキストエディタの機能が使えない
  • 画像や動画ファイルの扱いが限定的

GitHub Desktop のメリット

  • 普段使っているエディタが使える:VS Code、Sublime Text、メモ帳など、お気に入りのツールで編集
  • オフライン作業が可能:インターネットなしでも作業を続けられる
  • 複数ファイルの一括操作:フォルダ全体のコピー、移動、リネームが簡単
  • 視覚的な差分表示:変更内容が色分けされて分かりやすい
  • 操作の簡単さ:ボタンクリックでcommit、push、pullが可能

GitHub Desktop は、GitHubが公式に提供している無料アプリケーションです。Web版の機能をすべて含みつつ、デスクトップならではの快適さを追加したツールです。

ダウンロードとインストール手順

インストールセットアッププロセス

1. 公式サイトにアクセス https://desktop.github.com/ を開きます。

2. ダウンロード 「Download for Windows」または「Download for macOS」ボタンをクリックします。お使いのOSに合わせて自動的に適切なバージョンが選択されます。

3. インストーラーの実行 ダウンロードしたファイルをダブルクリックして、インストールを開始します。

Windows の場合:

  • GitHubDesktopSetup.exe を実行
  • インストール先フォルダの選択(通常はデフォルトでOK)
  • 「Install」ボタンでインストール開始

macOS の場合:

  • GitHub Desktop.dmg を開く
  • アプリケーションフォルダにドラッグ&ドロップ
  • 初回起動時にセキュリティ確認が表示される場合があります

4. インストール完了 インストールが完了すると、GitHub Desktop が自動的に起動します。

初期設定の手順

インターフェイスレイアウト要素

初回起動時に、以下の設定を行います:

GitHubアカウントとの連携

  1. 「Sign in to GitHub.com」をクリック
  2. ブラウザが開いてGitHubのログイン画面が表示
  3. ユーザー名とパスワードを入力してログイン
  4. 「Authorize desktop」ボタンで認証許可
  5. GitHub Desktop に戻ると、アカウント情報が自動設定

ユーザー情報の設定

  • Name:あなたの名前(commitに記録される)
  • Email:GitHubアカウントに登録したメールアドレス
  • これらの情報は、あなたが行ったcommitの「作者」として記録されます

使用状況データの送信設定 GitHubがアプリ改善のために使用データを収集するかどうかを選択できます。どちらを選んでも機能には影響ありません。

リポジトリの同期確認

リポジトリクローン作成

設定が完了すると、あなたのGitHubアカウントのリポジトリ一覧が自動的に表示されます。第2章で作成したリポジトリが表示されていることを確認してください。

もし表示されていない場合は、以下を確認:

  • GitHubアカウントに正しくログインできているか
  • インターネット接続が正常か
  • しばらく時間をおいてから再度確認

環境設定の詳細オプション

設定・プリファレンス

より詳細な設定は、メニューの「Preferences」(設定)から行えます:

外部エディタの設定

  • VS Code、Sublime Text、Atom等の連携設定
  • 「Open in External Editor」でお気に入りのエディタが開くように

テーマの設定

  • Light(明るい)またはDark(暗い)テーマの選択
  • お好みに合わせて表示を調整

デフォルトの保存場所

  • 新しいリポジトリをcloneした時の保存先フォルダ
  • 整理しやすい場所を指定しておくと便利

5.2 Clone(複製)の基本操作

Clone とは何か

「Clone(クローン)」は、GitHubのリポジトリを手元のPCに複製することです。これにより、オンラインのリポジトリとローカル(PC内)のリポジトリが連携され、両方で作業できるようになります。

Clone のメリット:

  • オフラインでも作業できる
  • 好きなエディタでファイルを編集できる
  • 複数のファイルを同時に編集・管理できる
  • バックアップとしても機能する

実際のClone手順

1. リポジトリの選択 GitHub Desktop で、clone したいリポジトリを見つけます。

2. Clone操作の実行

  • リポジトリ名の右側にある「Clone」ボタンをクリック
  • または、メニューの「File」→「Clone repository」

3. 保存先の選択

  • PC内でリポジトリを保存する場所を選択
  • デフォルトは「Documents/GitHub/リポジトリ名」
  • 任意の場所に変更可能

4. Clone完了の確認

  • 指定したフォルダにリポジトリの内容がコピーされる
  • GitHub Desktop でリポジトリが開かれる

Local Path の理解

Clone されたリポジトリは、「Local Path」という場所に保存されます。これは、あなたのPC内の特定のフォルダです。

Local Path の特徴:

  • 通常のフォルダと同様にファイル操作が可能
  • エクスプローラー(Windows)やFinder(Mac)から直接アクセス可能
  • 他のアプリケーションからファイルを開ける

よく使われる保存場所:

  • Windows: C:\Users\ユーザー名\Documents\GitHub\
  • macOS: /Users/ユーザー名/Documents/GitHub/

5.3 デスクトップでのファイル編集とCommit

ローカルでのファイル編集

ファイル変更ステージング

Clone したリポジトリのファイルは、普通のファイルと同様に編集できます:

1. ファイルの場所を開く GitHub Desktop で「Show in Explorer」(Windows)または「Show in Finder」(Mac)をクリック

2. お気に入りのエディタで編集

  • VS Code、メモ帳、Sublime Text など、普段使っているエディタを使用
  • 複数のファイルを同時に開いて編集可能
  • 画像ファイルの差し替えや追加も簡単

3. 変更の自動検知 GitHub Desktop は、ファイルの変更を自動的に検知し、「Changes」タブに表示します

コミットプロセスGUI

GitHub Desktop でのCommit操作

1. 変更内容の確認 「Changes」タブで、変更されたファイルの一覧が表示されます:

  • 緑色のプラス:新しいファイル
  • 黄色の丸:変更されたファイル
  • 赤いマイナス:削除されたファイル

2. 差分の確認 ファイル名をクリックすると、変更内容の詳細(diff)が右側に表示されます:

  • 緑色の背景:追加された行
  • 赤色の背景:削除された行

3. Commit メッセージの入力

コミットベストプラクティス

画面下部で:

  • Summary:変更内容の簡潔な要約(必須)
  • Description:詳細な説明(任意)

効果的なコミットメッセージの作成は、プロジェクトの可読性と保守性を大幅に向上させます。上記のベストプラクティスに従って、一貫性のある明確なメッセージを作成しましょう。

4. Commit の実行 「Commit to main」ボタンをクリックして、変更をcommitします

ブランチ管理機能

ブランチ管理デスクトップ

GitHub Desktopでは、ブランチの作成、切り替え、マージが簡単に行えます。複数の機能を並行して開発したり、実験的な変更を安全にテストしたりする際に非常に便利です。

部分的なCommit(Stage機能)

GitHub Desktop では、変更されたファイルの中から、commitに含めるファイルを選択できます:

選択的Commit の方法:

  1. Changes タブで変更されたファイルの一覧を確認
  2. Commitに含めたいファイルだけにチェックを入れる
  3. チェックの入ったファイルのみがcommitされる

使用例:

  • 2つのバグを修正したが、1つずつ別々にcommitしたい
  • 実験的な変更と確定的な変更を分けたい
  • 関連する変更をまとめてcommitしたい

5.4 Push、Pull、Syncの理解と実践

Push - ローカルの変更をGitHubに送信

Push Pull同期操作

Push とは: あなたのPC(ローカル)で行ったcommitを、GitHub上のリポジトリに送信することです。

Push の手順:

  1. GitHub Desktop で commit を完了
  2. 画面上部の「Push origin」ボタンをクリック
  3. ローカルの変更がGitHubのリポジトリに反映される

Push後の確認:

  • GitHub のWebサイトでリポジトリを確認
  • 新しいcommitが追加されていることを確認
  • ファイルの変更が反映されていることを確認

Pull - GitHubの変更をローカルに取得

Pull とは: GitHub上で他の人(または別のデバイスの自分)が行った変更を、ローカルのリポジトリに取り込むことです。

Pull の手順:

  1. GitHub Desktop で「Fetch origin」をクリック(最新情報の確認)
  2. 新しい変更がある場合、「Pull origin」ボタンが表示される
  3. 「Pull origin」をクリックして変更を取り込む

Pull が必要な場面:

  • 他の人と共同作業している
  • 別のPC(職場と自宅など)で同じリポジトリを使用
  • GitHub のWeb画面で直接ファイルを編集した

Sync - Push と Pull の自動実行

Sync とは: Push と Pull を自動的に実行する便利機能です。

Sync の動作:

  1. まずリモートから最新の変更を Pull
  2. 次にローカルの変更を Push
  3. ローカルとリモートが同じ状態になる

使用方法:

  • 「Sync」ボタンまたは「Fetch/Pull」ボタンをクリック
  • ショートカット:Ctrl+Shift+S(Windows)、Cmd+Shift+S(Mac)

履歴タイムライン表示

履歴タイムラインビュー

GitHub Desktopでは、プロジェクトの変更履歴を美しいタイムライン形式で表示できます。各コミットの詳細、作者、日時などが一目でわかり、プロジェクトの発展を簡単に追跡できます。

コンフリクト(競合)の基本対処

マージコンフリクト解決GUI

コンフリクトとは: 同じファイルの同じ箇所が、複数の場所で異なる内容に変更された場合に発生する問題です。

発生例:

  1. あなたがファイルAの3行目を「Hello」に変更
  2. 同時に他の人が同じファイルAの3行目を「こんにちは」に変更
  3. Pull したときに「どちらが正しいか分からない」状態になる

GitHub Desktop でのコンフリクト解決:

  1. コンフリクトが発生すると警告が表示される
  2. 「Open in External Editor」で詳細な編集画面を開く
  3. コンフリクトマーカー(««、====、»»)を確認
  4. 正しい内容を選択・編集してマーカーを削除
  5. ファイルを保存してcommit

StashとDiscard操作

Stash Discard操作

作業中に一時的に変更を保存したい場合や、間違った変更を破棄したい場合に便利な機能です。Stashは変更を一時的に退避し、後で復元できる機能で、Discardは変更を完全に取り消す機能です。


まとめ

この章では、GitHub Desktop を使ったより効率的な開発環境について学びました:

GitHub Desktop の導入

  • 公式アプリのインストールと初期設定
  • GitHubアカウントとの連携
  • ローカル環境での快適な作業環境構築

Clone とローカル作業

  • リポジトリの複製と管理
  • 好きなエディタでの自由な編集
  • 変更の自動検知と視覚的な確認

効率的なCommit操作

  • 直感的なGUIでのcommit作成
  • 選択的なファイルのcommit
  • 分かりやすい差分表示

リモートとの同期

  • Push によるローカル変更の共有
  • Pull による最新情報の取得
  • Sync による自動同期

Pull Request作成機能

Pull Request作成

GitHub Desktopから直接Pull Requestを作成することも可能です。ブランチでの作業が完了したら、アプリから直接Pull Requestを作成し、チームメンバーにレビューを依頼できます。

GitHub統合機能

GitHub統合機能

GitHub Desktopは、GitHub.comの様々な機能と深く統合されています。Issueの確認、Pull Requestのステータス確認、コラボレーターとの連携など、チーム開発に必要な機能が統合されています。

キーボードショートカット

キーボードショートカット

効率的な作業のために、主要なキーボードショートカットを習得しましょう。頁繁なマウス操作を減らし、スムーズなワークフローで作業できるようになります。

トラブルシューティング

トラブルシューティング一般問題

GitHub Desktopでよく発生する問題とその解決方法を理解しておくことで、トラブルが発生した際に迅速に対応できます。ネットワーク接続、認証、コンフリクトなどの一般的な問題の対処法を学びましょう。

CLIとDesktopの比較

CLI vs Desktop比較

コマンドラインインターフェイス(CLI)とGitHub Desktopのそれぞれの特徴を理解し、状況に応じて適切なツールを選択できるようになりましょう。初心者にはGUIがメリットが大きいですが、将来的にCLIを使うことも視野に入れておきましょう。

次の章では、複数人でのチーム開発に必要なブランチ機能とマージ操作について学習します。

ワークフローベストプラクティス

理解度確認: □ GitHub Desktop をインストールし、基本設定ができる
□ リポジトリをcloneし、ローカルで編集できる
□ 変更内容を適切にcommitできる
□ Push、Pull、Syncの違いを理解し、使い分けられる
□ 基本的なコンフリクトに対処できる