トップページ

東京雑居ビルズ

Webアプリケーション

東京雑居ビルズのリンク

使用した技術やツール

  • TypeScript

    TypeScript

  • Next.js

    Next.js

  • Tailwind CSS

    Tailwind CSS

  • Jest

    Jest

  • Firebase

    Firebase

  • Vercel

    Vercel

概要

雑居ビルの画像やテナントなどの情報を保存して眺めるWebアプリケーションです。

機能

  • サインイン、サインアウト
  • アカウントの削除
  • テキストや画像の投稿、編集、削除
  • 投稿の検索
  • ライトモードとダークモードの切替

こだわり

ユーザーが投稿したビル名で検索できるよう、ビル名とは別に検索用のフィールドを作成しています。

当WebアプリケーションはデータベースにNoSQLのFirestoreを使用していますが、Firestoreは全文検索に対応していません。

そのためFirestoreで全文検索を行なう場合は、AlgoliaやElastic Searchなどのサードパーティーのサービスを使用することが一般的です。

しかし、サードパーティーのサービスを導入する手間とサービスの利用料を鑑み、検索対象のフィールドを絞ってFirestoreのみで検索できるようにしました。

検索用フィールドの値は、例えば「日本ジャパンビル」というビル名の場合、以下になります。

["日本", "本ジ", "ジャ", "ャパ", "パン", "ンビ", "ビル"]

上記のように、文字列を隣り合う2文字ずつで分割して配列にしています。

このフィールドに対して、Firestoreのarray-contains-anyを使用することで、ユーザーが投稿したビル名による検索を実現しています。