GitとGitHub超入門　（さわりだけ）

Web制作でも使うよ、GitとGitHubを知っておこう
こんなトラブルはありませんか？
1. 別の日
Gitとは何か？
1. Gitを利用できるサービス
2. GitとGitHubの違い
もしもGitを導入していたら？
1. 別の日
初心者が知るべき3つのポイント
基本的な流れ
GitHub Pagesとレンタルサーバーの使い分け
学び始めるおすすめ手順
まとめ

Web制作でも使うよ、GitとGitHubを知っておこう

バージョン管理ツールとして「Git」があります。
概念が理解しにくいものなのですが、使えると大変便利なので把握してみましょう！

Gitは、プログラミングやWeb制作で使用されるバージョン管理システムです。

初心者にとっては難しく感じるかもしれませんが、要点を押さえればスムーズに使い始められます！以下、初心者向けに簡単に解説します。

こんなトラブルはありませんか？

納品前のファイルのJavaScriptいじったら全然動かなくなっちゃった！
来週納品なのに！どうしよう！

うそでしょ！バックアップはとってある？

とってあるけど、どれが一番新しいデータか、
わかんなくなっちゃいました・・・

別の日

このまえ言ってた動かないコード直しといたよ
サーバーにアップしといた

え！そこ修正済みです！

しかも追加コンテンツが2つ追加してあったんですが・・・
もしかして消しました？

うそでしょ！ごめん！
バックアップは！？

ありません・・・

こんなことがWeb制作の現場ではよく発生します。
それを解消するためにあるのが「Git」という技術です。
複数人での共同作業となるWeb制作では非常に重要です。

就職した現場で利用している場合は必ず使用する必要があるので、概念くらいは把握しておきましょう。

Gitとは何か？

Gitは、「プロジェクトの変更履歴を記録して管理するためのツール」です。たとえば、以下のようなことができます：

過去の状態に戻せる：間違った変更をしても、元に戻すことが可能。
変更内容を比較できる：どの部分が変更されたか確認できる。
チームで作業を効率化：複数人で同時に作業しても、互いの変更を管理できる。

Gitを利用できるサービス

Gitを使用してソースを管理できるサービスがあります。

GitとGitHubの違い

Git：ツール（ローカルで使う）
GitHub：オンラインサービス（リモートリポジトリを提供）

Gitを使って作業を管理し、GitHubでバックアップを取るイメージです。

もしもGitを導入していたら？

納品前のファイルのJavaScriptいじったら全然動かなくなっちゃった！
来週納品なのに！どうしよう！

Gitで動いていた時のデータを確認しましょう！
どうしてもダメならチェックアウトして戻しましょう。

※チェックアウト→とある段階のデータに切り替えること

一つまえの状態を確認したら問題がわかりました！

問題解決です！

別の日

サーバーにアップする前に、必ずGitにプッシュするルールだったな。
お！自分が触らなかった間に修正が行われてるみたい。
コンテンツも追加されてる。
じゃあ別の部分を修正して、コミットしてからプッシュ！

先輩、私のしごとまでやってくれてる！？

Gitの不適切な運用によるトラブルや、エラーでプッシュやコミットができない、などの別の問題が発生することはあるのですが、バージョンを先祖返りや修正の競合などのトラブルは格段に減るはずです。

どのように運用するか？のルール設計が重要となります。

初心者が知るべき3つのポイント

リポジトリ（Repository）

プロジェクトを保存する場所のことです。Gitではリポジトリの中で変更が管理されます。

ローカルリポジトリ：自分のパソコン内
リモートリポジトリ：GitHubなどのオンライン上

コミット（Commit）

プロジェクトの変更を保存する作業です。
メモをつける感覚で、「何を変更したか」を記録します。

プッシュ（Push）とプル（Pull）

Push：ローカルリポジトリの内容をリモートリポジトリに送信する。
Pull：リモートリポジトリの内容をローカルリポジトリに取り込む。

基本的な流れ

まずは小さなHTML/CSSフォルダで、状態確認→追加→コミット→GitHubへ送信の順番を練習します。Gitはパソコン内で履歴を管理する仕組みで、GitHubはその履歴を共有・保管できるサービスです。

初回だけ行う準備

cd プロジェクトフォルダ
git init -b main
git status
git add .
git commit -m "最初のコミット"

git statusでは、未追跡・変更済み・コミット予定のファイルを確認できます。git add .の直後にも実行し、意図しないファイルが含まれていないか確認しましょう。

GitHubのリポジトリへ接続する

GitHub側で空のリポジトリを作成し、表示されたURLを使って次のように接続します。README・ライセンス・.gitignoreをGitHub側で先に作ると履歴が分かれてエラーになりやすいため、最初の練習では空で作成すると分かりやすいです。

git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git remote -v
git push -u origin main

git remote -vで送信先を確認してからプッシュします。2回目以降は、ファイルを編集したあとにgit status→git add→git commit→git pushの順に進めます。

GitHubのパスワード認証に注意

GitHubは、コマンドラインからHTTPSで接続するときにアカウントのパスワードを受け付けません。Git Credential Manager、GitHub CLI、SSH、またはPersonal Access Tokenなど、公式が案内する方法で認証します。トークン、パスワード、APIキー、秘密鍵はHTMLやJavaScriptへ書かず、コミットやプッシュもしないでください。

できたか確認する

git statusで作業ツリーが意図した状態になっている
git log --onelineでコミット履歴が表示される
git remote -vのURLが自分のリポジトリになっている
GitHubのリポジトリ画面にファイルと最新コミットが表示される

公開方法まで進めたい場合は、関連記事「HTML・CSSで作ったページを公開する方法」も確認してください。GitHubへコードを置くことと、Webサイトを一般公開することは目的が異なるため、用途に合う方法を選びます。

GitHub Pagesとレンタルサーバーの使い分け

HTML・CSS・JavaScriptだけで作った練習作品やポートフォリオを無料で公開するなら、GitHub Pagesを利用できます。GitHub公式では、リポジトリ内のHTML・CSS・JavaScriptなどを公開する静的サイトホスティングサービスとして案内されています。

一方、GitHub PagesはPHPなどのサーバーサイド言語をサポートしていません。PHPのメールフォーム、WordPress、サーバー上で動くCMSを使う場合は、それらに対応したレンタルサーバーが必要です。GitHub Pagesで十分な段階では、有料サーバーを契約する必要はありません。

作りたいもの	公開方法の例
HTML・CSS・JavaScriptの練習作品	GitHub Pagesなどの無料公開
PHPのメールフォーム・WordPress・PHP製CMS	PHP対応レンタルサーバー

有料サーバーを選ぶときは、必要な機能、契約期間分の支払総額、更新料金を確認します。2026年11月4日17時までは、エックスサーバーの新規申込みを対象に、12か月契約10％、24か月契約20％、36か月契約30％の初回利用料金割引が案内されています。長期契約ほど支払総額は大きくなるため、割引率だけで決めず、公式キャンペーン条件と通常料金を確認してください。

広告：GitHub Pagesでは動かないPHPやWordPressを公開するために、対応サーバーを探している方向けです。