Git Hub 会社のPCと自宅のPCのデータ共有 VSCodeでのバージョン管理の方法

Gitとはバックアップを取ったり過去のバージョンに戻す事が可能な、バージョン管理システムです。

Gitは自分のPC上でそれを行い、Git Hubはネット・クラウド上でその管理を引き継ぎます。

私はチームで使うまでの使い方はしていないので、Gitの中でも一部の簡単な操作しかしません。基本的には1人で完結する作業なので、Git や GitHubをバージョン管理とPC間のデータ共有の為に使っており、エディターはこのブログで伝えているVSCodeを用いエディター上で操作します。

チームで使う場合にも便利なツールですが初心者には更に知識が必要なので、私の使い方をお伝えします。まずは簡単なバージョン管理から使ってGitに慣れましょう。追々知識を増やしていけばOKです。

この記事の内容でも難しいなぁ〜と感じたら、初学者用のブログですのでまだGitで管理する必要はないかもしれません。ディレクトリごとコピペして日付を入れてながらアナログで管理してもOKです。

※ディレクトリ=フォルダ

この記事では、以下の順番で説明していきますので、ごっちゃにならないように1つずつ理解していきましょう。

1. Git を使うのに必要なターミナル操作
2. Gitの使い方(自分のPCだけで完結する管理方法)
3. Git Hub(ネット上の管理方法)
4. 全体的な操作方法 諸々

ターミナル操作 (Linuxコマンド)

Gitを扱うにはターミナルの操作を覚える必要があります。Gitのコマンドの前に、ターミナルでよく使うコマンドを扱ってみましょう。

VSCodeのターミナルで操作します

macでもWinでもそれぞれ備え付けのターミナルがありますが、使い慣れたVSCodeのターミナルで操作してみましょう。

VSCode 表示>ターミナル をクリックすると、下部に出てくるのがターミナルです。

一番最初は ~ になっていると思うので、これから管理したいディレクトリに移動します。

例：デスクトップの「TEXT」ディレクトリに移動する場合は

cd Desktop/TEXT/

pwd をすると　/Users/***/Desktop/TEXT になっていれば成功です。

この調子で、上にあるコマンド一覧をすべて試してみましょう。

Git 自分のPC上の管理

Gitがインストールされているか確認する

Gitはmac で最初からインストールされているので確認しましょう。

Windows の方は、Git for Windows で検索してダウンロードしましょう。デフォルトの設定のまま進めてOKです。(Git Bash)を使います。

git version

バージョンが出てくればOKです。

古い場合はアップデートしましょう。

公式からダウンロード

バージョン管理を始める

では、バージョン管理をしたいフォルダに再度移動します。これから新規で管理したいデータもディレクトリを作成して同じようにそのディレクトリにターミナルで移動します。

ここではターミナルの練習で作ったTEXTディレクトリをバージョン管理する事にします。

まずはローカルリポジトリを作成する為のコマンドを打ちます。(initializeの略:初期化)

これからこのファイル内をバージョン管理していきますよ、という意味合いです。

git init

Initialized empty Git repository in /Users/***/Desktop/TEXT/.git/

と出ます。gitは隠しフォルダなので、

ls -a

で確認しましょう。 .git があれば成功です。

ここからは、PC上で変更を保存したいタイミングごとに下記を繰り返します。

VSCode上のターミナルで行う事で分かりやすく直感的になります。

(git status で現在の位置(HEAD)を細かく見ていく作業が減り、直感的に今の状況が分かるようになります)

(PC既存のターミナルでコミットを行うと独特なvimの操作が必要となります。 i コミット内容 esc :wq Enter)

基本的にはGit Hub(クラウド上)にアップする前の自分のPC・Gitのみの管理では、下記を繰り返す事になります。

まずGitで管理を始めた後にファイルに変更があるとVSCode上では左上から3つ目のアイコン、ソース管理に①などの変更ファイル数が付き、ワーキングエリア「変更」に該当のファイルが入り、 U (Untracked) がつきます。

git add .

git addする事によりワーキングディレクトリからステージングエリアへ追加され「ステージされている変更」にファイルが入り①になり、「変更」は⓪になります。

add . は自分の位置にいるファイルからの変更全て、という意味になります。

ファイル名右には追跡前はA (Added) がつき、追跡後はM: (Modified) がつきます。

または、サイドバーのプラスボタンを押す事でステージングできます。

git commit -m "create test.txt"

コミットする事により数字が消えます。

または、サイドバーのメッセージを入れるフォームに入力し、コミットボタンを押す事でもコミットができます。

一行のコミットは -m で書く事ができます。

複数行のコミットを書きたい場合はサイドバーを使って改行できます。

commit -v にする事で変更内容を確認できます

ファイルの差分を確認 add commit する前に確認

• ワーキングディレクトリ
  　git diff
  git add
• ステージングエリア
  git diff HEAD
  git commit
• ローカルリポジトリ

Git Hubを登録 クラウド上の管理

公式からSign upしましょう。

• Username
• Email Address
• Password

Create account

アンケートに答えて登録します。Emailで認証をしておいてください。

VSCodeからの初期設定

• git config –global user.name “上記で登録したユーザーネーム”
• git config –global user.email 上記で登録したEmail

SSHキーを設定

ローカルでSSHキーを生成

ssh-keygen -t rsa -b 4096 -C "上記で登録したEmail"

必要に応じて進む(Enter)

cat ~/.ssh/id_rsa.pub

公開キーを表示しコピー (ssh-rsa ~~~~~長いkey ~~~~~ 最後 mailアドレス)

GitHubのプロフィールアイコン > Setting > 左のサイドバー 「SSH and GPG keys」を選択し、右の「New SSH key」ボタンをクリック

※複数のPCで利用する場合は、↑ここに複数のkeyを追加できます。各デバイスごとに登録してください。

• Title キーの説明
• Key Type : authentication Key
• Key 先ほどのキーをペーストし、「Add SSH key」をクリックし登録

接続を確認

ssh -T git@github.com

Hi ****! You’ve successfully authenticated, but GitHub does not provide shell access.

と出たら成功です。

Git Hubのリポジトリ準備

ブラウザのGit Hub上で　Repositories をクリック

右上のプラスボタンから、New repository をクリック

Repository name に名前を入れます。今回はTEXTとします。

非公開の場合はPrivate 公開の場合はPublicを選び、「Create repository」をクリックします。

基本的には、表示されたコマンドをもとに打っていきます。

今回は既に作成したリポジトリをpushしていくので「…or push an existing repository from the command line」のコマンドを打ちます。

******部分はユーザーネームになっているはずです。

git remote add origin git@github.com:******/TEXT.git
git push -u origin main

-u オプションを使うと、今後はそのブランチに対して git push や git pull を実行する際にリモート名とブランチ名を指定しなくても、デフォルトで origin の main ブランチが対象になります。これは特にブランチを頻繁にプッシュする場合に便利です。

Are you sure you want to continue connecting という質問は、この新しいホスト（GitHub）との接続を続行するかどうかを尋ねています。問題がなければ yesで続行してください。

Git Hub上で変更・他のPCの変更と同期する方法

Git Hub上で編集して、コミットしたとします。(これは他のPCで変更した場合や他の方が変更した場合と似た概念になります。)

Git Hubのデータを更新するには、下記コマンドになります。

変更をダウンロードするようなイメージです。

git pull

この4つのコマンドは最初に暗記しましょう

初期設定は色々打ちましたが、初期設定後は基本的に以下のコマンドを繰り返します。

最低限まずはこの4つを覚えましょう。(手が勝手に覚えます)

git pull
git add .
git commit -m "commit text"
git push

1. 複数のPC・複数人・GitHub上で変更を加える場合は、まずは自分のPC上を最新の情報になるようにpullします。
2. ②add ③commit ステージングしてコミット　を繰り返します。
3. ネット上に変更履歴をアップ push します。

コミットは分かりやすいように、単一の目的やタスクごとにすると良いでしょう。

過去に戻る

今までコミットをしてきたものは全てコミットIDを指定して過去に戻る事ができます。

まずはコミットの履歴を確認し、必要なコミットIDを見つけます。

git log

j 上へ
k 下へ
q で抜けます

# 一行
git log --oneline

# ファイルの差分
git log -p

# 数を指定
git log -n 3

• HEAD ローカルリポジトリの現在の位置
• origin/HEAD リモートリポジトリのデフォルトブランチの位置

該当のコミットIDをコピーし一時的に戻る・恒久的に戻る方法

またはコミットをリセットする方法、オプションをお伝えします。

# 特定のコミットやブランチの状態に一時的に切り替える
git checkout コミットID
# 元に戻す
git checkout main

# 特定のコミットを打ち消す新しいコミットを作成
git revert コミットID

# コミットをリセット　
# デフォルト (--mixed) add 前の状態に戻る（ステージングエリアから外すが作業ディレクトリには残す）
git reset
# commit 前の状態に戻る（ステージングエリアに残す）
git reset --soft
# head 作業ディレクトリとステージングエリアを完全に元に戻す（全ての変更を削除）
git reset --hard

1. git checkout で戻る

「過去のコミットを見たいだけ」というときの方法です。一時的にその時点の状態で作業できますが、新しいブランチを作らない限り、作業内容を保存できません。

• 過去のコミットIDを指定すると、その時のファイルの状態に移動します。
• この状態で作業しても、新しいブランチを作らないと変更を保存できません。
• 作業後に元の最新状態に戻すには、git checkout main のように元のブランチに切り替えます。

2. git reset で戻る

コミット履歴をリセットし、過去のコミットを基に新しい履歴を作りたいときの方法です。3つのオプションで動きが異なります。

a) --hard

• 指定したコミットに完全に戻り、それ以降の変更は消えます。
• ファイル内容もそのコミットの状態に戻ります。

b) --soft

• 指定したコミットに戻りますが、ファイルの内容は最新のままです。
• ファイルの変更はすべて「コミット予定の状態」として残ります。

c) --mixed (デフォルト)

• コミット履歴は戻りますが、ファイル内容は最新のままです。
• ファイルの変更は「コミット予定から外れた状態」として残ります。

3. git revert で戻る

特定のコミットを打ち消す新しいコミットを作る方法です。

• 指定したコミット内容を元に戻す新しいコミットを作成します。
• 履歴は消えずに残るので、履歴を追いやすいです。

管理しないファイル

• パスワードが入ったファイル
• 自動生成されるファイル
• 不要な形式

ターミナルから隠しファイル .gitignore　に記述

# 全てのファイルを除外
echo "/*" > .gitignore

直接 .gitignore ファイルを編集

# コメントアウトアウト

# 指定したファイルを除外
test.html

#　ルート直下のディレクトリを除外
/root/

# ディレクトリ以下を除外
dir/

# 全てのディレクトリを除外
/*

# それ以外
　！/LOCAL/

コミットしてしまったファイルを管理から外す

# コミットしてしまったファイルを管理から外す

# ファイルは残して管理のみ削除 イグノアファイルに追加！
git rm --cached ファイル名

# ファイルごと削除
git rm ファイル名

#　ディレクトリごと削除
git rm  -r ディレクトリ名

他のPCにデータをダウンロードする(clone)

初期設定 おさらい

必要に応じて、下記の初期設定が必要な場合は設定します。

GitHubからSSHをコピー

クローン（コピー）したいリポジトリに入り、緑色の「Code」をクリック、SSHタブのコードをコピー

ターミナルで、作りたいディレクトリの親ディレクトリに移動します。

git clone (コピーしたコード：git@github.com:アカウント名/ディレクトリ名.git)

例えば、HTMLファイルの中にGitHubでbeauty-storeというディレクトリから始まるデータをクローンしたかったら、

ターミナルでHTMLに移動、git clone ~~~beauty-store.git というコードをコピーしてクローンすると

HTML>beauty-store という階層でクローンできます。