MENU
AI

ChatGPT＋Cursorで作るWEBアプリ入門（Firebase × Tailwind編）第1回

AISSTO
目次
  1. はじめに
  2. 全体像（3ステップ）
  3. ChatGPTとCursorの役割分担
  4. Firebase × Tailwind を選ぶ理由
  5. 実装手順
  6. よくあるエラーと対処法
  7. Firebase × Tailwind の発展応用
  8. まとめ
  9. チェックリスト
  10. 関連リンク

はじめに

この記事では、ChatGPTでコードを設計・生成し、Cursorで編集＆プレビューしながら、最小構成のWebアプリを作る方法を紹介します。
データ保存には Firebase（Firestore）、デザインには Tailwind CSS を使用。サーバー構築やnpm設定なしで、HTML1枚から始められます。

OCCHI
OCCHI

同じ要領でLP作成もできますよ！

全体像（3ステップ）

  1. UI雛形を作る：ChatGPTに「HTML＋Tailwind」で初稿を生成し、Cursorでプレビュー
  2. ローカルで動かす：フォーム入力・一覧表示・保存をlocalStorageで実装
  3. クラウド同期：Firebase（匿名認証＋Firestore）でどの端末からもアクセス可能に

ChatGPTとCursorの役割分担

ChatGPT（設計と初稿生成）

ChatGPTは構成設計とHTMLコード生成を担当します。要件を伝えるだけで、フォーム・一覧・モーダル構造を自動生成可能。

プロンプト例：

Tailwind CSSで、タイトル・メモ・評価（1〜5）の入力フォームと一覧を持つWebアプリをHTML1ファイルで作成してください。
dialogモーダルで新規追加/編集、検索・並び替え機能も実装。データはlocalStorageに保存。
OCCHI
OCCHI

このプロンプトを工夫するだけでLPやWEBアプリのたたき台は完成！すごい時代です！

Cursor（実装とプレビュー）

  • ライブプレビューで即表示確認
  • Cmd/Ctrl + K でAI修正指示（例：「この部分の背景をグラデーションに」）

Firebase × Tailwind を選ぶ理由

Firebaseとは？

FirebaseはGoogle提供のサーバーレス型バックエンド。認証・DB・ストレージ・ホスティングを数行のコードで扱えます。今回使うのは以下の2つ：

  • Authentication（匿名認証）：ログイン不要でユーザー識別（UID発行）
  • Firestore：NoSQLのクラウドデータベース

メリット：サーバー構築不要／リアルタイム更新（onSnapshot）／無料枠で学習に十分

注意点：セキュリティルール必須（UIDでアクセス制限）／serverTimestamp() は確定まで未定義になりうる

Tailwind CSSとは？

TailwindはユーティリティファーストCSS。px-4 や rounded-lg などのクラスをHTMLに並べるだけで素早く整ったUIが作れます。

  • CSSファイル不要、HTML内で完結
  • sm: md: lg: でレスポンシブ調整が簡単
  • theme.extend.colors でブランドカラーを定義可能
OCCHI
OCCHI

この辺はやりながら覚えていくしかないです。焦らず進みましょう。

実装手順

ステップ1：雛形を作る（HTML1枚）

  1. Cursorで新規フォルダ作成 → index.html を追加
  2. ChatGPTで生成したHTMLを貼り付け
  3. Tailwind CDNを読み込む：
<script src="https://cdn.tailwindcss.com"></script>

構成例：ヘッダー（タイトル＋追加ボタン）／検索フォーム／一覧（カード）／<dialog> モーダル（新規・編集）／JSで追加・編集・削除・検索・並び替え。
まずは localStorage で保存して「画面が動く」を体験。

ステップ2：Firebaseの準備

1. プロジェクト作成

  1. Firebase Console で「プロジェクトを作成」
  2. Analyticsは不要でもOK

2. 匿名認証を有効化

  1. 左メニュー Build → Authentication を開く
  2. 上部タブ Sign-in method → Anonymous を有効化

3. Firestoreを作成

  1. 左メニュー Firestore Database → 「データベースを作成」
  2. エディション：Standard、リージョン：asia-northeast1（東京） 推奨、モード：本番

4. Firestoreルール設定

Firestoreの「ルール」タブに以下を貼り付けて公開：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/data/{docId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

5. Firebase設定をコピー

  1. プロジェクト設定 → 「マイアプリ」 → 「</> Webアプリを追加」
  2. 表示された const firebaseConfig = {...} をコピーし、index.html の初期化部分に貼り付け

ステップ3：クラウド同期を実装

匿名ログインとデータ構造

signInAnonymously(auth);
// Firestore ドキュメント構造（例）
// users/{UID}/data/{docId}

Firestoreの基本操作

  • 追加：addDoc()
  • 更新：updateDoc()
  • 削除：deleteDoc()
  • リアルタイム更新：onSnapshot()

並び順の安定化（createdAt）

const toMs = (ts) => ts?.toMillis ? ts.toMillis() : (ts?.seconds ? ts.seconds*1000 : 0);
arr.sort((a,b) => toMs(b.createdAt) - toMs(a.createdAt));

UID未取得時の安全処理

if (!uid) {
  alert("初期化中です。数秒後にお試しください。");
  return;
}

モーダル操作（閉じる）

dlgCloseX.onclick = () => dlg.close();
dlgCancel.onclick = () => dlg.close();

よくあるエラーと対処法

状況原因・対処
画面が真っ白firebaseConfig 未貼り付け、コンマ抜け。ブラウザ開発者ツールのコンソールを確認。
Permissionエラー匿名認証が無効、またはルール未設定。設定を再確認。
並び順が崩れるserverTimestamp() 未確定状態（正常）。確定後に安定。

Firebase × Tailwind の発展応用

Firebaseでできる拡張

  • Storage：画像アップロード
  • Hosting：WebアプリをURLで公開
  • Google認証など他方式への拡張

Tailwindでできる拡張

  • カスタムテーマ：ブランドカラーを統一
  • 共通UI部品：カード／バッジ／ボタンを再利用
  • リスポンシブ：sm: md: lg: で最適化

まとめ

  • ChatGPTで設計と初稿を生成、Cursorで即実装
  • Tailwind CSSでデザイン、Firebaseでデータをクラウド化
  • HTML1枚で完結しつつ、サーバー不要の実用アプリを構築

最初の一歩は「UIを作って動かす」。次の一歩は「localStorage → Firestore」へ切り替える。これで立派なWebアプリ開発者です。

OCCHI
OCCHI

今回はここまで！次回はもう少し進みます。復習して大まかに理解しておきましょう！

チェックリスト

  • [ ] ChatGPTでUIコード生成
  • [ ] CursorでHTML貼り付け・動作確認
  • [ ] localStorageでデータ保持
  • [ ] Firebase匿名認証を有効化
  • [ ] Firestore作成＆ルール設定
  • [ ] firebaseConfigを貼り付けて同期確認

関連リンク

ABOUT ME
OCCHI
OCCHI
FBP・AIクリエイター・etc..
元デザイナー・猫の手も借りたい販促に関わる方の味方。デザイナー25年→営業10年→現在WEBマーケッター&AIクリエイター→世界中の広告とサッカーを見に行く事が目標。AI関連のTikTokで10日強でフォロワー3,000人達成。販促やアイディアにお困りの方が役に立つ情報やノウハウを発信していきます。SNS多数運営。総フォロワー数10,000人以上。
Recommend
こちらの記事もどうぞ
記事URLをコピーしました