GitHubのセットアップ・接続をする | SkillhubAI(スキルハブエーアイ)

GitHubのセットアップ・接続をする

GitHubについて知ろう

前のレッスンでは、Gitを使って自分のパソコンの中にセーブポイントを作る方法を覚えました。

でも、こんな不安が残っていませんか?

パソコンが壊れたら、コミットの記録ごと消えてしまうのでは…?

別のパソコンでの作業は、どうすればいい?

仕事で使うGitって、ここからどうしたら良いの?

誰かと一緒に作業したいけど、ファイルをどうやって共有する?

それを解決するのが GitHub(ギットハブ) です。

ローカルとリモートの違い

Webの世界では、自分のパソコンの中を ローカル、インターネット上の保存場所を リモート と呼びます。これはGitでも同じです。

前回は、自分のパソコンの中、つまりローカル環境でのみ作業してきました。
使用していたローカル環境のリポジトリは「ローカルリポジトリ」といいます。

対して、インターネット上に保存場所を作ると、それは「リモートリポジトリ」と呼ばれます。
GitHubは、このリモートリポジトリを提供してくれるサービスです。

ローカルで作ったコミットの記録を、GitHubに送って(push)同期しておくことができます。
逆に、GitHubの内容をローカルに取り込む(pull)こともできます。

【ローカル】自分のPC
  ├── テーマフォルダ
  └── コミットの記録

        ↕ push / pull で同期

【リモート】GitHub(インターネット上)
  ├── テーマフォルダのコピー
  └── コミットの記録のコピー

チームで制作を行っていく際などは、それぞれのメンバーがローカル環境で作業をします。
そして、ローカル環境のリポジトリに保存したデータをサーバー上のリポジトリに反映させ、全員で共有するという形を取ります。
file

GitHubなどのリモートリポジトリへの操作では、インターネット上にデータを送る・受け取るという操作が必要になります。

ですが、それ以外の操作はほぼ同じ。
前回の方法を使う部分も多いですし、それ以外のところもClaude Codeと協力しながら進めることができます。

この記事でできるようになること

  • ローカルのコミット記録をGitHubに保存できる(push
  • GitHubの変更をローカルに取り込める(pull
  • どのパソコンからでも、続きの作業ができる

GitHubの準備をしよう

1. GitHubアカウントを作る

GitHubのアカウントをまだ持っていない場合は、作成しましょう。
すでにお持ちの方はサインアップして、次のステップに進んでください。

https://github.co.jp/にアクセスして、Sign up をクリックします。

https://github.co.jp/

画面の指示に従って、以下を入力してください。
プランの選択画面が出たら Free(無料プラン) を選んでください。

  • メールアドレス
  • パスワード
  • ユーザー名(他の人と重複しないもの)

登録したメールアドレスに確認メールが届きます。
記載されたコードを入力して認証を完了させてください。
file

2. SSH鍵(SSH Key)を設定する

GitHubとローカルを安全に繋ぐために、SSH鍵を設定します。
SSH鍵とは、「このパソコンからのアクセスは本物だ」と証明するための鍵のようなものです。
南京錠(公開鍵)と鍵(秘密鍵)のペアで成り立っていて、南京錠をGitHubに預けておくことで、手元の鍵を持っているパソコンだけが接続できるようになります。

VSCodeを開いて、Claude Codeに以下のように話しかけてください。

  • 「詳しくない」「丁寧に」「やさしく」など注文を付けると、親切に手順を解説してくれます。
  • 最下行のOSは、ご自身のものに合わせてください。
GitHubと接続するためのSSH鍵を設定したいです。
ターミナル操作に詳しくないので、丁寧に手順を教えてください。
使用しているOSはWindowsです。

file

このデモはWindowsで作っているので、Windows版の設定手順が出力されました。
file

手順を見ながら、順番に操作していきます。
file

もし、途中でエラーが出たら何の操作をした時、どんなエラーが出たかをClaudeCodeに送信すると助けてくれます。
例えば、以下はPowerShellを管理者として実行しなかった場合に出るエラーです。
file
file
こんな感じに、的確に回答をくれます。
ターミナル側の操作をするとき「ガイドに書いてある通りにやってもエラーが出る」などで、詰まってしまうことが多いのですが、その場でClaudeCodeに相談できるのが心強いですよね。

Claudeの指示に従って設定を進めましょう。 ブラウザ側操作でGitHubに公開鍵を登録し、接続テストのコード ssh -T git@github.comを打って接続を試します。
file
file

Hi ユーザー名! You've successfully authenticated. という表示が出れば成功です。

3. GitHubでリポジトリを作る

GitHubでリポジトリを作る場合は、あらかじめサイト上でリポジトリを作成します。
最初に、データを置いておく場所を確保するイメージです。

GitHubにログインした状態で、右上の 「+」ボタン をクリックして 「New repository」 を選択してください。
file

リポジトリの作成画面が開きます。 今回の場合は、以下の2ヶ所を設定してください。
file

① Repository name(リポジトリ名)
このリポジトリの名前を設定します。
お好きに設定できますが、テーマ名やサイト名などを使用することが多いです。
今回の場合は練習用なので、それがわかる名称にしても良いですね。

【例】

  • wpedbase
  • edbase
  • skillhubEdbase
  • lessonEdbase など

② Choose visibility
ここはリポジトリを公開するかの設定です。

  • Public:誰でも見られる状態
  • Private:自分だけが見られる状態

練習用なのでPrivateにしておきましょう。

その下にある項目は、今回はすべてチェックを入れずに進めます。
入力できたら 「Create repository」 をクリックしてください。
file
 ↓
file

上記のような画面が表示されたら、リポジトリの作成は完了です。
この画面に表示されている内容はセットアップに使いますので、ブラウザタブはそのままにしておいてください。

4. GitHubのリポジトリと接続

GitHubにリポジトリを作っただけでは、まだローカルとは繋がっていません。
「このフォルダの送り先はここです」という設定が必要です。

その送り先が、リポジトリ作成完了後の画面、ひときわ目立つ部分に表示されているURLです。
SSHタブを選択した状態で表示されるURLをコピーしておいてください。

git@github.com:ユーザー名/リポジトリ名.git

file

ここからはVSCode側からの操作になります。
基本的にはリポジトリ作成完了後の画面にあるコマンド、今回の場合は …or push an existing repository from the command line を順に実行していけば良いのですが、ちょっとわかりにくいですよね。

ローカルで既にリポジトリを作っていたら「mainじゃなくてmasterだけど…」などもあります。
ですので、あなたの環境・状態に合わせて、Claude Codeに案内してもらいながら進めましょう。

VSCodeのターミナルを開いて、Claude Codeに以下のように送信します。
「URLは...」という部分は、先ほどコピーしたあなたのURLに変更してください。

GitHub側でリポジトリを作りました。
URLは `git@github.com:ユーザー名/リポジトリ名.git` です。
ローカルのGitリポジトリをこのリモートリポジトリに繋げてください。

file

GitHubのリポジトリへの接続までは確実にやってくれます。

リポジトリ接続の次は、 push(プッシュ)という、ローカルのコミット記録をGitHubに送る操作が必要になります。

上のプロンプトで一気にpushまで行ってくれる場合は確認が出ます。
Yesを選択して、送信してもらいましょう。
file

そこまでやってくれなかった…という方は、追加でメッセージを送信すると実行してくれます。

接続したGitHubにpushもお願いします。

なお、初めてpushするときは、ブラウザが自動で開いてGitHubの認証画面が表示される場合があります。
「Authorize」 と書かれたボタンをクリックして認証を完了させてください。

pushが完了したら、Claude Codeが報告してくれます。
file

GitHubのリポジトリページをブラウザで開く、開いたままの方はリロードしてみてください。
ローカルにあったファイルとコミットの記録がそのまま反映されているはずです。
file

これでリモートリポジトの作成と、データの共有は完了です。