#Astro
11 件
Three.js の浮島を静的サイトに載せる
浮島ページは自分のスクリプトだけを読み込みます。シーンは実行時に生成し、Three.js はこのページのチャンクにだけ入り、最初の HTML には空の舞台しかありません。
3D の読み込み予算 — チャンク分割・可視になってから読み込み・止めどき
3D ページの費用は三つあります。ダウンロード、初回フレームのコンパイル、毎フレームの描画。それぞれに別々の予算を決めないと、見栄えが引っかかりに変わります。
Islands は Web Components ではない：似て見えて別物の「必要なときだけ読み込む」
Islands はビルド時にどこに JS が要るか・いつハイドレートするかを決めます。Web Components は実行時にブラウザへ自立した要素を渡します。混同すると道具を選び間違えます。
1059 件のアサーション、テストフレームワークなし：純粋なロジックを import ゼロに保つ
このサイトの自検は node scripts/selftest.ts を直接実行するだけ。フレームワークも依存もありません。代償は検証対象のモジュールが相対 import を 1 つも持てないこと、そしてその代償はコードの形を買いました。
Astro islands で初回 JS をゼロに近づける
「非同期読み込み」を「必要な時だけハイドレート」まで分解し、3層の遅延読み込みがそれぞれ何を解決するのかを実コードで説明します。
ビルド時のページネーション：静的サイトのページ送りにクエリ文字列を使わない理由
一覧はビルド時に静的なページへ分割され、N ページ目は実在のルートになります。クライアント側のページング処理もクエリ文字列も使わず、ただのリンクです。
@/ エイリアスは三箇所に設定する。どれが欠けても壊れる
深い相対 import を全廃した代償は、エイリアスを三箇所で設定することです。一つ欠けると、エディタのエラー・ビルド失敗・スタイルの静かな消失という別々の症状になります。
zod で frontmatter を契約にする：記事の書式エラーをビルド時に落とす
Content Collections の schema が唯一の真実です。タイトルが 120 字を超える、日付が壊れている、タグが配列でない——どれもビルド時に失敗し、ページが黙って消えることはありません。
なぜまた個人サイトを作ったのか
書く場所がなかったわけではなく、記事とゲームとツールを同じ場所に置けなかったから。
設定不要のレジストリ：ゲーム追加はディレクトリ追加と同じ
一覧・詳細ルート・トップの注目枠・sitemap はすべて import.meta.glob が自動検出します。代償は Vite の規則、リテラルの相対パスだけという一点です。
ビューにロジックを置かない：データ組み立てはすべて src/server へ
ページにはルートの export とコンポーネントの読み込みしかありません。取得・パス組み立て・日付計算はすべて src/server に移しました。その利点と、強制される型の制約について。