Zenn
🍇

Next.js (React) で BudouX を使って日本語の改行を整える

2021/11/23に公開
Next.js
React
#
budoux
#
budou
tech

話題の BudouX を使って、日本語の改行をいい感じにしてみます。
おそらく同じことは React でもできるはず…！

試したリポジトリも公開中です。
https://github.com/minojiro/budoux-next

作り方

まずはセットアップ。

# お手軽にプロジェクトを作成します。
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 などを使って適宜キャッシュさせるなどした方が良いかもしれません。

before

after

Discussion