Pretext.JS 概要
Pretext.JS は、高速かつ純粋な JavaScript/TypeScript 製のテキストレイアウトエンジンで、Document Object Model（DOM）に一切アクセスせず、すべて算術計算だけで複数行テキストの計測とレイアウト配置を行うよう設計されています。getBoundingClientRect() などの従来の DOM 計測が引き起こす「強制同期リフロー」によるパフォーマンスボトルネックを解消し、圧倒的に高速で効率的なテキストレイアウトを実現します。「一度計測すれば、あとは永続的に再利用できる（measure once, lay out forever）」というコンセプトに基づいており、2 回目以降のレイアウト計算は即時に完了します。
主な目的
動的かつ複雑な Web インターフェース向けに、高速・高精度・リフロー不要のテキストレイアウト計測（高さ・行数など）を提供することです。繰り返し DOM 計測を行うことで発生するブラウザスラッシング（頻繁なレイアウト計算によるパフォーマンス低下）の問題を根本から解決します。
ターゲットユーザー層
パフォーマンス重視のテキスト中心 UI を構築する Web 開発者および開発チーム。具体的には、仮想スクロールリスト、AI チャットインターフェース、コードエディタ、コラボレーションホワイトボード、データビジュアライゼーションなど、動的なテキストレイアウトを滑らかで高速かつレスポンシブに保ちたいあらゆるユースケースに適しています。
機能の詳細と動作
Pretext.JS は、2 つのコアステップで動作します。
-
prepare(text, font)
指定したテキスト文字列とフォントスタイルに対して一度だけ実行する関数です。空白文字の正規化、Unicode 行分割ルールの適用、テキストのセグメント分割を行い、ブラウザの Canvas フォントエンジンを用いて各セグメントのグリフ前進幅を高精度に計測します。計測結果は再利用可能な「ハンドル」としてキャッシュされます。 -
layout(handle, containerWidth, lineHeight)
この関数は純粋な算術計算のみで構成されており、ほぼ瞬時に実行されます。prepare済みのハンドルとコンテナ幅、行の高さを受け取り、セグメント幅の総和から行分割位置を算出し、総行数およびテキスト全体の高さを求めます。このステップでは DOM 読み取りを一切行わないため、リフローが発生しません。
主な機能
-
DOM 読み取りゼロ
初回のprepare()呼び出し以降、すべてのlayout()処理は純粋な算術演算だけで完結し、getBoundingClientRect()やoffsetHeightを含む DOM アクセス、および強制同期リフローを完全に回避します。 -
実フォントメトリクス活用
ブラウザ標準の Canvas フォントエンジンでグリフ幅を計測するため、実際のブラウザ描画結果と一致する精度の高いテキストレイアウトを保証します。 -
多言語対応設計
CJK（中国語・日本語・韓国語）をはじめ、アラビア語、ヘブライ語、タイ語、ヒンディー語などの複雑な文字体系にも対応しており、正しい Unicode セグメンテーションや双方向テキスト処理をサポートします。 -
TypeScript ネイティブ
最初から TypeScript で開発されており、すべての関数・パラメータ・戻り値に対して正確な型定義を提供します。外部の@typesパッケージは不要です。 -
再利用可能な準備済みハンドル
一度prepare()を実行して得られるハンドルを使い回すことで、モバイル・タブレット・デスクトップなど、異なるコンテナ幅ごとのレイアウト計算を極めて低オーバーヘッドで実行できます。 -
ランタイム依存関係ゼロ
標準的なブラウザ API のみで動作するため、バンドルサイズが小さく、外部パッケージに起因する予期しない不具合も発生しにくくなっています。
ユーザーにもたらすメリット
-
卓越したパフォーマンス
従来の DOM ベース手法と比較して最大 500 倍にも達する高速なテキストレイアウトを実現し、数千件規模の動的テキスト要素があっても 60fps のスムーズなスクロールと高い UI 応答性を維持できます。 -
優れたユーザー体験
UI の「ガタつき」やレイアウトシフト、カクつきを解消し、とくに動的コンテンツフィードやチャットインターフェースで滑らかで安定したビジュアル体験を提供します。 -
高精度なレイアウト
ブラウザ実描画と整合する正確なテキスト計測により、視覚的なズレや不整合を防ぎます。 -
開発の簡素化
TypeScript ネイティブでわかりやすい API を提供し、複雑なテキスト計測ロジックを抽象化することで、開発者の生産性と保守性を向上させます。 -
グローバル対応アプリケーションの実現
多様な文字体系への強力なサポートにより、グローバル市場向けの国際化対応 Web アプリケーションを構築しやすくなります。 -
軽量かつ高信頼
外部依存がないためバンドルが軽量で、長期運用時の安定性も高く保ちやすい構成です。
互換性とインテグレーション
-
フレームワーク非依存
純粋な JavaScript/TypeScript ライブラリとして設計されているため、React・Vue・Angular・Svelte などのモダンフレームワークや、プレーンなバニラ JavaScript プロジェクトにもシームレスに統合できます。 -
モダンブラウザ対応
すべてのモダンな Web 環境で利用可能な標準ブラウザ API のみを利用しています。 -
インストール
npm、pnpm、bun など一般的なパッケージマネージャーから簡単に導入できます。 -
TypeScript 連携
ネイティブな TypeScript サポートにより、追加設定なしで TypeScript プロジェクトにスムーズに組み込めます。
実運用での利用例とデモ
-
バーチャルスクロール
1 万件の可変高さ行を DOM 読み取りなしでレイアウトし、60fps の滑らかなスクロールを実現するデモを提供します。 -
AI チャット
ストリーミングされる AI 応答のチャットバブル高さを事前計算することで、レイアウトシフトやガタつきを排除した安定したチャット UI を構築できます。 -
多言語コンテンツの国際化
中国語・アラビア語・韓国語・ラテン文字などが混在する多言語フィードを 1 つの仮想リストで正確にレイアウトするデモにより、多言語レイアウト性能を確認できます。 -
コミュニティによるショーケース
砂浜に文字を書くような表現、幾何学的なテキストビジュアライゼーション、リアルタイム 3D オブジェクトへのテキストラッピングなど、Pretext.JS の柔軟性と拡張性を示すクリエイティブな応用事例が紹介されています。
アクセスおよび利用開始方法
-
インストール
- npm 利用時:
$ npm install @chenglou/pretext - pnpm 利用時:
$ pnpm add @chenglou/pretext - bun 利用時:
$ bun add @chenglou/pretext
- npm 利用時:
-
基本的な使い方
prepareとlayout関数をインポートします。
import { prepare, layout } from '@chenglou/pretext'prepare(text, font)を一度だけ呼び出し、再利用可能なハンドルを取得します。layout(handle, containerWidth, lineHeight)を呼び出し、高さと行数を即座に取得します。
-
試用・検証
公式サイト（pretextjs.dev）には、ライブプレイグラウンドおよび各種デモが用意されており、すぐに Pretext.JS の挙動やパフォーマンスを試して理解することができます。
