GitHub Desktop

GitHub Desktop(ギットハブ デスクトップ)のインストールまで-STEP1

ギットハブ デスクトップ

Git(ギット)はエンジニア向けのバージョン管理システムですが、チームでWeb製作する場合も利用すると共同開発でとてもスムーズに作業を進めることができます。

GitHubはGitの仕組みを利用したインターネット上のサービスで、GitHub上にWebサイトのデータを保管しておくことができます。

Gitを利用するには、パソコンにGitクライアントと呼ばれるアプリをインストールします。Gitの操作は大きく分けて二種類あり、「コマンド入力して操作する」(Git Bash)ものと「マウスで操作する」(GitHub Desktop)(Sourcetree)もののタイプがあります。

▪Gitコマンドタイプ(Git Bash)↓

Git Bash
Git Bash

▪Gitマウスタイプ(GitHub Desktop)↓

GitHub Desktop
GitHub Desktop

▪Gitマウスタイプ(Sourcetree)↓

Sourcetree
Sourcetree

▪Gitのクライアント↓

アプリ名内容
Git▪コマンド操作
Git公式から配布されている。
アプリではなくブラウザから利用する。
Git
Bash
▪コマンド操作
Git for Windowsから配布されているWindowsアプリ。
GitHub
Desktop
▪マウス操作
GitHubが配布しているアプリ。
機能が制限されるが操作が簡単。
Source
Tree
▪マウス操作
アトランティス社が配布しているアプリ。
Git機能

エンジニアなどコマンドに慣れている人はGit Bashの方がGitのすべての機能を利用できるので良いと思いますが、初めてGitを触る人はまず、マウスタイプのGitHub DesktopでGitの仕組みを理解しながらサービスを利用していく流れがいいと思います。

Git初心者でもすぐに使えるように、GitHubの設定とGitHub Desktopのインストールまでを解説します。

バージョン管理とは

バージョンという言葉の意味としては、例えばBLOGなどで最初に文章を書き終えて記事を下書きした状態がバージョン0、その記事をアップロードして公開した状態がバージョン1、そのあと文章の修正をして再更新した状態がバージョン2、といった感じがバージョンという考え方です。

ファイルを修正してからそのままデータを上書き保存すると、前の状態は消えてしまいます。ツールを使わずに前のデータの状態を残しておきたい場合は自身のPC(ローカル環境)にファイルを毎回保存しなければいけません。このように古いバージョンのファイルを残しておいて管理することをバージョン管理といいます。

バージョン管理システムとは

バージョン管理ではファイル名に日付や連番を変えて上書きしないように保存管理していかないといけません。これだと、かなり手間がかかりかつ正しい過去のファイルはどれなのか?と混乱がおきます。この問題を解決するのがバージョン管理システムです。

Gitを利用することで「誰が・いつ・どのファイル・どの部分の変更したか」を明確に管理することができます。

問題が起きた場合、履歴をさかのぼって問題が起きる前の状態に簡単に戻すことができます。(誰がその問題を起こしたかも明確にわかりますww)

複数でプロジェクトを進行する場合はこのバージョン管理システムが必須になってきますのでGitを使いこなすことはWeb関係の仕事をする人にとって必ず必要になります。

追加したアカウント&内容
追加したアカウント&内容

ファイルを共有する

Gitはオープンソース開発になっているので複数人でファイルを共有して共同作業する仕組みが基本となっており、インターネット経由でファイルを共有します。

Gitの用語

Git用語集として簡易的に下記表にまとめました。

Git用語意味
リポジトリ
repository
データ保管庫でファイルやディレクトリの状態を記録する場所。
ローカルリポジトリ
local repository
自分のPCにあるリポジトリ。一人で管理ができる。
リモートリポジトリ
remote repository
サーバーにあるリポジトリ。複数人で管理ができる。
フォーク
fork
リモートリポジトリをコピーしてリモートリポジトリを作成すること。
クローン
clone
リモートリポジトリをコピーしてローカルリポジトリを作成すること。
コミット
commit
追加・変更したファイルをローカルリポジトリに記録すること。
プッシュ
push
ローカルリポジトリの変更をリモートリポジトリに反映させること。
プル
pull
リモートリポジトリのデータをローカルリポジトリに反映させること。
マージが自動で行われる。
フェッチ
fetch
リモートリポジトリのデータをローカルリポジトリに反映させること。
マージが自動で行われない。
マージ
merge
ブランチを切っていた変更内容を元のブランチに結合させること。
ブランチ
branch
プロジェクト本体に影響を与えずに開発を行える機能でプロジェクトを分岐させる。
ブランチを使うことで複数の履歴を並列に管理できる。
マスターブランチ
master branch
masterという名前のブランチを作成されます。
プロジェクトの本流のブランチです。
コンフリクト
conflict
同じファイルの同じ場所への変更が同時にある時に生じるエラーのこと。
手動で原因追及します。
Gitの基本用語

GitHubアカウントを作成

GitHub Desktopをインストールする前に、GitHubのアカウントを作成します。GitHubのユーザー名は、GitHubのサービス上だけではなく、Gitでファイルを更新したユーザーを表す名前としても使われます。

ニックネームなど自分のみがわかる名前ではなく、他の人が見て誰のアカウントなのかわかる名前にしましょう。

GitHubをよく使う人の中には、SNSのユーザー名と統一している場合が多いです。

Gitユーザー名
Gitユーザー名

GitHubのサイト

WebブラウザでGitHubのサイトにいきます。

▪GitHubサイト
https://github.com/

右上にあるsign upを選択。

GitHub
GitHubサイト

入力項目

  • Enter your email:自身のメールアドレス
  • Create a password:パスワード設定
  • Enter ausername:ユーザー名設定
  • Would you like to receive product updates and announcements via email?:製品のアップデートやお知らせをメールで受け取りますか?
    はいの場合は「y」、いいえの場合は「n」と入力。
メールとパスワード
メールとパスワード

Continueを選択すると、Enter your emailで設定したメールアドレスに8桁のサイトアップコードが届きます。

サインアップコード
サインアップコード
アカウント作成完了メール
アカウント作成完了メール

Enter codeに8桁のコードを入力。

サイトアップコード入力
サイトアップコード入力

サイトアップコード入力後、チームメンバーの人数を選択する画面に移行するので、1人の場合はJust meで複数の場合はそれ以外を選択。

student:学生teacher:先生どちらか選択しContinueをクリック。

チームメンバーの人数
チームメンバーの人数

Freeを選択。

Free
Free

下記のページに移行できたら、GitHubのアカウント作成は完了です。

アカウント作成完了
アカウント作成完了

これ以降はGitHubを利用する上でアプリケーションが必要になってきますので、そのアプリのインストール方法について解説します。

マウス操作タイプだと、Source TreeとGitHub Desktopの2種類がありますが、Source Treeはできることが多いですが操作を覚えるまでに時間がかかります、なので初めのうちは難易度が低いGitHub Desktopから使えるようになることをオススメします。

GitHub Desktopをインストール

GitHubのアカウント作成後は、GitHubを操作するアプリGitHub Desktopをインストールします。

▪GitHub Desktopサイト
https://desktop.github.com/

サイトのDownload for Windows(64bit)を選択しダウンロードします。

GitHub Desktop
GitHub Desktop

エクスプローラーのダウンロードに猫アイコンのGitHubDesktopSetup-x64.exeをダブルクリックでインストールを開始します。

GitHubDesktopSetup-x64.exe
GitHubDesktopSetup-x64.exe

GitHub Desktopの初期設定

インストールが完了するとGitHub Desktopの初期設定の画面が表示されます。Sign in to GitHub.comをクリック。

GitHub Desktop初期設定
GitHub Desktop初期設定

GitHubのユーザー名とパスワードを入力しSign inをクリック。

ユーザー名とパスワード
ユーザー名とパスワード

ユーザー名とメールアドレスを入力し、Continueをクリック。

※メールアドレスは@users.noreply.github.comとコミットメールアドレスを設定することもできます。コミットメールアドレスは更新者の身分を表すもので、第三者に公開されます。個人のメールアドレスを公開したくない方のために、GitHubが代わりのメールアドレスを提供してくれています。(このアドレスに送ったメールは送信エラーになります。)

ユーザー名とメールアドレス
ユーザー名とメールアドレス

FinlshクリックでGitHub Desktopの初期設定は完了です。

初期設定完了
初期設定完了

下記の画面に移行していればGitHub Desktopが利用可能になったことになります。

GitHub Desktop利用可能
GitHub Desktop利用可能

Visual Studio Codeをインストール

Gitはソースコード管理のために作られた為、ソースコード編集ツールと組み合わせて使うことができます。一般的によく使われているツールはVisual studio Codeです。GitHub Desktopから直接開くことができるなど、連結させておくと便利です。

GitHubDesktopでVScode
GitHubDesktopでVScode

Gitはファイルのバージョン管理で、プログラムやWebページなどのソースコードファイルの管理です。ソースコードの編集に関してはテキストエディタやVSCodeで編集をおこないます。

インストールから使い方まで詳しく知りたい方は下記記事をご確認ください。

VSCodeアイキャッチ画像
Web制作にお勧めのエディタ|VSCodeの設定・拡張機能【コーダー必見】Web制作で開発ツールとしてよく使われるVSCode。自身が普段使用しているエディタで、HTML・CSS・JSを書くとき便利なので重宝しています。これから初めて使い始める人が、最初に入れておくことによってVSCodeを効率よく使いこなすための設定や拡張機能の紹介とダウンロードからインストールまでのやり方を紹介します。...

元々Visual studio Codeをインストールしている方はopen in Visual studio CodeでGitからVSCodeが利用可能です。

GitHub Desktopの使い方に関しては次の章で解説します。

ローカルリポジトリの作成とリモートリポジトリについて
ローカルリポジトリの作成とリモートリポジトリについて-STEP2リポジトリとはファイルの状態を記録する場所で、パソコン内のフォルダを保管庫にする(リポジトリ)イメージです。変更の履歴を記録して残していく仕組みになっています。変更履歴を管理したいフォルダをリポジトリに置くことで、そのフォルダの変更履歴を記録することができます。...

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール