「AIにコードの修正を任せたら、一度に大量のファイルが書き換わって、どこがどう変わったのか分からなくなった」
「ファイルのコピーを繰り返して、気づけば『ファイナル』『ファイナル2』だらけでどれが最新か分からない」
そんな状態になっていませんか。
結論から言うと、Git・GitHubの使い方は、黒い画面でコマンドを打たなくてもCursorやVS Codeのクリック操作だけで完結します。
この記事では、バージョン管理が必要な理由から、GitとGitHubの違い、エディタでの初期設定とコミット、GitHubへのアップロードまでを4つのステップで解説します。
読み終えるころには、AIにどれだけコードを書き換えられても迷子にならない状態が手に入ります。
本記事は、コーディングを中心に400件以上の案件に関わり、デイトラWeb制作コースのマネージャーも務めるはにわまんによる動画解説をもとにしています。
・AI時代のコーダーにバージョン管理が必要になる理由
・GitとGitHubの違いと、覚えるべき3つの基本動作（ステージング・コミット・プッシュ）
・Cursorでリポジトリを初期化し、最初のコミットを作るまでの手順
・数クリックでGitHubへアップロードし、日々の開発を回すルーティン
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
AI時代のWeb制作にGit・GitHubが必須になる理由
動画の冒頭で示されるゴールは明確です。
AIに指示を出してコードが大量に書き換わってしまっても、いつもの開発画面から数クリックで1秒前、あるいは昨日の状態に戻せる状態。
さらに、難しいコマンドを1つも打つことなく、作ったWebサイトのデータを一瞬でGitHubにバックアップできる状態です。
Web制作やAIを使ったサイト開発をしていると、次のような悩みに直面します。
- AIにコードの修正を任せたら、一度に大量のファイルが書き換わってどこがどう変わったか分からなくなった
- ファイルのコピーを繰り返し、「ファイナル」「ファイナル2」のようにどれが最新か分からないファイルだらけになっている
- Git・GitHubが大事なのは分かるけれど、黒い画面で難しいコマンドを叩くイメージがあって、自分には無理だと諦めてしまった
これらは、これからコーディングを仕事にしたい人や、個人でLPを作りたい人が必ず直面する悩みです。
Gitの学び方はいろいろありますが、黒い画面でコマンドを打つことに抵抗を感じる方も多いはずです。
ここは安心してください。
CursorやVS Codeのようなエディタであれば、普段の開発画面のままクリック操作だけでGit管理ができるようになります。
動画ではCursorをベースに、エディタとGitHubの連携を確認していきます。
この記事を読めば、Gitを「よく分からない面倒な道具」ではなく、自分のサイトを安心して育てる最強の味方にすることができます。
紹介する流れは次の4ステップです。
- STEP1：なぜAI時代のコーダーにバージョン管理が必要なのか
- STEP2：GitとGitHubの違いと3つの基本動作
- STEP3：エディタでの初期設定と初めてのセーブ
- STEP4：数クリックでGitHubへアップロードする方法と日々のルーティン
動画の最後には、実際に手を動かして学べる実践課題も用意されています。
AI機能が標準搭載されたコードエディタです。VS Codeをベースに作られているため画面構成やGit連携の操作はVS Codeとほぼ同じで、この記事の手順はVS Codeでもそのまま使えます。
STEP1：なぜAI時代のコーダーにバージョン管理が必要なのか
バージョン管理とは、一言で言うとファイルの変更履歴を記録して、いつでも過去の状態に戻せる仕組みのことです。
WordやExcelの「元に戻す」機能を使ったことがあるかと思います。
バージョン管理は、あの機能を何倍も強力にしたものだとイメージしてください。
言い換えれば、自分の好きなタイミングでゲームのセーブポイントを作れる仕組みです。
AIコーディングは便利だが「戻せない」と怖い
特に今の時代は、CursorなどのAIを使ってコーディングしていると、たった1回の指示で数百行のコードや複数のファイルが一瞬で書き換わることがあります。
これは便利な反面、少し怖い部分もあります。
もしAIが予期せぬバグを出したときに、バージョン管理をしていないとどこをどう直したらいいか分からなくなり、最悪の場合は最初から作り直しということになります。
Gitを導入していれば、AIが何をどう変えたのかの差分を視覚的に確認して、必要ならいつでも昨日の正常な状態に戻すことができるようになります。
プログラマーだけの道具ではなく「データの防衛策」
バージョン管理は、単なるプログラマーの道具ではありません。
今後のコーダーや、AIを使って個人でLPやサイトを作りたい人にとって、データを安全に守るための防衛策にもなります。
「面倒なルール」ではなく「自分のサイトを安心して育てる味方」と捉えることが、Gitを学ぶ上で挫折しないためのコツです。
変更前と変更後を比べて、どの行が追加・削除・修正されたかを表したものです。エディタのソース管理画面では、追加された行が緑、削除された行が赤で色分けされて表示されるため、AIが書き換えた箇所を目で追えます。
STEP2：GitとGitHubの違いと3つの基本動作
「GitとGitHubって同じじゃないの？」と混同されがちですが、明確に違います。
Gitは「自分のノートに書く日記」、GitHubは「そのクラウドバックアップ」
例えるなら、Gitは自分のノートに書く日記です。
自分のPCの中だけでバージョン管理をするものになります。
一方でGitHubは、その日記をクラウドにバックアップしてみんなに見せられるサービスです。
インターネット上のリモート環境でコードを保管するようなイメージになります。
覚えるのは「ステージング・コミット・プッシュ」の3つだけ
この連携において、私たちが覚える動作は次の3つです。
| 動作 | 意味 | カメラで例えると |
|---|---|---|
| ①ステージング | これから記録する変更を選ぶ | 写真に撮る対象をカメラの前に並べる |
| ②コミット | 選んだ変更をその時点の記録としてセーブする | シャッターを押して写真を保存する |
| ③プッシュ | ローカルで作ったデータをGitHubに送って同期する | その写真をクラウドにアップロードする |
本来はこれらを実行するために難しいコマンドを使うのですが、Cursorならすべて画面のクリックだけで終わらせることができます。
Gitには他にもいろいろな操作があり、最初から全部覚えようとすると難しくなります。
まずはステージング・コミット・プッシュという3つの操作だけを押さえておけば十分です。
なお、この辺りの概念をもう少し体系的に学びたい方は、オンライン学習サービスのデイトラWeb制作コースでも実務に直結する形で整理して解説しています。
インターネット上に置かれたコードの保管庫のことです。GitHubに作るリポジトリがこれにあたります。対して自分のPC内にあるものを「ローカルリポジトリ」と呼び、プッシュはローカルからリモートへ変更を送る動作を指します。
STEP3：Cursorでの初期設定と初めてのコミット
ここからは実際に手を動かしていきます。
①練習用のフォルダを用意してCursorで開く
まずはGitを練習するためのフォルダを用意しておきましょう。
自分のパソコン上のどこでも構いません。動画では「git-practice」というフォルダを用意しています。
この中には何も入っていない状態です。
次にCursorを立ち上げ、「ファイル」→「開く」を選択して、先ほど作成したgit-practiceを開きます。
②「リポジトリを初期化する」をクリックする
注目してほしいのは、左側のパネルの中にある「ソース管理」のアイコンです。こちらを選択してみてください。
まだGitを使っていないフォルダの場合は、パネルの中に「リポジトリを初期化する」というボタンが大きく表示されています。
こちらをクリックしてみてください。
そうすると、これだけで先ほど作成したgit-practiceの中身がGitの追跡対象という形になります。
本来であれば黒い画面を使いながらコマンドを入力していく形になるのですが、Cursorのようなコードエディタを使えば、この画面上でポチポチするだけでソースの管理ができるようになります。
③ファイルを追加してステージングする
続いて、ファイルを追加して履歴に加えてみましょう。
新しいファイルを「index.html」という名前で追加し、今回は簡単に「テスト」と入力して保存しておきます。
改めてソース管理のパネルに移動すると、先ほどは何もなかったところに、index.htmlを追加したことで「変更」の対象としてindex.htmlが追加されていることが分かります。
こちらを履歴の対象にしたい場合は、「変更をステージ」のプラスのアイコンを押します。
押すとステージングされた状態になり、表記としても「変更」の中から「ステージされている変更」というところに移動していることが分かります。
④コミットして履歴を積み上げる
この状態になれば、対象のファイルをコミットすることができます。
上部のメッセージ欄には自由にメッセージを入れて構いませんが、今回は「初回のコミット」としてコミットボタンを押します。
これで自分のローカルPCへのセーブが完了した状態です。
下の方を見ると、グラフの中に「初回のコミット」が1つ積み上がっていることが分かります。
もう1回変更して確認してみましょう。
「テスト2」と入力して保存すると、また変更の対象となりますので、ステージングして「2回目のコミット」としてコミットします。
すると、このように履歴が積み上がっていく形になります。
それぞれの履歴を見ると、どういった変更をしたのかというところも視覚的に分かりやすくなっています。
Gitの管理下に置いておくと変更した内容をすべて記録してくれるので、適切な場所でコミットしておくと履歴を追いかけることができるようになります。
動画では簡易的に「2回目のコミット」というメッセージを付けていますが、これだと何の変更をしたのかが後から振り返りづらくなります。変更内容を見れば「2を追加した」と分かるものの、コミットメッセージだけを見ても何の変更か分かりません。実際にGitで管理する場合は、何を目的に何の変更をしたのかが後から振り返ったときに分かる名前でコミットしていくと管理しやすくなります。
そのフォルダをGitの管理対象にする操作のことです。コマンドで言うと
git init にあたります。実行するとフォルダ内に管理用のデータが作られ、以降そのフォルダ内のファイル変更が追跡されるようになります。
STEP4：数クリックでGitHubへアップロードする方法と日々のルーティン
ここまでの流れでコミットをしていくと、ソース管理のパネルに「Branch の発行」というボタンが表示されていることが分かります。
これがまさに、GitHubのようなリモートリポジトリと連携するための仕組みです。
こちらを押すと、Cursorのエディタと GitHub をつなげることができるようになります。
しかも黒い画面を使わずに、画面の案内に従って進めていくことができますので、黒い画面が苦手な方でも簡単に連携できます。
①前提：GitHubのアカウントを作成しておく
1つ前提として、GitHubのアカウントを作っておく必要があります。
まだアカウントがない方は、GitHub.comのページからサインアップしてアカウントを作成しておいてください。
②「Branch の発行」からGitHubと連携する
Cursorの画面に戻って「Branch の発行」を押してみましょう。
押してみると「拡張機能がGitHubを使用してサインインしようとしています」というポップアップが出ますので、「許可」を押します。
そうすると8桁のコードが発行されます。
こちらはコピーして手元のメモ帳に貼り付けておきましょう。後で連携するときに使うものになります。
コードを手元に保管できたら「Continue to GitHub」を押して進めていきます。
すると、ブラウザが立ち上がって今ログインしているアカウントが表示されているはずです。
対象のGitHubのアカウントに問題がなければ「Continue」で進めていきます。
そして、先ほど表示されていた8桁のコードを貼り付けて「Continue」で進めます。
「連携しますか」という画面になりますので、アクセスの権限を確認して次に進んでください。
これで連携できましたという形になりますので、この画面は閉じて大丈夫です。
③プライベートかパブリックかを選んでリポジトリを作る
改めてCursorの画面に戻ると、フォルダ名に加えてプライベートリポジトリにするか、パブリックリポジトリにするかという選択があります。
パブリックリポジトリにすると、誰もが閲覧できる公開されたリポジトリになります。
ソースコードを誰もが見られる形で公開してもよければパブリックを選びますが、特定の権限を持った人しか見られない、あるいは自分しか見られない形にしたい場合は、基本的にはプライベートを選んでおくと安心です。
動画ではプライベートリポジトリを押して進んでいますが、すでに「git-practice」という名前のリポジトリが存在していたため、別の名前で作り直しています。
この入力欄はGitHub上でのリポジトリの名前を決める部分で、自由に決めることができます。今回は「git-practice-YouTube」という形で、同じくプライベートリポジトリで作成しています。
すると左下に進捗状況が出て、「正常に発行されました」というメッセージが表示されます。
④GitHub側で反映を確認する
実際に作られたか、GitHubのアカウントを確認していきましょう。
GitHubのアカウントに移動して「Repositories」を開くと、自分のリポジトリをすべて見ることができます。
この中に「git-practice-YouTube」があり、これがCursorと連携して作ってもらったGitHubのリポジトリです。
コミットを見ても「2回目のコミット」ということで、今作成したコードの履歴が反映されていることが分かります。
⑤2回目以降は「変更の同期」を押すだけ
一度連携しておけば、2回目以降は連携の作業は不要になります。
もう1度変更してGitHubに反映する流れを見ていきましょう。
「テスト3」という形に変更して、まずはこれまでと同じように自分のパソコン上で履歴を追加します。
ステージングして「3回目のコミット」としてコミットしておきましょう。
今度は「変更の同期」というボタンに変わっていることが分かります。
こちらを押すとGitHubの方にも同期されるという形になりますので、ボタンを押して動きを確認します。
そしてGitHubのリポジトリの方を見ていくと、今度は「3回目のコミット」ということで、テスト3の内容が反映されていることが確認できました。
以降の流れとしては、次の3つの繰り返しで開発を進めていくことができるようになります。
- ローカルでファイルを編集する
- ローカル上でコミットする
- コミットした履歴の内容を「変更の同期」ボタンからGitHubにも連携する
プライベートリポジトリは自分と許可した人だけが閲覧できる非公開の保管庫、パブリックリポジトリはインターネット上の誰もが閲覧できる公開の保管庫です。クライアントワークのコードや公開したくない情報を含む場合はプライベートを選びます。
実践課題：git-practiceフォルダで一連の流れを再現してみる
ここまでを読みながら、すでに手を動かしていただいた方もいるかもしれません。
まだ手を動かしていない方は、同じように次の流れを実際に試してみてください。
- 「git-practice」というフォルダを作る
- Cursorで開き、ソース管理から「リポジトリを初期化する」を押す
- index.htmlを作成する
- ソース管理でステージングとコミットを行う
- CursorとGitHubのアカウントを連携する
- ローカルの内容をGitHubに同期する
実際に確認してもらえると、より理解が深まります。
一度この流れを通しておけば、AIに大量のコードを書き換えられても、いつでも戻れる状態で開発を進められるようになります。
Git・GitHubの使い方に関するよくある質問
Q. Gitを使うのにコマンド（黒い画面）は必要ですか？
必要ありません。CursorやVS Codeのようなエディタであれば、普段の開発画面のままクリック操作だけでGit管理ができます。本記事で紹介したリポジトリの初期化からGitHubへの同期まで、すべて画面上のボタン操作で完結します。
Q. GitとGitHubは何が違いますか？
Gitは自分のPCの中だけでバージョン管理をする仕組みで、例えるなら「自分のノートに書く日記」です。GitHubはその日記をクラウドにバックアップして共有できるサービスで、インターネット上のリモート環境にコードを保管するものです。
Q. まず覚えるべき操作はどれですか？
ステージング・コミット・プッシュの3つです。ステージングは記録する変更を選ぶ動作、コミットは選んだ変更をその時点の記録としてセーブする動作、プッシュはローカルのデータをGitHubに送って同期する動作です。Gitには他にも多くの操作がありますが、最初はこの3つだけで問題ありません。
Q. リポジトリはプライベートとパブリックのどちらを選べばいいですか？
ソースコードを誰に見られても問題ない場合はパブリック、自分や特定の権限を持った人しか見られないようにしたい場合はプライベートを選びます。迷う場合はプライベートを選んでおくと安心です。
Q. コミットメッセージはどう書けばいいですか？
「何を目的に、何の変更をしたのか」が後から振り返って分かる名前にします。「2回目のコミット」のような連番だけのメッセージだと、履歴を見ても何の変更か分からず管理しづらくなります。
Q. GitHubとの連携は毎回必要ですか？
いいえ、一度連携してしまえば2回目以降の連携作業は不要です。以降は「ローカルで編集→コミット→変更の同期」の繰り返しで開発を進められます。
Git・GitHubをさらに深く学ぶならデイトラ「Web制作コース」
本記事で解説したGit・GitHubの使い方は、独学でも基礎を押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Web制作コース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
AIを使いこなしながら、案件を任せてもらえるコーダーを目指したい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
はにわまん（@haniwa008）
業界歴10年以上の現役フリーランスWeb制作者です。コーディングを中心に400件以上の案件に関わってきました。技術ブログ「HPcode」を運営し、数千人が受講したデイトラWeb制作コースのマネージャーも務めています。
