日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして

この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の記事です。

WEB 開発において日本語が抱える問題

日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。

見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。

しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。

これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に...

<span style="display:inline-block;">この記事は、</span
><span style="display:inline-block;">大学生限定クリエイティブコミュニティ</span>
<span style="display:inline-block;">GeekSalon Advent Calendar 2021</span
><span style="display:inline-block;"> 3 日目の記事です。</span>

もしくは、後に BudouX が変換するように<span style="word-break: keep-all; overflow-wrap: break-word;"></span>と<wbr>タグを用いて文字列中で改行して良い位置を指定することができます。

「これなら、良いかな ☺️」

しかし、できるといって誰がこんなことを逐一手書きでやれるでしょう...。やれません。

BudouX とは

BudouX はこの文字組みを自動で行ってくれるライブラリです。 そのうえ、ブラウザ上でも実行可能な JavsScript ライブラリです。

自己完結型の機械学習モデルを用いることで、約 15kB 程のバンドルサイズに収まります。どこでも使える軽量さです。

例えば、この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の記事です。という文字列をライブラリに渡すと

この記事は、
大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3日目の
記事です

という風に日本語として自然な位置で区切ってくれます。さらにこれに<span style="word-break: keep-all; overflow-wrap: break-word;"></span>と<wbr>を自動挿入した結果も生成できます。

JavaScript ライブラリとして BudouX を使用する

npm パッケージとして配信されていますので、Node.js ライブラリとして使用することが可能です。

プロジェクトの node_modules に追加した後...

$ npm install budoux

importして使います。ES Module と Common JS どちらの形式もあります。

import { loadDefaultJapaneseParser } from "budoux";
const parser = loadDefaultJapaneseParser();
console.log(parser.parse("今日は天気です。"));
// ['今日は', '天気です。']

詳しくは、公式 READMEに用例が載っています。

Node.js の CLI ツールとして BudouX を使用する

CLI を使って変換することもできます。また、Node.js だけでなく Python 製の CLI もあります。

(個人的な話にはなりますが)

BudouX に出会った時、僕はこう考えました。

🙄「JS のライブラリになってるし、めちゃ使いやすそう...。WEB 制作の案件でやたら来る文字組みの改行修正ってこれを使って対応していけないかな...。」
🙄「けど、WEB 制作の現場では、HTML と CSS はかけるけど、JS をさわるのには抵抗がある。という人も多い し、ハードコーディングで変換結果を簡単に出力できる手段が必要だな...」
🙄「お、Python 製の CLI ツールが内蔵されてるぞ、、けど、俺 Python の環境構築やったことないし上手くできないな〜 Node.js 製だったら誰でも Node.js をインストールしてnpx で一発なんだけどな〜 」
🤩「そうだ！Node.js 製の CLI を作って PR を送ろう！」

そして、初めて Node.js 製の CLI を作り、初めてテストを書くという苦難を乗り越え PR がマージされたv0.0.3パッケージがリリースされました！

個人的に、プログラミングを始めてから OSS にコントリビュートするのがずっと目標だったため感動です。😭

マージされた PR たち

BudouX CLI の使用方法

それはとても簡単に使うことができます。

まずは、budouxをグローバルでインストールします。

$ npm install -g budoux

そしたらbudouxコマンドが使えるようになります！

$ budoux 'この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の記事です。'
# この記事は、
# 大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の
# 記事です。

もしくは、npx budoux と入力すれば、インストールすら必要ありません！オプションとして--htmlをつけると<span style="word-break: keep-all; overflow-wrap: break-word;"></span>と<wbr>を自動挿入した結果を返します。

$ npx budoux --html 'この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の記事です'
# <span style="word-break: keep-all; overflow-wrap: break-word;">この記事は、<wbr>大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の<wbr>記事です</span>

budoux 引数を持たずに実行すると標準入力を受け付けます。また、パイプなどで標準入力を流すこともできます。

$ echo -e 'この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の記事です' | budoux --html
# <span style="word-break: keep-all; overflow-wrap: break-word;">この記事は、<wbr>大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar 2021 3 日目の<wbr>記事です</span>

これで、誰でも簡単に BudouX を活用することができます！

Web Component で BudouX を使用する！

(ここが一番読んで欲しい節です。)

しかし、BudouX を使う際に Node.js CLI よりも一番簡単な方法があります。なんと、v0.0.3パッケージには、BudouX を使った Web Component が含まれています！

<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>

で Web Component を読み込んで

自動で改行処理を当てたい場所を<budoux-ja></budoux-ja>タグで囲むだけです。

<budoux-ja>
  この記事は、大学生限定クリエイティブコミュニティ GeekSalon Advent Calendar
  2021 3 日目の記事です
</budoux-ja>

Web Components はモダンブラウザでは(Safari は怪しいが...)サポートされていますので、これ以上に簡単で確実な使用方法はないでしょう。

自分の CLI ツールがあればいいんじゃね? の考えの前に既に「Web Component として配信すればいいんじゃね」が先を行ってしまったわけですね。

みなさんも、BudouX を色んな方法でぜひ使っていってください。

参考

---

宣伝

団体のアドベントカレンダー記事なので１つ宣伝を...

GeekSalon という大学生限定のプログラミングコミュニティでは、完走率 80%以上、プロダクトは受講生の作りたいものを作り、学生メンターが受講生と併走しながら自分の力で 1 つアプリケーションを 3 ヶ月で完成させる経験を 約 10 万円近くの価格で提供しています。

自分が講師をしている WebExpert コースでは、JavaScript を学んで Vue を使った WEB アプリケーション開発をチームで行います。今のエンジニア新卒採用で面接官から必ずと言って良いほど質問される「なにか開発した経験ありますか」と「チームで開発した経験はありますか」の 2 点を 3 ヶ月でクリアできるコースですので、もし、大学生かつ 1 人での学習が上手くいかない方は興味があったら説明を聞いてみてください。(定期的に説明会を開いてます。)

---

また、WEB エンジニアを目指して 2019 年にプログラミングを始めるも、就職活動せずに 2021 年に卒業してそのままフリーランスになってしまった自分も新卒フロントエンドエンジニアとして会社員の職を探しています。もし、ご興味がある方は TwitterDM 等からご連絡いただけると嬉しいです。