Git基本コマンド10選 -はじめてのバージョン管理で開発を加速

これからGitを使い始めるフロントエンド/バックエンド開発者向けに少しだけGitコマンドをDeep Dive

初回公開日2025/7/9

最終更新日2025/7/9

下記の「GitHub超入門」では、とりあえず、GitHubにソースコードをPushすることだけをやってみました。

今回はさらに基本のGitコマンドについて把握して、よりGitHubを利用できるようになりたいと思います。

1. Git とは？なぜ使うのか

開発でよくある課題	Git でどう解決？
壊れるのが怖くて改修を躊躇	コミット履歴という“タイムマシン”でいつでも過去へ戻れる
複数人編集でファイルが衝突	ブランチ + マージで平行作業を安全に統合
毎リリース手動テストがつらい	GitHub Actions で CI/CD に接続し自動チェック

Git は単なる「履歴管理ツール」ではなく、コラボレーションと自動化のハブです。履歴を起点にレビュー・テスト・デプロイを一気通貫で回せることで、開発速度と品質が同時に向上します。

2. 基本コマンド10選 — 一覧とユースケース早見表

#	コマンド	いつ使う？	どんな良いこと？	最小サンプル
1	git init	新プロジェクト開始時	既存フォルダを即座に Git 管理下に	git init
2	git clone	リモートから取得	GitHub 上のリポをローカルへ複製	git clone
3	git switch -c	新機能を並行開発	安全に作業ブランチを作成	git switch -c feature/form-input
4	git status	現状確認	変更・ステージ状況を一目で把握	git status
5	git add	変更を記録に含める	どのファイルをコミット対象にするか選択	git add src/components/Input.tsx
6	git commit -m	スナップショット保存	変更理由を履歴に残す	git commit -m “Add text input to contact form”
7	git push -u	リモートへ反映	GitHub にバックアップ + PR 作成準備	git push -u origin feature/form-input
8	git merge	作業完了を統合	main へ安全に統合しデプロイ基準を維持	git merge —no-ff feature/form-input
9	git stash	緊急タスク割り込み	途中変更を一時退避しコンテキストを切替	git stash push -m “WIP form layout”
10	git revert	リリース後に不具合発覚	問題コミットだけを打ち消して履歴を保持	git revert

コマンドリストだけだとよくわからないので、次節で実際に使ってみます。

3. コマンド Deep Dive — Shadcn ボタンを“テキスト入力付きフォーム”へ拡張

下記では、Shadcn ボタン 1 つだけがある状態で、GitHubにpushしました。

GitHub超入門-アカウント作成から初pushまでゆっくりガイド

ここにテキストボックスを追加して見た目だけ簡易フォームへ改修し、本番反映するまでの流れを 10 コマンド利用して一気に体験してみます。

リポジトリを取得する

/xxx/xxx/project配下に各プロジェクトのディレクトリを配置しているものとします。

zsh

cd /xxx/xxx/project

# ① GitHub から複製しローカル開始
# すでにshadcn-installというディレクトリが存在するので別名のディレクトリへ保存
# git clone https://github.com/delogs-jp/shadcn-install.git だけだとリポジトリ名と同じ名称のディレクトリが作成されます
 
git clone https://github.com/delogs-jp/shadcn-install.git shadcn-install-new

cd shadcn-install-new

このようにgit cloneでGitHubリポジトリを取得できます。git cloneでリポジトリを取得した場合は、git initは不要で、むしろ実行してはいけません。

作業ブランチを切る

zsh

# ② 現在のブランチを調べる
git status -sb

zsh

## main...origin/main

現状どのブランチにいるのかわかないときは、git status -sbで調べられます。現在はmainブランチにいます。

zsh

# ③ ブランチを作成して切り替え
git switch -c feature/contact-input

git switch -cで"feature/contact-input"というブランチを作成してチェックアウトするコマンドです。既存ブランチmain を汚さず“安全な実験場”を確保。CI もブランチ単位で走るため本番に影響を与えません。

git status -sbで調べると## feature/contact-inputと表示されて、ブランチが切り替わったことがわかります。

ソースに変更を加える

shadcn/uiのテキストボックスをインストールして、src/app/page.tsxに追記します。

zsh

# Cursorエディタで編集するので、一旦npm installでモジュールを入れる
npm install

# Shadcn/uiのテキストボックスをインストール
npx shadcn@latest add input

diff : page.tsx

import { Button } from "@/components/ui/button";
+ import { Input } from "@/components/ui/input"

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-8">
-      <h1 className="mb-4 text-2xl font-bold">Shadcn/uiボタンの表示テスト</h1>
+      <h1 className="mb-4 text-2xl font-bold">Shadcn/uiボタンとテキストボックスの表示テスト</h1>
+      <Input type="text" placeholder="お名前" className="mb-4 w-40" />
      <Button className="cursor-pointer font-semibold">クリックしてね</Button>
    </main>
  );
}

tips：「ちょっと別件が入ったので main に戻りたい」という緊急で main に戻る必要が出たら？
いまの変更をコミットせず サッと退避 できるのが git stash です。

zsh

# まだコミットしたくない変更を一時保存
git stash push -m "WIP: contact-input"

# main へ切り替えて緊急修正
git switch main
# ...hotfix...
git push origin main
# ------------- ここまでで本番復旧 --------------

# 元の作業ブランチへ戻り、退避を復元
git switch feature/contact-input
git stash pop

上記のようにしてブランチを切り替えます。いきなりgit switchしてしまわないように気をつけましょう。pop すると stash エントリが削除されます（残したい場合は apply）

変更をステージ & コミット

zsh

# ④変更内容を確認
git status -s

zsh

 M package-lock.json
 M src/app/page.tsx
?? src/components/ui/input.tsx

git status -sでどのファイルをいじったのか一発でわかります。先頭の記号は「新規 (??) 変更 (M) 削除 (D)」の意味になります。

zsh

# ⑤すべてをステージ
git add . 

今回は、複数ファイルをすべてステージします。git addには下記のようなオプションがあります。

コマンド	ステージ対象	典型用途
git add .	新規 (??) + 変更 (M)※削除 (D) は対象外	作業ツリーを丸ごとコミットsrc 配下を一気に上げたいとき
git add -u	変更 (M) + 削除 (D)※新規 (??) は対象外	既存ファイルだけ更新したいとき誤って巨大バイナリをステージしない保険にも
git add -A	新規 + 変更 + 削除をすべて	“結局ぜんぶコミット” 派ならこれ一撃
git add -p	対話式で hunk（行ブロック）単位	コミットを意図ごとに分けたいとき（例：ロジック修正とリファクタを別コミットに）

git add -p ファイル名は一つのファイルに複数の機能を付け加えたときに役立ちそうです。

zsh

# 再度ステータス確認
git status -s
M  package-lock.json
M  src/app/page.tsx
A  src/components/ui/input.tsx

# ⑥コミット
git commit -m "feat: Shadcnのテキストボックスを追加"

コミットメッセージにファイルパスはつけないのが通常のようです。git log -pや GitHub の差分でファイルは確認できるので。簡潔なメッセージがあとから見返すときに便利なようです。

変更をGitHubへ push

ここで、GitHubにpushしていくのですが、最初にgit clone https://github.com/delogs-jp/shadcn-install.git shadcn-install-newとクローンを作成するときにHTTPS接続で実行したので、このままだとHTTPS接続でPushしようとしてしまいます。 DELOGsの環境ではSSH接続でGitHubと接続するようにしているので下記で変更します。

zsh

git remote set-url origin git@github-delogs:delogs-jp/shadcn-install.git

zsh

# 接続方式を確認
git remote -v

origin  git@github-delogs:delogs-jp/shadcn-install.git (fetch)
origin  git@github-delogs:delogs-jp/shadcn-install.git (push)

これは、それぞれの接続方式でHTTPS接続を選択されている場合は不要な作業になります。

zsh

# ⑦追跡ブランチを作りつつ push
git push -u origin feature/contact-input

-u（--set-upstream）を付けると以降 git push / git pull だけで OK。
GitHubの管理画面へ行くと下記のように作成したブランチ名に新たなPushがあることを表示されています。

“Compare & pull request” ボタンをクリックすると詳細な内容が把握できます（管理画面を少し下にスクロールすると下記のような差分表示してくれています）

GitHubで差分を見て問題なければPull Requestを行って、mainブランチへの統合をリクエストする流れになります。GitHubにはCI：Continuous Integration（継続的インテグレーション）という素晴らしい機能があるのですが、私はまだ利用したことがなく、調べると色々と設定が必要みたいです。この辺は実践した後に、また別途記事にして共有させていただこうと思います。

手動でマージする場合（参考までに）

GitHubのPR（Pull Request）-> レビュー・CI（Continuous Integration） -> マージという流れが良いと思うので、ここからは参考までにコマンドでマージする場合を記載します。

zsh

# mainブランチへ切り替えて、ブランチを最新の状態に更新してから
git switch main
git pull --ff-only origin main

# ⑧--no-ff でマージコミットを残す
git merge --no-ff feature/contact-input -m "Merge feature/contact-input"

# プッシュ
git push origin main

本番で不具合を出したときの超安全ロールバック — `git revert`

◯不具合コミットだけを打ち消す — git revert

git reset --hard は履歴を書き換えてしまうのでチーム開発では危険。
公開済みコミットを「打ち消すコミット」を追加 する git revert が推奨です。

zsh

# main ブランチでバグの入ったコミットを確認
git log --oneline -n 5
# 例) a1b2c3d 「feat: contact input」

# 打ち消しコミットを作成
git revert a1b2c3d

# そのまま push
git push origin main

以上で、Gitの基本コマンドの説明を終わります。一応の操作ができるかなー？ってレベルで、まだ、GitHubのCIについて勉強する必要があると感じています。

できるだけ早くGitHubの設定関連の記事を作成したいと思います。

次回：GitHub Actions で超ミニ CI を作る（予定）

この記事の執筆・編集担当

松本孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

▼ 関連記事

はじめてのPlaywright-"録画"で体験する E2E テスト入門

ボタンをクリックしているだけで、テストが自動生成。『壊れてないか？』を毎回手動で確かめる作業とおさらば

2025/7/15公開