【AI駆動開発】「bolt.new」で作成したアプリケーションのデータ保存を行うには？ – Firebase を利用して boltで作成したアプリのデータを保存しよう！ #AI #bolt.new #ChatGPT

はじめに

前回のブログでは、bolt.new の特徴や使用感について解説しました。今回は、作成したアプリケーションのデータ管理としてGoogleが提供する Firebase を選択して利用してみた内容を紹介します。

Bolt.new が注目されておりこれからのフロントエンド開発では利用する機会が増えてくることが予想されます。開発を進める中で、必ず直面する課題の一つがデータの保存方法ではないでしょうか。アプリケーションで扱うデータは、テキストベースのデータベース情報から、画像、動画といったメディアファイルまで多岐にわたりますが、これらのデータを効率的に管理する方法として、Firebase は有効な選択肢の一つになります。今回は Firebaseを用いて bolt.new からデータを保存してみます。

[Firebase 機能プロダクト一覧]

Firebase の特徴の１つは、その導入のしやすさにあります。特にデータベースに関しては、初期利用時に無料枠が用意されており、開発やテストフェーズでの利用がスムーズに始められます。ただし、画像や動画などのストレージ機能を本格的に利用する場合は、従量課金制の有料プランへの移行が必要となります。これは、大容量のファイル管理には一定のコストが発生することを意味しますが、サービスの成長に応じて柔軟にスケールできる点は大きな利点といえます。

今回、bolt.new で試作的に開発中の e-learning-system では、教材動画やサムネイル画像など、様々な形式のデータを扱う必要があります。Firebase を選択した理由の一つは、これらの異なるタイプのデータを統合的に管理できる点です。例えば、教材のメタデータや利用者情報などのテキストデータは Firestore のコレクションとして整理し、関連する動画やサムネイル画像は Firebase Storage で効率的に保存することができます。

また、現代のアプリケーションでは、スマートフォン、PC、タブレットなど、様々なデバイスからのアクセスに対応する必要があります。Firebase は、これらのマルチプラットフォーム対応も非常に柔軟で、デバイスに依存しない一貫したデータアクセスを提供していることも大きなメリットです。

Firebaseの設定

Firebaseの初期設定

まず、上記画面の通りFirebase のプラン選択から始めます。画面左上に表示される「Sparkプラン」という無料プランを選択します。このプランは、開発初期段階での利用に最適で、基本的な機能を無料で試すことができます。必要に応じて後から従量課金制の「Blazeプラン」にアップグレードすることも可能です。

次に、「Firebaseプロジェクトを作ってみる」というオプションを選択し、新規プロジェクトの作成に進みます。プロジェクト名の入力画面では、「e-learning-system」という名前を設定します。この名前は、プロジェクトの目的や内容を反映したものにすることが推奨されます。

必要な規約に同意し、作成ボタンをクリックすると、システムがプロジェクトの設定を自動的に行います。数秒後、画面右側に表示されるプロジェクトアイコンと共に「Firebaseプロジェクトが作成できました」というメッセージが表示され、プロジェクトの作成が完了します。これで、Firebaseの各種機能を利用する準備が整いました。

Firebaseのアプリ追加

続いて、FirebaseをWebアプリケーションに追加する手順について説明します。（詳細については firebaseの公式ページ もご参考ください。）

Firebase コンソールからアプリを追加をクリックします。その後、ウェブアイコン(</>）をクリックします。
続いて「アプリの登録」で、アプリのニックネームを入力します。（※ニックネームは内部用の簡易 ID であり、Firebase コンソールでのみ表示されるとのことです。）

「Firebase SDK の追加」の画面で、Firebase SDKの追加方法について表示されます。ここでは、npm install firebaseコマンドを実行してFirebase SDKをインストールする必要があります。

特に重要なのが赤枠で囲まれた設定コードです。このコードは、bolt.newで作成したアプリケーションをFirebaseと連携させるために必須となる設定情報です。この設定には、apiKey、authDomain、projectId、storageBucket、messagingSenderId、appIdなどの重要なパラメータが含まれています。これらの値は各プロジェクト固有のもので、アプリケーションがFirebaseサービスと正しく通信するために必要不可欠です。

コードの最後にはinitializeApp(firebaseConfig)が記述されており、これによってFirebaseの初期化が行われ、アプリケーションでFirebaseの各種機能が利用可能になります。この設定を正しく行うことで、データベースの利用やファイルストレージ、認証機能などのFirebaseサービスをアプリケーション内で使用することができるようになります。なお、このSDKの設定方法には、npmの他にscriptタグを使用する方法もありますが、npmを使用することでSDKのサイズを最適化することができます。

Firebaseのデータベース追加

Firebaseのプロジェクトが作成できたわけですが、次にメニューの Firebase Database から必要となるデータベースとストレージを設定していきます。

今回は、テストモードで開始しました。

特に難しい設定はなく、無事にデータベースが作成完了しました。今後、このコレクションにアプリケーションからテキストデータなどアプリケーションで登録されたデータが登録されていきます。

bolt.new アプリからFirebaseへ連携

今回、bolt.newを活用して社内向けのeラーニングプラットフォーム「ラーニングライブラリ」を開発しました。このアプリケーションは、社員の継続的な学習と能力開発をサポートするために設計されています。画面上部には「ラーニングライブラリ」というタイトルと共に、「講座一覧」の表示と「講座を作成」ボタンが配置されており、管理者が簡単に新しい講座を追加できる仕組みになっています。

メインコンテンツとして、「受講必須のeラーニング講座」セクションが表示され、各講座カードには、受講必須のラベル、eラーニングの形式、受講期限などの重要情報が明確に表示されています。右側には「タグで絞り込む」機能があり、「情報セキュリティ」「ISMS」といったタグを使用して、必要な講座を素早く見つけることができます。

このアプリケーションで登録するテキスト、サムネイル、動画などは、先ほど設定したFirebaseに格納していきます。

bolt.new のFirebaseに関連するコード

Firebaseへアクセスするコードもbolt.newから作成できます。bolt.newのチャット欄で「テキスト、サムネイル、動画をFirebaseに格納してください。」と入力することで、自動的にFirebaseのコードが追加されます。
例えば、bolt.newのプロンプトに、Firebaseの設定情報（apiKey、authDomain、projectId等）と、アプリケーションで必要なデータベース構造やCRUD操作の要件を記述することで、Firebase Databaseと連携したアプリケーションのコードを自動生成することができます。特に、firebaseConfigオブジェクトに含まれる設定情報をプロンプトに含めることで、より具体的な実装コードが生成されます。

Firebase の初期設定は firebase.ts ファイルに記載されています。このファイルでは、Firebaseの初期化設定を行い、必要なサービス（Firestore、Authentication、Storage）のインスタンスを作成しています。特にストレージの設定では、アップロード時のタイムアウト時間を30秒に設定するなど、カスタマイズも行っています。

次に、アプリケーションのFirebaseアクセスの主要な機能は api.ts ファイルに実装されています。このファイルには、講座（Course）の作成、更新、削除の機能が実装されており、Firestoreのコレクションに対してCRUD操作を行います。特に createCourse 関数では、講座データをFirestoreに保存する際にタイムスタンプを自動的に付与する処理が含まれています。ファイルアップロード関連の機能として、教材資料、講座動画、サムネイル画像をFirebase Storageにアップロードする機能が実装されています。各ファイルは講座IDに基づいて適切なパスに保存され、アップロード後にダウンロードURLを取得する処理も含まれています。また、リアルタイムデータ取得のための subscribeToCourses 関数も実装されており、タグによるフィルタリング機能付きで講座データの変更をリアルタイムに監視することができます。これらの実装により、eラーニングシステムでは講座データの永続化、メディアファイルの管理、リアルタイムなデータ同期が実現されています。

まとめ

bolt.newで作成したアプリケーションとFirebaseの連携について、実際の開発経験を通じて紹介してきました。今回のe-learningシステムの開発を通じて、Firebaseが提供する機能群が、bolt.newを用いたウェブアプリケーション開発においても非常に有用であることも確認できます。

bolt.newの特徴である高速な開発環境とFirebaseの柔軟なバックエンド機能の組み合わせは、開発効率を大きく向上させることができます。Firebaseが提供する無料枠は、開発初期段階での実験や検証に最適で、アプリケーションの成長に応じて段階的にスケールアップできる点は、スタートアップ的なプロジェクト管理において大きな利点となります。

本記事が bolt.newとFirebaseを組み合わせアプリ開発の高速化につながれば幸いです。特に、リアルタイムデータの同期やファイルストレージ、認証機能など、モダンなウェブアプリケーションに必要な機能を、比較的少ない実装工数で実現できる点は、開発リソースが限られているプロジェクトにおいて大きなメリットとなりそうです。

bolt.new 登場によりAI駆動開発が新しいフェーズに入ったと言えるでしょう。これからの更なる進歩に期待しましょう！