コンポーネント
| 語 | 意味 |
|---|---|
| 要素 | src/elements/ のファイルが default export した関数から作成する Custom Element です。ブラウザで動作する単位です(要素) |
| 要素コンポーネント | 要素のファイルを import して得られる、JSX に記述するためのコンポーネントです |
| サーバーコンポーネント | サーバーでだけ実行し、ブラウザに JS を送信しないコンポーネントです。ページとレイアウトもサーバーコンポーネントです(ページとデータ) |
| 共通のコンポーネント | 要素でもサーバーコンポーネントでもない、マークアップだけの部品です。ページの中ではサーバーで、要素の中ではブラウザで描画します |
| 補助コンポーネント | src/elements/ の中で、名前が _ で始まるファイルと、_ で始まるディレクトリの中のファイルのコンポーネントです。要素の中で使用する部品で、要素にはなりません |
| ホスト | 要素のインスタンスである DOM の要素(<sobria-user-card> など)です |
| スロット | 要素が、使用する側から受け取った子を表示する位置です。Props の型で JSX.Element か Slot の型を宣言した props がスロットになります |
| フォームの部品 | <form> の中で、name 属性に指定した名前で値を送信する部品です。<input> などのタグと、ctx の form を使用した要素がフォームの部品です(フォーム) |
| Declarative Shadow DOM | Shadow DOM の中身を HTML に含める記法です。要素をサーバーで描画した結果は、この記法で出力します |
ルーティング
| 語 | 意味 |
|---|---|
| ページ | src/routes/ の page.tsx が default export したサーバーコンポーネントです(ルーティング) |
| レイアウト | layout.tsx が default export したサーバーコンポーネントです。配下のページを包みます |
| ミドルウェア | middleware.ts が default export した Hono のミドルウェアです。配下のリクエストに適用します |
| 動的な区切り | [id] の形の名前のディレクトリです。URL の 1 つの区切りに一致し、値をパラメータとして受け取ります |
| キャッチオール | [...slug] の形の名前のディレクトリです。URL の 1 つ以上の区切りに一致します |
| グループ | (name) の形の名前のディレクトリです。名前を URL に含めずに、レイアウトとミドルウェアを適用する範囲を分けます |
| 静的な書き出し | ビルドの時点でレスポンスをファイルに保存することです。ページか route.ts が prerender を export すると、そのルートを書き出します。Vite プラグインの設定 output を "static" にすると、すべてのページと route.ts を書き出します(デプロイ) |
描画と読み込み
| 語 | 意味 |
|---|---|
| シェル | ページのうち、<Loading> の外側の部分です。シェルの中の await がすべて解決するまで、レスポンスの送信を開始しません(ページとデータ) |
| 境界 | <Loading> と <Errored> です。中身が値を待っている状態と失敗を、境界の範囲で受け止めます |
| 後送り | シェルを送信した後に、<Loading> の内側を、準備ができた順に送信することです |
| 起動 | 要素がブラウザで動作を開始することです。起動するまでは、サーバーで描画した表示のまま残ります(読み込みと値の受け渡し) |
| 起動のタイミング | 要素を起動する時点です。要素のファイルの export const load と、要素を使用する箇所の load:* で指定します(JSX) |
データと状態
| 語 | 意味 |
|---|---|
| Signal | 値の変化を追跡する仕組みです。値が変わると、その値を参照している箇所だけを更新します(リアクティビティ) |
| memo | 関数から求めた値を保持する Signal です。非同期の関数も指定できます |
| 値の引き継ぎ | サーバーで描画するときに解決した非同期の memo の値をブラウザに渡すことです。memo の関数が async iterable を返すときと、async iterable に解決する Promise を返すときを除き、ブラウザでもう一度取得しません |
| サーバー関数 | defineServerFn で定義する関数です。サーバーでは直接実行し、ブラウザから呼び出すとサーバーに通信して実行します(サーバー関数) |
| 描き直し | GET 以外のサーバー関数の呼び出しが完了したとき、refreshPage() を呼び出したとき、フォームを送信した結果の移動先が現在のページだったときに、現在の URL のページをサーバーで描画して、ページとの差分を反映することです(サーバー関数) |