Midjourney技術者がPretextを公開：AIで実装、DOM再計算を回避

Pretextは、Webブラウザ上での多行テキストの計測とレイアウトを高速に処理し、文字を滑らかに動かせる軽量オープンソースライブラリです。

MidjourneyのエンジニアであるCheng Lou氏が2026年3月27日に公開しました。サイズはわずか15KBで外部依存関係は一切なく、MITライセンスのTypeScript製です。注目すべきは、Lou氏がOpenAIのCodexやAnthropicのClaudeといったAIコーディングツールを活用してこれを書き上げた点です。

何ができるのか

従来のWebでは、動くオブジェクトに合わせて文章の配置をリアルタイムに変えようとすると、ブラウザが簡単に処理落ちしていました。Pretextはこの問題を解消します。

テキストブロックを完全に動的でインタラクティブな領域へと変え、文字の並び順や単語間のスペースを保ったまま、動くオブジェクトの周囲に文字をリアルタイムに回り込ませます。ブラウザのウィンドウサイズを激しく変更しても崩れません。

公開直後からコミュニティで多彩なデモが作られました。文章の中をドラゴンが飛び回り、吐き出された炎で文字が押し出されるデモや、スマートフォンを水平に保たないと文字がトレイから滑り落ちる読書アプリ、映画『Project Hail Mary』の再生に合わせて原作テキストが動的に追従する実験作などが登場しています。

実用的なアプローチも始まっており、識字障害のあるユーザー向けに文字間隔やフォントサイズを崩さず微調整できるツールの開発も進んでいます。

どのような仕組みか

通常、段落の高さや行の位置を取得するには、ブラウザのDOMに問い合わせる必要があります。しかしgetBoundingClientRectなどのAPIを呼ぶと、ページ全体の再計算を行うDOMリフローが発生し、パフォーマンスを大きく損ないます。

Pretextは、多行テキストの計測と組版処理をすべてブラウザのユーザーランド側で完結させることで、重いDOMリフローを完全に回避しています。

このアプローチは大きな反響を呼び、公開から48時間でGitHubのスター数は1万4000件を超え、Xでの閲覧回数は1900万回を記録しました。コードはGitHubでそのまま公開されており、誰でもダウンロードして試すことができます。

なぜ重要か

フロントエンド開発者やWebデザイナー、表現力豊かなリッチエディタを作りたい人にとって、Pretextは今すぐ試す価値がある道具です。これまで個別に泥臭く実装するしかなかった高度なテキスト配置が、わずか15KBのライブラリで手に入ります。

派手なデモに対して文章が読みにくいという批判もありますが、それは論点がずれていると考えます。数十年にわたるWebプラットフォームの性能の足かせを個人がAI支援によって突破したという事実にこそ、大きな意味があります。