フロントエンド

フロントエンド

執筆済 ソフトウェア開発Web

利用者が直接触れる部分。

レンダリング方式#

方式 どこで HTML を作るか 特徴
SSG ビルド時 最速。内容が固定
SSR 要求のたびにサーバで 動的。サーバ負荷
CSR (SPA) ブラウザで JS が 初回が遅い。以降は速い
ISR ビルド + 定期再生成 中間

選択の指針#

内容が固定・更新が稀      → SSG
利用者ごとに違う          → SSR
アプリ的で操作が多い      → CSR
記事が多く更新もある      → ISR / SSG + 再ビルド

このノートサイトは SSG。 内容がビルド時に確定し、 検索エンジンにも読まれ、 サーバに JS 実行環境が要らない。

主なフレームワーク#

方式
React 仮想 DOM で差分計算
Svelte コンパイル時に更新コードを生成。ランタイムが小さい
Vue テンプレート + リアクティブ
Solid 細粒度リアクティビティ。仮想 DOM 無し

仮想 DOM は「差分計算のコストを払って書きやすさを得る」設計。 Svelte や Solid は コンパイル時に依存関係を解析して、 必要な更新だけを直接行う方向を採る。

性能指標 (Core Web Vitals)#

指標 意味 目安
LCP 主要な内容の表示 2.5 秒以内
INP 操作への応答 200 ms 以内
CLS レイアウトのずれ 0.1 未満

CLS は「読もうとしたら要素が動いた」の指標。 画像に寸法を指定する、 広告の場所を確保する、といった対処が要る。

アクセシビリティ#

  • キーボードだけで全機能に到達できるか
  • フォーカスが見えるか
  • prefers-reduced-motion を尊重しているか
  • 色のコントラスト比（4.5:1 以上）

後から足すのは難しい。 最初から作り込む。

参考文献#