コーディングの勉強

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

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

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

 

momo
momo
そんな、コードのバージョンを管理したい時に便利なサービスがGithubだよ!
mito
mito
例えば、お店のサイトを公開した後に、ヘッダーの上に長期休暇のアラートを追加、それをまた戻したいという時に、過去の状態のバージョンを置いておけば、すぐに元に戻せますね!
momo
momo
今回コードをバージョン管理するにあたり、GitHubDeskTop、Github、Gitと様々な用語が出てくるので一つ一つ用語説明していくよ!
mito
mito
ちなみに..わかりやすくコードのバージョン管理としていますが、コード以外でもバージョン管理は可能です!

 

Gitとは

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

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

momo
momo
コマンドプロンプト、ターミナルと呼ばれる(黒い画面)からキーボードでコマンドを入力して実行するツールですね!
Gitの特徴

ソースコードの記録や追跡などのバージョン管理が「分散型」であること。

ソースコードのロールバック(変更前の状態に戻す)が簡単

修正履歴を整理してログに残すことが簡単

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

GitHubとは

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

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

momo
momo
つまり、自分が作成したソースを公開し、他も閲覧&編集可能にするプラットフォームのようなイメージだね
mito
mito
他の人も編集できる..ということで誰がいつどんな修正をしたか?がわかるようにバージョンの管理が重要ということですね
momo
momo
オープンに公開しない場合でも、初期状態に戻したい時など仕様変更を考えるとバージョン管理は重要だね

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

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

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

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

mito
mito
GitHubを使っていると様々なカタカナ用語がでてきます。
momo
momo
まず用語の意味から抑えていこう!

リポジトリ (repository)

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

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

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

ローカルリポジトリ

自分のPC上のリポジトリ

リモートリポジトリ

GitHub上のリポジトリ

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

 

操作上の名称

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

クローン(clone)

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

プル(pull)

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

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

コミット(commit)

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

プッシュ(push)

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

ブランチ(branch)

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

プルリクエスト(pull request)

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

マージ(marge)

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

GitHubDesktopとは

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

GitHubDesktopの特徴

本来、コマンドを使って操作しなければいけないところを、コマンド不要で使うことができる

Mac/Windowsどちらでも使用可能

GitHub公式クライアント

mito
mito
コマンドが打てない人でも気軽に使うことができそうですね。
momo
momo
ここでは、GitHubにはアカウントを作った状態として解説します
mito
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
momo
イメージとして、ローカルで作成したWebサイト1つ分のフォルダがまるっとGitHubにも共有されるイメージです

GitHub上でリポジトリを作成

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

リポジトリの設定

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

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

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

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

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

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

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

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

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

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

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

おまけの工程

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

コミットする

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

 

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

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

「Publish branch」を押す

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

GitHub上でリポジトリを確認

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

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

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

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

まとめ

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

 

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