はじめに

「漢字の読みを考慮した、あいうえお順ソートツール」を作りました。

形態素解析器「kuroshiro+kuromoji」を使って、漢字の読みを考慮した上で、文字列をあいうえお順にソートするツールです。

作った理由として、既存のサービスが、漢字の読みを考慮せず、(おそらく)文字コードだけ見てソートしていたので作りました。

https://aiueosort.pages.dev/

リポジトリURLは下記のとおりです。

https://github.com/PenguinCabinet/Aiueo-sort-with-Kanji-reading

技術スタック

フロントエンド：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);

https://github.com/hexenq/kuroshiro-analyzer-kuromoji/issues/5#issuecomment-441417026

https://github.com/hexenq/kuroshiro-analyzer-kuromoji?tab=readme-ov-file#initialization-parameters

TypeScript型情報がない場合のモジュール読み込み方法

モジュールKuroshiroとKuromojiAnalyzerに関して、TypeScriptの型情報を見つけることができず、モジュールを読み込めませんでした。

TypeScript型情報がない場合のモジュール読み込み方法として、下記の解決策が載っています。

https://qiita.com/ichironagata/items/58855c5108f2cbcd18b7

私は//@ts-ignoreを使用し、型情報を無視させました。

//@ts-ignore
import Kuroshiro from "kuroshiro"
//@ts-ignore
import KuromojiAnalyzer from "kuroshiro-analyzer-kuromoji"

そのほか参考にした記事

https://community.cloudflare.com/t/error-no-pages-config-file-found-in-build-log/640560/6

https://zenn.dev/dev_shun/articles/ace43099ba43ed

https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/white-space