初めてのFirebaseを触ってみる(導入編)

はじめに

おはようございます。こんにちは。こんばんは。
今回は初めてFirebaseを触ってみるということで、Firebaseとはなんぞや？
とかFirebaseってどうやって使うの？と行ったことをまとめていきたいと思います。

Firebaseとは？

Firebaseとは、Googleが提供している、すばやく高品質のモバイルアプリやWebアプリケーションを開発することができるプラットフォームです。

Firebaseを使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。
ここでいうバックエンドとは、サービスの内、見えないところでデータの処理や保存などを行う要素のことです。

Firebaseは、BaaS（Backend as a service）の1つです。
サービスの早期リリースという要件が求められたときに、サーバーレスアーキテクチャが注目され、 BaaSというクラウドサービスが登場しました。
モバイル向けBaaSということで、MBaaSとよばれることもあります。

BaaSを使うことにより、アプリ単体がモバイル端末上で動作するだけでなく、外部からの働きかけを行うことで、アプリがそれに応じた動作を行うことができるようになります。

こう行った方々にオススメ

• 「制作したポートフォリオをできるだけ簡単に公開したい」
• 「Vue.jsやReactを使ってWebサービスを作りたいけれど、バックエンドは苦手なので避けたい」
• 「フロントエンドの勉強で何か作りたいけれど、バックエンドの実装に時間を掛けたくない」

Firebaseを導入する

今回は例としてNuxt.jsを使用しての解説です。
※Nuxt.jsのプロジェクトは作成済みとする。

①Firebaseにログイン

https://firebase.google.com/にアクセスする。

②コンソールへ移動

③プロジェクト追加をクリックする

④プロジェクト名などを入力し、最終「プロジェクト作成」ボタンをクリック

しばらく待機で終了。

⑤アプリに Firebase を追加して利用を開始しましょう

下記ボタンをクリックし、アプリのニックネーム等を入力する

すると必要条件が出てくるので
plagins/firebase.jsを作成し、準備完了。

plagins/firebase.js

import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp({
    ///この間を自分のアプリ情報に変える
    apiKey: "**************************",
    authDomain: "*********************",
    databaseURL: "******************",
    projectId: "*************",
    storageBucket: "********************",
    messagingSenderId: "*****************",
    appId: "*******************",
    measurementId: "*************************"
    //-------------------------------
  })
}

export default firebase

以上。
次回からはfirebaseが提供している機能の紹介を5回ぐらいに分け解説していきます。

※今後もFirebaseはnuxt.jsを使っての解説となります。
最後まで読んでいただきありがとうございました。

Twitterやってます。良ければチェックして見てください。