Technical Docs
Dummy Text Generator の設計
日本語・英語のダミーテキストを指定文字数で生成する設計と、文章プールを活用した繰り返し生成アルゴリズムを解説します。
1. 設計思想 — なぜこのツールが必要か
UIプロトタイピングの初期段階では、本番コンテンツが存在しない状態でも レイアウトや文字組みを確認したいという需要があります。 英語圏では古くから Lorem Ipsum が使われていますが、 日本語サイトでは英語テキストでは実際のレイアウトを正確に確認できません。 日本語フォントと英語フォントでは文字幅・行間が大きく異なるためです。
本ツールは日本語・英語の切り替えと文字数の自由指定を サポートすることで、実際の文章量を想定したデザイン検証を可能にします。 ワンクリックで全選択・コピーできるUIにより、プロトタイプへの貼り付けも素早く行えます。
2. 技術アーキテクチャ
generateDummyText(options: DummyTextOptions): DummyTextResult が 唯一の純粋関数です。options は language('ja' | 'en')とtotalChars(目標文字数)の2プロパティを持つシンプルな型です。
ファイル内に JA_SENTENCES(12文)と EN_SENTENCES(12文)の 2つの文章プールを定義しています。 これらはモジュールスコープの定数のため、関数呼び出しのたびに生成されることなく 効率的に再利用されます。
返り値の DummyTextResult は text(生成テキスト)とtotalChars(実際の文字数。目標値を若干超えることがある)を含みます。
3. ロジック解説
生成アルゴリズムは while ループによるシンプルな繰り返しです。
- 文章の選択:
sentences[i % sentences.length]で プールの文章を順番に選択します。インデックスiをインクリメントし続けることで、 プールの末尾に達したら先頭に戻るサイクリックな選択が実現されます。 - 文字数の集計: 各文章を
parts配列に追加するたびにcharsに文章の文字数を加算します。 - 終了条件:
chars >= totalCharsになった時点でループを終了します。 文の途中で切り取らない設計のため、生成されたテキストはtotalCharsを若干超える場合があります。 - 結合: 日本語は
separator = ''(区切りなし)、 英語はseparator = ' '(スペース区切り)でjoinします。
4. 品質管理
src/lib/tools/__tests__/dummy-text.test.ts に Vitest による単体テストを実装しています。
- 文字数テスト: 指定した
totalChars以上の テキストが生成されることを確認。 - 言語切り替えテスト: 日本語モードでは日本語の文章が、 英語モードでは英語の文章が含まれることを確認。
- 最小文字数テスト:
totalChars = 1などの 極小値でも正常に動作することを確認。