このブログの設計思想と使えるすべての機能

この記事は単なる「機能紹介」ではない。 このブログシステムにおいて、 HTMLをどう書けば壊れずに、Reactとして正しく振る舞うか を示すための基準実装である。

もしこの記事が壊れるなら、 それはブログシステム側のバグである。

なぜReact化したのか

記事はもともと HTML ファイルで管理していた。 それ自体は今も変わらない。

変えたのは、 その HTML を誰が、いつ、どう解釈するか という点だけだ。

以前は Web Components に解釈させていた。 だがこの方式には、致命的な欠点があった。

問題の本質は、 DOM のライフサイクルをブラウザ任せにしていたこと だった。

React 化によって、 HTML は「構造を表す入力」になり、 振る舞いは React Component が完全に管理するようになった。

このシステムの前提思想

このブログは CMS ではない。 Markdown 変換エンジンでもない。

正確に言うなら、 HTML を入力言語として使う React AST ジェネレータ である。

レンダリングの流れ

記事は次の手順で表示される。

重要なのは、 cheerio も BlogRenderer もクライアントには存在しない という点だ。

クライアント側で動くのは、 FadeIn / CodeBlock / AccordionItem など、 明示的に Client Component とされたものだけである。

fade-in — スクロールフェードイン

<fade-in> は、 スクロールで要素が画面に入った瞬間に ふわっと表示させるためのコンポーネントだ。

HTML 的にはタグだが、 React 的には <FadeIn /> コンポーネントそのもの。

この delay がミリ秒だと誤解されやすいが、 仕様違反は静かに動作を殺す。 エラーは出ない。

callout-box — 情報ボックス

callout-box は Server Component であり、 状態を持たない。

そのため、 中にどんな HTML / カスタムタグを入れても安全だ。

accordion-item — 折りたたみ

accordion-item は Client Component であり、 状態を内部に持つ。

そのため、 再マウントされることが前提設計になっている。

code-block — コードブロック

code-block は Client Component で、 コピー機能を持つ。

HTML 内に script を書く必要はない。

interactive-checklist — 実行可能チェックリスト

このコンポーネントは、 <li> を直下に置く という厳密な前提を持つ。

comparison-card — 判断の可視化

progress-bar — 数値の視覚化

まとめ

このブログシステムは、 HTML を書く体験を変えずに、 React のライフサイクル管理と 静的生成の恩恵を最大限に引き出すための設計になっている。