かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

Vue.jsとFirebase簡単セッティング【Firebase編】

この記事をシェアする

 

 Vue.jsとFirebaseを組み合わせてWebサービスを開発するための初期のセッティング方法についての記事です。

Vue + Firebaseの組み合わせでプロジェクトを作成する

まずはじめにVue.jsのプロジェクトの設定を行ってください。

Vue.jsのセッティングはこちらの記事で設定できます。 

www.katonobo.com

 上記の記事通りに設定を行い、ローカルホストで画面が表示されたところからスタートです。

Firebaseプロジェクトを始める

ではやっていきます。

まずはFirebaseのアカウントを作成してください。

Firebase

アカウントができたら「プロジェクトを追加」をクリックします。

f:id:katonobo:20190909230049p:plain

次に、プロジェクト名を入力します。

f:id:katonobo:20190909230105p:plain

今回は「test」で登録しました。この名前は他のプロジェクト名と重複できないので、「test-XXXX」のようになりました。

Googleアナリティクスを導入するかの質問があります。最初は設定しなくても良いでしょう。「今は設定しない」を選択します。

f:id:katonobo:20190909230119p:plain

しばらくするとプロジェクトが作成されます。

これでプロジェクトの導入の準備ができました。

f:id:katonobo:20190909230121p:plain

 

FirebaseをVue.jsで作成したプロジェクトに組み込む

事前の準備ができたのでFirebaseをVue.jsのプロジェクトで使えるようにします。

まず、Firebaseのプロジェクト内のトップページに出てている下の画面「アプリにFirebaseを追加して利用を開始しましょう」のウェブを選択してください「</>」です。

f:id:katonobo:20190909230124p:plain

クリックするとプロジェクトセッティング画面に移動するので案内にしたがってください。

すると、以下のようなコードが取得できます。

このコードの「script」タグで囲まれたコードを最初に使います。

Vue.jsのプロジェクトファイルで、srcの下に「firebase.js」ファイルを作成してください。

作成した「firebase.js」ファイルに、先ほどのコードを貼り付けてください。

src / firebase.js

ポイントは、先ほどのコードで

「script」タグで囲われたところだけを貼ることです。この部分だけを使うのは、次のnpmでfirebaseを初期化するためです。

コードを貼ってSaveをしたら、npmを使ってfirebaseをインストールします。

npm install firebase --save

インストールできたら「firebase.js」を以下のように変更と追加をしてください。

次に、main.jsに以下のコードを加えます。

これでfirebaseをVue.jsのプロジェクトに組み込むことができました。

実際にデータをデータベースに登録してみよう

実際に何かデータをFirebaseに登録して見ましょう。

Firebaseのデータベースは「Firestore」と「Realtime database」がありますが、現在は「Firestore」がメジャーです。

今回はFirestoreを使います。

では、Vue.jsのプロジェクトの「Home.vue」に以下のコード書いてください。

今回は「ヘロー」と入力して送信しました。

firestore登録画面

これで、Fire storeのデータベースにテキストをインプットできました。

ポイントは2つです。

scriptの上に「import」があります。ここで「Home.vue」でもFirebaseが使えるように宣言しています。

次に、firebase関係のコードです。

firebase.firestore().collection('text').doc().set({

    text: this.text,

})

 このコードです。これは「firestoreのコレクション名'text'に、「text: this.text」をインプットしてね」という意味です。

書き方や読み取り方は公式ドキュメントを見て覚えましょう。

Cloud Firestore にデータを追加する  |  Firebase

以上でVue.jsとFirebaseのセッティング方法の説明は終了です。

非常に簡単にセッティングができることがわかっていただけたと思います。

Vue.jsとFirebaseは組み合わせの相性がとても良いと思いますので開発を体験してください。 

関連記事:

www.katonobo.com

www.katonobo.com