FrontendTypeScriptNuxt.jsFirebase(追記)Nuxt.jsが2.4.0から公式でTypeScriptをサポートし始めた。コードの中身はそのまま使えるが、ビルド部分の設定はこの記事のレポジトリなど参考にした方が良い。アプリを構築する上での知見を共有する。今回作成したサンプルはtamanyan/nuxtjs-firebaseに公開しておくので、必要であれば見てほしい。yarn.lockVuexからモックのユーザー情報(Username/Email)を取得して表示するアプリを作成した。CommunityのTypeScriptで書かれたNuxt.jsのテンプレートを使用した。以下のように作成できる。系になっているので、適宜修正する。書き方Vuexには既にTypeScriptの型定義ファイルが存在するので、特に問題はない。アプリがスケールする事を考え、profileというmoduleを作成する事にする。Vuex.Store<RootState>(storeOptions);ユーザー情報を取得には本来であればHTTPリクエストを呼ぶところだが、今回はモックデータを使用する。}};ProfileStateのuserをOptionalにする事を最初に考えたが、上手くObserverが動作しないのが悲しい。コンポーネントを作成できる。慣れると問題はないのだが、これAngularかな?と想いながら書いていて違和感満載だった。デコレータを使用せずとも書くことができるので、そこは各々選択ではないかと思う。テストテストはJestを使用して書いた。Builder(nuxt).build()によって毎回ビルドが走るので、テストの実行が遅いのが難点。Nuxt.jsを主に参考にした。Functions上にssrという関数を作成する。SSRをするにはNuxt.jsで作られたアプリをビルドし、出力したディレクトリをbuildDirとして設定する。デプロイするJavaScriptファイルなどのプログラムは全てdist/functions以下に出力するように設定しておく。Hostingの設定で全てのリクエストでssrを呼ぶようにする。Functionsは基本的に開発時に使用する事はない。Emulatorを立ち上げる。後はhttp://localhost:5000アクセスすれば良い。dev-sample-appと本番環境sample-appの両方を作成している。他にも環境なども必要であれば適宜用意する。}}CI/CDの時に環境を分けてテスト・デプロイできるようにしておく。.env.prodと.envファイルを用意して対応した。Functionsは開発中だと起動が遅くSSRに時間がかかっていた。「本番で大丈夫なのかな?」と心配になっていたが、アクセスが増えると解決された。Deploymentデプロイ時のダウンタイムはできれば無くしたい。バージョンニングができないところが辛い。Lambdaだとできるみたいだが、その辺はきっと開発してくれると信じている。8以降しか対応していない。対応できるようになった。Python今の所構わず使用しているが、一応ちゃんと動作している。デプロイ後はEmulatorを使用しないので、目をつむっている。Firestoreとの連携を考えるのであれば、おそらくVuexの中で使用する事になるだろう。Firestoreは非常に強力だが、マルチプラットフォームが当たり前になっている現代ではビジネスロジックを何度も書く事になる大変だ。ラップして使用した方が良いかもしれない。Functionsの中で呼ぶことが多い。Datastoreで良いのではないかと思うこともある。Testingで簡単にA/Bテストまでやってみるたまにゃん🇹🇭エンジニアバンコクで働くエンジニア。ex-日本経済新聞社。マーケティングテクノロジーの分野で仕事してます(CRM、データエンジニアリング)。