🍇
Next.js (React) で BudouX を使って日本語の改行を整える
話題の BudouX を使って、日本語の改行をいい感じにしてみます。
おそらく同じことは React でもできるはず…!
試したリポジトリも公開中です。
作り方
まずはセットアップ。
# お手軽にプロジェクトを作成します。
npx create-next-app@latest --ts
# BudouXをインストールします。
npm install -S budoux
次に、BudouXを使って、文章を解析して span
タグで囲っていきます。
BudouX のパーサー自体は分割した文字列を配列で返してくれるところまでしてくれるので、あとはよしなに map して囲っていく処理を自分で書きます。
この処理はプロジェクトのあらゆる場所で使われることを想定し、 useBudouX()
というフックで使えるようにしておきます。
hooks/useBudouX.tsx
import { loadDefaultJapaneseParser } from 'budoux'
const parser = loadDefaultJapaneseParser()
export const useBudouX = () => {
const parse = (text: string) => {
return parser.parse(text).map((s) => (<span key={s}>{s}</span>))
}
return {
parse
}
}
用意したフックを使っていきます。 useBudouX()
の戻り値の parse を使ってテンプレート内で文章を渡すと、良い感じに span
タグで囲ってくれます。
pages/index.tsx
import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import { useBudouX } from '../hooks/useBudouX'
const Home: NextPage = () => {
const { parse } = useBudouX()
return (
<div className={styles.container}>
<h1 className={styles.title}>
{parse('あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。')}
</h1>
</div>
)
}
export default Home
最後に span
タグで囲われた箇所がインラインブロック要素として扱われるようにするように、CSSの適当な場所に記述します。
styles/Home.module.css
// ...
.title span {
display: inline-block;
}
完成 🎉
見比べてみると、良い感じの箇所で改行されていることがわかります◎
また、解析はそれなりにコストのかかる処理なので、実際のプロジェクトでは useMemo
などを使って適宜キャッシュさせるなどした方が良いかもしれません。
Discussion