Git(ギット)はエンジニア向けのバージョン管理システムですが、チームでWeb製作する場合も利用すると共同開発でとてもスムーズに作業を進めることができます。
GitHubはGitの仕組みを利用したインターネット上のサービスで、GitHub上にWebサイトのデータを保管しておくことができます。
Gitを利用するには、パソコンにGitクライアントと呼ばれるアプリをインストールします。Gitの操作は大きく分けて二種類あり、「コマンド入力して操作する」(Git Bash)ものと「マウスで操作する」(GitHub Desktop)(Sourcetree)もののタイプがあります。
▪Gitコマンドタイプ(Git Bash)↓
▪Gitマウスタイプ(GitHub Desktop)↓
▪Gitマウスタイプ(Sourcetree)↓
▪Gitのクライアント↓
アプリ名 | 内容 |
Git | ▪コマンド操作 Git公式から配布されている。 アプリではなくブラウザから利用する。 |
Git Bash | ▪コマンド操作 Git for Windowsから配布されているWindowsアプリ。 |
GitHub Desktop | ▪マウス操作 GitHubが配布しているアプリ。 機能が制限されるが操作が簡単。 |
Source Tree | ▪マウス操作 アトランティス社が配布しているアプリ。 |
エンジニアなどコマンドに慣れている人は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 | 同じファイルの同じ場所への変更が同時にある時に生じるエラーのこと。 手動で原因追及します。 |
GitHubアカウントを作成
GitHub Desktopをインストールする前に、GitHubのアカウントを作成します。GitHubのユーザー名は、GitHubのサービス上だけではなく、Gitでファイルを更新したユーザーを表す名前としても使われます。
ニックネームなど自分のみがわかる名前ではなく、他の人が見て誰のアカウントなのかわかる名前にしましょう。
GitHubをよく使う人の中には、SNSのユーザー名と統一している場合が多いです。
GitHubのサイト
WebブラウザでGitHubのサイトにいきます。
▪GitHubサイト
https://github.com/
右上にあるsign upを選択。
入力項目
- 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を選択。
下記のページに移行できたら、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)を選択しダウンロードします。
エクスプローラーのダウンロードに猫アイコンのGitHubDesktopSetup-x64.exeをダブルクリックでインストールを開始します。
GitHub Desktopの初期設定
インストールが完了するとGitHub Desktopの初期設定の画面が表示されます。Sign in to GitHub.comをクリック。
GitHubのユーザー名とパスワードを入力しSign inをクリック。
ユーザー名とメールアドレスを入力し、Continueをクリック。
※メールアドレスは@users.noreply.github.comとコミットメールアドレスを設定することもできます。コミットメールアドレスは更新者の身分を表すもので、第三者に公開されます。個人のメールアドレスを公開したくない方のために、GitHubが代わりのメールアドレスを提供してくれています。(このアドレスに送ったメールは送信エラーになります。)
FinlshクリックでGitHub Desktopの初期設定は完了です。
下記の画面に移行していればGitHub Desktopが利用可能になったことになります。
Visual Studio Codeをインストール
Gitはソースコード管理のために作られた為、ソースコード編集ツールと組み合わせて使うことができます。一般的によく使われているツールはVisual studio Codeです。GitHub Desktopから直接開くことができるなど、連結させておくと便利です。
Gitはファイルのバージョン管理で、プログラムやWebページなどのソースコードファイルの管理です。ソースコードの編集に関してはテキストエディタやVSCodeで編集をおこないます。
インストールから使い方まで詳しく知りたい方は下記記事をご確認ください。
元々Visual studio Codeをインストールしている方はopen in Visual studio CodeでGitからVSCodeが利用可能です。
GitHub Desktopの使い方に関しては次の章で解説します。