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

しかし、GitやGitHubの仕組みに若干ハードルの高さを感じているも方も多いのではないでしょうか。
GitHubは、数年前から「GitHub Desktop」というデスクトップ用のアプリケーションを提供しており、より簡単に扱えるようになっています。

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

GitHubとは？


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

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

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

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

GitHub Desktopとは？


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

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

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

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デスクトップをダウンロード

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

1. GitHub Desktopをダウンロード

1.png
スクリーンショット：2017年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における貯蔵庫のようなものです。

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

リポジトリを作成するには、まず「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 のリポジトリーに反映する必要があります。

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

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

まとめ

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

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

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

いよいよ登場！初心者こそ知っておきたいGitHub Desktopの使い方

いよいよ登場！初心者こそ知っておきたいGitHub Desktopの使い方

初心者にも分かりやすくGitHub Desktopの使い方を解説します。 バージョン管理をしたり、バグの追跡をしたり、Wikiを使ったドキュメントシステムを使ったり、またSNSのような機能を備えています。
非エンジニアも知っておきたい！HTMLとCSSの基礎知識

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

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