FirebaseでハマったReference、Doc、Snapshot
FirebaseとVue.jsでアプリを作成する
はじめに FirebaseでTODOアプリを作成します。 TODOアプリで一通りのFirebaseの機能を使ってみたいと思います。 今回はFirebaseの中で以下のサービスを利用します。 Authentication Cloud Firestore Hosting Yarn, Vue.js、Vue CLIを使用します。 Vue CLIは以下でグローバルにインストールしておいて下さい。 yarn global add @vue/cli firebaseのCLIは以下のコマンドでグローバルにインストールします。 yarn global add firebase-tools アプリ作成 以下のコマンドでプロジェクトを作成します。 オプションはお好みで選びます。 vue create {プロジェクト名} プロジェクト作成後直後の状態で起動してみましょう！ cd {プロジェクト名} yarn serve http://localhost:8080/ にアクセスすると初期状態のVueプロジェクトが確認できます。 Vue用マテリアルデザインフレームワークとしてVuetifyを追加する。 vue add vuetify 文法チェックをEslintにするのが好みです Component name "Home" hould always be multi-wordのようなエラーが出たらvue/multi-word-component-names': 0を.eslintrc.jsのrulesに追加する。 Firebaseプロジェクトを作成する Firebase にアクセスし、ログインします。 プロジェクトを追加をクリックし、名前を設定して、プロジェクトを作成します。 今回はこのプロジェクトでGoogleアナリティクスを有効にするをオフにしました。 使用する機能を全て有効化しておきます。 Authentication Hosting Cloud Firestore Authenticationは、Googleプロバイダを有効化しておきます。 Cloud Firestoreのロケーションはお好みですが、私はasia-northeast1（東京）にしました。 参考: リージョンとゾーン Firebaseをアプリに統合する firebaseをアプリに追加 yarn add -D firebase src/firebase....
Vueプロジェクト作成
プロジェクト作成を楽したい プロジェクトを新規作成する場合に、ゼロから作成するよりも雛形を使いたい。 使用したいモジュールは以下。 Vue.js Webpack Firebase Sass TypeScript vue create コマンド：vue create 自分で選択肢を選ぶながらプロジェクトを作成できる。 最大の問題点は、webpackの設定ファイルがVue用に作成されたもので作られてしまう。 気に食わない。 vue init コマンド：vue init webpack-simple project-name 指定したテンプレートを元にプロジェクトを作成できる。 問題点は、パッケージのバージョンが古すぎる。 ローカルのNode.jsのバージョンとマッチしないと、作成直後でもエラーが発生して動作しない。 このコマンドはもう使えないと思って良いかもしれない。 webpack-cli コマンド：webpack init webpackのプロジェクトを作成することができる。 問題点は、Vue.jsの設定は自分でしないといけないこと。 結論 webpack-cli を使用するのが一番良さそう。 $ mkdir project-name $ cd project-name $ yarn init -y $ yarn add webpack webpack-cli $ npx webpack init 更に、これでプロジェクトを作成した後に、 firebase init (firebase-toolsが必要)でfirebaseプロジェクトの設定を追加するのが良さそう。 Vue.jsを追加する場合は、以下の記事が参考になりました。 https://ics.media/entry/16329/#webpack-ts-vue Vue の追加 yarn add -D vue vue-loader @vue/compiler-sfc webpack.config.jsonに以下を追加 const { VueLoaderPlugin } = require('vue-loader') const webpack = require('webpack') webpack....