背景
PWA＋SPAのwebアプリを作る際にnuxt.js＋firebaseを合わせて利用すると便利だったので、そこで得た知見をメモとして残しておこうと思います。まだ勉強を進めている途中のため勘違いや不明点も多々があり、もし正しいやり方などをご存知の方がいらっしゃればコメントをいただけると泣いて喜びます！
nuxt.jsの設定値
$ npx create-nuxt-app {{ アプリ名 }}
create-nuxt-app v3.4.0
✨ Generating Nuxt.js project in frame-catch
? Project name: {{ アプリ名 }}
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios, Progressive Web App (PWA)
? Linting tools: ESLint, Prettier, Lint staged files
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: None
設定の選び方
- 基本的には他サイトを検索して出てきたおすすめ設定を利用
- PWA・SPAでなるべくスマホ上で高速に動くようにする
- firebase hostingにデプロイするため静的サイト(SSG)を使う
- インフラ（terraform）と同じリポジトリで管理をするため、ciやGitはここでは導入しない
使ってみて感じたメリット・デメリット
nuxt.js
メリット
- プロジェクトを作ってlocalでページを立ち上げるまでがめちゃ早い（railsと同じで理解してなくても動く）
- 言語やパッケージ、Lintツール、UI フレームワークなどが自由に選べる
- 静的ファイルとして出力できるためfirebase hostingにもデプロイ可能（firebase functionsを使えばSSRもすぐできるみたいです）
- (Vue.jsだから)「画面・ロジック・デザイン」をまるっとコンポーネントとして管理できる
デメリット（≒理解していない点）
- コンポーネントの理想的な単位が難しい...
- storeの値を使う際にpage側・component側それぞれどこで呼び出した方が良いかがわからない
- (nuxt.jsだからではないが)promise系の処理が入ると画面が更新されなかったりが多発する（特にstore内でpromise系を使うと難しい。。。）
firebase(hosting, authentication, firestore)
メリット
- どれもjavascriptから使いやすい
- firestoreはterraformでデータを記述できるため、開発環境におけるテストデータを用意しやすい
- firestoreの権限管理(rule)の柔軟性が高く、 「userドキュメント内でroleの値がADMINのユーザーだけ、noteドキュメントの値を変更できる」といった複雑な権限管理が行える
- cloud buildからciを組む際に、firebase コミュニティ ビルダーを利用すると簡単に実装できる
デメリット
- (firebase側の問題ではないが)terraformからfirestore以外（authenticationなど）の設定ができない
- firestoreがNoSQLのため？N対Nが作りにくい（referenceを多用する形になる）
＋α：Vuetify
メリット
- 今まで使っていたuikitと比べてデザインやコンポーネントが豊富
- Vuejsに特化しているのでデータの渡し方が簡単
デメリット...？
- 公式ドキュメントにつながらないことがよくある（自分だけ。。。？）
- Time pickersが時代の先取りをしすぎていて理解が追いつかなかった
感想
元々自社サイトでは「S3ホスティング＋cdnで入れたvuejsでフロント作成＋uikitでデザイン」をしていたのですが、今回nuxt.js+firebaseを使ってみたら簡単＋デザインが綺麗(Vuetifyが)すぎて勢いで自社サイトリニューアルをしてしまいました笑。細かい構成やコードはこちらのブログにまとめているので気になる方はいてみてください。（Nuxt、cloud build、terraformなどのコードや構成図などを詳しめに記載しています。）
唯一Nuxtを使っていて気になった点は「pagespeed insights」のスコアが結構悪くなったことです。体感としてもSPAだからか最初の読み込みは少し時間がかかる印象だったので、仕方ないのかなと思いつつ今後早める方法を模索していこうと思います。
また触り初めて数週間時点で書いているので間違いやご指摘等あればコメントいただけると助かります。
最後まで読んでいただきありがとうございました。