はじめての Git ＆ GitHub
Git の基本から GitHub での共同作業まで
Table of contents
author: Kaoru
はじめての Git ＆ GitHub 【VS Code で実践】
こんにちは。 ジーアイクラウド カスタマーサポート担当のKaoruです。 プログラミング等を始めたばかりで、GitやGitHubに戸惑っている方いらっしゃいませんか？
この記事は、まったくGitHubを使ったことがなかった私が、社内ブログを書くために使い方を勉強し、その成果をここにまとめたものです。
専門用語をできるだけ使わずに、ゲームのセーブポイントを作るような感覚でGitの使い方を解説していきます。これを読めば、Gitの基本からGitHubでの共同作業まで、必要なことがサクッとわかるはずです。
1. Git と GitHub、何が違うの？
多くの方が最初に疑問に感じる「Git」と「GitHub」の違いからご説明します。
・Git: ファイルの変更履歴を記録する「ツール」
ファイル全体の完全なスナップショットを撮ることで、変更履歴を管理します。
Googleドキュメントの「バージョン履歴」機能のように、いつでも過去の状態に戻せます。
・GitHub: Git で管理したコードを「オンラインで保管・共有できる Web サービス」
GitHubが提供する主な機能は以下の通りです。
-
バックアップ ：あなたのPCが壊れても、GitHubにリポジトリ（スナップショットのようなもの）が保管されているので、データは安全です。
-
共有・共同作業 ：あなたの作ったコードを、他の開発者も簡単に見たり、コピーしたりできます。これにより、チームでの作業が可能になります。
-
レビュー（プルリクエスト）： 例えば、他の人があなたのコードに変更点を追加したい時、「こういう変更はどうかな？」と提案（プルリクエスト）し、あなたがそれをチェックして承認してから、正式に元のコードに加える、といった安全なやり取りができます。
Git で手元で記録し、GitHub で他の開発者と共有する
2. Git を使い始める前に知っておくべき用語
Gitの操作を進める前に、いくつかの大切な言葉を覚えておきましょう。
3. Git と GitHub を使い始める初期設定
(1) Git のインストール
お使いのOSに合ったものを、Git公式サイトからダウンロードしてインストールしてください。
インストールが終わったら、ターミナルでgit —versionと打って、バージョンが表示されればOKです。
(2) GitHub アカウントの作成
GitHubのウェブサイトでアカウントを作りましょう。
(3) Git の初期設定
あなたのPCのGitに「あなたが誰か」を教えてあげます。ターミナルで、あなたの情報に書き換えて実行してください。
git config --global user.name "Your GitHub Username"
git config --global user.email "your.email@example.com"【STEP1】 一人で実践：自分のコードを管理してみよう (init, add, commit)
ここからが本番です。まずは一人で、VS Codeを使ってコードの変更履歴を記録（セーブ）してみましょう。
Git の超重要コンセプト：「3 つのエリア」 Git の操作は、この 3 つのエリアを意識すると分かりやすいです。
「変更」→「選ぶ（ステージ）」→「保存（コミット）」の流れを覚えましょう。
手順
1. プロジェクトフォルダを開く
まず、バージョン管理したいプロジェクトのフォルダをVSCodeで開きます。
2. git init でリポジトリを初期化する（タイムマシン機能を有効にする）
VSCodeのターミナルを開き、以下のコマンドを実行します。
git initこれで、このフォルダがGitの管理下に入り、タイムマシン機能が有効になります。
3. ファイルを作成・編集する
フォルダ内にファイル（例: index.html）を作り、自由にコードを書いて保存します。
4. ソース管理ビューで変更をステージ・コミットする
VSCodeの左側にあるソース管理アイコンをクリックします。
-
git add（ステージ）:「変更」欄に表示されたファイル名の横にある**「＋」**アイコンをクリックすると、変更が「ステージされた変更」欄に移動します。
↓ ステージングされている状態
-
git commit（コミット）: コミットメッセージのボックスに入力し、上部の「コミット」ボタンをクリックします。
コミットメッセージは、「何を変えたか」を簡潔に書くのがポイントです。
5. git log で履歴を見る
ターミナルに戻り、git log コマンドでこれまでの保存（コミット）履歴を一覧で確認できます。
💡 ちょっとしたコツ：コマンドの再利用
ターミナルで上矢印キー（↑）を押すと、以前に打ったコマンドが表示されます。
【STEP2】 GitHub 連携：オンラインにバックアップする (push)
次は、STEP1でPC上で管理しているコードを、GitHubにアップロードしてみましょう。これでコードのバックアップができ、他の人と共有する準備が整います。
1. GitHub で新しいリポジトリを作る GitHub にログインし、「New」ボタンをクリック。
2. 「Repository name」 を入力し、公開範囲を選んで、「Create repository」 をクリックします。
3. PC 上のデータと GitHub を接続して送信（プッシュ）する
リポジトリ作成後に表示される「…or push an existing repository from the command line」という部分のコマンドを、ターミナルで順番に実行します。
# 1. PCと、さっき作ったGitHubの保管場所を接続します
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
# 2. 基本となるブランチ名を「main」という名前にします
git branch -M main
# 3. PC上の記録を、GitHubにアップロードします！
git push -u origin mainこれで、あなたのコードがGitHubに公開され、同時に安全にバックアップされました！
【STEP3】 チームで実践：プルリクエストを使ってみよう
GitとGitHubの一番すごいところは、複数人で協力して開発できることです。 ここでは、チーム開発の基本であるプルリクエストを作成するまでの一連の流れを見ていきましょう。
そのカギが「ブランチ」と「プルリクエスト（PR）」です。
ブランチの概念：作業を「枝分かれ」させる
ブランチは、メインのコードの流れ（mainブランチ）から枝分かれして、独立した作業空間を作り出す機能です。こうすることで、メインのコードを壊さずに、安心して新しい機能開発を進められます。
1. 準備：プロジェクトを自分の PC にコピーする (clone)
まず、GitHub にあるチームのプロジェクトを、まるごと自分のPCにコピーしてきます。
# "リポジトリのURL" の部分を、実際のURLに置き換えてください
git clone [リポジトリのURL]2. 作業ブランチの作成（重要 ⚠️）
チーム開発では、main ブランチ（原本の設計図）を直接編集せず、必ず自分専用の作業ブランチを作成します。
＜今いるブランチの確認方法＞
VSCodeのウィンドウの左下（ステータスバー）を見れば、現在のブランチ名（例: mainやblog/git-final）が常に表示されています。
main ブランチから作業用ブランチを作成するコマンド
# 1. まずはmainブランチに移動し、最新の状態に更新する
git switch main
git pull
# 2. 新しい作業用のブランチを作成して、そこに移動する「作成＋移動のコマンド」
git switch -c blog/新しい記事のブランチ名3. 記事を書き、変更を記録する (add & commit)
新しく作ったブランチ上で、安心して記事の執筆やコードを修正します。作業が一区切りついたら、その変更をローカルリポジトリに記録（コミット）しましょう。
VSCode でファイルを編集する 記事ファイルを作成・編集し、保存 (⌘+S / Ctrl+S) します。
STEP1と同様に、新しく作ったブランチ上でファイルの編集、add、commitを行います。
4. ブランチを GitHub にプッシュする
ローカルで記録したコミットを、GitHubに送信（プッシュ）します。VSCodeの 「Branch の発行」 ボタンや、ターミナルの git push コマンドを使います。
5. GitHub サイトでプルリクエストを作成する
プッシュが完了したら、ブラウザでGitHubのリポジトリページを開きます。「Compare & pull request」 ボタンが表示されているので、これをクリックします。
タイトルと説明を書いて、「Create pull request」 ボタンを押せば、レビュー依頼の作成は完了です。
6. レビューとマージを待つ
プルリクエストが作成されると、チームの他のメンバーが内容を確認し、問題がなければ「マージ」されます。マージされると、あなたの変更が正式にmainブランチに取り込まれます。
7. 重要 ⚠️ ローカルの main ブランチを最新にする
最後に、自分のPCの main ブランチも、GitHubの最新の状態に更新しておきましょう。
この時点では、あなたの PC 上にある main ブランチのコピーは、まだ古いままです。
次に新しい作業を始める前に、この手元のコピーも、GitHubにある最新の原本と同じ状態に更新しておく必要があります。これを怠ると、古い状態から新しい作業を始めてしまい、後々他の人の変更と衝突（コンフリクト）する原因になります。
＜最新の状態へのリセット手順＞
ターミナルで、以下のコマンドを順番に実行します。
mainブランチに移動する
git switch main- GitHub の最新の内容を取得して、手元のブランチに反映する
git pull origin maingit pull を実行すると、GitHub上の最新の main ブランチの内容がダウンロードされ、あなたのPC上の main ブランチが更新されます。 これで、あなたのPCも完全に最新の状態になりました。次の作業に安心して取り掛かれます！
よくあるつまずきポイント Q&A
- Q. 間違えてコミットしちゃった！
A. GitHubにpushする前なら、git reset --soft HEAD^ で取り消せます。
- Q. push しようとしたらエラーが出た！(rejected)
A. リモートのmainブランチが更新されている可能性があります。以下の手順でローカルの作業ブランチを更新してから、再度pushを試してください。
- メインブランチに切り替えます。
git switch main - リモートの最新情報を取得します。
git pull origin main - 作業ブランチに戻ります。
git switch あなたの作業ブランチ名 - 最新の
mainブランチの内容を作業ブランチに取り込みます。git merge main(もしコンフリクトが発生したら、VSCodeの指示に従って解決してください) - 再度プッシュします。
git push origin あなたの作業ブランチ名
まとめ：さあ、Git と GitHub を使いこなそう！
GitとGitHubの基本、いかがでしたか？
- Gitはバージョン管理のツール、GitHubは共有サービス。
- 「3つのエリア」（作業場所、選ぶ場所、記録庫）を意識する。
- init → add → commitで保存、pushでGitHubへアップロード。
- ブランチとプルリクエストで安全にチーム開発。
今は難しいと感じても、使っていくうちに必ず慣れると信じています。
新しいことを覚えていくのってワクワクしますね！
※本記事は、ジーアイクラウド株式会社の見解を述べたものであり、必要な調査・検討は行っているものの必ずしもその正確性や真実性を保証するものではありません。
※リンクを利用する際には、必ず出典がGIC dryaki-blogであることを明記してください。
リンクの利用によりトラブルが発生した場合、リンクを設置した方ご自身の責任で対応してください。
ジーアイクラウド株式会社はユーザーによるリンクの利用につき、如何なる責任を負うものではありません。