ChatGPTによるアプリ開発入門 – お問い合わせフォームから学ぶAIコーディング【後編】

開発現場において、GitHub CopilotやChatGPTの利用が広まっています。テキストで指示するだけで、高精度な結果が得られますが、実際どこまでのことができるのでしょうか。

今回は、ChatGPTを使ってお問い合わせフォームを作成する流れを紹介します。手順を適切に踏まえれば、さらに複雑なWebアプリケーションでも開発できるはずです。

利用する技術について

今回は、以下の技術を利用します。

React
Ionic Framework
Firebase

後半となる今回は、サーバーサイド（Firebase）とのつなぎ込みについて解説します。

Firebaseの設定

まずは、作成しているIonicプロジェクトにFirebaseを追加する流れを教えてもらいます。

IonicプロジェクトにFirebaseを追加する流れを教えてください

そうすると、以下の手順を提示してくれました。

Firebase プロジェクトの作成
Firebase SDK の追加
Firebase 設定の追加
Firestore をセットアップ
Ionic のフォームと連携
動作確認

これに従って、Firebaseの設定を進めていきます。

1. Firebase プロジェクトの作成

提示されたのは以下の手順です。基本的には以下の流れそのままで問題ありません。

Firebase コンソールにアクセス
プロジェクトを作成をクリックし、プロジェクト名を入力
Google アナリティクスを有効化するか選択（今回は不要ならオフでOK）
プロジェクトを作成をクリック

2. Firebase SDK の追加

Ionic（React）プロジェクトに Firebase をインストールします。

npm install firebase

3. Firebase 設定の追加

Firebase コンソールの「プロジェクトの設定」へ移動
アプリを追加（Webアイコン）をクリック
Firebase SDK 設定情報が表示されるのでコピー
src/firebaseConfig.ts ファイルを作成し、以下のように貼り付け

ここで、提示されたコードを元に firebaseConfig.ts を作成します。Firebase側で提示されるコードは app という変数ですが、ChatGPTでは firebaseApp という変数名に変更している点に注意してください。

// src/firebaseConfig.ts
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

// Firebase アプリを初期化
const firebaseApp = initializeApp(firebaseConfig);

export default firebaseApp;

4. Firestore をセットアップ

Firebase コンソールで Firestore Database に移動
データベースを作成をクリック（テストモードで開始）
src/firebaseServices.ts を作成し、Firestore を初期化

ここで提示されているコードは以下の通りです。この関数 submitInquiry で、お問い合わせ内容を保存できます。

// src/firebaseServices.ts
import { getFirestore, collection, addDoc } from "firebase/firestore";
import firebaseApp from "./firebaseConfig";

const db = getFirestore(firebaseApp);

export const submitInquiry = async (formData: any) => {
  try {
    await addDoc(collection(db, "inquiries"), formData);
    return { success: true };
  } catch (error) {
    console.error("エラー:", error);
    return { success: false, error };
  }
};

5. Ionic のフォームと連携

現在の handleSend を Firebase にデータを送信するように修正します。

変更前

const handleSend = () => {
  console.log("送信されました:", form);
  setStep("sent");
};

変更後

import { submitInquiry } from "./firebaseServices";

const handleSend = async () => {
  const result = await submitInquiry(form);
  if (result.success) {
    console.log("Firebase に送信成功");
    setStep("sent");
  } else {
    alert("送信に失敗しました。");
  }
};

これは既存の handleSend 関数を Firebase にデータを送信するように修正しています。

6. 動作確認

ionic serve でアプリを起動
フォームを入力し、「送信する」をクリック
Firebase コンソールの Firestore Database にデータが保存されていることを確認

この手順に沿って進めれば、ちゃんとデータが保存されていることが確認できます。

本番モードでの運用にする

ここまでの手順で気になるのは データベースを作成をクリック（テストモードで開始） です。つまり、現状では開発用の状態ということになります。

これを本番運用でも使えるようにするためには何を行えば良いか、ChatGPTに尋ねてみます。

データベースを本番モードにした場合、コードに何か修正が必要ですか？

お問い合わせ内容は、送信者であっても閲覧不可にしたいです。

すると、以下の回答が返ってきました。

本番モードの Firebase Firestore では、セキュリティルールを設定しないと、データの読み書きが制限されます。
お問い合わせ内容を送信者であっても閲覧不可にするために、以下の対応を行います。

以下、対応手順に沿って進めていきます。

1. Firebase Firestore のセキュリティルールを設定

Firebase コンソールで Firestore Database → ルールに移動し、以下のルールを設定してください。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // inquiries コレクションのすべてのドキュメント
    match /inquiries/{document} {
      allow read, update, delete: if false; // すべてのユーザーがデータを閲覧・編集できない
      allow create: if request.auth != null; // 認証済みユーザーのみ書き込み可能
    }
  }
}

ポイント:

allow read, update, delete: if false; → 送信者も含めて誰もデータを閲覧できない
allow create: if request.auth != null; → 認証済みのユーザーのみデータを送信可能

2. Firebase Authentication を追加

上記のルールでは、認証済みのユーザーしかデータを送信できないため、匿名ログインを利用すると良いでしょう。

Firebase コンソールで Authentication を開く
サインイン方法 → 匿名認証を有効にする
src/firebaseAuth.ts を作成し、匿名ログイン処理を実装

匿名認証を有効にした後、以下のコードを firebaseAuth.ts として追加します。

import { getAuth, signInAnonymously } from "firebase/auth";
import firebaseApp from "./firebaseConfig";

// Firebase 認証の初期化
const auth = getAuth(firebaseApp);

// 匿名ログインを実行
export const signIn = async () => {
  try {
    const userCredential = await signInAnonymously(auth);
    return userCredential.user;
  } catch (error) {
    console.error("匿名ログイン失敗:", error);
    return null;
  }
};

3. 送信処理の修正

現在の handleSend を修正し、匿名ログイン後にデータを送信するようにします。

import { submitInquiry } from "./firebaseServices";
import { signIn } from "./firebaseAuth";

const handleSend = async () => {
  const user = await signIn();
  if (!user) {
    alert("認証に失敗しました。");
    return;
  }

  const result = await submitInquiry(form);
  if (result.success) {
    console.log("Firebase に送信成功");
    setStep("sent");
  } else {
    alert("送信に失敗しました。");
  }
};

4. 送信時にユーザー情報を付与

Firestore にデータを保存する際、送信者の uid を記録しておきます。

src/firebaseServices.ts を修正します。

import { getFirestore, collection, addDoc } from "firebase/firestore";
import firebaseApp from "./firebaseConfig";
import { getAuth } from "firebase/auth";

const db = getFirestore(firebaseApp);

export const submitInquiry = async (formData: any) => {
  const auth = getAuth();
  const user = auth.currentUser;

  if (!user) {
    return { success: false, error: "ユーザー認証が必要です。" };
  }

  try {
    await addDoc(collection(db, "inquiries"), {
      ...formData,
      userId: user.uid, // 送信者のIDを保存
      createdAt: new Date(),
    });
    return { success: true };
  } catch (error) {
    console.error("エラー:", error);
    return { success: false, error };
  }
};

ここまでの手順を行うと、データベースに保存した際に uid が追加されているのが確認できます。

以上で、Firebase Firestore のセキュリティルールを設定し、本番モードでの運用が可能になりました。

注意点

今回の実装では、前編で紹介したデザインをベースとしています。ChatGPTでは、セッション管理されているので、前編の内容を維持したまま回答してくれます。セッションが切れてしまっている場合には、回答も異なってくるので注意してください。

まとめ

今回は前編、後編に分けてIonic + React + Firebaseを利用したお問い合わせフォームの作成手順を紹介しました。開発にはChatGPTを使い、自分でコードを書く作業がほぼない状態で実装を完了しています。

なお、ChatGPTはインターネット上に数多ある情報を基に回答を返します。IonicやReact、Firebaseのように情報が膨大にあると回答の精度も高くなります。マイナーなライブラリであったり、細かい業務要件ではうまくいかないことも多いので注意してください。その場合は、プロンプトを細かく分けたり、汎用的な業務要件としての切り出しが大事になるでしょう。