GitHubは、バージョン管理システム「Git」の仕組みを使って、世界中のプログラマーが自分の作品を保存、公開することを可能にしたサービスです。
オープンソースでの開発にはなくてはならないものであり、GitHubがなければ開発が進まないと考えている人もいるほどです。

数年前からは「GitHub Desktop」というデスクトップ用のアプリケーションも提供されており、様々なサービスがより簡単に扱えるようになりました。

今回は、バージョン1.0として正式にリリースされた「GitHub Desktop」の使い方を解説します。

（追記：2020年5月12日（米国現地時間）に最新版 GitHub Desktop2.5がリリースされました。）

GitHub Desktopを提供する、GitHubとは？


スクリーンショット：2017年5月

まずは、GitHubとは何かをおさらいしておきましょう。

GitHubとは、オープンソースソフトウェアのホスティングサービスです。
バージョン管理をしたり、バグの追跡をしたり、Wikiを使ったドキュメントシステムを使ったり、またSNSのような機能を備えています。

その豊富な機能ゆえに、開発者にとってはなくてはならないものになっています。
また、実際の開発現場でも、GitHubを使ってバージョン管理を行なっている企業も多くあります。

GitHub Desktopとは？

a.png
写真引用：https://github.blog/jp/2020-05-19-create-and-push-tags-in-the-latest-github-desktop-2-5-release/

GitHub Desktopは、GitHubが提供しているデスクトップ用のアプリケーションで、GitHubを利用した開発を簡単にするためのプログラムです。

以前は簡単なことしかできませんでしたが、ベータ版の開発を経て、正式リリース版ではさまざまな機能を利用することができるようになりました。最新版では、タグの作成とPush機能も追加されています。

GitHub Desktopを使う3つのメリット

GitHubを使うのはインターネットブラウザ経由でも行うことができますが、それでも初心者の方には敷居が高いと感じてしまうようです。
ここでは、GitHub Desktopを使う場合に享受できる3つのメリットを確認してみましょう。

1. 好きなエディターで編集できる


スクリーンショット：2017年9月

DropboxのWeb版とデスクトップ版を想像していただくと分かりやすいと思いますが、GitHubのデスクトップ版もパソコン環境と統合されるので、お気に入りのソフトウェアを使って編集することができます。

GitHubの場合はプログラム(コード)の編集が大半を占めるでしょうが、Sublime TextやAtomのようなオープンソースのソフトウェア、あるいはターミナルのように自由に使いたいソフトウェアを選べます。
もちろん画像の場合も、PhotoshopやAffinity Designer、Gimpのように普段使っているエディターで編集することができます。

Web版ではブラウザ越しのやりとりではありますが、デスクトップ版を使うことで、より直感的にファイル操作を行うことが可能になるのです。

2. クローンやフォークが早い


スクリーンショット：2017年9月

クローンやフォークといったGitHub特有の操作も、GitHubデスクトップではボタンを押すだけなので、あっという間に行うことができます。

3. 画像の差分を表示できる


スクリーンショット：2017年9月

新しいGitHub Desktopで実装された機能として、*「画像の差分」*の表示機能を利用できるようになりました。

差分とは通常、バージョン管理において、2つのコードの違いのことを指します。
GitHubでは、コードの差分を簡単に表示できる機能がありましたが、画像の差分機能は実装されていませんでした。

画像の差分と言えば画像用のバージョン管理システムとしてAbstractが有名ですが、今回のGitHub Desktopの正式リリースで画像の差分チェック機能が使えるようになったのです。

GitHub Desktopをダウンロード

それでは早速、GitHub Desktopをダウンロードしてみましょう。

1. GitHub Desktopをダウンロード

b.png
スクリーンショット：2020年9月

まず、GitHub Desktopのホームページに行きます。
すると、下にOSの環境に合わせたダウンロードボタンがあるので、*「Download for macOS」(Windows)*をクリックしてアプリケーションファイルをダウンロードします。

2. アプリケーションを開いてログイン

2.png
スクリーンショット：2017年9月

次に、アプリケーションを開きます。
ダウンロードしたファイルを解凍し、GitHub Desktopを開きます。

3.png
スクリーンショット：2017年9月

次に、アカウントを持っているか尋ねられるので、アカウントを持っていない場合は*「Create your free account」をクリックしてブラウザでアカウント登録を済ませてください。
アカウントをお持ちのかたは、「Sign into GitHub.com」*をクリックし、ログインを行います。

4.png
スクリーンショット：2017年9月

最後に匿名でのデータ使用を認めるかどうか尋ねられるので、任意で変更をしてください。

3. リポジトリを作成

リポジトリとは、関連するファイルやフォルダをまとめておく、GitHubにおける貯蔵庫のようなものです。

c.png
写真引用：https://www.premium-tsubu-hero.net/technology/programming/github-desktop-create-newrepository/

リポジトリを作成するには、まず*「Create New Repository」*をクリックします。

6.png
スクリーンショット：2017年9月

Name(リポジトリ名)は「xxx.github.io」の形になるもので、Description(説明)の欄には任意で説明を加えます。
Local Path(ローカルパス)はデスクトップのローカル環境を指定します。
Git Ignoreよく分からなければそのままで大丈夫です。
Licenceはよく分からなければ「MIT License」(免責事項と著作権表示義務)を選択しておきましょう。

GitHub Desktopを使ってみよう

1. コミットしてみよう

7.png
スクリーンショット：2017年9月

リポジトリを作成したら、それに対して開発を進めていくことになります。
ローカル環境にあるリポジトリでファイルの追加・更新・削除を行って、コミット(リポジトリに登録)します。
コミットはバックアップのように一日一回行うといったものでなく、 タイミングは機能追加したり、バグ修正したりといった意味があるまとまりで行います。

8.png
スクリーンショット：2017年9月

ローカル環境のフォルダに任意のコードや画像を入れると、GitHub Desktopのほうで反映されます。

9.png
スクリーンショット：2017年9月

ここで変更内容に対するコメントを入力すると、*「Commit to xxx」*ボタンが押せるようになります。
クリックしてコミットを行います。
変更した内容やコメントは、Historyで確認できるようになっています。

2. 同期してみよう

ここで注意しないといけないのが、 変更内容はコミットではまだローカルのリポジトリーにあるだけということです。
ローカルのリポジトリーの内容を GitHub のリポジトリーに反映する必要があります。

d.png
写真引用：https://digitaldiy.jp/article/programming/5141/

画面右上にある*「Publish Repository」*を実行することにより GitHub のリポジトリーと同期し、変更が反映されます。

GitHub Desktopをより直感的に操作するために必要なこと

GitHub Desktopの概要から基本的な操作までをご紹介させていただきました。

GitHubの操作に慣れているひとであれば、より直感的にGitHub Desktopも操作できるようになるでしょう。
GitHub自体が分散型の開発環境を再現しているため、GitHubならではの用語が多いですが、初心者の方も少しずつ覚えていくと便利です。

プログラミングについてさらに知る

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

非エンジニアも知っておきたい！HTMLとCSSの基礎知識

WebやITを取り扱う仕事の中でたびたび耳にする「HTML」と「CSS」という言葉。聞いたことはあるけど、いまいちよくわからない人も多いでしょう。 エンジニアでなけれWebサイトの制作や運営はCMS（コンテンツ管理システム）に任せることができますが、それでもHTMLとCSSの仕組みを知っているといろいろな面で便利ですし、Webサイト運用にも自信を持てるようになります。 今回は非エンジニアでも覚えておきたい、HTMLとCSSの基礎について解説します。