Vercel×Firebaseの組み合わせはウェブ開発のゴールデンルート、らしい？
GASでちょっとしたウェブアプリが作れるようになった今日この頃。
もう少しアプリらしいアプリを作れるようになりたいなぁ…
そう思い立ち、Geminiに相談してみたところ、勧められたのはVercelとFirebaseの組み合わせ。なんでも、ゴールデンルート、らしい。
2つのサービスでアカウントを作って、コードを書いたりデータベースを作ればいいのかな、と手をつけ始めたのですが……。
現実はそう甘くありませんでした。スタートラインに立つためには、想像以上に多くの「周辺知識」が必要でした。
Next.jsとGitHubとGitとターミナルとかの壁
Vercelは、「GitHubにNext.jsのコードをアップすると、それを自動で検知して公開してくれる」 という仕組みのようです。
つまり、Vercelを使いこなすにはそれらの知識がセットで必要になります。
Next.js（フレームワーク）
フレームワーク、つまり、Webアプリケーション等を開発するために必要な機能がセットになった枠組みです。
- フォルダ構成（
appディレクトリやapiディレクトリなど） - 各ファイルが持つ役割（
page.tsxやlayout.tsxなど）
これらを理解していないと、どこに何が書いてあるか迷子になります(自分はまだわかっていない)。
GitHub
GitHubは、ソースコードのバージョン管理を行う「Git」というシステムを、オンライン上で多くのユーザーが活用できるようにしたサービスです。
つまり、活用のためにはGitを使用するための知識が必要となります。
Git…存在は知っていたが、使い方はわからん…
Gitとは？
ファイルの変更履歴を記録するツールです。「いつ、誰が、どこを変えたか」を管理し、以前の状態に戻すこともできます。
複数のプログラマーが連携して構築するプロの現場では活用されているのでしょうが、自分のように、個人で、なんちゃって開発している人間からしたら、達人の道具であり手の届かない存在みたいな気がしていました。
リポジトリやらコミットやらプッシュやらプルやら・・・。
ターミナル（コマンドプロンプト）の操作
黒い画面（ターミナル）でコマンドを打ち込む必要があります。
-
cd（ディレクトリの移動） -
git commit（変更の記録） -
npm run dev（開発用サーバーの立ち上げ）
これもまた、自分には縁のないプロのツールと思っていたのですが、使わなければならないことに…
それから、npmというパッケージ管理ツールについても理解しなければいけません。
…うむむ
そして、苦闘。
初めに、どうもうまく進められないため、レベルを下げてレクチャーしてくれるよう依頼。Gemini君、教えて。
ステップ 1：ターミナルの基本
ターミナル（Macは「ターミナル」、Windowsは「PowerShell」や「コマンドプロンプト」）は、マウスを使わずに文字でコンピュータに命令を出すツールです。
まずはこれだけ覚えれば大丈夫です。
今自分がどのフォルダにいるか確認
ls
今いる場所にあるファイル一覧を表示
cd フォルダ名
指定したフォルダの中に移動する
mkdir フォルダ名
新しいフォルダを作る
初心者のポイント: > ターミナルで何かをインストールする際、Node.jsというプログラムがパソコンに入っている必要があります。
ステップ 2：Next.js のインストールと構築
Next.jsは、ウェブサイトを作るための「便利な道具セット（フレームワーク）」です。
1 フォルダの準備: ターミナルを開き、デスクトップなどに移動します。
cd Desktop
2 プロジェクト作成: 以下のコマンドを打ちます。
npx create-next-app@latest my-app
3 アプリを動かす:
cd my-app（作ったフォルダに入る）
npm run dev（開発用サーバーを起動）
4 確認: ブラウザで http://localhost:3000 を開くと、Next.jsの初期画面が表示されます！
ステップ 3：Git と GitHub の基礎
基本の流れ（これの繰り返しです）
1 保存するファイルを指定: git add .（すべての変更を対象にする）
2 メッセージを付けて保存: git commit -m "初めての保存"（変更内容のメモ）
3 GitHubへ送る: git push（ネット上の保管庫にアップロード）
事前準備
1. GitHubでアカウントを作成。
2. ブラウザ上で「New Repository」を作成。
3. 画面に表示される指示に従って、自分のPCのNext.jsプロジェクトと連携させます。
ステップ 4：Vercel への連携とデプロイ
1 Vercelにサインアップ: Vercel公式サイトで、GitHubアカウントを使って連携・登録します。
2 プロジェクトをインポート:
Vercelの管理画面で「Add New」→「Project」を選択。
先ほどGitHubで作ったリポジトリを選んで「Import」をクリック。
3 デプロイ実行: * 「Deploy」ボタンを押します。
1〜2分待つと、https://my-app.vercel.app のような公開用URLが発行されます！
ちなみに開発用サーバはControl + Cで停止します。
このあと、GitやVercelでちょこちょこエラーが出て、なんとか解消して、とりあえずデプロイができました。
次はFirebaseです。
1. Firebaseコンソールで設定情報を取得する
まず、Firebase側で「接続用の情報」を発行します。
1 Firebase Console にアクセスし、作成したプロジェクトを選択します。
2 画面中央にある </>（ウェブ） アイコンをクリックして、アプリを登録します（ニックネームは適当でOK）。
3 「Firebase SDK の追加」という画面が表示されます。その中にある const firebaseConfig = { ... }; という部分をコピーしてください。
2. Next.jsプロジェクト内にファイルを作成する
次に、自分のPCのNext.jsプロジェクト内に設定ファイルを作ります。
1 package.json があるのと同じ階層（ルートディレクトリ）に、新しく firebase-config.js という名前のファイルを作成します。
2 以下のコードを貼り付けます（コピーした自分の情報を反映させてください）。
JavaScript
// firebase-config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"; // データベースを使いたい場合
const firebaseConfig = {
apiKey: "あなたのAPIキー",
authDomain: "あなたのプロジェクト.firebaseapp.com",
projectId: "あなたのプロジェクトID",
storageBucket: "あなたのプロジェクト.appspot.com",
messagingSenderId: "あなたのID",
appId: "あなたのアプリID"
};
// Firebaseを初期化
const app = initializeApp(firebaseConfig);
// 他のファイルから使い回せるようにエクスポートする
export const db = getFirestore(app);
で、このあと、環境変数を設定します。
3. 重要：APIキーを「環境変数」で隠す（セキュリティ）
今のままでも動きますが、そのまま GitHub に push すると世界中の人があなたのAPIキーを見れてしまいます。これを防ぐのが「環境変数」という仕組みです。
手順 A：ローカル（自分のPC）での設定
1 プロジェクトのルートに .env.local というファイルを新規作成します。
2 以下のように書きます（先頭に NEXT_PUBLIC_ をつけるのがNext.jsのルールです）。
Plaintext
NEXT_PUBLIC_FIREBASE_API_KEY=あなたのAPIキー
3 NEXT_PUBLIC_FIREBASE_PROJECT_ID=あなたのプロジェクトID
4 ...（他の項目も同様に）
5
6 firebase-config.js の中身を、環境変数を読み込む形に書き換えます。
JavaScript
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
7 projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
手順 B：Vercel（公開サイト）での設定
自分のPCの .env.local は GitHub にはアップロードされません（.gitignore というファイルで除外される設定になっているため）。そのため、Vercel側にも同じ情報を登録する必要があります。
1 Vercelのプロジェクト画面から Settings > Environment Variables を開く。
2 NEXT_PUBLIC_FIREBASE_API_KEY などの名前と値を一つずつ登録して保存する。
このあと、もう言い表せないほどのエラーが出て、Gemini君に聞いて、の繰り返しをして・・・
できたのがこれ。
数時間かかってこれか・・・・・・ぐぬぬ
でも、とりあえずやってみるのもいいんじゃない
安全策をとるなら、ひとつひとつ着実に知識を身につけていくのが良いのかもしれません。
でも、「アプリ開発」という包括的な知識が必要になるようなことに飛び込んでいくのなら、このように無謀なチャンレンジをしてみても良いのかも、と思いました。
Geminiに「こんなエラーがおきたけどどうすれば良い」と問いかけ続ける数時間は辛くもありましたが、成長のための投資なのかもしれません。
アマチュアエンジニアの足元に辿り着けるように、もう少し頑張ってみようと思います。
本当はここまで経験した試行錯誤を整理して、同じく初心者に「こうすればいいんだよ」という道筋を示してあげたいところですが、いまだ模索の途中できちんとした知識をお示しできないため断念。
代わりに参考にした記事のリンクを雑多に紹介します。
もっといろんなサイトを見た気がするのですが、もはや記憶の彼方。
Vercel完全ガイド🔥 初心者でも簡単にできるWebサイト高速デプロイ！
Next.jsとは？
[初心者向け]Gitの理解/Githubの初pushまで