16
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-02

#はじめに
おはようございます。こんにちは。こんばんは。
今回は初めて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/にアクセスする。
###②コンソールへ移動
Banners_and_Alerts_と_Firebase.png

###③プロジェクト追加をクリックする
Banners_and_Alerts_と_Firebase_console.png

###④プロジェクト名などを入力し、最終「プロジェクト作成」ボタンをクリック
しばらく待機で終了。
###⑤アプリに Firebase を追加して利用を開始しましょう
下記ボタンをクリックし、アプリのニックネーム等を入力する
Banners_and_Alerts_と_test_–_test_–_Firebase_console.png

すると必要条件が出てくるので
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やってます。良ければチェックして見てください。:point_up::point_up::point_up:

16
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?