皆さんご無沙汰しています、末ちゃんです。

先日Googleより非常に興味深いライブラリがリリースされました。
その名もBudouX！

追記

v0.0.3以降で素晴らしいCLIとWeb Componentsを加えてくださった方々がいます。
簡単に使うにはこれらを使用すると良いです。

https://zenn.dev/junseinagao/articles/f4fd3bf790ef189f8c74

BudouXとは

日本語サイトによくある1文字だけ段落ちしている現象、それを解決してくれるライブラリがBudouXです。

例えばLP程度であれば、手動で改行位置を制御して表示させることは、なんとかなります。
しかしウェブサイト規模になったとき、すべてのコンテンツに対して改行位置を指定するのは到底現実的ではありません。

改行位置を指定する従来のコードの例

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<p style="word-break: keep-all;">あの<wbr />イーハトーヴォの<wbr />すきとおった風、<wbr />夏でも<wbr />底に<wbr />冷たさをもつ<wbr />青いそら、<wbr />うつくしい<wbr />森で<wbr />飾られた<wbr />モリーオ市、<wbr />郊外の<wbr />ぎらぎら<wbr />ひかる<wbr />草の波。</p>

<p><span style="display: inline-block;">あの</span><span style="display: inline-block;">イーハトーヴォの</span><span style="display: inline-block;">すきとおった風、</span><span style="display: inline-block;">夏でも</span><span style="display: inline-block;">底に</span><span style="display: inline-block;">冷たさをもつ</span><span style="display: inline-block;">青いそら、</span><span style="display: inline-block;">うつくしい</span><span style="display: inline-block;">森で</span><span style="display: inline-block;">飾られた</span><span style="display: inline-block;">モリーオ市、</span><span style="display: inline-block;">郊外の</span><span style="display: inline-block;">ぎらぎら</span><span style="display: inline-block;">ひかる</span><span style="display: inline-block;">草の波。</span></p>

言い方は悪いですが、こんなこと到底やってられません。

BudouXが希望の光を灯してくれた

こんな非常に面倒な日本語の改行処理も、BudouXにより自動化される時代がやってきました！

<p id="sentence">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>

import { loadDefaultJapaneseParser } from 'budoux';
const parser = loadDefaultJapaneseParser();

const target = document.querySelector('#sentence');
target && parser.applyElement(target);

上記のコードだけで、以下のHTMLが自動的に吐かれます。

<p id="sentence" style="word-break: keep-all; overflow-wrap: break-word;">あのイーハトーヴォの<wbr>すきと<wbr>おった<wbr>風、<wbr>夏でも<wbr>底に<wbr>冷たさを<wbr>もつ<wbr>青いそら、<wbr>うつくしい<wbr>森で<wbr>飾られた<wbr>モリーオ市、<wbr>郊外の<wbr>ぎらぎらひかる<wbr>草の<wbr>波。</p>

Next.jsなどのフレームワークと相性が良さそう

上記のサンプルコードはHTML上に吐かれた実体に対してBudouXを適用しましたが、例えばすべてのコンテンツに対して処理を加えると、クライアント端末に無用な負荷をかけてしまいます。

そのため、BudouXはSSGやSSRするコンテンツと相性が非常に良いのではと思います。

まとめ

日本語の改行処理は長らく問題となってきました。しかし都度対応をすると、最初に記載したサンプルコードのようなことをしなければならず、直にHTMLを書いているようなプロジェクトでは、非常に面倒が多いどころか、ソースコード内の文章検索ができないなど、悲惨な状況を作り出す負の産物でした。

そもそもHTMLを直に書くようなプロジェクトは、この時代ではほぼ皆無でしょう。

Next.jsやGatsby.jsなどの静的サイトジェネレータを使用しているこの時代だからこそ、BudouXは生きてくると思います。
是非皆さんも活用してみてください。