まず初めに

Web制作やプログラミングを始めると、必ずと言っていいほど出てくるのが「GitHub」です。

私自身も最初は、

• GitとGitHubの違いがわからない
• なぜ使う必要があるのかわからない
• PullやPushの意味がわからない
• VS Codeとの連携方法がわからない

という状態でした。

この記事では、GitHub初心者向けに

• GitHubとは何か
• なぜ必要なのか
• GitHubでできること
• GitHubの初期設定
• VS Codeとの連携方法
• Pull操作のやり方

まで実務ベースでわかりやすく解説します。

この記事を読めば、GitHubの基本操作を一通り理解できるようになります。

GitHubとは何か？

GitHubとは、ソースコードを管理するためのサービスです。

簡単に言うと、

「ファイルの保存・共有・履歴管理ができるクラウドサービス」

です。

例えばWebサイト制作をしていると、

• 昨日の状態に戻したい
• 誰が修正したか確認したい
• 複数人で開発したい

という場面が出てきます。

GitHubを使うとこれらを簡単に管理できます。

GitHubが必要な理由

ファイルの履歴を残せる

例えば、

• index.htmlを修正
• CSSを変更
• JavaScriptを追加

した後に不具合が発生しても、

過去の状態へ戻せます。

チーム開発ができる

複数人で開発していても、

• 誰が変更したか
• どのファイルを修正したか

がわかります。

バックアップになる

パソコンが壊れても、

GitHub上にデータが残っています。

GitHubでできること

ソースコード管理

• HTML
• CSS
• JavaScript
• PHP
• WordPress

などを保存できます。

変更履歴管理

誰がいつ変更したか確認できます。

バージョン管理

過去の状態へ戻せます。

チーム共有

複数人で同じプロジェクトを管理できます。

公開ポートフォリオ

作成した作品を公開できます。

就職や転職時にも活用されています。

結論（先に知りたい人向け）

GitHub初心者がまず覚えるべき流れは以下です。

1. Gitをインストール
2. GitHubアカウント作成
3. VS Codeと連携
4. リポジトリを取得
5. Pull
6. 編集
7. Commit
8. Push

まずはこの流れだけ覚えれば十分です。

GitHubの初期設定方法

① GitHubを使う前に、まずGitがインストールされているか確認しましょう

VS Codeのターミナルに

git --version

を入力しましょう。

表示されたらOK。次のステップへ。

表示されなければGitをインストールしましょう。

https://git-scm.com/install/windows

②GitHubアカウントを作成する

GitHubへアクセスして登録します。

VS CodeとGitHubを連携する方法

VS Codeを開く

左メニューにある

「ソース管理」

をクリックします。

GitHubへログイン

画面上部の

Publish to GitHub

または

Sign in with GitHub

をクリックします。

認証を許可する

ブラウザが開くので

Authorize Visual Studio Code

をクリックします。

これで連携完了です。

リポジトリとは？

リポジトリを一言で表すと、「GitHub上にあるプロジェクト専用のフォルダ」です。

HTMLやCSS、JavaScriptなどのファイルだけでなく、誰がいつ何を変更したのかという履歴も一緒に保存されています。

まずは「リポジトリ＝プロジェクトを管理する箱」と覚えておけば問題ありません。

Pullとは何か？

英語の「Pull」は

引っ張る
引き寄せる

という意味です。

つまりPullは

GitHub上の最新データを自分のPCへ取得する操作

です。

Pullを実行する

ターミナル
git pull origin main

実行前

GitHub 最新
PC 古い

実行後

GitHub 最新
PC 最新

になります。

GitHub上で更新された最新データを、自分のパソコンへ取得する流れです。Pullを実行すると、他のメンバーが追加・修正したファイルがローカル環境へ反映されます。

Pushとは何か？

英語の「Push」は

押す
前へ送る

という意味です。

つまりPushは

自分の変更をGitHubへ送信する操作

です。

基本的な流れ

変更確認

ターミナル
git status

追加

ターミナル
git add .

コミット（今の状態を保存する）

ターミナル
git commit -m "ヘッダー修正"

送信

ターミナル
git push origin main

ターミナルの画面でEverything up-to-dateなど同期が完了したコメントが出れば完了です。

GitHubへ自分の変更内容を送信する流れです。

Pushを実行すると、自分が追加・修正したファイルがGitHub上のリポジトリへ反映されます。

結果

GitHubを使えるようになると、

• コードの管理が楽になる
• バックアップになる
• チーム開発できる
• 案件参加しやすくなる

というメリットがあります。

GitHubのメリット

GitHubなし	GitHubあり
上書き事故が起きる	履歴管理できる
バックアップがない	クラウド保存できる
チーム共有が大変	共同開発できる
過去へ戻れない	いつでも戻せる

初心者向けまとめ

まずは以下だけ覚えれば十分です。

git pull origin main
git add .
git commit -m "コメント"
git push origin main

この4つが日常的によく使うコマンドです。

今回のポイントまとめ

• Gitはバージョン管理ツール
• GitHubはコード共有サービス
• Pullは取得
• Pushは送信
• VS Codeと連携すると操作が楽になる
• Web制作案件ではほぼ必須

まとめ

GitHubは最初こそ難しく感じますが、実際に覚えるべき操作はそれほど多くありません。

まずは、

• Pull
• Commit
• Push

この3つを使えるようになることを目標にしましょう。

Web制作やWordPress開発を続けるなら、GitHubの知識は必須になります。

早い段階で慣れておくと、案件参加やチーム開発がスムーズになります。

一言

私も最初は「PullとPushの違い」が理解できず何度も調べました。しかし実際に触りながら覚えると、一気に理解できます。まずは自分用のテストリポジトリを作って、PullとPushを何度か試してみるのがおすすめです。