FirebaseをReactやVueで利用するには？

FirebaseをReactやVueで利用するには？

フロントエンドのフレームワークで多くの方に利用されているReactやVueですが、Firebaseと組み合わせるといろいろなWebサービス・Webアプリが実現可能です。

Firebaseがデータベースやユーザー認証（ログイン）の機能を提供してくれるので、バックエンドを気にせずにいろいろなサービスを初心者でも簡単に実現できます。こうしたフレームワークの枠組みの中でFirebaseの機能を利用するには、Firebaseを使うための準備（設定や初期化）が必要になります。

Firebaseの設定はFirebaseのプロジェクト毎に異なります！

Firebaseを利用するには、最初にFirebaseコンソールでFirebaseのプロジェクトを作成する必要があります。

Firebaseの初期化に必要な情報は、このFirebaseプロジェクト毎に異なるのでプロジェクト毎の情報を取得して必要な設定を行う必要があります。

一番簡単な設定はHTMLファイルでCDN等の設置を読み込む方法です

Firebaseのドキュメンテーションで詳しく説明されています。また、FirebaseコンソールでFirebaseプロジェクトを作成すると、設定の方法が表示されるかと思いますが、HTMLファイルで、Firebaseのスクリプトを実行する前にCDNの情報を読み込む方法が出てきます。

Firebaseでホスティングをしている場合、自動（Automatic）の機能を使って簡素化できますし、CDN(Content Delivery Network) を利用しても設定できます。HTMLベースで利用するにはシンプルで簡単な方法です。

最後に出てくるConfigの方法がReactやVueをnpmを使ったプロジェクトベースで開発する場合便利です。 Firebaseのドキュメントを見ると詳しく説明されています。このドキュメントの「モジュールバンドラを...」(Using module bundlers)という部分がこの記事でお勧めしている方法です。

資料を配布しています！

この設定・初期化の方法をもう少しReactやVueで使い場合に合わせて具体的に書いた簡単な資料を作成したので公開中です。

約10ページほどの資料ですが、初めてReactやVueからFirebaseを利用される方向けに書いた説明です。（ご希望の方はダイレクトメッセージをお送りください）

＊Vue版

＊React版

やっている事はどちらも同じで、基本的にはGoogleのドキュメントに書いてある事と同じことをやっています。

少し分かり易い点は：

作成するファイルを例の中で、「firebase.ts(firebase.js)」に指定

ファイルを置く場所を「src/lib」というフォルダーを推奨

あとは、ReactやVueで利用するファイルからこのファイルを「import」

とより具体的な例で説明しているので分かり易いかと思います。

あとは、このfirebase.ts(firebase.js)をテンプレート化して準備しておいて、プロジェクト毎に、プロジェクト固有の情報のみをカット＆ペーストで置き換えれば、ReactやVueのプロジェクトを作成する一環で行えます。

まとめ

Fierbaseを一度利用すると、便利なので繰り返し活用する機会も増えるかと思います。Firebaseの設定・初期化をテンプレート化する事で、ReactやVueのプロジェクト作成の一環として設定を出来るようにすると開発を効率化できます。

簡単な資料ですが、初めてReactやVueでFirebaseをご利用になる場合には役立つと思います。