MENU
  1. ホーム
  2. 生成AI
  3. GitHubガイド～導入から実際の操作、過去データの復元まで～

GitHubガイド～導入から実際の操作、過去データの復元まで～

生成AI

このガイドでは、プログラミングやパソコン操作が得意ではない方でも迷わないよう、GitHubの使い方を解説します。

イメージ

GitHubの操作は、「ゲームのセーブデータ」や「日記帳」にとてもよく似ています。

  • パソコンでの作業 ＝ ノートに文字やイラストを描くこと
  • コミット（セーブ） ＝ 「〇月〇日：ここまで書いた！」と日付とメモを書いて写真をパシャリと撮ること
  • プッシュ（送信） ＝ その写真付き日記を「ネット上の安全な金庫（GitHub）」にバックアップしておくこと

【準備編】1度だけ行うセットアップ

最初に一度だけ行う準備です。3つのツールを用意します。

【1】GitHub（ネットの金庫）を作る
       ↓
【2】Git（歴史を記録する透明なカメラ）をパソコンに入れる
       ↓
【3】VS Code（文字を書く作業机）をパソコンに入れる

ステップ1：GitHubのアカウントを作る（ネット上の準備）

ネット上にあなたの作品を置く「あなた専用の金庫（アカウント）」を作ります。

  1. 公式サイトを開く: ブラウザ（Google Chromeなど）で https://github.com を開きます。
  2. 登録ボタンを押す: 画面右上にある 「Sign up」（新規登録）を押します。
  3. 情報を入力する:
    • メールアドレス: あなたのメールアドレス
    • パスワード: 忘れない英数字
    • ユーザー名: 世界で1つだけの名前（例: my-cafe-taro）
  4. メールを確認する: 登録したメールに8桁くらいの数字（認証コード）が届くので、それを画面に入力します。

ステップ2：「Git」を入れる（パソコンにカメラを取り付ける）

パソコンの中で「変更の歴史」を自動記録してくれる仕組み（Git）をインストールします。

  1. https://git-scm.com にアクセスし、「Download for Windows」（Macの方は Mac用）を押します。
  2. ダウンロードされたファイルを開きます。
  3. 設定画面での操作:
    • 英語の設定画面が10回ほど出てきますが、すべて何も変えずに「Next」だけを連打して最後まで進めてください。
    • 最後に 「Finish」 を押せば完了です。

ステップ3：「VS Code」を入れる（作業するアプリを入れる）

文字を書いたり、ボタンポチポチでGitを操作したりするための無料アプリです。

  1. https://visualstudio.com（または https://code.visualstudio.com）を開きます。
  2. 青い 「Download for Windows / Mac」 を押してインストールします。
  3. 日本語にする手順:
    • アプリを開いたら、画面の左端にある 「四角が4つ集まったアイコン（拡張機能）」 を押します。
    • 検索欄に Japanese と入力します。
    • 「Japanese Language Pack for Visual Studio Code」 の横にある青い 「Install」 ボタンを押します。
    • 右下に出る 「Change Language and Restart」 を押すと、アプリが再起動して画面が日本語になります。

【実践編1】最初のファイルを作ってネットに保存する

【具体例】「カフェのホームページ（git-test）」 というフォルダを作り、最初の文章を書いてネットに保存してみましょう。

① パソコンにフォルダを作る

  1. パソコンのデスクトップ（または書類フォルダ）の何もない場所で右クリックします。
  2. 「新規作成」 ＞ 「フォルダ」 を選びます。
  3. 名前を半角英数字で git-test にします。

② VS Codeでフォルダを開いて、履歴記録をスタートする

  1. VS Code を起動します。
  2. 左上のメニューから 「ファイル」 ＞ 「フォルダを開く」 を選び、先ほど作った git-test フォルダを選択します。
  3. 画面左側の縦並びアイコンから、上から3番目の 「フォークのようなマーク（3つの点と線）」 をクリックします。 これが「歴史記録（Git）」のボタンです。
  4. 画面に表示される青い 「リポジトリを初期化」 ボタンを押します。 これで、このフォルダの中で「セーブ機能」が有効になりました！

③ ファイルを作って「セーブ（コミット）」する

  1. 左上のメニューから 「ファイル」 ＞ 「新しいテキストファイル」 をクリックします。
  2. 画面に次のように文字を打ち込んでみましょう：ようこそ！〇〇カフェへ。 美味しいコーヒーとケーキを用意しています。
  3. キーボードの Ctrl + S（Macは Cmd + S）を押して保存します。
    • ファイル名： index.html
    • 保存場所： 先ほどの git-test フォルダの中
  4. セーブ（コミット）の手順:
    • 左側の 「フォークマーク（Gitボタン）」 を押します。
    • マークの上に 「①」 という数字がついています（「1つのファイルが新しく追加されたよ」という意味）。
    • 画面の上のほうにある 「メッセージ」 という入力欄に、セーブの理由を書きます。
      • 入力例： お店のトップページ作成
    • そのすぐ下にある青い 「コミット」 ボタンを押します。
    • これで、パソコンの中に「1回目のセーブデータ」が作られました！

④ GitHubへ「送信（プッシュ）」する

  1. 「ブランチを公開」 という青いボタンが表示されるので、それを押します。
  2. 上から選択肢が出るので、「GitHubのプライベートリポジトリを公開」 を選びます。 「プライベート」を選ぶと、自分だけが見られる安全な状態で保存されます。
  3. 画面の案内に従ってログインを許可します：
    • 「GitHubへのサインインを許可しますか？」 ➔ 「許可（Continue）」 を押す。
    • ブラウザが開くので、緑色の 「Authorize github」 ボタンを押す。
  4. VS Codeに戻り、画面下のぐるぐるマークが消えたらアップロード完了です！

【実践編2】2回目以降の更新（修正して反映）

【具体例】「カフェの営業時間を追加して更新する」 作業をやってみましょう。2回目からはログインなどの面倒な設定は一切ありません！

【ステップ1】文字を修正して保存（Ctrl + S）
       ↓
【ステップ2】メッセージを書いて「コミット（セーブ）」
       ↓
【ステップ3】「変更を同期（送信）」ボタンを押す
  1. ファイルを修正する:VS Codeで index.html を開き、3行目に文章を追加します。ようこそ！〇〇カフェへ。 美味しいコーヒーとケーキを用意しています。 営業時間：10:00〜19:00（水曜定休）
  2. 普通に保存する: Ctrl + S を押します。
  3. セーブ（コミット）する:
    • 左の 「フォークマーク（Gitボタン）」 を押します。
    • メッセージ欄にセーブ内容を書きます。
      • 入力例： 営業時間を追記
    • 青い 「コミット」 ボタンを押します。
  4. ネットに送信する:
    • コミットボタンがあった場所に、青い 「変更を同期」 ボタンが現れるので、それを押します。
    • ポップアップが出たら 「OK」 を押します。

これだけで、ネット上のGitHubにも「営業時間が追記された最新状態」が反映されます！

🕒 【応用編】過去の状態に戻す

【具体例】「間違えて営業時間を消してしまった！1回目の状態（トップページ作成時）の文章に戻したい」 という場合の安全な復元方法です。

1. 過去の履歴（タイムライン）を見る

  1. VS Codeで index.html を開いた状態にします。
  2. 画面の左下（ファイル一覧が表示されているパネルの下側）にある 「タイムライン（Timeline）」 というアコーディオンをクリックして開きます。
  3. 過去のセーブ履歴が下から順に並んでいます：
    • 営業時間を追記（最新）
    • お店のトップページ作成（1回目）

2. 過去の文章を取り出す

  1. タイムラインの中の 「お店のトップページ作成」 をクリックします。
  2. 画面が左右2つに分かれます：
    • 左側: 1回目の過去の状態（営業時間が無い状態）
    • 右側: 現在の状態
  3. 左側の過去のテキストをマウスでなぞってコピー（Ctrl + C）します。
  4. 右側の現在のテキストを消して、コピーしたテキストを貼り付け（Ctrl + V）し、保存（Ctrl + S）します。

3. 「元に戻した」ことをセーブ＆送信する

  1. 左の 「フォークマーク（Gitボタン）」 を押します。
  2. メッセージ欄に次のように書きます。
    • 入力例： 間違えたので1回目の状態に書き戻した
  3. 青い 「コミット」 ボタンを押します。
  4. 青い 「変更を同期」 ボタンを押します。

なぜこの方法が安全なの？

過去の履歴を消してリセットするのではなく、「過去の文章を貼り付け直した」という新しいセーブデータを作るため、データが事故で消える危険が全くありません。

よくある疑問とつまずきポイント

  • Q. メッセージには何を書けばいいの？
    • A. 後から自分で見て「どんな変更をしたか」が分かれば何でもOKです！（例：「写真差し替え」「誤字の修正」「電話番号追加」など）
  • Q. 「コミット」と「プッシュ（同期）」の違いは？
    • A. コミット ＝ パソコンの中（自分の手元）でのセーブ。
    • A. プッシュ ＝ ネット（GitHub）への送信。パソコンが壊れてもGitHubに残るようにするために最後に行います。
  • Q. エラーが出たらどうすればいい？
    • A. 基本的に、青いボタン（「変更を同期」「ブランチを公開」など）の表示に従っていけば解決します。画面右下に出てくるポップアップ通知で「許可」や「OK」を押して進めましょう。
生成AI