【GitHubDesktop】Githubでコードの履歴を管理する〜基本編〜

こんにちは、mito(@mito_works)です。

mito

一度公開したサイトについて、ページ追加やページ内のデザイン変更など更新作業が多く発生してしまって、過去の状態が分からなくなってしまう..ということありませんか？

momo

そんな、コードのバージョンを管理したい時に便利なサービスがGithubだよ！

mito

例えば、お店のサイトを公開した後に、ヘッダーの上に長期休暇のアラートを追加、それをまた戻したいという時に、過去の状態のバージョンを置いておけば、すぐに元に戻せますね！

momo

今回コードをバージョン管理するにあたり、GitHubDeskTop、Github、Gitと様々な用語が出てくるので一つ一つ用語説明していくよ！

mito

ちなみに..わかりやすくコードのバージョン管理としていますが、コード以外でもバージョン管理は可能です！

Gitとは

CUIツール（コマンドラインツール）の一種です。

ソースコードをいつ誰がどこを編集したのか、最新のバージョンはどれかを管理するツールとして作られました

momo

コマンドプロンプト、ターミナルと呼ばれる（黒い画面）からキーボードでコマンドを入力して実行するツールですね！

mito

つまりエンジニア、コーダにとってとても便利ということです。

GitHubとは

OOSホスティングサービスである

OOSホスティングサービスとは、Open-Source Softwareの略で、ソフトウェア開発のためのソースのバージョンや修正を共有するWebサービスです。

momo

つまり、自分が作成したソースを公開し、他も閲覧＆編集可能にするプラットフォームのようなイメージだね

mito

他の人も編集できる..ということで誰がいつどんな修正をしたか？がわかるようにバージョンの管理が重要ということですね

momo

オープンに公開しない場合でも、初期状態に戻したい時など仕様変更を考えるとバージョン管理は重要だね

Gitをまとめたサービスである

GitHubということなので、そのまま解釈するとGitの集まりです。

momo

正確には、Gitのリポジトリーをまとめたサービスと言われたりします、

GitHubを使う上で理解しておきたい用語

mito

GitHubを使っていると様々なカタカナ用語がでてきます。

momo

まず用語の意味から抑えていこう！

リポジトリ （repository）

リポジトリーとはファイルやディレクトリの状態を保存する場所のようなものです。

管理したいディレクトリをリポジトリと連携させることで、そのディレクトリ内のファイルの変更履歴を記録し、保存できます。

mito

つまり、自分のPCの一部のフォルダをリポジトリと連携させてバージョン管理機能を活用するというイメージです。

ローカルリポジトリ

自分のPC上のリポジトリ

リモートリポジトリ

GitHub上のリポジトリ

momo

つまり状況によっては、ローカルリポジトリとリモートリポジトリでコードの内容が異なるということがあるね。

操作上の名称

mito

GitHubを使う上で必要になる用語を解説します。

クローン（clone）

リモートリポジトリをローカルにダウンロードするコマンドです。その時の最新版のデータと変更履歴などがまとまっていますので、クローンしたタイミングのリモートリポジトリと全く同じ環境をローカルに作成します。これにより、他の人の影響を受けずに自分のPCで作業ができるようになります。

プル（pull）

ローカルリポジトリをリモートリポジトリと同期させること

momo

つまり、ローカルとリモートの両方の状態を合わせる作業です。

コミット（commit）

ファイルの追加や変更の履歴をリポジトリに登録すること。

プッシュ（push）

ファイルの追加や変更の履歴をリモートリポジトリに送信・反映すること。

ブランチ（branch）

作業を細かく枝分かれさせて、それぞれで開発を進めていくためのもの。

プルリクエスト（pull request）

ローカルリポジトリの変更を他の人に確認してもらうこと。

マージ（marge）

枝分かれしたブランチを統合させること。

GitHubDesktopとは

GitHubを使うにあたり、ほぼ操作の知識なく簡単に使えるデスクトップ用のアプリケーションです。

mito

コマンドが打てない人でも気軽に使うことができそうですね。

momo

ここでは、GitHubにはアカウントを作った状態として解説します。

mito

GitHubのアカウントはこちらからusername、emial、passを設定すると作成できます。

GitHubDesktopをダウンロードする

GitHub Desktopの公式ページからダウンロードします。

インストール後、アイコンをダブルクリックし、起動させます。

GitHubとGitHubDesktopを連携させる

GitHubのアカウントでログインするボタンをクリックします。

「Authorize desktop」をクリックします。

「GitHub Desktop.appを開く」をクリックします。

「Use my GitHub account name and email address」にチェックをしている状態でgithubのName とEmailを入力し、「Continue」ボタンをクリックします。

できました！

GitHubでリポジトリを作成する

GitHub上でバージョン管理を行いたいリポジトリを作成します。

momo

イメージとして、ローカルで作成したWebサイト1つ分のフォルダがまるっとGitHubにも共有されるイメージです。

GitHub上でリポジトリを作成

Repositoriesの右にある「New」ボタンをクリックします。

リポジトリの設定

リポジトリー名や説明文を書きます。記入できたら「Create repository」をクリックします。

mito

リポジトリー自体を公開したくない場合はprivateの設定で、自分しか閲覧できない状態を作れるよ

ローカルリポジトリの設定

GitHub上にリポジトリができました。次は、ローカルにもリポジトリを作り、GitHubとつないでいきます。

GitHub上からデスクトップリポジトリ設定を立ち上げる

先ほどGitHubで作成したリポジトリにある「set up in DeskTop」をクリックします。

Clone a Repositoryからローカルのファイルパスを指定

ローカルで作成したWebサイトのフォルダ最上位を指定します。入力を終えたら「Clone」をクリック。

「GitHub Desktop.appを開く」をクリック

ローカルとリモートの繋がりを確認

ローカルとリモートのリポジトリが繋がりました。

おまけの工程

mito

もともと、フォルダに入れておいても良いのですが、リポジトリ作成後にローカルリポジトリの配下にファイルを移動させました。

コミットする

ファイルが認識されると添付の様な表示になります。summaryとDescriptionを入力し「Commit to main」をクリック

リモートリポジトリへプッシュする

ローカルリポジトリにコミットしたものをリモートリポジトリへプッシュします。

「Publish branch」を押す

momo

押し忘れると、リモートリポジトリへは反映されないので注意！

GitHub上でリポジトリを確認

GitHub上でも履歴が表示され、pushしたファイル名および、中身を確認することができます。

修正内容を反映させたいとき

ローカルで編集を加えるごとに、リモートリポジトリとのコードと差が生まれるのでGitHub Desktopで確認すると差分が見られます。

momo

差分を確認し、間違いなければ、先ほどと同じ様にcommit→pushをするよ！

まとめ

GitHubでコードの履歴を管理することで、Web制作の運用案件の管理がグッと楽になると思います。

ABOUT ME

mito

こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。