設計によるブックマーク可能：HTMXのURL駆動状態

ReactからHTMXに移行すると、複雑な状態管理をサーバー側のシンプルさと交換します。ただし、フィルター、ソート、ページネーション、検索を処理する必要があります。その状態は今どこに住んでいますか？

答えは驚くほどエレガントです：URL自体で。 URLパラメーターを単一の真実のソースとして扱うことにより、別の依存関係をインストールする必要なく、ブックマーク可能で共有可能なアプリケーション状態を取得します。

アクションのパターン

urlのような /?status=active&sortField=price&sortDir=desc&page=2 現在のビューについてすべてを教えてください。それは単なる住所ではありません。それは、ユーザーがコンテキストを失うことなくブックマーク、共有、または更新できる完全な状態表現です。

クイックスタート：3つの重要なステップ

パターン全体は、3つの同期されたステップを中心に展開します。

1. サーバーはURLパラメーターを読み取ります 適切なビューをレンダリングします
2. フォームとHXインクルードすべての状態を保存します HTMXリクエストを作成するとき
3. ブラウザURL更新は自動的に更新されます hx-push-urlで

このステップバイステップを作成しましょう。

ステップ1：サーバーはURL状態を読み取ります

サーバーのエンドポイントはクエリパラメーターを読み取り、それらを使用して最初のビューをレンダリングします。

@Get("https://www.lorenstew.art/")
@Render("data-table.eta")
async homepage(
  @Query("sortField") sortField: string,
  @Query("sortDir") sortDir: "asc" | "desc",
  @Query("status") status: string,
  @Query("page") page: string,
) {
  // Parse with defaults
  const pageNum = parseInt(page) || 1;
  
  // Apply state to data query
  const result = await this.dataService.getItems({
    sortField: sortField || "name",
    sortDir: sortDir || "asc",
    status: status || "",
    page: pageNum,
  });

  // Return both data and state for template
  return {
    items: result.items,
    totalItems: result.total,
    sortField: sortField || "name",
    sortDir: sortDir || "asc",
    status: status || "",
    page: pageNum,
  };
}

テンプレートはこの状態をDOMに直接埋め込みます（使用 ETAテンプレート この場合）：

div id="data-table">
  
  form hx-get="/api/data"
        hx-target="#data-table"
        hx-push-url="true"
        hx-params="*"
        hx-trigger="change">
    
    
    select name="status">
      option value=""  it.status === '' ? 'selected' : '' %>>Alloption>
      option value="active"  it.status === 'active' ? 'selected' : '' %>>Activeoption>
    select>
    
    
    input type="hidden" name="sortField" value="%= it.sortField %>">
    input type="hidden" name="sortDir" value="%= it.sortDir %>">
    input type="hidden" name="page" value="%= it.page %>">
  form>

  
  th class="sortable %= it.sortField === 'name' ? 'sorted' : '' %>"
      hx-get="/api/data"
      hx-target="#data-table"
      hx-push-url="true"
      hx-params="*"
      hx-include="[name="status"]"
      hx-vals="{sortField: 'name', sortDir: '%= it.sortField === 'name' && it.sortDir === 'asc' ? 'desc' : 'asc' %>', page: 1}">
    Name
    % if (it.sortField === 'name') { %>
      %= it.sortDir === 'asc' ? '↑' : '↓' %>
    % } %>
  th>
  
  th class="sortable %= it.sortField === 'price' ? 'sorted' : '' %>"
      hx-get="/api/data"
      hx-target="#data-table"
      hx-push-url="true"
      hx-params="*"
      hx-include="[name="status"]"
      hx-vals="{sortField: 'price', sortDir: '%= it.sortField === 'price' && it.sortDir === 'asc' ? 'desc' : 'asc' %>', page: 1}">
    Price
    % if (it.sortField === 'price') { %>
      %= it.sortDir === 'asc' ? '↑' : '↓' %>
    % } %>
  th>
div>

重要な洞察：

• 状態フローは、URL→サーバー→DOMからのフローです
• 隠されたフォームフィールドは、さまざまな相互作用にわたって状態を保持します
• CSSクラスは現在の状態を反映しています（例： sorted アクティブソート列のクラス）
• サーバー側のレンダリングは、JavaScriptがロードされる前にページが機能することを意味します

ステップ2：フォームと隠されたフィールドとの状態調整

複雑なJavaScriptの代わりに、HTMLフォームを使用して状態を調整します。

form hx-get="/api/data"
      hx-target="#data-table"
      hx-push-url="true"
      hx-params="*"
      hx-trigger="change">
  
  select name="status">
    option value="">Alloption>
    option value="active">Activeoption>
  select>
  
  
  input type="hidden" name="sortField" value="%= it.sortField %>">
  input type="hidden" name="sortDir" value="%= it.sortDir %>">
  input type="hidden" name="page" value="%= it.page %>">
form>


th class="sortable %= it.sortField === 'date' ? 'sorted' : '' %>"
    hx-get="/api/data"
    hx-target="#data-table"
    hx-push-url="true"
    hx-params="*"
    hx-include="[name="status"]"
    hx-vals="{sortField: 'date', sortDir: '%= it.sortField === 'date' && it.sortDir === 'asc' ? 'desc' : 'asc' %>', page: 1}">
  Date
  % if (it.sortField === 'date') { %>
    %= it.sortDir === 'asc' ? '↑' : '↓' %>
  % } %>
th>

このアプローチの重要な利点：

• HTMXは、URLのすべてのフォーム状態を自動的に保存します
• 状態調整にはJavaScriptは必要ありません
• 条件付き式を使用して、テンプレートロジックで処理されたトグリングのトグリングをソートする
• 並べ替えのときにフィルターが保存されます。ソートは、ページネーションをリセットします
• 各ソート可能な列はテンプレートを使用して、sortfieldを動的に設定し、sortdirを切り替えます

ステップ3：HX-Push-URLとの自動URL同期

と hx-push-url="true" そして hx-params="*"、HTMXはURLの更新を自動的に処理します。

form hx-get="/api/data"
      hx-target="#data-table"
      hx-push-url="true"
      hx-params="*">

htmx自動的に：

1. クエリパラメーターとしてすべてのフォームデータをサーバーに送信します
2. 同じパラメーターでブラウザURLを更新します
3. バック/フォワードナビゲーションの適切な履歴エントリを作成します

HTMXがすべてを宣言的に処理するため、URL管理にはJavaScriptは必要ありません。

生産上の考慮事項

URLの長さの制限：ブラウザは、最大2000文字のURLをサポートしています。複雑なフィルターの場合、省略されたパラメーター名を使用するか、ステートサーバー側を移動することを検討してください。

パラメーター検証：サーバー上のURLパラメーターを常に検証および消毒します。それらを信頼されていないユーザー入力として扱います。

テスト：状態はURL値で明示的であるため、パターンは非常にテスト可能です。複雑なJavaScript機能はモックに機能しません。

アーキテクチャの見返り

このURLファーストアプローチは、クライアント側の状態管理ライブラリの複雑さなしに複数の利点をもたらします。すべてのビューは本質的に共有可能であるため、同僚にリンクを送ることができ、彼らはあなたが見るものを正確に見ることができます。ブラウザのバックボタンは、以前のフィルター状態に戻ることで予想どおりに機能します。 SEOは、検索エンジンがすべての州の組み合わせをcraうとするため、組み込まれています。また、現在の状態が常にアドレスバーに表示されるため、デバッグエクスペリエンスは透明です。

URLをステートストアとして採用することで、Webプラットフォームの周りで作業していません。あなたはそれで働いています。このパターンは、シンプルなソートから複雑なマルチフィルターインターフェイスまでスケーリングしながら、そもそもHTMXに誘導するシンプルさを維持します。

次に州の管理図書館に手を伸ばすときは、謙虚なURLが必要かどうかを検討してください。多くの場合、それだけでは十分ではありません。それは優れています。