こんにちは!ステップウィルのSeitoです。

以前、Gitのインストールを説明しましたが、今回はGitを実際に使って見たいと思います。

Gitとは?

まずGitについて簡単に触れたいと思います。
Gitとはバージョン管理ソフトの一つで、WEB制作やアプリケーション制作では必ずといって良いほど使われるソフトです。

このGitを使うことで、差分を確認したり、制作の記録を残し間違いに気付いたときなどに過去のバージョンに戻して動作確認したりなど、できるソフトです。

またバージョン管理だけでなく、一つのアプリケーションを分担して制作して最終的に統合(マージ)したり、本番サイトからサイトを更新する際に、本番用のコードと開発用に別けて開発して、動作確認した後に本番に統合(マージ)するという流れで開発するのにこのGitが使われます。

Gitを動かしてみる

それでは早速Gitを使って、バージョン管理の練習をしていきます。

もしGitのインストールがまだの方はこちらの記事を見てインストールを先に行って下さい。

今回はVS CodeのターミナルからGitを動かしていきますので、VS codeもインストールしておいてください。

Gitリポジトリの作成

まずどこでもいいので、プロジェクトディレクトリを作成して、VS codeでプロジェクトとして開きます。

Gitをコマンドライン(ターミナル)で使ってみよう

今回は、XAMPPのhtdocsの中に「gittest」というディレクトリを作成しました。

Gitをコマンドライン(ターミナル)で使ってみよう

CS Codeで今作ったgittestを開きます。

Gitをコマンドライン(ターミナル)で使ってみよう

ターミナルを開くために、「Ctrl + @」のショートカットキーを入力してターミナルを開きます。

Gitをコマンドライン(ターミナル)で使ってみよう

ターミナルで「git init」と入力して「Enter」を押すと、
Initialized empty Git repository in C:/xampp/htdocs/gittest/.git/」
と表示されればOKです。

これは、gitでこのディレクトリを管理するためのリポジトリ作成のやり方になります。
このgit initコマンドを入力しないと、gitで管理できないのでgitで管理する際は忘れずに行います。

Gitをコマンドライン(ターミナル)で使ってみよう

エディタ上には何も表示されていませんが、プロジェクトフォルダを見てみると「.git」ディレクトリが出てきいるのが分かりますが、これがgitリポジトリです。

このgitリポジトリがあれば成功です。もし無ければ、フォルダの表示設定を確認するか、git initでエラーが出ていないかを確認しましょう。

ファイルを作成してGitで管理する

それでは、次にこのプロジェクトにファイルを作成してみます。

Gitをコマンドライン(ターミナル)で使ってみよう

プロジェクトディレクトリ内に新規ファイル作成で「index.html」を作成してみます。

すると、左のマークのところに①と表示されたのが分かりますね。
ただファイルを作成しただけだと分かりにくいので、index.htmlの中にhtmlを入力して、上書き保存をします。

Gitをコマンドライン(ターミナル)で使ってみよう

そうしたら、①のところをクリックして、「Changes」のindex.htmlをクリックしてみると、何も無いファイルから右のように更新されたという差分を表示してくれています。

このように差分を表示してくれるのはGitが使われているのと、VSコード自体のGitを認識する機能があるので分かりやすく確認が出来るようになっています。

ついでにいうと、左のメニューから実はバージョン記録をすることが出来るのですが、今回はコマンドの練習ですので、一旦その機能は使わないでコマンドでバージョンの記録をしていきます。

Gitをコマンドライン(ターミナル)で使ってみよう

ターミナル上で

git add .

と入力して「Enter」で確定します。

特になにも反応が無かったと思いますが、これで問題ありません。
このgit addというのはステージングというコマンドで、記録に残す対象のファイルを決めるコマンドです。

addの次の「.」はフォルダ内で内容に変更があったファイル全てという意味になりますので、プロジェクトディレクトリにindex.htmlが追加されたので、その追加された最新の状態を記録対象にするということになります。

Gitをコマンドライン(ターミナル)で使ってみよう

次にコミット(記録)という作業をします。
コマンドは

git commit -m "最初のコミット"

と入力します。

最初のコミットというところは、自由にコメントできますが今回は最初のコミットなので分かりやすく「最初のコミット」としました。

コマンドが成功すると、

 1 file changed, 12 insertions(+)
 create mode 100644 index.html

という風に返ってきましたが、これは変更や作成されたファイル数行数ファイル名が記載されていることが分かります。

これでGitでの記録が完了です。

流れとしては、git addでステージング(記録対象の選択)をして、git commitでコミット(記録)という流れになります。

その他のコマンド

Gitは他にも沢山覚えるべきコマンドがありますが、代表的なコマンドをご紹介します。

git status

git statusは現在のリポジトリの状況を確認するときに使うコマンドで、もう少し分かりやすくいうと、今の時点でプロジェクト内のファイルで差分があるかどうかを確認するコマンドです。

Gitをコマンドライン(ターミナル)で使ってみよう

先程コミットを完了していますが、ファイルをいじらない状態でgit statusコマンドをしてみると、画像の様に

On branch master
nothing to commit, working tree clean

と表示されますが、これは特に変更はありませんよ、と返ってきます。

では、ファイルを少し更新してgit statusを行ってみます。

Gitをコマンドライン(ターミナル)で使ってみよう

すると

On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

と表示され、index.htmlが変更されているので、git addしてcommitして下さい。と言う感じの説明が返ってきました。

このようにgit statusは変更されているけど、まだコミットしていない状態かどうかを確認するためのコマンドになります。

せっかくなので、この変更もコミットしておきましょう。

Gitをコマンドライン(ターミナル)で使ってみよう
git add .
git commit -m "git testの追加"

まとめ

今回はGitの本当に初歩的なコマンドだけご紹介しました。

Gitのもう少し詳しい使い方については、追って記事でご紹介したいと思っています。

以上、「Gitをコマンドラインで使ってみよう」でした!