東京雑居ビルズ
Webアプリケーション
使用した技術やツール
TypeScript
Next.js
Tailwind CSS
Jest
Firebase
Vercel
概要
雑居ビルの画像やテナントなどの情報を保存して眺めるWebアプリケーションです。
機能
- サインイン、サインアウト
- アカウントの削除
- テキストや画像の投稿、編集、削除
- 投稿の検索
- ライトモードとダークモードの切替
こだわり
ユーザーが投稿したビル名で検索できるよう、ビル名とは別に検索用のフィールドを作成しています。
当WebアプリケーションはデータベースにNoSQLのFirestoreを使用していますが、Firestoreは全文検索に対応していません。
そのためFirestoreで全文検索を行なう場合は、AlgoliaやElastic Searchなどのサードパーティーのサービスを使用することが一般的です。
しかし、サードパーティーのサービスを導入する手間とサービスの利用料を鑑み、検索対象のフィールドを絞ってFirestoreのみで検索できるようにしました。
検索用フィールドの値は、例えば「日本ジャパンビル」というビル名の場合、以下になります。
["日本", "本ジ", "ジャ", "ャパ", "パン", "ンビ", "ビル"]
上記のように、文字列を隣り合う2文字ずつで分割して配列にしています。
このフィールドに対して、Firestoreのarray-contains-anyを使用することで、ユーザーが投稿したビル名による検索を実現しています。