Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@triple321jhango

VSSより10倍モダンなGitの使い方について学ぶ【基本】

More than 1 year has passed since last update.

【はじめに】

普段業務でGitを使ったことのない人間が、Gitの使い方について学んでみましたので、アウトプットのつもりでqiitaの投稿をいたします。
業務では、VSS(Visual Source Safe)というバージョン管理ソフトを使用して、ソースや仕様書等の管理をしている。未だにそんなレガシーなもの使っているの?というご意見は最もなのですが、レガシーな現場であり、ネットワーク制限が厳しい為、そんなモダンなものを使えいないのです。

【対象者】

インストールしてない方はこちらから
インストール参考HP
VScode日本語化の仕方

【Gitについて】

そんなわけで、今どきのモダンなバージョン管理システムといえばGitおよびGitHub
そんなGit GitHubについて微力ながら解説していきたいと思う。

【Git GitHubを使用する上での用語説明】

1.リポジトリ
ソースなどを管理する保管庫

2.ローカルリポジトリ
自身のPCのローカルにディレクトリを作成し、リモートリポジトリへ登録するための自身の保管庫

3.リモートリポジトリ
ネットワーク上(GitHub上)にあるリポジトリ。開発者間で共有する保管庫

4.mkdir
make directory、 ディレクトリを作成すること

5.cd
change directory、作業ディレクトリを移動すること。
例:デスクトップにあるディレクトリ⇒Cドライブ配下のディレクトリへ移動

6.コミット
追加・変更したファイルをGitに登録すること

7.VScode

WEB系のエンジニアさんの大半が使用している高機能エディタ

  • コード補完の表示
  • パラメータインフォの表示image.png
  • ユーザースニペットの表示(VSCodeでは、forやtrycatchのような、よく使う定型文がすでに登録されている)
  • デバック機能

など上記に挙げた機能以外にもたくさんの機能が盛り込まれたまさしく超高機能エディタです。

参考:Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する!より

【そもそもGitって】

プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システム(Wikipediaより)
バグの修正や機能の追加ごとにソースコードの状態を記録していくのが、主な活用法だと思う。
大規模プロジェクトとなると、数多くのソースコードを管理する必要があるため、開発者同士で共同で作業がしやすくなるように、リポジトリを複数用意して行う必要がある。
リポジトリを複数用意して共同作業ができる、これが分散型と言われている。
イメージは以下となるが、リポジトリを複数用意して共同作業ができる、とは、個々で保有しているローカルリポジトリから変更内容を反映させたり、逆にリモートリポジトリというところからローカルに反映させることができる。

image.png

【Gitコマンドについて】

上記については追々説明していくが、百聞は一見に如かず、Gitコマンドを使用して、実際にファイルをcommitするところまでを実施してみよう。
Cドライブ配下で

mkdir Git(任意のディレクトリ名)
cd Git
mkdir VBA(任意のディレクトリ名)
cd VBA
git init

上記コマンドを入力するとCドライブ配下に
1.Gitというディレクトリを作成
2.Gitのディレクトリへ移動
3.Gitディレクトリ内にVBAディレクトリを作成
4.VBAディレクトリへ移動

image.png
私の場合は、C:\Git\VBAとディレクトリ作成をしてみた。
その後Git Bashを開こう。
image.png

VScodeをコマンドで開く

C:\Git/の配下にVBAのディレクトリを作成後、cd(チェンジディレクトリ)で、C:\Git/VBA
をコマンドに打ち込むと作業ディレクトリをC:\Git/VBAへ移動できるので、移動します。
その後「code .」とすることで作業ディレクトリに割り当てた状態で、VScodeを開く

code
code . 

※正直なところ、HTMLやCSS、PHPなどはVScode内でファイルを作成して編集していくスタイルですが、今回xlsm形式のファイルを例題に挙げてますので、VScodeの出番はcommitした時になります。

init

「init」は「initialize」からきていると思うと、納得いくと思う。新規作成や初期化を意味する。
Cドライブ配下に作成したディレクトリ内でinitコマンドを実行してリポジトリ(保管庫を作成)

init
git init 

これで、リポジトリが完成したが、見た目ではわからないので、隠しファイルを表示する。
ツールバーの表示⇒隠しファイルのチェックボックスにチェックを付けておく
こうすることで、git initされた場合、に隠しファイルが表示されるようになる。
image.png

実際に隠しファイルにチェックを入れると、以下のようにアイコンが薄くなっている隠しファイルが表示されるようになる。

image.png

これが確認できたら、git initすなわちリポジトリが作成できたことがわかる。

status

ステータス、要するに現在のリポジトリの状態を見るコマンドである。

status
git status 

(use "git add <file>..." to include in what will be committed)
    dbconnect.xlsm

initしてリポジトリ作成後、そのディレクトリにファイルを配置し、git statusをすると、

use "git add ..." to include in what will be committed

と表示される。commitする前段階に持っていくことを「ステージング」というが、このステータスは、ステージングできる「ファイルをaddできますよ」ということである。

add

ファイルの配置が完了し、commitの前準備を始めます。

add
git add ファイル名
または
git add . 
(「add .」とすることで全ての追加できていないファイルをaddすることが出来る)

git add後、git status状態を確認すると

Changes to be committed:
new file: test.xlsm

上記が表示される。
「コミットする変更がありますよ」
何を?
「dbconnect.xlsmのファイル」ということである。

rm

commitの前に実はリポジトリに入れておきたいのは別のファイルだったんだよ、とファイルを削除するときには、git rmを使用する。

rm
git rm ファイル名

ただし、直接ディレクトリからファイルをDELETEするのは好ましくない方法です。
直接削除してgit statusで確認すると「rmして更新してくれ」と言われてしまいます。

(use "git add/rm .." to update what will be committed)
(use "git checkout -- ..." to discard changes in working directory)

git rmをして正規に削除すると以下のように表示されればOKです。
image.png

commit

さて、いよいよcommitです。早く結果にcommitしたいです。
bashでコメントをつけてcommitする方法と、VScode側でコメントを付けてcommitする方法の2つをご紹介します

commit
■ bashでコメントをつけてcommitする方法
git commit -m'コメント'

-mの後に'コメント'を挿入することで、何の変更でcommitしたかがわかる
image.png

1 file changed, 0 insertions(+), 0 deletions(-)

と出ているが、これはファイルを1つ変更しました。という意味だ。

commit
■ VScode側でコメントをつけてcommitする方法
git commit 

commitの後に何もつけずにコミットする、そうすると

hint: Waiting for your editor to close the file...

と表示され、VScodeが表示され、エディターに「コメントをつけてcommitして」と表示されますので
image.png

虫眼鏡アイコンの下にある(なんていうのこのアイコン?)アイコンをクリックすると左側のエディタが切り替わりますので、ステージング済みの変更ファイルがあることが確認できます。
これはaddしてまだコミットされてないファイルを示しています。
これをコミットするには、「ソース管理:Git」の文言右にある「✔」をクリックして、コメント入力してEnterでcommitが完了します。
image.png
image.png

git status で状態を確認すると以下のようになり、commitするものはありません、出れば無事commitが完了です。

On branch VBA_CRUD
nothing to commit, working tree clean

ここまでの流れを図にまとめるとこうなる。
image.png

他にも知っておくと便利なgitコマンドを紹介しておく。

  • git revert

既存コミットの取り消し、コミットを取り消すコミットとなるため、「取り消した」という履歴を残すことが出来る。

revert
git revert ハッシュされた文字列

ハッシュ文字列とはgit logコマンドで表示されるcommit以下の文字列である。
ハッシュ文字列を指定することで、指定したコミット時点まで戻すことが出来る。
履歴を残すという観点から言うと、「ハッシュ文字列に指定した位置までコミットする」が正しいだろうか。
image.png

  • git reset

git revert と似ているが若干意味合いが異なる。
「reset」はコミット自体をなかったことにする。「revert」は取り消しましたよ、のログを残したが、こちらはログが残らない。
用途としては、今コミットしたが内容が誤っていていた、などの場合は直前取り消し、
過去(既存)にコミットしてあった内容が誤っていた、などの場合はハッシュ文字列を指定してコミットの取り消しを行うようだ。

reset
git reset --hard HEAD^ 直前コミットの取り消し
git reset --hard ハッシュ文字列

ブランチについて

ブランチって?という方に向けて、ブランチについても簡単に説明したいと思う。
ブランチ「枝」のことです。
gitはツリー上にファイルが存在していて、木から枝を生やしてファイル管理することが出来る。
木がmasterだとしたら、枝はbranchである。
masterとbranchの意味合いは以下の通りである。

  • master
    完成版のファイルおよびソースなどをコミットする場所
    現在本番稼働しているソース、といった方がシックリくるか。

  • branch
    バックアップも兼ねて、branchを切って(branchを作ることをbranchを切るという)保管しておくこともあれば、機能追加改修があり、masterとは別の保管庫に開発中のソース(ファイル)を置いておく場所

branchのイメージ

  • 緑が木:master
  • ピンクが枝:branch

image.png

yamada devというbranchを切って、masterとは別に管理し、yamadaさんが追加改修を行っておくととする。
そうすることで、本番稼働しているソースとは別に管理が可能だ。
では、追加改修が完了し、いよいよ改修したものを本番稼働させる場合のソース管理はどうするか?そう。masterに結合:maergeさせるのだ。

margeのイメージ

image.png

現行で本番稼働していたソースに対して新たに追加改修を行っていたyamada devからmasterへmargeすることで、追加改修が行われた新たな本番稼働用のソースをmasterへ適用させる。
これがmasterとbranchを分けて行う最大のメリットである。

branch操作

branch
//➀ブランチの作成
git branch ブランチ名
//➁現在いるブランチの確認
git branch 
//➂ブランチを移動
git checkout ブランチ名
//➃結合 結合したいbranchにcheckout後、以下のコマンドを入力する
git marge マージしたいブランチ名

②の現在いるブランチの確認をすると以下のような形で、*がついて「VBA_CRUD」というbranchにいますよ、というのがわかる。
image.png
③ブランチ名を指定することで、その指定のブランチに移動することが出来る。
image.png

Switched to branch 'master'

と表示されこれはmasterブランチに移動しましたよ、という意味だ。
ここで再度git branchをコマンドに入力すると、
image.png
masterに「*」が移っているのがわかる。ちゃんとmasterへ移動出来た証拠だ。
最後に、結合したいbranch名にcheckoutして(今回の例ならVBA_CRUDにcheckoutして)margeをすれば、masterへの結合は完了する。

最後に

ここまでgit init ⇒ git commit、またbranchまでの一覧の流れを記載した。
ローカルでの環境は整ったが、リモートリポジトリの環境整備についても説明しなければいけない。それは次回に持ち越しし、ご説明できればと思います。
また、ほんとに最後にこんなことを言うのもなんですが、Gitはあまりマクロ等のファイルを管理すること適切ではないそうです…。

なぜか?
Gitは最終的にGitHubとよばれるネットワーク側に存在するリポジトリに過去のファイルもすべて履歴として保管する為、ネットワークからローカルへ取得しようとすると膨大な量のファイルを取得することになるため、落とし込みに非常に時間がかかってしまうから、のようです。
web系エンジニアさんはPHPやHTML、CSSその他諸々のファイル管理になりますから、ファイルの容量的にはそこまで膨れ上がらない?から相性も良いのでしょうか。

今回はここまで解説させていただきました。
見ていただた方、ありがとうございます。

参考にさせていただいた記事

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
triple321jhango
医療事務10年勤務を退職➡︎2018.7~SES転職➡︎解らなすぎて挫折➡︎復活/1児の父 知識0からでも学習継続でコードは書けるようになります。 スキル(VBA,SQL,GitHub,PHP基礎) 現在はHTML/CSS/PHP学習中 Dockerも後々予定

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?