Firebase+Nuxt.jsで最高の開発体験と共に個人開発をはじめよう #TypeScript

どうもこんにちは @y_temp4 です。現在はフリーランスのエンジニアとして、主に Nuxt.js を用いたフロントエンド周りの開発業務を行っています。
この記事では最近個人開発で作ったサービスについて、技術的な観点を交えながら紹介していければなと思います！

つくったサービス

今回作ったサービスは AnyMake という個人開発者向けのプロダクト共有サービスです。個人開発者が自分で作ったサービスを広めるために利用することを想定しており、イメージとしては Product Hunt に近いです。

👉 最高のプロダクトと共に。プロダクト投稿サイト“AnyMake”を作りました

サービスの開発で使われている技術や構成についてざっくり列記すると、

Firebase + Nuxt.js の構成
パブリックなページは基本的に SSR
フロント・バックエンド共に TypeScript で記述
CSS フレームワークは Tailwind CSS を利用
Firebase Authentication を用いた認証
Cloud Storage を用いた画像のアップロード
データは Cloud Firestore で管理+Cloud Functions で呼び出し
Google App Engine でのデプロイ

といった感じですね。

ではさっそく、サービスを作る上で採用した技術について触れていきます。

Firebase+Nuxt.js の組み合わせが個人開発では最高すぎる理由

現状、個人開発において Firebase と Nuxt.js はかなりしっくりくる構成で、今後新しく何らかの Web サービスを作る際もまずこの構成にすることを考慮することが多くなりそうだな、と感じています 🤔

では、具体的になぜこれらの技術を使うかというと、主に以下の理由からですね。

開発体験が非常に良い
費用を抑えられる

開発体験が非常に良い

これまでさまざまなフレームワークを用いて Web サイトを作ってきた経験がありますが、その中でも特に Firebase と Nuxt は開発体験が良いな、と感じています。

まず Nuxt ですが、こちらは公式サイトにもあるように、以下のようなさまざまな処理をよしなにやってくれます。

Vue ファイルで記述できること（*.vue）
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES2015+ のトランスパイレーション
JS と CSS のバンドル及びミニファイ化
<head> 要素（<title>、<meta> など）の管理
開発モードにおけるホットリローディング
プリプロセッサ: Sass, Less, Stylus など
HTTP/2 push headers ready
モジュール構造で拡張できること

これのおかげで、開発者はフロントエンドの煩雑な設定に時間を取られることなく、アプリケーションの実装に集中することができます。

同様に、Firebase に関しても開発プラットフォームとして多くの便利な機能を兼ね備えており、（繰り返しになりますが）今回のサービス開発では主に以下の機能を利用しています。

Firebase Authentication
Cloud Storage
Cloud Firestore
Cloud Functions

そして、やはり Firestore のデータをクライアントからそのまま取得できるのは非常に快適ですね。以下はトップページでのプロダクト情報の取得コードの一部です。

const INITIAL_PRODUCT_LIST_COUNT = 5

async function getFirstProducts() {
  const snapshot = db
    .collection('products')
    .orderBy('voteCount', 'desc')
    .orderBy('createdAt', 'desc')
    .limit(INITIAL_PRODUCT_LIST_COUNT)
    .get()
  return snapshot
}

// ･･･省略･･･

const firstProductsSnaphot = await getFirstProducts()
const products = firstProductsSnaphot.docs.map(/* データの整形 */)

当たり前ですが、クライアントから直接データの取得処理を書けるおかげでサーバーサイドで API の作成などはしていません（その分、後述するセキュリティルールの記述などに気を配る必要がありますが）。

そして、この Firebase と Nuxt の両者を組み合わせる際に変なハマりポイントが少ないのも魅力です。公式ドキュメントもそうですが、他にも個人のブログや Qiita などのサイトでこれらの技術を組み合わせた参考実装などが多く見つかり、初心者でも比較的開発を始めやすいのも魅力ではないかと感じています。

さらに開発体験を上げるために利用しているもの

これだけでも十分なのですが、個人的に開発体験をさらに高めるために、TypeScript と Tailwind CSS も利用するようにしています。

まず TypeScript を用いることによって、無駄なバグが発生しにくくなり開発で変に時間をロスすることが減りました。また型による補完が効くのは、開発していて非常に心地よいですね。

以前は Vue / Nuxt に TypeScript を導入するのは面倒･･･というイメージを持たれがちだった印象ですが、最近では Nuxt 公式による TypeScript のサポートもあり、割と導入はしやすくなっているかなとは思います。

次に Tailwind CSS ですが、こちらはユーティリティファーストな CSS フレームワークで、Bootstrap や Bulma などのフレームワークとは異なり、自分でパーツを組み合わせてデザインをするようなフレームワークとなっています。

個人的には CSS フレームワークを導入したとしても、結局思い通りのデザインを実現しようとするとスタイルを上書きすることを考えると、こういったパーツのみ提供されたフレームワークの方が肌に合う印象ですね。

Firebase を用いた開発で気をつけるべきこと

これらの技術を用いた開発は個人的にはかなりしっくり来ているのですが、一方で注意すべきポイントもあるように感じています。

それは Firebase の Cloud Firestore の設計およびセキュリティルールの記述ですね。

Firestore の恩恵を最大限受けるためには、基本的にクライアントからデータの呼び出しを行いセキュリティルールで保護することになるかと思いますが、この際セキュリティルールの記述に穴があってはいけません。

ここが結構難しいポイントかと思っているのですが、その点自分は今回サービスを作るにあたって『Firestore を完全に理解するための本』である Firestore Mastery ¹ をめちゃくちゃ参考にさせていただきました。

この本は本当に最高で、開発中におそらく最低でも 5 回以上は読み返したと思いますし、読むたびに自分の悩みがピンポイントで解決される感覚があり「マジで最高だ...」という気分になっていました 😭

また、こちらの本以外にも以下の記事も何度も参照し参考にさせていただきました。

費用を抑えられる

次に個人開発で気になるのが費用かと思いますが、こちらも Firebase は無料枠から始められますので、一般的な Web サービスと比べても安価にサービスの運営を始めることができます。

Firebase Pricing

また Firebase のプロジェクトは複数作れますので、開発環境やステージング環境、本番環境を整えやすいのも魅力ですね。

さいごに

記事が長くなってきましたので今回はこれくらいにしておきますが、今後もこのサービス開発で得た知見などは定期的に記事にしていく予定ですので、ぜひお見逃しなく 👋

最後に、この記事が参考になりましたらぜひ LGTM していただけますと幸いです！

ここまで記事を読んでいただき、ありがとうございました 😄

👉 つくったサービスはこちら

今だと実践 Firestore の方が新しいっぽいです。 ↩