基礎から学ぶJavaScript入門 90日コース | 実践的なJavaScript － Day 75：Git基礎

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク

Day 75：Git基礎

Day 75では、Gitの基本と、git init、git add、git commit、git statusの使い方を学びます。Gitは、プログラムの変更を記録し、あとから確認したり、必要に応じて以前の状態へ戻したりするためのバージョン管理システムです。

JavaScriptの学習を進めると、コードを書き換えたあとに「前の状態に戻したい」「どこを変えたか確認したい」と思うことがあります。ファイルを何個もコピーして保存する方法もありますが、変更が増えると管理が難しくなります。Gitを使えば、作業の節目ごとに変更を記録し、履歴として管理できます。

Gitを身近な例で理解する

Gitを、プログラムの「変更履歴を記録する仕組み」と考えてみましょう。文章を書いている途中で、節目ごとに保存した版を残すイメージに似ています。ただしGitは、単にファイルのコピーを作るのではなく、どのファイルを記録するか選び、変更のまとまりに説明を付けて保存します。

Gitを使うときに登場する場所は、まず次の3つです。

  • 作業ツリー：実際にファイルを作成・編集している場所です。
  • ステージングエリア：次の記録に含める変更を一時的に選ぶ場所です。
  • リポジトリ：コミットした履歴を保存する場所です。

基本の流れは、作業ツリーで編集し、git addで記録したい変更をステージングエリアへ移し、git commitでリポジトリに記録する、という順番です。

GitとGitHubの違い

Gitは、手元のパソコンで変更履歴を管理するためのソフトウェアです。GitHubは、Gitのリポジトリをインターネット上に保存したり、ほかの人と共有したりするためのサービスです。まず今回の基本操作は、GitHubを使わず、パソコン内だけでも練習できます。

  • Git：変更履歴を管理する仕組み
  • GitHub：Gitリポジトリをオンラインで保存・共有するサービスの一つ

ステップ1：練習用フォルダーを作る

まず、練習用のフォルダーを作り、その中に移動します。以下はターミナルで実行する例です。フォルダー名は任意です。

# 練習用フォルダーを作る
mkdir day75-git-practice

# 作ったフォルダーへ移動する
cd day75-git-practice

次に、簡単なJavaScriptファイルを作ります。エディターを使って、フォルダー内にapp.jsを作成してください。

// 学習用のメッセージを表示する
console.log("Gitの練習を始めます。");
JavaScript

この時点では、ファイルは通常のファイルとして存在しているだけで、まだGitの履歴には記録されていません。

ステップ2：git initでリポジトリを作る

作業フォルダーをGitで管理するには、フォルダー内でgit initを実行します。

# 現在のフォルダーをGitリポジトリとして初期化する
git init

成功すると、Gitが履歴を管理するための情報をフォルダー内に作成します。この情報は通常.gitという隠しフォルダーに保存されます。普段は.gitの中身を直接編集する必要はありません。

git initは、プロジェクトごとに最初に一度実行する操作です。すでにGitリポジトリになっているフォルダーで、何度も実行する必要はありません。

ステップ3：git statusで状態を確認する

git statusは、ファイルの変更状態を確認するコマンドです。Gitを使うときは、変更を記録する前に状態を確認する習慣をつけると安心です。

# Gitが管理している変更の状態を表示する
git status

app.jsを作ったあとに実行すると、まだ記録されていないファイルとして表示されます。Gitにまだ登録されていないファイルは、一般に「追跡されていないファイル」と呼ばれます。

初心者の方は、git statusを「今の作業状況を確認するコマンド」と覚えてください。何を追加・変更しようとしているのかを、git addやgit commitの前に確かめるために使います。

ステップ4：git addで記録する変更を選ぶ

git addは、変更をステージングエリアへ移すコマンドです。ステージングエリアは、次のコミットに含める変更を選ぶための準備場所です。

# app.jsを次の記録対象にする
git add app.js

複数の変更をまとめてステージングする場合は、次のようにも書けます。

# 現在のフォルダー内にある変更をまとめてステージングする
git add .

git add .は便利ですが、意図しないファイルまで含めてしまうことがあります。慣れないうちは、git statusで対象を確認してから、必要なファイルを指定して追加する方法がおすすめです。

ステップ5：git statusでもう一度確認する

git addを実行したら、もう一度状態を確認します。

# ステージングされた変更を確認する
git status

この段階では、app.jsが次のコミットに含まれる変更として表示されます。ここで「記録しようとしているファイルが想定どおりか」を確認します。

Gitでは、作業ツリーでファイルを変更しただけでは、次のコミットに自動で含まれるわけではありません。git addでステージングした変更が、コミットの対象になります。

ステップ6：git commitで変更を記録する

ステージングした変更を、リポジトリの履歴として保存する操作がgit commitです。コミットには、何を変更したかを短く説明するメッセージを付けます。

# ステージングした変更を説明付きで記録する
git commit -m "学習用のメッセージを追加"

コミットメッセージは、後から履歴を見たときに変更の目的がわかるように書きます。たとえば、「更新」よりも「ユーザー検索機能を追加」のように、何をしたかが伝わる説明が便利です。

ステップ7：変更を加えて、もう一度記録する

app.jsを次のように変更してみます。

// 学習用のメッセージを表示する
console.log("Gitの練習を始めます。");

// 配列のデータを画面ではなくコンソールに表示する
const topics = ["git init", "git add", "git commit"];
console.log(topics);
JavaScript

変更後は、次の順番で操作します。

# 変更内容を確認する
git status

# app.jsの変更をステージングする
git add app.js

# ステージングした変更を履歴に記録する
git commit -m "Gitの基本コマンドを一覧に追加"

# 記録後の状態を確認する
git status

変更を記録したあとにgit statusを実行すると、作業ツリーに未記録の変更がない状態になります。

4つのコマンドの役割を整理する

今回学んだコマンドは、次のように整理できます。

  • `git init`：現在のフォルダーでGitによる管理を始めます。
  • `git status`：ファイルや変更がどの状態か確認します。
  • `git add`：次のコミットに含める変更を選びます。
  • `git commit`：ステージングした変更を履歴として記録します。

流れを短く表すと、git statusで状態を確認し、git addで記録対象を選び、git commitで履歴に保存します。git initは、そのプロジェクトでGitを使い始めるときに実行します。

コミットメッセージの書き方

コミットメッセージは、後から自分やほかの人が履歴を見たときに、変更内容を理解するための手がかりです。

  • 「検索フォームを追加」のように、変更した内容を具体的に書きます。
  • 一つのコミットには、できるだけ関連する変更をまとめます。
  • 「いろいろ変更」「修正」だけのような曖昧な説明は避けます。

コミットは大きな作業の最後に一度だけ行うものではありません。機能の追加や修正など、意味のある区切りで記録すると、履歴をたどりやすくなります。

Gitでよくあるつまずき

初心者の方がつまずきやすいのは、「ファイルを編集したのにコミットに入っていない」「どの状態にあるかわからなくなった」という場面です。まずgit statusを実行すると、未追跡、変更済み、ステージング済みなどの状態を確認できます。

  • ファイルを編集しただけでは、コミットには入りません。
  • `git add`したあとにさらに編集した場合、追加の変更を再度ステージングする必要があります。
  • `git commit`できないときは、先に変更を`git add`しているか確認します。
  • 対象がわからなくなったときは、まず`git status`を実行します。

Gitの状態を覚え込もうとするより、操作の前後でgit statusを確認するほうが、初心者のうちは安全で確実です。

Gitのユーザー名とメールアドレスを設定する

Gitは、コミットを誰が作成したかを記録するため、ユーザー名とメールアドレスを使います。初めてコミットするときに設定を求められた場合は、次のように設定できます。

# Gitのコミットに使う名前を設定する
git config --global user.name "Your Name"

# Gitのコミットに使うメールアドレスを設定する
git config --global user.email "[email protected]"

--globalは、現在のパソコン上のGit全体で使う設定です。仕事用と個人用で別の情報を使いたい場合は、リポジトリごとに設定する方法もあります。公開リポジトリを使う場合は、個人情報として公開したくないメールアドレスを登録しないよう注意してください。

Gitに登録しないファイルにも注意する

プロジェクトには、Gitの履歴に含めないほうがよいファイルがあります。たとえば、APIキー、パスワード、個人情報を含む設定ファイルなどです。こうした情報をコミットすると、後から削除しても履歴に残ってしまう可能性があります。

Gitで記録したくないファイルは、.gitignoreに書いて管理対象から除外できます。たとえば、ローカル専用の設定ファイルを除外する例です。

# ローカル環境の秘密情報を含むファイルをGit管理から除外する
.env

.gitignoreは、まだGitに追跡されていないファイルを無視するための設定です。すでにコミットした秘密情報を、.gitignoreに書くだけで履歴から消せるわけではありません。APIキーなどを誤って公開した場合は、キーを無効化・再発行するなど、利用しているサービスの手順に従って対応してください。

練習用の基本テンプレート

Day 75の基本的な操作を、作業の順番でまとめます。

# プロジェクトのフォルダーへ移動する
cd day75-git-practice

# フォルダーでGit管理を開始する（最初の1回）
git init

# 現在のファイルや変更状態を確認する
git status

# 記録したいファイルをステージングする
git add app.js

# ステージング内容を確認する
git status

# 変更を履歴に記録する
git commit -m "学習用アプリの初期ファイルを追加"

# 記録後の状態を確認する
git status

Day 75のゴール

Day 75では、次のことができるようになっていれば十分です。

  • Gitが変更履歴を管理する仕組みだと説明できます。
  • `git init`でプロジェクトをGit管理下にできます。
  • `git status`で現在の変更状態を確認できます。
  • `git add`で記録対象を選べます。
  • `git commit`で変更をメッセージ付きで記録できます。
  • APIキーなどを不用意にコミットしない意識を持てます。

まとめ

Day 75では、Gitの基本的な役割と、git init、git status、git add、git commitの使い方を学びました。重要な流れは、ファイルを編集し、状態を確認し、記録する変更をステージングし、コミットとして履歴に保存することです。

特に、変更の前後でgit statusを確認する習慣をつけると、意図しないファイルを記録するミスを減らせます。また、コミットメッセージは後から読んでも内容がわかるように書き、APIキーやパスワードなどの秘密情報をコミットしないよう注意しましょう。まずは小さなJavaScriptファイルを使って、編集・確認・追加・記録の流れを何度か練習してみてください。

スポンサーリンク
タイトルとURLをコピーしました