GitHub超入門-アカウント作成から初pushまでゆっくりガイド
GitHubは「見るだけ。DLするだけ」からの卒業を目指して、利用しながら理解する第一歩の記録
初回公開日
最終更新日
Gitは少し学んでGitHubも参照したり、DLをしたりで利用はしているけど、アカウントをしっかり運用した経験はありません。そこで、学び直しも含めて「GitHubって何？」からはじめて、しっかり理解してアカウント運用できるようになりたいと思います。DELOGsではこの先、Next.jsで作成した各パーツについてはGitHubで公開していきたいと考えています。
今回は、入門ということで、アカウント作成〜初Pushまでの記録をまとめてました。
1.GitHub って何？ ――わからないまま使い始めてイイの？
GitHubはなんとなくGitの受け皿として用意された環境程度の認識でした。そもそもどんな利点があるのか？ それをまとめます。
Git と GitHub、どう違う？
超ざっくり要約
- Git = ローカルでも動く “履歴管理エンジン
- GitHub = その履歴を クラウド + SNS 機能 でホスティングするサービス
| Git | GitHub | |
|---|---|---|
| 正体 | 分散型バージョン管理システム (ソフト) | Git リポジトリを保管・共有するクラウド (Web サービス) |
| 保存場所 | 自分の PC（ローカル） | GitHub 社のサーバ（リモート） |
| 主な役割 | 変更履歴を記録・ロールバック | コード共有・レビュー・自動化・ポートフォリオ |
| ネット接続 | なくても OK | 基本的に必要 (HTTPS/SSH) |
| 例えると | Excel | Google スプレッドシート |
Gitだけでもブランチの機能でバージョン管理ができて、一人開発だととても便利です。ローカル保存なので安心感もあると思います。
なのでGitHubの必要性を感じていない人もいるかと思います。しかし、次のような利点がGitHubにはあります。
GitHubのここがスゴイ
| 利点 | 私の解釈 | 例 | |
|---|---|---|---|
| 1 | クラウドでバックアップ | PCが壊れてもコード無傷 | git clone だけでリカバリ |
| 2 | Pull Request でレビュー | 差分 + コメントで学びやすい | 先輩の指摘を赤ペン先生感覚 |
| 3 | Issue でタスク管理 | バグも TODO もコード横に貼れる | バグ報告 → Fix 流れが一目瞭然 |
| 4 | GitHub Actions で自動化 | 差テスト・デプロイを“時間外実験” | push したらサイトが勝手に更新 |
| 5 | OSS の宝庫 | 世界中のサンプル & ライブラリが無料 | 「React の良例ない？」→ Star 1k 超えリポ |
| 6 | ポートフォリオ化 | URL 一つで“実力証明書” | 面接：「このコミット履歴をどうぞ」 |
まとめると
Git と GitHub は別モノ？
Git = 変更履歴を追える“道具”、 GitHub = その履歴を置く“クラウド倉庫”。
Git が難しそう
最初は 3 コマンド(add→commit→push)だけ覚えればOK。
一人開発でも必要？
過去バージョンへ戻る保険” が一瞬で手に入る。
Git = 変更履歴を追える“道具”、 GitHub = その履歴を置く“クラウド倉庫”。
Git が難しそう
最初は 3 コマンド(add→commit→push)だけ覚えればOK。
一人開発でも必要？
過去バージョンへ戻る保険” が一瞬で手に入る。
調べるとGitHubには色々と便利な機能があるみたいですが、その辺は使いながら覚えていきたいと思います。
それでは早速アカウントを作成していきます。私の環境はmacOS (Apple Silicon) / ターミナル (zsh)になりますので、予めご了承ください。
2.アカウント作成
アカウント情報の入力
まずは、https://github.com/signupを開きます。
上記のような画面で必要情報を埋めます。
Email：独自ドメインでも OK。後で公開メールにする必要はありません。
Password：15 文字以上 または 8 文字以上＋数字＋小文字 が条件。記号も混ぜて強力に。
Username：英数字とハイフン（-）のみ。先頭と末尾にハイフンは使えません。一意の公開情報になります。後から変えると URL が変わる→リンク切れのリスク。慎重に！
Country/Region：日本在住なら "Japan"。課金明細住所などに利用されます。
Email preferences：プロダクトニュースを受信するか、不要ならチェックせずに。
Password：15 文字以上 または 8 文字以上＋数字＋小文字 が条件。記号も混ぜて強力に。
Username：英数字とハイフン（-）のみ。先頭と末尾にハイフンは使えません。一意の公開情報になります。後から変えると URL が変わる→リンク切れのリスク。慎重に！
Country/Region：日本在住なら "Japan"。課金明細住所などに利用されます。
Email preferences：プロダクトニュースを受信するか、不要ならチェックせずに。
つづいて「視覚パズル」
次に地味に面倒なパズルを入力します。
上記で視覚パズルか音声かを選択します。私は視覚パズルを選択しましたが、なんと5枚も画像を選択するクイズがありました。内容は問題あるかもしれないので省略します。
メールで認証コードを受け取る
パズルというかクイズに正解すると、最初にアカウント情報で入力メールアドレス宛てに、メールで認証コードが送られてきます。
画面は認証コード入力画面になるので、メールの認証コードを入力します。
完了
認証コードの入力が終わるとログインできるようになります。
3.SSH キーを作成して GitHub に登録
SSHキーを登録しないと、Push時に毎回トークン入力が必要
HTTPS リモートを使うと、2021 年以降はパスワードの代わりに Personal Access Token (PAT) を入力する仕様に変わりました。
- ターミナルで git push するたびに URL と長いトークンをコピペ ⇒ 地味にツラい…
- macOS の credential ヘルパーがキャッシュしてくれる場合もありますが、期限切れ→再入力 が発生します。
例：HTTPS で push したときのプロンプト*
zsh
1$ git push origin main
2
3Username for 'https://github.com': delogs-jp
4Password for 'https://delogs-jp@github.com': ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
5remote: ...ポイント: ghp_ で始まる文字列が Classic Personal Access Token（PAT）です。2024 年以降に発行した“細粒度トークン”は github_pat_ プレフィックスになりますが、どちらも HTTPS 接続時にパスワード代わりに入力 する認証情報です。
毎回この長い PAT を貼り付けるのは正直しんどい……。この手間をなくすのがSSH キー登録です。
ローカルPCでSSHキーを作成
SSHキーの作成コマンドは下記の通りです。パスフレーズの入力が必要になりますので、用意しておいてください。
zsh
1$ ssh-keygen -t ed25519 -C "<your@email>" -f ~/.ssh/github_ed25519
2
3Generating public/private ed25519 key pair.
4Enter passphrase for "/xxxxx/xxxxx/.ssh/github_ed25519" (empty for no passphrase):
5Enter same passphrase again:| オプション | 意味 | メモ |
|---|---|---|
| -t ed25519 | 鍵の種類 = Ed25519 曲線暗号 | 2025 年現在の推奨。RSA より短く高強度 & 生成が速い |
| -C | コメントとしてメールを埋め込む | 複数鍵を管理するとき判別しやすい |
| -f ~/.ssh/github_ed25519 | 保存ファイル名 | .pub 付きが公開鍵、なしが秘密鍵 |
ed25519 とは？
Curve25519 をベースにした楕円曲線暗号方式。2048bit‑RSA 相当の強度を 256bit で実現し、鍵も署名もコンパクト。
Curve25519 をベースにした楕円曲線暗号方式。2048bit‑RSA 相当の強度を 256bit で実現し、鍵も署名もコンパクト。
完了すると、
~/.ssh/github_ed25519（秘密鍵）と~/.ssh/github_ed25519.pub（公開鍵）が出力されます。秘密鍵はローカルからSSH接続する際に利用して、公開鍵はGitHub側へ登録します。GitHub に公開鍵を登録
先に、簡単なので公開鍵をGitHub側へ登録してしまいます。下記のようにGitHub → Settings → SSH and GPG keys → New SSH keyを開き登録していきます。
- GitHubにログインします。右上のアイコンをクリックします。
- 表示されるアカウントメニューの中盤くらいの「Setting」をクリックします。
- 左に表示されるメニューの中盤くらいの「SSH and GPG keys」をクリックして表示される画面の「New SSH key」をクリックします。
- するとSSHキーの設定画面になります。ここに先ほど作成した
~/.ssh/github_ed25519.pubの内容を貼り付けていきます。
Title に github_ed25519 など識別しやすい名前
Key type はデフォルトの “Authentication Key” のままで OK。もう一つの “Signing Key” はコミット署名用。push/pull の認証には不要です。
Key フィールドにローカルPCで作成した
Key type はデフォルトの “Authentication Key” のままで OK。もう一つの “Signing Key” はコミット署名用。push/pull の認証には不要です。
Key フィールドにローカルPCで作成した
~/.ssh/github_ed25519.pubを開いて、内容をそのままコピペします。
入力が完了したら「Add SSH key」をクリックします。一度、GitHub管理画面のパスワードの入力を求められますので、入力して完了です。- SSHキーの設定が完了すると下記のようになります。
GitHubへテスト接続
さきほど作成した秘密鍵を利用してGitHubへテスト接続します。
下記のように
-iオプションをつけて、-T git@github.comでssh接続すればテスト接続できて、GitHubに設定した公開鍵が有効になっていることが確認できます。zsh
1ssh -i "~/.ssh/github_ed25519" -T git@github.comzsh
1Enter passphrase for key '/xxx/xxx/.ssh/github_ed25519':
2Hi delogs-jp! You've successfully authenticated, but GitHub does not provide shell access.successfullyというメッセージが返ってきて、接続できていることがわかります。ちなみに..
but GitHub does not provide shell access. は 「本人確認は OK。でも GitHub の SSH サーバは Git 専用だから、Bash などのシェルは開けませんよ」 という定型文です。テスト接続に限らず、認証が通ったときは必ず表示されます。
but GitHub does not provide shell access. は 「本人確認は OK。でも GitHub の SSH サーバは Git 専用だから、Bash などのシェルは開けませんよ」 という定型文です。テスト接続に限らず、認証が通ったときは必ず表示されます。
4.ssh-agent に秘密鍵を登録（macOS）
この章は、macOSでの話になります（windows環境までは調査できず、すみません）。
せっかく下記でパスフレーズなしでSSH接続する設定について学んだので、その方法でやってみたいと思います。
~/.ssh/config に設定を追加
今回のGitHub用の秘密鍵をつかったSSH接続の設定を追記します。
zsh
1vi ~/.ssh/configplaintext : config
1Host github-delogs
2 HostName github.com
3 User git
4 IdentityFile ~/.ssh/github_ed25519
5 AddKeysToAgent yes
6 UseKeychain yes
7 IdentitiesOnly yes- Userは
gitにしておく必要があります。GitHub の SSH ポートは「git 以外のユーザー名」を受け付けないため、必ず認証失敗（Permission denied (publickey).）。
秘密鍵をキーチェーンに保存
zsh
1ssh-add --apple-use-keychain ~/.ssh/github_ed25519これを実行するとパスフレーズの入力を求められるはずですが、さきほどテスト接続で
ssh -i "~/.ssh/github_ed25519" -T git@github.comを実行したときにパスフレーズを入力したためか、特にパスフレーズなしで登録できました。一応、リストのチェックをします。
zsh
1ssh-add -lGitHubの秘密鍵がリストアップされていれば問題ないです。
一応、設定したホスト名でテスト接続します。
zsh
1ssh -T git@github-delogs
2
3Hi delogs-jp! You've successfully authenticated, but GitHub does not provide shell access.先ほどと同じメッセージが出て、パスフレーズの入力なしで接続できました。これで準備完了です。
5.新規リポジトリを作成 → 初 commit & push
GitHub管理画面でリポジトリの作成
まずは、GitHub管理画面で受け皿となる空のリポジトリを作成します。
- 管理画面にログインして最初に表示される「Dashboard」の「Create repository」をクリックします。
- リポジトリ作成画面が表示されるので必要項目を入力します。
| フィールド | 何を入れる？ | 迷わないポイント |
|---|---|---|
| Owner | ドロップダウンで 個人アカウント か Organization を選択 | チーム開発なら Org、個人ならデフォルトのまま。後から移動も可能ですが権限管理が変わるので慎重に。 |
| Repository name * | プロジェクト名（例: hello-github） | ハイフン可・大文字不可。短く覚えやすい ＋ 他リポと被らない が吉。 |
| Description (optional) | “何するリポ？” を 1 行で | 空でも OK。日本語もOK。公開リポなら README にも書くので気楽に。 |
| Public / Private | 公開 or 非公開 | 迷ったら Public（あとから Private へ切替可）。会社コードや秘密ファイルがあるなら Private 一択。 |
| Add a README file | 最初から README を置くか | 今回は OFF（ローカルで作って commit する手順を練習）。GUI 派は ON でも可。 |
| .gitignore template | 無視ファイルリストをテンプレ選択 | 例: Node.js プロジェクトなら Node を選択で *.log/ dist/ など自動生成。今回は None（後でローカルに追加）。 |
| License | OSS ライセンスを付与 | 公開 OSS にするなら MIT や Apache-2.0。ブログ素材などなら None で問題なし。 |
私は今回、下記で実施した内容をそのままアップして公開したいと思っています。Next.jsとshadcnをイントールして、shadcnのボタンを表示させただけのものですが。
入力が完了したら、「Create repository」ボタンをクリックして完了です。
- リポジトリ作成が完了すると下記のような接続や操作のコマンドを表示してくれます。
ローカルでプロジェクトを初期化
下記では、「new-app」という適当なディレクトリで進めてしまいましたが、リポジトリに合わせてローカルPCのディレクトリも「shadcn-install」に変更しています。あわせて
pakage.jsonのnameも同様にしてしました。また
README.mdは事前にテキストエディタ等で編集済みとします。◯プロジェクト・ルートへ移動
zsh
1cd /***/***/***/shadcn-install◯.gitignoreファイルの確認
Next.jsをインストールした際に作成されたほぼそのままですが、下部に記載した
Next.jsをインストールした際に作成されたほぼそのままですが、下部に記載した
.eslintcache以降を追記しています。text
1# dependencies
2/node_modules
3/.pnp
4.pnp.*
5.yarn/*
6!.yarn/patches
7!.yarn/plugins
8!.yarn/releases
9!.yarn/versions
10
11# testing
12/coverage
13
14# next.js
15/.next/
16/out/
17
18# production
19/build
20
21# misc
22.DS_Store
23*.pem
24
25# debug
26npm-debug.log*
27yarn-debug.log*
28yarn-error.log*
29.pnpm-debug.log*
30
31# env files (can opt-in for committing if needed)
32.env*
33
34# vercel
35.vercel
36
37# typescript
38*.tsbuildinfo
39next-env.d.ts
40
41# --- Lint / Build cache ---
42.eslintcache
43.next/cache/
44.turbo/
45
46# --- Logs ---
47*.log.eslintcache：ESLint v8 以降が生成するキャッシュ。差分が大きくなりやすい
.next/cache/：Next.js 13+ から導入されたビルドキャッシュ。巨大化しやすいが再生成可能
.turbo/：Turbopack/TurboRepo を後で導入した時のビルドキャッシュ
*.log（ルート直下）：PM2／Node の実行ログなどを一括で除外（既に一部パターンはあるが catch-all があると安心）
.next/cache/：Next.js 13+ から導入されたビルドキャッシュ。巨大化しやすいが再生成可能
.turbo/：Turbopack/TurboRepo を後で導入した時のビルドキャッシュ
*.log（ルート直下）：PM2／Node の実行ログなどを一括で除外（既に一部パターンはあるが catch-all があると安心）
◯.git が無いことを確認
zsh
1ls -a | grep .git何もなければOKです。もし
.gitがある場合はすでにGit管理を実施中なので次のgit initはぜずに、git remote addから実行するようにしてください。◯初期化してコミット
zsh
1git init
2git add .
3git commit -m "first commit"git init：「このディレクトリを Git でトラッキングするぞ」と宣言する初回セットアップコマンドです。カレントディレクトリ直下に .git/ フォルダ を生成し、Git が必要とするメタデータ（履歴・設定・フックなど）を格納します。既に .git/ があるフォルダで実行すると リモート設定が飛ぶ／履歴が壊れる ことがあるので基本は “一度だけ”
git add：「次のコミットに含める変更をステージ（index）に登録する」 コマンド。
.は「カレントディレクトリを起点に、配下すべて」 を表すパス指定（pathspec）git commit -m "first commit"：commit--ステージ（index）に載っている変更を 1 スナップショットとして永続化。-m--コミットメッセージをインラインで指定（エディタが開かれない）
◯リモートを登録して push
zsh
1git branch -M main
2git remote add origin git@github-delogs:delogs-jp/shadcn-install.git
3git push -u origin maingit branch -M main：現在のブランチ名を “main” へ 強制リネーム（-M は move —force の意味）。最近のデフォルトは main。- 過去のテンプレが master だったり、init.defaultBranch を変えているとズレることがある。- GitHub 上のデフォルトと合わせておくと、余計な設定なしで push できる。
ちなみに、ブランチとは、ひとつの作業ラインをまるごと分岐させる “別タイムライン”のようなものです。切り替えることで、メインとは独立して機能追加や実験ができるGitの機能です。
ちなみに、ブランチとは、ひとつの作業ラインをまるごと分岐させる “別タイムライン”のようなものです。切り替えることで、メインとは独立して機能追加や実験ができるGitの機能です。
git remote add origin：“origin” という名前で GitHub リポ (SSH URL) を登録。git@以降は
~/.ssh/configで作成したエイリアスとgithubアカウント/リポジトリ名.gitgit push -u origin main：① main ブランチを GitHub へ送信 (push)② -u で tracking 関係を設定。 -u (= --set-upstream) を付けると → 以後 git push / git pull だけで OK。- 「ローカル main と、リモート origin/main はペアですよ」と Git に記憶させることができます。
pushが完了すると下記のようにソースコードがGitHubで確認できるようになります。
以上で、今回の作業したかった内容は完了です。アカウント登録 → 鍵生成 → ssh-agent → 公開鍵登録 → push の流れを体感しました。今後は、記事で作成したソースコードをどんどん公開して行きたいと思います。
この記事の執筆・編集担当
DE
松本 孝太郎
DELOGs編集部/中年新米プログラマー
ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。
▼ 関連記事
はじめてのPlaywright-"録画"で体験する E2E テスト入門
ボタンをクリックしているだけで、テストが自動生成。『壊れてないか？』を毎回手動で確かめる作業とおさらば
2025/7/15公開
GitHub設定編：最小構成の CI を動かすまで
GitHub Actions を使った CI（継続的インテグレーション）の最小構成 を体験
2025/7/10公開
Git基本コマンド10選 -はじめてのバージョン管理で開発を加速
これからGitを使い始めるフロントエンド/バックエンド開発者向けに少しだけGitコマンドをDeep Dive
2025/7/9公開
Cursorエディタの設定-Tailwind CSS 公式プラグインの設定
Tailwind CSSを快適に利用するための公式プラグインの導入についてのまとめ
2025/7/4公開