Crieit で書いた方はサービスの説明がメインだったので、この記事では技術的な話をメインでします。

自己省察テストをやって、自己理解を深めよう！ （2/22 ～ 2/28）１週間で Web サービスを作るイベント - お題「増やす」 - Boards - Crieit

自己省察テストというサービスを作りました！

サイト: 自己省察テスト

---

技術スタックは以下のとおりです。

• Nuxt.js
• Firebase
• TypeScript
• Vuetify

Firebase について

例によって Firebase を使って作りました。主に

• Hosting
• Functions
• Firestore
• Authentication
• Emulator

あたりの機能を使っています。その際、今回は @nuxtjs/firebase を使ってみたのですが、エミュレーターの設定がめちゃくちゃ楽で感動したのをよく覚えています。

前回 Firebase を使ったときは開発用のプロジェクトを作ったのですが、今回はエミュレータの環境を使えたので本番環境のプロジェクトしか作っていません。

Vuetify について

普段は Tailwind CSS を使うことが多いのですが、今回は時間がなかったので Vuetify を使うことに。

Vuetify はほとんど使ったことがないのですが、ユーティリティクラスがあるのでちょっとした位置調整ができて良いですね。

サイトのデザインはまさに CSS フレームワーク使って作りました！みたいな見た目になってしまいましたが、そもそもデザインはそこまでこだわっていないので良しとしています。

今回はほぼ自分で CSS を書くことなくサイトを作れたので、たまにはこういうのも良いな〜と思いました。

大変だった点

今回、サイトを作る上で地味に大変だった点についても残しておきます。

デプロイ先の選定

最終的には Firebase Hosting でデプロイしていますが、その前に Vercel へのデプロイも試してみました。

ただ、Vercel にデプロイするとなぜか動作しない。。。どうやら Firebase と相性が良くないようで、対応する方法も見つかったのですが、自分の環境ではうまくいきませんでした。

ここに時間をかけるのもアレなので、Hosting で行くか〜と思ったのですが、ここにも罠がありました。

Hosting にデプロイするための設定が難しい

過去に Hosting にデプロイしたことはあったので、すぐできるかな〜と思っていたのですが微妙に設定が異なったりして過去のコードが使えないなど、地味にハマりポイントがありました。

実は今回時間がかかったのはメインとなるサービス開発の方ではなくこの設定の方で、これがなけれなもっと早く完成していたのに･･･と少し残念です 😭

最終的に動作するようになったので良かったですが、結構力技です。気になる方はぜひコードを眺めてみてください 🙌

さいごに

今回もサービス開発ではわりと慣れ親しんだ技術スタックを使って開発してきましたが、正直ちょっと飽きてきた･･･という気持ちもあります。

特に Firebase は認証から DB まで色々揃っていて最高のサービスなのですが、長く使っていると気になる点もあります。例えば Firestore に関しては、データの呼び出し時に型情報をうまく付与するのに工夫が必要で、TypeScript を使っているともうちょっとなんとかならないかな〜とか思ったりします。

というわけで、今は「Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代」の技術スタックに興味があります。

特に、Prisma はかなり型がしっかりしている印象で、開発体験が良さそうですね。

次回サービスを作る際に、技術的な興味を満たすために作るか、速攻でサービスを完成させることを優先させるかなどによって変わってきますが、できることならぜひ触ってみたいですね。

---

サイト: 自己省察テスト