記事内に広告が含まれています。

はじめてのgit(2). ローカルリポジトリにコミット(commit)する方法(for windows)

Nov 23, 2020

Git,Editor , コーディング

最近、gitを使い始めました。 一つのWEBサイトを制作するのに複数人で作業することになり、ファイルの履歴管理をgitで行うことになったのです。
gitは便利なものであるはずなのに、使いこなすにはちゃんとした理解と慣れが必要で、ちょっと苦労しています。

この記事では、自分の復習も兼ねて初心者の方を対象に、gitをインストールして初期設定を済ませたことを前提に、その後の工程について解説していきます。

具体的には、gitで管理をしたいフォルダを初期化してローカルリポジトリにコミットするところまでを解説していきます。
この時点でこの文章の意味がわからなくても大丈夫です。この後解説していきます。

●この記事の対象となる方
※OSはWindows10をご使用の方
※gitをインストールしてgitの初期設定が終わっている方
初期設定とは、名前とメールアドレスの登録などです。

当ブログでは、gitの基本フローについて4回に亘って書いおり、この記事は第2回目にあたります。

1. gitの構成と用語の説明

構成

実際の作業に入る前にgitの構成について説明します。

gitはローカルで作業した更新・変更履歴をリモートで皆と共有できるサービスです。
下の図の1～3がローカルエリアの作業で、4がリモートエリアです。

1の作業ディレクトリのものを、2と3を経て、4のリモートリポジトリに追加するまでが、gitの作業の基本的な流れとなります。

1の作業ディレクトリのものを2のインデックスに追加するには、「git add」というコマンドを使います。
2のインデックスのものを3のローカルリポジトリに追加するには、「git commit」というコマンドを使います。
「コミットする」と言ったら3までの作業のことです。

用語

1.作業ディレクトリ

自分のパソコン内のgitで管理するフォルダです。
gitで管理するために「git init」コマンドで初期化をしておきます。
詳しくは後述します。

2.インデックス

自分のパソコン内の、3のローカルリポジトリに変更ファイルなどを追加する前に、ファイルやフォルダなどを一時、置いておくところをインデックスといいます。ステージングエリアともいいます。

3.ローカルリポジトリ

自分のパソコン内の、gitの管理下にあるファイルやディレクトリの履歴を保存する場所です。

4.リモートリポジトリ

ネットワーク上の、ファイルやディレクトリの履歴を皆と共有できる場所です。

2. 実際の手順

それではgitの初期設定が終わっていることを前提に、ファイルやフォルダをコミットするところまでの手順を説明していきます。

gitで管理したい作業ディレクトリを、この記事ではドキュメントフォルダ内にある「git_folder」として、説明をすすめていくことにします。
パスで書くと「C:\Users\user\Documents\git_folder」です。
「gti_folder」の中には、index.html、style.css、imgフォルダが入っています。

2-1. gitで管理したいディレクトリに移動

それでは早速gitを使ってみましょう。
gitをインストールすると、スタートメニューのGのところにGitフォルダができています。

Gitフォルダをクリックし、Git Bashをクリックするとコマンドが入力できる黒い画面が起ち上がります。
この画面は、「コマンドプロンプト」とか「ターミナル」とかいいます。
この記事では、「ターミナル」といっていきます。

ターミナル画面の上部に指令を送れる場所（ディレクトリ）が書いてあります。
下の画像の場合だと「c/Users/user」

これを、gitで管理したいディレクトリに変更します。
ディレクトリを変更するための、指令コマンドは「cd」です。

例えば、ドキュメントフォルダの中の「git_folder」（ c/Users/user/Documents/git_folder ）にディレクトリを変更するには、「cd 」と入力した後、「半角スペース」を空けて「Documents」、その後「エンター」で確定、 また「cd」と入力して「半角スペース」を空けて「git_folder」、その後「エンター」で確定すると移動できます。

もちろん「cd Documents/git_folder 」とパスで入力しても移動できますが、パスが長すぎるとエラーになるので注意です。

2-2.gitで管理したいフォルダを初期化する

ディレクトリを「git_folder」フォルダに移動したら、フォルダを初期化します。
初期化するコマンドは「git init」です。

初期化されると「Initialized empty Git repository in ～」（初期化された空のGitリポジトリ）と、メッセージがでます。初期化に成功したということです。

実際にフォルダの中を見てみましょう。

「.git」というフォルダが追加されています。
もし追加されていなければ、ただ単に非表示になっているだけかもしれません。
この「.git」フォルダは隠しファイルなので、もし表示されていないようであれば下記のようにすると表示されるようになります。
「表示」⇒「隠しファイル」にチェックを入れる

では、無事にgitで管理したいフォルダを初期化できたら、次の工程、変更したファイルをインデックスに追加しましょう。

ですが、その前に「git_folder」の中身をターミナルで確認してみましょう。

2-3.作業フォルダの中を確認してみる

フォルダの中を確認するコマンドは、「ls -a」です。
「ls」 と 「-a」 の間に「半角スペース」が入ります。

「./ ../ .git/ img/ index.html style.css」が入っていることがわかります。
それではこの中の「index.html」ファイルをインデックスに追加してみましょう。

2-4. インデックスに追加する

それでは、「index.html」ファイルを、インデックスに追加してみましょう。
インデックスに追加するコマンドは「git add 半角スペース ファイル名」です。

git add しても特に何も起こりませんね。

2-5.作業フォルダの状態を確認する

git add しても特にターミナルには何もメッセージが表示されません。
ですので、gitでの管理がどのような状態になっているのか確認したくなりませんか。

そこで使用するコマンドが「git status」です。
下記のように「git status」と入力すると・・・

いろいろとメッセージがでてきました。
もしかしたら読者の方のメッセージは、これと同じではないかもしれません。
特に緑の文字「new file:」ではなく、「modified:」かもしれません。
その理由は後述しますので、今は上の赤枠で囲ったgit status以下を一行ずつ見ていきしょう。

On branch master

今いる場所を表示しています。
マスターブランチ上にいるよ、という意味です。

branch（ブランチ）とは、直訳すると枝という意味です。
この記事では詳しく触れませんが、gitの場合、ひとつの作業を枝分かれさせ、あちこちで枝分かれした作業を並行して行うことができるようにした機能です。
ちょっとわかりにくいですね・・・。
この記事ではこれ以上触れないので、興味のある方は「git branch　とは」などでググってみてください。

No commits yet

まだコミットしてないよ、ということです。
コミットは次の工程で行う作業です。詳しくは後述します。

Changes to be committed:
(use “git rm –cached …” to unstage)
new file: index.html

「新しいファイル「index.html」はコミットされるべき変更です。」・・・
直訳するとこんな感じ？かもしれませんが、
要は「git add」でインデックスに「new file: index.html」が追加されているのでコミットできるよ、、、ということです。
緑の文字が「new file: index.html」ではなく、「modified: index.html」の場合もあります。
「modified」は、「変更」という意味です。
「modified:」の表示は、既にgit addでインデックスに追加してあるファイルに変更を加え、再度git addした場合に表示されるメッセージです。
どちらにしてもgit add index.htmlコマンドは成功したよ、ということです。

(use “git rm –cached …” to unstage)は、
「git add」でインデックスに追加することを、ステージにあげる、とか、ステージングとか言いますが、
ステージから除外するには（to unstage）、
「git rm –cached …」というコマンドを使いなさい、と言っています。
gitのメッセージは親切で、コマンドを覚えていなくても、このように状況に応じたコマンドを教えてくれます。

それと「new file: index.html」が緑色になっているのも注目です。
インデックスに追加されると緑色で表示されます。

Untracked files:
(use “git add …” to include in what will be committed)
img/
style.css

「Untracked files」で未追跡のファイル「img/、style.css」があるということを教えてくれています。
(use “git add …” to include in what will be committed)
で「img/、style.css」を、コミットされるものに含めるには、「git add」をしなさい。
と言っています。

要は、作業フォルダの中に、「img/、style.css」があるけど、まだ「git add」されてないよ、
と教えてくれています。
「img/、style.css」は赤で表示されていますが、インデックスに追加されていないものは赤で表示されます。

2-6.コミットする

それでは次に、インデックスされた「index.html」ファイルをコミットして、ローカルリポジトリに追加していきましょう。

コマンドは「git commit ファイル名」です。

git commit ファイル名と入力してエンターを押すと、下のような画面に切り替わります。

この画面の一行目にコメントを書くことができます。
コメントには、どんなファイルをコミットしたのか、なぜコミットしたのか、コミットした理由などを、後で見返した時にわかりやすいように書いておきます。

この画面、使い方が特殊で下記のようにして使います。

下の場合、「コミットしてみよう！」とメッセージを一行だけ書きました。

一般的に、メッセージの書き方にはルールがあるようで、
1行目：メッセージのタイトル
2行目：空白行
3行目：メッセージ

ですが、一緒に開発しているチームのルールで書き方はいろいろ変わると思うので、参考程度に覚えておくといいと思います。

ターミナルの画面に戻ると下記のようなメッセージがでています。

では、赤枠で囲ったgit commit index.html以下を一行ずつ見ていきしょう。

[master 46b81ea] コミットしてみよう！

コミットするごとに番号が割り当てられます。
[master 46b81ea] は、今回コミットしたものに割り当てられた番号です。
「コミットしてみよう！」は、先ほど入力したメッセージですね。

1 file changed, 4 insertions(+), 1 deletion(-)

コミットされた内容を表示しています。
この場合は、「1ファイル変更されていて、4つ挿入されて1つ削除されている」ということです。
変更内容によってここのメッセージは変わります。

こうしたメッセージが出ていたらコミットが成功した、ということです。

以上が、gitの作業のコミットまでの一連の流れになります。

3.まとめ

無事にコミットできたでしょうか。
この後、リモートリポジトリにpushすることで、皆と履歴を共有できます。

gitの基本的なフローについて、4回にわたって記事を書いています。
よければ次の記事もご覧ください。

次は、3.はじめてのgit(3).githubを使って新規リモートリポジトリを作成するになります。

【番外】WEB制作習得におすすめの本

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。