Frontend Academy · レッスン

git init・add・commit・status

リポジトリを初期化し、git add で変更をステージし、コミットを作成し、git status と git log を読んで履歴を理解します。

「git init・add・commit・status」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

なぜバージョン管理を使うのですか

Gitは、時間の経過に伴うコードの変更をすべて追跡します。何が、いつ、なぜ変更されたのかを確認できます。間違いが起きても復元できます。複数の人が同じコードベースで作業できます。プロフェッショナルなチームでは、必ずGitを使用します。

git init — リポジトリを開始する

任意のフォルダーでgit initを実行すると、Gitリポジトリを初期化できます。Gitは、プロジェクトの全履歴を保存する非表示の.gitディレクトリを作成します。

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

3つの領域

Gitには3つの領域があります。ワーキングツリー（編集するファイル）、ステージングエリア（次のコミット対象としてマークしたファイル）、リポジトリ（コミット済みの履歴）です。ステージングエリアを使うと、内容を正確に選んでコミットできます。

git status — 何が変更されたか確認する

git statusは、追跡対象外、変更済み、またはステージング済みのファイルを表示します。現在の状態を把握するため、作業中は常に実行してください。

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add — 変更をステージする

git add filenameは、指定したファイルをステージします。git add .は、現在のディレクトリにあるすべての変更をステージします。git add -pは、変更を対話的に（ハンク単位で）ステージします。

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit — スナップショットを保存する

git commit -m 'message'は、ステージされた変更の永続的なスナップショットを作成します。メッセージには変更内容ではなく、変更した理由を記述してください。各コミットには一意のSHAハッシュがあります。

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

Conventional Commits

多くのチームでは、Conventional Commits形式を使用しています: type(scope): description。一般的なタイプには、feat、fix、refactor、test、docs、chore、perfがあります。これにより、変更履歴の自動生成とセマンティックバージョニングが可能になります。

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log — 履歴を表示する

git logはコミット履歴を表示します。git log --onelineは、コミットごとに1行で表示する簡潔な形式です。git log --graphは、ブランチ構造を図で表示します。

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff — 変更内容を確認する

git diffは、ステージされていない変更を表示します。git diff --stagedは、ステージされた変更を表示します。git diff HEADは、直前のコミット以降のすべての変更を表示します。

.gitignoreファイル

バージョン管理から除外するファイルとディレクトリを.gitignoreに記述します。node_modules、.env、dist、buildディレクトリは必ず除外してください。GitHubは、あらゆる言語やフレームワーク向けのgitignoreテンプレートを提供しています。

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore — ステージ前の変更を取り消す

git restore filenameは、ワーキングツリー内のファイルに対する変更を破棄し、最後にコミットした状態に戻します。破壊的な操作であり、変更は失われます。

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

確認問題

git add .は何をしますか。

振り返り: Gitの基本コマンド

git initはリポジトリを開始します。git statusは現在の状態を表示します。git addはファイルをステージします。git commitはメッセージ付きでスナップショットを保存します。git logは履歴を表示します。git diffは変更を表示します。.gitignoreはファイルを除外します。変更内容ではなく理由を説明する、意味のあるコミットメッセージを必ず書いてください。

よくある質問

「git init・add・commit・status」レッスンは無料ですか？

はい。「git init・add・commit・status」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「git init・add・commit・status」で何を学びますか？

リポジトリを初期化し、git add で変更をステージし、コミットを作成し、git status と git log を読んで履歴を理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「git init・add・commit・status」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る