HB DevTools

Technical Docs

Dummy Text Generator の設計

日本語・英語のダミーテキストを指定文字数で生成する設計と、文章プールを活用した繰り返し生成アルゴリズムを解説します。

1. 設計思想 — なぜこのツールが必要か

UIプロトタイピングの初期段階では、本番コンテンツが存在しない状態でも レイアウトや文字組みを確認したいという需要があります。 英語圏では古くから Lorem Ipsum が使われていますが、 日本語サイトでは英語テキストでは実際のレイアウトを正確に確認できません。 日本語フォントと英語フォントでは文字幅・行間が大きく異なるためです。

本ツールは日本語・英語の切り替え文字数の自由指定を サポートすることで、実際の文章量を想定したデザイン検証を可能にします。 ワンクリックで全選択・コピーできるUIにより、プロトタイプへの貼り付けも素早く行えます。

2. 技術アーキテクチャ

generateDummyText(options: DummyTextOptions): DummyTextResult が 唯一の純粋関数です。optionslanguage'ja' | 'en')とtotalChars(目標文字数)の2プロパティを持つシンプルな型です。

ファイル内に JA_SENTENCES(12文)と EN_SENTENCES(12文)の 2つの文章プールを定義しています。 これらはモジュールスコープの定数のため、関数呼び出しのたびに生成されることなく 効率的に再利用されます。

返り値の DummyTextResulttext(生成テキスト)とtotalChars(実際の文字数。目標値を若干超えることがある)を含みます。

3. ロジック解説

生成アルゴリズムは while ループによるシンプルな繰り返しです。

  1. 文章の選択: sentences[i % sentences.length] で プールの文章を順番に選択します。インデックス i をインクリメントし続けることで、 プールの末尾に達したら先頭に戻るサイクリックな選択が実現されます。
  2. 文字数の集計: 各文章を parts 配列に追加するたびにchars に文章の文字数を加算します。
  3. 終了条件: chars >= totalChars になった時点でループを終了します。 文の途中で切り取らない設計のため、生成されたテキストはtotalChars を若干超える場合があります。
  4. 結合: 日本語は separator = ''(区切りなし)、 英語は separator = ' '(スペース区切り)で join します。

4. 品質管理

src/lib/tools/__tests__/dummy-text.test.ts に Vitest による単体テストを実装しています。

  • 文字数テスト: 指定した totalChars 以上の テキストが生成されることを確認。
  • 言語切り替えテスト: 日本語モードでは日本語の文章が、 英語モードでは英語の文章が含まれることを確認。
  • 最小文字数テスト: totalChars = 1 などの 極小値でも正常に動作することを確認。