はじめに

GitHubが提供する公式GUIクライアント、GitHub Desktopを紹介します。その前に、まずはGitとGitHubについて説明しておきましょう。

Gitはプログラムのソースコードや、Webサイトのソースコードを管理できるバージョン管理システムです。ソースコードの編集履歴（バージョン）を管理し、簡単に前のバージョンに戻したり、複数の人が同じソースコードを編集した際、意図せず他の人の変更を上書きしないようにしたりといった目的で使われます。

GitHubはそのGitで管理されたソースコードをホスティングする、開発プラットフォームです。オープンソースプロジェクトからビジネスユースまで多くの場面で広く使われています。

GitHubとJamstackで使われるようなホスティングサービス（Netlify、Vercel、Cloudflare Pagesなど）と連携すると、Gitでソースコードを管理するWebサイトを自動でデプロイし、公開できます。近年は昔ながらのFTPでサーバーにファイルをコピーするという方法より、Gitをベースにしてデプロイする環境のほうが多いかもしれません。

この連載では、Gitに詳しくない人でも何をやっているかわかるように、コラムとしてGitの解説も挟みつつGitHub Desktopを解説します。

GitHub Desktopを使う理由

Gitには豊富なコマンドが用意されています。使いこなせると大変便利ですが、慣れるまで少し時間がかかるかもしれません。GitHub DesktopはGitを初めて使う場合でも、コマンドを覚えることなくGitHubを簡単に使えるよう提供されているGUIツールです。

そのため、普段からターミナルで多くのGitコマンドや、Visual Studio CodeなどのGitに対応したエディタを使いこなしているエンジニアにとっては、こういったツールが提供されていることを知っていても、自分には不要なツールだという認識でしょう。

しかし、GitHub Desktopは開発のワークフローを簡略化しようとしているツールでもあります。Gitの操作で困っていないエンジニアであっても、Gitのコマンドでの操作がちょっと面倒だなと思っているなら、GitHub Desktopを使うと開発しやすくなるかもしれません。

また、自分で使わなくても、コマンド操作に慣れていない同僚など、他の人にGitHubを使ってもらいたい場合もあるでしょう。そんなときに紹介するツールとして、公式であり、GUIでわかりやすく操作でき、しかも無料で提供されているGitHub Desktopは最適です。

たとえば、ディレクターやクライアントの担当者が、ちょっとこの文字だけ直したいといった場合、GitHubでプルリクエスト出せるようになってくれると、エンジニアとしても余計な手間が省けてうれしいのではないでしょうか？

そのほかのGUIクライアント

GitHub Desktopのような、GUIの無料で使えるGitクライアントとしては、ほかにはSourcetreeが有名です。過去にCodeGridでも紹介しています。

汎用的なGitクライアントとして優秀なSourcetreeですが、GitHubで利用するのであればGitHub Desktopのほうがよいかもしれません。普段、必要な基本的な操作は簡単にできますし、github.comとの連携がよくできていて、ローカルでの作業とWebブラウザでのgithub.comの操作をシームレスに切り替えられます。

筆者がおすすめしたからかもしれませんが、社内でもCodeGrid編集の2人はSourcetreeからGitHub Desktopへと乗り換えて、長らく使っています（CodeGridの記事編集と管理はGitHubを利用しています）。

「GitHub Desktopは初期設定が簡単、github.comとの連携がスムーズ、という点がとても気に入っています。エンジニアが使うにももちろん過不足ないのだろうと思いますが、デザイナーやディレクターなど、GitHubに不慣れな人たちにもおすすめしやすいツールです」（編集：丸山）とのコメントもあり、特に困ることもなく、使えているようです。

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

GitHub Desktopの公式サイトより無料でダウンロードできます。

M1やM2搭載のMacを使っている場合

M1チップやM2チップなどAppleシリコンを搭載したMacを利用している場合は、トップページの目立つ位置に表示されている「Download for macOS」ボタンではなく、そのボタンの下にある「Apple silicon?」の見出しの下のテキストリンクからダウンロードする必要がありますので注意してください。

Macでのインストールはダウンロードしたzipファイルを解凍し、出てきたアプリをアプリケーションフォルダへドラッグするだけです。Windowsもダウンロードしたらインストーラーを実行するだけになっています。

アンインストールもMacはそのアプリ削除するだけ、Windowsも標準的なアンインストールの手順に従うだけでできるので、気軽にGitHub Desktopを試してみるとよいでしょう。

GitHub DesktopはElectronでできている

GitHub DesktopはElectronベース、つまりChromiumとNode.jsをベースに作られているデスクトップアプリです。メニューからView > Toggle Developer Toolsを選ぶと見慣れたDeveloper Toolsが表示され、Web開発者に馴染みのある技術で作られているのがわかります。

初期設定

初めてGitHub Desktopのアプリを起動すると、次のような画面が表示されます。まずは「Sign in to GitHub.com」をクリックして、自分のGitHubアカウントでログインしましょう。

ログインすると、GitHubの設定からユーザー名とメールアドレスを取得した確認画面が表示されます。通常はそのまま「Finish」ボタンをクリックすれば問題ないでしょう。

これで初期設定はほぼ完了です。最初のリポジトリをどうするか案内が表示される画面となります（「リポジトリ」については下の囲み記事を参照してください）。この画面から進めることもできますが、この画面は初期設定後のみの表示です。ですから、ここでは次節より解説する標準的な操作方法を使って進めていきましょう。

Gitリポジトリ

リポジトリというのは、ソースコードと履歴を管理するデータベースのようなものです。Gitは分散型のバージョン管理システムなので、GitHubで管理されたリポジトリに変更を加える場合、それを丸ごとクローン（複製）したローカルリポジトリを手元のPCに置いて作業します。

それぞれのリポジトリで作業をし、その変更をpush（プッシュ、変更を他のリポジトリに送る）やpull（プル、変更を他のリポジトリから受け取る）といったコマンドでやりとりしています。

チーム開発では人数の数だけリポジトリがあり、それぞれがGitHubにあるリポジトリの完全なバックアップを持っていることになります。そのため、万が一GitHubにあるリポジトリが壊れてしまったとしても、だれかの手元にあるローカルリポジトリがバックアップになるという仕組みです。

このように開発者の手元に完全なリポジトリがあるので、インターネットがつながらない場所でも作業できます。たとえば、インターネットのない飛行機の中でも開発ができ、あとで安定したネット回線があるときに同期すればよいのです。

GitHubからリポジトリをクローンする

Gitリポジトリにあるソースコードを編集するには、まずリポジトリのクローンが必要です。すでにGitHubで管理されているプロジェクトに参加するというケースは、よくあるのではないでしょうか。記事の冒頭で例に出した、ディレクターやクライアントの担当者がちょっとサイト内の文字を修正するという場合でも、まずはプロジェクトのリポジトリをクローンしてから手元で修正することになります。

GitHub Desktopのメニューの、File > Clone Repository... を選ぶと、リポジトリのクローン画面が開きます。

ここで、GitHubのユーザー名/リポジトリ名の形で入れるか、httpsから始まるURLで指定できます。もし、GitHubで権限のあるリポジトリであれば、GitHub.comというタブに移動し、入力した文字でフィルタしながらリポジトリを探せます。

「Local Path」で、手元の環境のどのローカルフォルダにリポジトリをクローンするか指定します。直接テキストで入力もできますし、「Choose…」ボタンから選択することもできます。デフォルトでは、特定のフォルダにリポジトリ名でフォルダが作られます。

参加するOrganization（共同作業ができる共有アカウント）が少ないならそのままでよいですが、複数のOrganization配下のリポジトリを管理する必要のある筆者はホームディレクトリにGitHubディレクトリを作り、ユーザー名やOrganizationごとに分けて整理しています。たとえば、会社で管理するWebサイトであれば、~/GitHub/pxgrid/hogehoge-website 個人的なWebサイトであれば、~/GitHub/kyosuke/fugafuga-websiteといった形です。

• Organizationについて | GitHub Docs

最後に「Clone」ボタンをクリックすれば、クローンが始まります。

github.comからクローンする

github.com（GitHubのウェブサイト）からクローンする手順も試してみましょう。GitHub公式ツールらしく、github.comと連携されていることがわかりやすくなっています。

一度、GitHub Desktopから離れ、github.comの、クローンしたいリポジトリのページを開きます。Codeのタブのコンテンツ右上にある「<>Code ▼」となっているボタンをクリックします。その中に「Open with GitHub Desktop」というメニューがあるのでこれをクリックします。

そうすると、GitHub Desktopのアプリで開いてよいか確認が出ます。

「GitHub Desktopを開く」で進めると、先に解説した場合と同じように、GitHub Desktopでリポジトリをクローンする画面が開きます。URLがすでに入った状態になっているので、「Local Path」でクローンの場所を指定して「Clone」をクリックするだけです。

このように、github.comとも連携しているのがGitHub Desktopの特徴になります。github.comを見ていて、「このリポジトリをクローンしたい」となる場面は多いかと思いますので、こういった連携は大変便利です。

ローカルリポジトリをGitHubで管理する

まだGitHubにリポジトリを作成していない状態から、手元にあるローカルリポジトリをGitHubで管理する方法も見てみましょう。

たとえば、他の人と共有して作業する必要が出てきたり、もしくはホスティングサービスへ自動デプロイするためにGitHubで管理が必要といった場合です。つまり通常のクローンとは逆に、ローカルからGitHubへリポジトリを複製して管理するパターンになります。

たとえば、WebフレームワークのAstroでは、セットアップウィザードを利用すると、ローカルにgitをセットアップするか確認され、yesで実行するとローカルにリポジトリができます。

• Astroの特徴 | 今すぐ始めるAstro入門

このようにローカルで作成したリポジトリを、GitHubで管理したいと考えることはあるでしょう。このような場合もGitHub Desktopを使うと簡単に追加できます。まず、このローカルディレクトリをGitHub Desktopに追加します。メニューから「File」>「Add local Repository...」を選びます。

Astroが生成したファイルはバージョン管理されていない状態ですので、左下にコミットメッセージを入れて、これをコミットしておいてもよいでしょう（コミットについては次回詳しく解説します）。

「Commit to master」をクリックしてコミットすると画面が変わるので、「Publish repository」ボタンをクリックして、GitHubにリポジトリを作ります。

GitHubは、パブリックまたはプライベートの2つの方法でリポジトリを作成できます。パブリックはインターネット上の誰でもアクセスできるリポジトリで、オープンソースプロジェクトなどで使われます。プライベートはアクセスできるのは自分か特定のメンバーのみとなります。オープンソースではない、個人や企業のプロジェクトでよく使われます。

ここでは、プライベートリポジトリで構わないので、デフォルトのまま「keep this code private」のチェックは入れておきましょう。

最後に「Publish Repository」ボタンをクリックします。これで、リポジトリがGitHubに作られました。

github.comでの操作をしなくても、GitHub上のリポジトリを作れるのは便利なポイントの1つです。

まとめ

今回はGitHub Desktopのインストールと初期設定、そしてリポジトリのクローンを解説しました。クローンするだけでもGitHub Desktopの便利さが体験できたのではないでしょうか。

次回はこれだけ覚えておけばGitを使って管理しているといえる、Gitの基本操作をGitHub Desktopで行う方法について解説する予定です。