【最新版】GitHub Desktopとは？インストールから具体的な使い方までわかりやすく徹底解説！

Git初心者の方は特に、コマンド操作に抵抗を感じている方も多く、なかなか一歩が踏み出せないんじゃないでしょうか？

そんな方には視覚的に操作できるGUIツールがおすすめです！

いくつかあるGUIツールの中でも、今回はGitHub公式のGitHub Desktopについてご紹介します。

インストール方法から使用方法までキャプチャ付きで解説しているので、この記事を読めばGit初心者の方でもGitHubをサクサク使えるようになります！

エンジニア志望の方だけでなく、Web制作のコーダーやWebデザイナーの方にも便利なツールですので、GitHub Desktopを使ってGitHubを体験してみましょう！

GitHub Desktopとは

GitHub Desktopとは、GitHubから無料で提供されている純正のアプリケーションです。

GitHubとのやりとりをデスクトップで行うためのGUIツールで、コマンド操作不要でGitHubが使えるとても便利なツールなんです！

GitHub Desktopのメリット

GUIが見やすい

シンプルなUIで、非常に操作しやすいです。

現在対象となっているリポジトリ・ブランチが一目でわかりますし、コマンドを使わずにさくっと変更できます。

また、外部のアプリケーションとの連携が取りやすく、エディタやブラウザ上のGitHubにワンクリックで行き来できるのも推しポイント。

コマンド操作ではいまいち分かりづらい「今ファイルがどこにあって何をしているのか？」という状況が視覚的にわかることはGUIツールの大きなメリットです。

diff（差分）が常に視覚的に分かる

差分はこんな感じで、追加した部分を緑、削除を赤、といったように視覚的にわかるようになっています。

ファイルの変更内容が一目瞭然なので、「少し前のコードに戻したい…」なんて時にも状況が把握しやすくなるので大変便利な機能ですね。

GitHub Desktopのデメリット

日本語版がない

残念ながら日本語版がありません…。

ですが操作に必要な英語は、GitやGitHubを多少勉強している方であればお馴染みの単語ばかりなので、そこまで苦労することは無いかと思います。

GitHub関連の単語についておさらいしたい方は、こちらの記事を確認してみてください。

＞＞ GitHubって日本語対応してるの？英語が不安な初学者向けに用語解説！

また公式ヘルプページではGitHub Desktopのことも日本語でサポートしてくれています。

→ GitHub Desktopのドキュメント

コマンド操作に慣れることはできない

コマンド操作が無いことはメリットでありデメリットですね。

GitHub Desktopで扱えないGitの操作も存在するので、開発現場においてはコマンドを使えた方が何かと便利です。

メインではGitHub Desktopを使う予定でも、多少コマンドラインに慣れておくことをおすすめします。

ただ、周りと環境を合わせる必要のない場合は、自分がやりやすい環境を作れればいいので、GUIツールのGitHub Desktopが使えれば十分かと思います！

Web制作系のコーダーやデザイナーの方にとっては、学習コストを考慮して、まずはGitHub DesktopでGitが使える環境を構築するのは十分ありな選択だと思います！

GitHub Desktopのインストール方法

アカウントの作成がまだの方は、まずGitHubにアカウント作成しましょう。こちらの記事を参考にしてみてください。

＞＞ 【最新版】GitHubアカウントの作成方法を画像付きで解説！

アカウントが作成できたら、GitHub Desktopをインストールします。

→ GitHub Desktop 公式サイト

GitHub Desktopの公式サイトに行き、トップページの”Download for macOS(Windows)”をクリック。

ダウンロードされたzipファイルを解凍するとインストールが完了してアプリケーションが起動します。

アカウント認証方法

続いて使用するGitHubアカウントとアプリケーションを連結させます。

メニューバーのGitHub Desktop→Preferencesをクリック。

AccountsのGitHub.com側のSign inをクリックします。

サインインするのにブラウザ使うよ、と表示されるので”Countinue With Browse”を選択します。

ブラウザでGitHubの公式ページに移動するのでユーザー名とパスワードを入力してサインインしましょう。

ポップアップ画面の”GitHub Desktop.appを開く”をクリックすればアカウント承認が完了します。

もう一度Preferencesを開くと、サインインできていることが確認できます。

GitHub Desktopを使ってみる

準備が整ったら、さっそく使ってみましょう！

リポジトリの作成

まずはローカルにリポジトリを作成します。

アプリケーショントップの”Create a New Repository on your Hard Drive…” をクリックします。

ポップアップされたフィールドに入力していきます。

Local Pathでは、ローカルリポジトリを作成したい場所を指定しましょう。

他にもGitで管理しないファイルや、ライセンスの有無を設定できます。

入力し終わったら”Create Repository”をクリック。指定場所にNameで入力したリポジトリ名のフォルダが作成されていればOKです。

GitHub Desktopにファイルの追加

作成されたリポジトリ内はまだ空なので、GitHub Desktop上は画像のような表示になってます。

ここで空だったディレクトリにHTMLファイルとCSSファイルを追加してみると、

GitHub Desktopの表示がこのように変わります！

左側にファイルが並び、右側に選択ファイルの中身が表示されています。これでGitHub Desktopにファイルがファイルが追加されたことがわかります。

コミット

追加したファイルをコミットしてみましょう。

ファイル内容に変更を加えたあと、左下にある”Summary”にコミット時のコメントを入力して、”Commit to main”をクリックします。

Historyタブを開いてみると、コミット履歴が表示されるので、これで無事コミットされていることが確認できます。

プッシュ

次にリモート（GitHub）へプッシュしてみましょう。

プッシュするには”Publish branch“をクリックすればOKです。

この時、GitHub上にリモートリポジトリを作成してない場合はポップアップが出るので、Nameにリモートリポジトリ名を入力し”Publish Repository“をクリックします。

これだけでリモートリポジトリが作成できています！

トップ画面から”View on GitHub”をクリックすると、ワンクリックでブラウザのGitHubにジャンプします。

GitHub上でもしっかりとローカルの内容がプッシュされていることを確認できます。

リモートリポジトリのクローン

リポジトリページをブラウザで開き、”Code”からHTTPSのURLをコピーしておきます。

GitHub Desktopに戻り、メニューバーからFile→Clone Repositoryを開いたら、

「GitHub.com」「GitHub Enterprise」「URL」とタブが並んだポップアップが表示されます。

この中からURLを選択し、コピーしてきたURLを貼って保存場所を指定して、”Clone”をクリック。

無事クローンされてます。

※クローンってなんだっけ？となった方はこちらの記事で確認しておきましょう。

ブランチの作成

最後にブランチの作成方法を見ていきましょう。

まず”Current Branch”を開きます。

ここではブランチを選択できますが、今回はまず”New Branch”をクリックしてブランチを新規作成します。

ポップアップされたフィールド上のNameに、任意のブランチ名を入れて”Create Branch”をクリック。

もう一度”Current Branch”を開くと、新しくブランチが追加されたことが確認できます。

コミットやプッシュ先は、このCurrent Branchから選択して切り替えることができます。

Current Branchから新しいブランチを選択してプッシュすると、ブラウザ上でも新規ブランチが追加されます。

まとめ

GitHubのGUIツールであるGitHub Desktopをご紹介しました。

これがあれば手軽にGitHubを使えるようになるので、コマンド操作にまだ慣れないWebデザイナーの方にもオススメです！

もちろん、コマンドも使えるに越したことはないので、ある程度ツールでGitHubが使えるようになったらコマンド操作にも挑戦してみてください！

また、GitHubが使えれば無料でコーディングデータをWeb上に公開することができるようになります。詳しくはこちらの記事を参考にしてみてださい！