正規表現による「AIコメント」の
動的UIパース術

"AIに自由奔放に語らせ、エンジニアが厳格に型を整える。この緊張感のある関係性が、Webサイトに『インテリジェンスな質感』を与えます。"

1. 「ただの長文」をユーザーは読まない

AIが生成したテキストをそのまま `<p>` タグで表示するのは、専門メディアとしては不十分です。ユーザーが瞬時に情報を理解できるよう、「要約」「注目点」「結論」といった要素に視覚的に分離する必要があります。 私たちは、AIの出力に特定のデリミタ（例：`[POINT1]`）を含めるようプロンプトで制御し、それをフロントエンドで分解する手法をとりました。

2. 正規表現によるストリーム・パース

Djangoから送られてくる1つの文字列を、JavaScriptの `String.prototype.match()` や `split()` を駆使して分解します。 例えば、`### POINT` というマークダウンの見出しをフックに、自動的にLucideアイコン付きのカード型UIへ流し込む。これにより、データ構造を変えることなく、表現の自由度だけを最大化できます。

// 文字列から特定のセクションを抽出する
const summary = rawText.match(/\[SUMMARY\]([\s\S]*?)\[\/SUMMARY\]/)?.[1];
const points = rawText.match(/POINT\d:[^\n]*/g);

3. Reactコンポーネントへの自動分配

パースされた断片は、単なるテキストとしてではなく、専用のReactコンポーネントとしてレンダリングされます。「ポイント1」には雷アイコン、「注意点」には警告アイコンを自動付与。 この「AIの言葉をUIにマッピングする」仕組みが、365万件全てのページに、まるで専属ライターがレイアウトしたかのような一貫性をもたらします。

次回、第3章突入：爆速フロントエンド

知性を手に入れたサイトに、次は「速さ」という命を吹き込みます。 第6回からは第3章：フロントエンド・高速化編がスタート。Next.js App Routerを使い倒し、365万ページを瞬きする間に表示させるSSGの極意を解説します。