第1回
GitHub
コードの保存・管理・共有ツール
世界1億人以上のエンジニアが使うコード管理の基本ツール。リポジトリ・コミット・ブランチ・プルリクエストの概念から、基本コマンドまで丁寧に解説します。
初心者向け 開発ツール入門シリーズ
現代のWeb開発に
欠かせない3つのツール
GitHub・Vercel・Supabaseの違いと役割を、図解と実例でわかりやすく解説。 この3つを使いこなせば、アイデアを無料でWebアプリに変えられます。
GitHub
Vercel
Supabase
3ツールの連携イメージ
コードを書いてから公開されるまで
3つのツールはそれぞれ違う役割を持ち、連携して「フルスタックWebアプリ」を支えます。
Supabase
データ設計
DB・認証・
APIを準備
APIを準備
Frontend
コーディング
Next.js / React
でUI作成
でUI作成
GitHub
コード管理
git push で
クラウド保存
クラウド保存
Vercel
自動デプロイ
Pushを検知して
自動で公開
自動で公開
完成
Webアプリ公開
世界中からアクセス可能に
記事一覧
3つのツールを1記事ずつ徹底解説
各ツールの役割・機能・使い方・料金プランをわかりやすくまとめました。
3ツール比較
何が違うの？一目でわかる比較表
それぞれの役割と得意領域を比較しました。全部一緒に使うのが最強です。
| 比較項目 | 🐙 GitHub | ▲ Vercel | ⚡ Supabase |
|---|---|---|---|
| 主な役割 | コード管理・共有 | デプロイ・公開 | DB・バックエンド |
| 無料プランあり | ✓ | ✓ | ✓ |
| データを保存できる | コードのみ | ✗ | ✓ DB全般 |
| 自動デプロイ | Actions経由 | ✓ 全自動 | ✗ |
| ユーザー認証機能 | ✗ | ✗ | ✓ |
| オープンソース | ✓ | ✗ | ✓ |
| サーバー不要 | ✓ | ✓ | ✓ |
| 日本語ドキュメント | ✓ あり | 一部あり | 一部あり |
おすすめスタック構成
3ツールを組み合わせた
「モダンWebスタック」
スタートアップや個人開発者が最もよく使う構成です。全て無料で始められます。
フロントエンド層
デプロイ
▲ Vercel
auto-deploy on push
UI Framework
⚛ Next.js / React
SSR + CSR
コード管理層
Git ホスティング
🐙 GitHub
version control
バックエンド層
データベース
🗄️ Supabase PostgreSQL
relational DB
認証
🔐 Supabase Auth
OAuth + email
ストレージ
🗂️ Supabase Storage
images, files
よくある質問
FAQ
GitHubがないとVercelは使えませんか？
GitLabやBitbucketでも連携可能です。また、Vercel CLIを使えばGitなしでも直接デプロイできます。ただし実際の開発ではGitHub連携が最もスムーズで一般的です。
全部無料で使えますか？
はい、3つとも個人・学習用途であれば無料プランで始められます。GitHub Free、Vercel Hobby、Supabase Freeを組み合わせて、本格的なWebアプリを0円で作ることが可能です。
SupabaseとVercelを一緒に使う場合、どこから始めればいいですか？
おすすめの順番は「① GitHubアカウント作成 → ② Supabaseでプロジェクト作成・DBスキーマ設計 → ③ Next.jsプロジェクト作成・コーディング → ④ GitHubにpush → ⑤ VercelでGitHubリポジトリを連携してデプロイ」です。
SupabaseはFirebaseと何が違いますか？
最大の違いはデータベースの種類です。SupabaseはPostgreSQL（SQL・リレーショナル）、FirebaseはFirestore（NoSQL）を使います。SQLに慣れているエンジニアや、複雑なデータ構造が必要な場合はSupabaseが有利です。またSupabaseはオープンソースで自前ホスティングも可能です。
プログラミング初心者でも使えますか？
3つともGUIが充実しており、基本的な操作はコマンドなしでも可能です。特にVercelはGitHubと連携するだけで自動デプロイが動きます。Supabaseも管理画面でテーブル作成・データ操作が視覚的にできます。ただしフロントエンド開発（HTML/CSS/JS）の基礎は必要です。