はじめに
「漢字の読みを考慮した、あいうえお順ソートツール」を作りました。
形態素解析器「kuroshiro+kuromoji」を使って、漢字の読みを考慮した上で、文字列をあいうえお順にソートするツールです。
作った理由として、既存のサービスが、漢字の読みを考慮せず、(おそらく)文字コードだけ見てソートしていたので作りました。
リポジトリURLは下記のとおりです。
技術スタック
フロントエンド：Next.js,Tailwind CSS
バックエンド：なし
インフラ：CloudFlare Page
形態素解析器：kuroshiro+kuromoji
作る過程で困った点とその解決策
KuromojiAnalyzerのdictに関するエラーの解決
KuromojiAnalyzerを使用する際、下記のようなソースコードを記述しました。下記のエラーが発生しました。
import KuromojiAnalyzer from "kuroshiro-analyzer-kuromoji";
const analyzer = new KuromojiAnalyzer();
await kuroshiro.init(analyzer);
すると下記のようなブラウザのコンソールにエラーメッセージが出力されました。
dict/base.dat.gz:1 Failed to load resource: the server responded with a status of 404 (Not Found)
このエラーメッセージを直すためには、Next.jsのpublicにtakuyaa/kuromoji.jsのdictを設置し、そのパスをKuromojiAnalyzerの引数にdictPathを設定する必要があります。
(中略)
├─public
│ │ file.svg
│ │ globe.svg
│ │ img.png
│ │ next.svg
│ │ vercel.svg
│ │ window.svg
│ │
│ └─dict
│ base.dat.gz
│ cc.dat.gz
│ check.dat.gz
│ tid.dat.gz
│ tid_map.dat.gz
│ tid_pos.dat.gz
│ unk.dat.gz
│ unk_char.dat.gz
│ unk_compat.dat.gz
│ unk_invoke.dat.gz
│ unk_map.dat.gz
(中略)
import KuromojiAnalyzer from "kuroshiro-analyzer-kuromoji";
const analyzer = new KuromojiAnalyzer({ dictPath: "/dict" });
await kuroshiro.init(analyzer);
TypeScript型情報がない場合のモジュール読み込み方法
モジュールKuroshiroとKuromojiAnalyzerに関して、TypeScriptの型情報を見つけることができず、モジュールを読み込めませんでした。
TypeScript型情報がない場合のモジュール読み込み方法として、下記の解決策が載っています。
私は//@ts-ignoreを使用し、型情報を無視させました。
//@ts-ignore
import Kuroshiro from "kuroshiro"
//@ts-ignore
import KuromojiAnalyzer from "kuroshiro-analyzer-kuromoji"
そのほか参考にした記事