Next.js + Vercelで作る爆速ベトナム辞書

Next.js + Vercelで作る爆速ベトナム辞書

つい先日、Helpfeelさん主催の個人開発祭り #4に参加してきました。 それに感化されて、過去に個人で作ったアプリケーションを成仏するために、この記事を書いています。

自分は1年ほど前にベトナム語の勉強を始めました。 わからない単語は都度Google検索やGoogle翻訳で調べていたのですが、サクッと単語を調べられるWebアプリがほしいと思いました。 この記事はタイトルにある通り、Next.jsとVercelを使ったベトナム語辞書の紹介です。 辞書アプリは以下で公開しています。

https://vn.i-beam.org/

アーキテクチャ

今回は勉強のために、WebフレームワークにNext.jsを採用しました。 インフラはVercelを利用しています。 永続化するデータはなく、データベースは利用していません。 つまりバックエンドはVercel Functionのみです。

辞書検索はVercel Functionのオンメモリで行っています。 検索エンジンにはflexsearchを採用しました。 flexsearchはNode.jsで利用できる検索エンジンライブラリで、めちゃくちゃ早いです。 辞書データのインデクシングはVercel Functionの起動時に行います。 初回検索時は少し時間がかかりますが、2回目以降の検索は高速に検索結果を返します。

辞書データ

ベトナム語辞書はFree Vietnamese Dictionary Projectというプロジェクトが提供している辞書データを利用しています。 辞書データはStarDictという形式で配布されており、辞書データのパースはNode.jsでゴリゴリやっています。

実際に辞書を使ってみてわかったのですが、単語ごとに情報のばらつきがあるみたいですね。

おわりに

この辞書アプリを作るときにVercel KVなども使ってみましたが、最終的にはオンメモリ検索に落ち着きました。 仕組みは素朴ですが、メンテナンスが楽で、検索速度も十分早く良い体験が提供できます。 ベトナム語辞書を公開しておよそ1年が経過し、今ではベトナム語の勉強をやめてしまいました 😇

次は英語辞書を作りたいなぁと。最近どこの辞書サイトも広告が増えてますし。 この検索技術は他のアプリケーションにも応用できそうなので、なにかアイディアが浮かんだら試してみたいです。


Profile picture

Shin'ya Ueoka

B2B向けSaaSを提供する会社の、元Webエンジニア。今はエンジニアリング組織のマネジメントをしている。