この質問に「はい」と答えた人だけ見て。もしかして毎回「import firebase 」してる？

今作っているWebサイトもようやく終盤を迎え、達成感が出てきたこの頃。

今はユーザーの認証ではFirebaseを使っているのですが、なんといっても使いやすい！

ドキュメント分かりやすい！

さすがGoogle！

ただ、Firebaseを使うときって例えば以下のように使いますよね？

import firebase from 'firebase/app'

const user = firbase.auth().currentUser

これいちいちimport firebase fromとかfirbase.auth()打つのめんどくさくないですか？

僕はめちゃくちゃめんどくさいです。

まだ小規模な開発だったらいいのですが、大規模だったらサーバーの負担にもなります。

また、ページごとにimport firebase from 'firebaseとかやると以下のような警告が表示されます。

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

要するにひつようなものだけインポートしてくださいということです。

このような警告が表示される方にもぜひ今回の記事を見て頂きたいです。

僕が思うに、やっぱりサイトの表面部分であったりコードを書く時間を出来るだけ少なくしたいという怠け癖があるのでこれの解消方法を今回はお教えします。

イメージとしては、firenase.auth()をつかうならthis.$authとしちゃおう見たいな感じです。

それでは一緒にコードを書く時間を減らすための裏技を見て行きましょう！

他にも効率的にサイト制作を行うための記事を書いているのでぜひご覧ください！

・初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！

・Vuetify、Bootstrapは時代遅れ！？Vue.jsで「Buefy」を使ってローディング画面をたったの２０秒で実装する方法！！

・初心者必見！固定値（キー、URLなど）は.envファイルに書いて再利用しよう！！

・え、まだpreventDefaultとstopPropagationをいちいち入力してるの？？

#パッケージのインポート#

どこでもいいのですが、今回はmain.jsに書いて行きます。

project/
┠ public/
┠ src/
┃ ┠ components/
┃ ┠ plugin/
┃ ┠ views/
┃ App.vue
┃ main.js

main.js

import Vue from 'Vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/functions'

firebase/authとかは使うやつだけimportしてください。

#config設定#

main.js

import Vue from 'Vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/functions'

//追加
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'DOMAIN',
  databaseURL: 'DATABASE_URL',
  projectId: 'PROJECT_ID',
  storageBucket: 'BUCKET',
  messagingSenderId: 'SENDER_ID',
  appId: 'APP_ID',
  measurementId: 'MEASUREMENT_ID'
}
const firebaseApp = firebase.initializeApp(firebaseConfig)

firebaseConfigはFirebaseのアプリの設定からコピペして持ってきてください。

firebase.initializeApp(firebaseConfig)は初期化を行っています。

#プロトタイプ宣言#

最後に先ほど例に出したthis.$authを使えるようにします

main.js

import Vue from 'Vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/functions'

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'DOMAIN',
  databaseURL: 'DATABASE_URL',
  projectId: 'PROJECT_ID',
  storageBucket: 'BUCKET',
  messagingSenderId: 'SENDER_ID',
  appId: 'APP_ID',
  measurementId: 'MEASUREMENT_ID'
}
const firebaseApp = firebase.initializeApp(firebaseConfig)

//追加
Vue.prototype.$firebase = firebase
Vue.prototype.$auth = firebaseApp.auth()
Vue.prototype.$firestore = firebaseApp.firestore()
Vue.prototype.$function = firebaseApp.functions('asia-northeast1')

これで実際にthis.$authとかthis.$firestoreとすることで呼び出すことができます。

###呼び出し例###

const user = this.$auth.currentUser

また、Vue.prototype.$firebaseも宣言しておいた方がいいです。

なぜかと言うと、firebase.auth.EmailAuthProviderこのような関数を使う場合、this.$auth.EmailAuthProviderでは呼び出せません。

つまり、firebase.auth()とfirebase.authは全くの別物だということです。

なので、$firebaseもプロトタイプ宣言しておきましょう！

プロトタイプ宣言を行うことで効率が格段に上がります。

ぜひ皆さんも楽してコードを書きましょう！

他にも応用できるのでじゃんじゃん使ってください！！

以上、「この質問に「はい」と答えた人だけ見て。もしかして毎回「import firebase 」してる？」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading