Web制作を行う全ての方へ

デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました

この週末にGitの勉強会を開いてもらって基礎的なところから教えてもらいました。これまで興味はあったけど全く何も知らなかったので、いろいろ詳しく教えて頂きました。

  1. 1.Gitとは?
  2. 2.用語解説
  3. 3.実際に使ってみる。msysgit
  4. 4.参考文献

Gitとは?

分散型バージョン管理システムの一つです。ファイルの更新状態を好きなタイミングで保存しておくことが出来、好きなタイミングで保存している状態へ戻したり、編集した箇所の差分を表示したりする事が出来ます。

また、プロジェクトを複数人で進行している場合に起こりうる、古いファイルでの最新ファイルの上書きといったトラブルについても、Gitを利用すればエラーが帰ってくるため避けやすくなります。

尚、Gitと聞くとプログラマーの方が主に使っていてソースファイルを管理しているイメージが強いのですが、PhotoshopやFireworksで作成したpsdやpngと言った画像の元データもバージョン管理が出来る為、制作に携わる多くの人にとって便利なシステムだと考えられます。

今回の勉強会ではGitを使うのにmsysgitを利用しました。コマンドを叩いて覚えるという点と、Windowsで使えるという点が必要だったのでこれを選択。尚Macユーザーの方はGitを扱う環境が標準で備わっているそうですね。羨ましい!

用語解説

分かりづらい用語が結構あるので先に少しだけ用語の解説をしておきますね。今回触れないものもありますし、もっと知るべき用語もあるかとは思います。あくまでさわり程度で。

  1. 1.リポジトリ
  2. 2.コミット
  3. 3.ワークツリーとインデックス
  4. 4.ブランチ(branch)
  5. 5.マージ(merge)

リポジトリ

ファイルやディレクトリの状態を管理する為の場所の事で、変更履歴を管理したいディレクトリをリポジトリに登録することで変更の履歴を残していくことができます。

リポジトリにはローカルリポジトリとリモートリポジトリの2種類があり、ローカルは自身の開発するコンピューター、つまりローカルマシーンのことで、リモートは専用のサーバーに配置し、複数人で共有するためのものになります。

コミット

ファイルの変更やディレクトリへのファイルの追加といった変更の履歴をリポジトリに追加することをコミットと言います。

コミットは自分の好きなタイミングで行うことが出来、そのコミットに対して名前を付けることで履歴を管理していきます。またコミットに対してGitから重複しないユニークな英数字40文字のタイトルが与えられるので、自身の付ける名前は自分が分かりやすいようにつければ問題ありません、

ワークツリーとインデックス

ワークツリーは現在作業しているディレクトリの事で、インデックスはリポジトリとワークツリーの間にあたります。コミットをすることでリポジトリに変更の履歴を登録しますがその前にファイルをインデックスに登録する必要があり、インデックスに存在しないファイルはコミットを行うことができません。

ブランチ(branch)

コミットはプロジェクトとして残していきますが、ブランチを使ってそのプロジェクトを枝分かれにすることができます。

branch

マージ(merge)

ブランチして枝分けしていたものを合併させます。

merge

実際に使ってみる。msysgit

  1. 1.ソフト(msysgit)のダウンロードとインストール
  2. 2.ソフト(msysgit)の起動
  3. 3.初期設定:config
  4. 4.リポジトリを作成する:init
  5. 5.インデックスにファイルを追加する:add
  6. 6.状態を見る:status
  7. 7.コミットする:commit
  8. 8.ファイルに更新をかけて更にコミット
  9. 9.ファイルを特定のコミット状態に戻す:chekout

ソフト(msysgit)のダウンロードとインストール

ソフトをダウンロードしてインストールします。今回はmsysgitを利用しますので、リンク先より左上にあるDownloadからダウンロードし、インストールを実行します。その際に、僕はインストール時に出てくるAdjusting your PATH environmentという項目でRun Git from the Windows Command Promptを選択肢ました。これにより、Windowsのエクスプローラーから右クリックでGitを起動することが出来るようになります。

msysgit

msysgit

このメニューのGit Bashを選択して起動することが出来ます。

ソフト(msysgit)の起動

windows上の好きな場所にフォルダを作成します。そして上記で説明した手順でGitを起動します。

msysgit

このような画面が出てきますのでまず初期設定を行なっていきます。

初期設定:config

初期設定を行います。さしあたってユーザー名とメールアドレスを設定します。

コマンドは

git config --global user.name "****"

でユーザー名を

git config --global user.email "****"

でメールアドレスを登録します。

gitのコマンドで次に何を入力できるかわからない場合は、キーボードのtabキーを2回押すと候補が表示されます。

–globalと言うのはオプションで、これを指定するとgit全体の設定ファイルに書き込み、指定がなければ現在のプロジェクトに対する設定ファイルに書き込みます。現在の設定を確認するには

git config --global -l

でグローバルの設定を、

git config -l

で現在のプロジェクトの設定を確認することができます。

msysgit

リポジトリを作成する:init

先ほど作成したディレクトリにリポジトリを作成します。

git init

init

インデックスにファイルを追加する:add

リポジトリを作成したので今度はワークツリー(自身で作成したディレクトリ)にファイルを設置し、それをインデックスに追加してみます。まずファイルですが今回下記のような画像のpsdデータを利用しました。

add

ワークツリーは下記のような状況になっています。

add

では、実際にインデックスにファイルを追加します。コマンドは下記の通り。

git add 001.psd

追加したいファイル名を一つづつ設置でも出来ますが、多くのファイルがある場合は面倒になってくるので

git add -A

と言ったオプションを使います。
-A・・・新しく追加されたファイルや変更のあったファイルを一括で追加するオプション。

状態を見る:status

git status

現在の状況を確認するにはstatusを使います。
status

コミットする:commit

インデックスにファイルを追加しているのでコミットできるようになりました。実際にコミットします。

git commit -m "first"

-mはメッセージの意味でこれを付けないとコミット出来ません。今回は”first”というメッセージを添えてコミットしています。後々自分やプロジェクトに参加するメンバーが見て分かりやすい物を添えるようにしましょう。メッセージに日本語も使えるのですが。windowsの環境だとコマンドプロンプトが日本語入力をしても受け付けないという状態なので英語でメッセージを書いています。他のGitクライアントなら行けるかもしれません。
commit

ファイルに更新をかけて更にコミット

コミットをしたのでファイルを更新してさらにコミットします。

まずファイルを更新します。とりあえず下記のような感じで保存しておきます。
add

git status

をかけると
status
このように修正したファイルが表示されます。ですので改めてインデックスに追加。

git add 001.psd

そしてコミット

git commit -m "second"

ここまででコミットを履歴を見てみます。

git log

log

最初にコミットしたfirstと今コミットしたsecondが履歴として確認できます。

ファイルを特定のコミット状態に戻す:chekout

ファイルの状態を特定のコミットの状態に戻したい場合はcheckoutを使って戻ります。戻す場所を指定のにタグを利用して指定します。
checkout

尚、この長い英数字を手で入力してと言うのは面倒です。Macユーザーの方はマウスで選択範囲→コピーが出来るらしいのですが、Windowsのコマンドプロンプトだとそのままじゃ出来ないんですよね・・・。僕も知らなくてどうしようかって思ったんですが、実はウィンドウの左上をクリックしてメニューを出すことで、選択範囲が取れると言うことを教えてもらいました。目からうろこ!
コマンドプロンプトの画面左上をクリックしてメニューを出す
この状態で範囲を選択し、エンターキーで確定するとコピーされます。あとはペーストしたい箇所でメニューから貼り付けを選択すればペーストできます。ショートカットキーがあればもっといいんですけどね。

肝心なコマンドは下記となります。現在commitがsecondの状態なので、firstの状態に戻します。

git checkout b02f89ef5aa6d1dce17e210cd670d26305cf31ae 001.psd

これでfirstの状態にファイルが戻っています。ファイルを開くと
ファイルの確認
このようになっているはずです。

ここまででひとまず簡単なバージョン管理は出来ますね。

他にもリモートリポジトリとしてGithubを使ってみたり、Branchを切ったりとかもやったんですが今回はここまでにしておきます。

参考文献

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share