遠征の宿泊ガイド
遠征の宿えらび
ライブ遠征の前泊や当日泊に向け、会場と翌日の予定から宿泊エリアを選ぶサイト。3会場の公式アクセスと計9エリアの選び方を案内する。宿泊日と大人人数を入力すると、選んだ地域の楽天トラベル検索フォームへ条件を引き継ぎ、移動先で空室を調べられる。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 会場データから詳細ページを静的生成し、宿の選び方のガイドと共通レイアウトを組み合わせる。 |
| TypeScript | 会場名、公式アクセス、宿泊エリア、確認日の項目を型で定義する。フォーム要素の参照にも型を付ける。 |
| ブラウザのJavaScript | 入力された宿泊日と大人人数を実行時に検査し、有効な条件に応じて各エリアの検索リンクを更新する。 |
| URL / URLSearchParams | 地域名と宿泊条件を楽天トラベルの検索パラメーターに変換し、日本語を含むURLを組み立てる。 |
| Cloudflare Workers Static Assets | 生成済みの静的ファイルを独自ドメインで配信し、存在しないURLには404ページを返す。 |
処理の流れ
会場と公式アクセスを確認する
横浜アリーナ、東京ドーム、大阪城ホールから会場を選び、最寄り駅の図と公式案内、出典確認日を読む。
翌日の予定からエリアを選ぶ
会場の近さ、観光、翌朝の新幹線などに合わせて3つの候補を比較し、予約前に確認する移動上の注意点を読む。
宿泊条件を入力する
チェックイン日、チェックアウト日、大人人数を入力する。日程未定で人数が1名なら、日付を空欄にして地域名だけで探せる。
予約サイトで空室を調べる
エリアのリンクから楽天トラベルへ進む。条件を指定した場合は検索フォームに引き継がれるため、移動先で検索を押して空室や料金を確かめる。
実装の工夫
公式アクセスと編集上の提案を分ける
会場へのアクセスには公式サイトへのリンクと確認日を添え、宿泊エリアには対象となる人、選ぶ理由、予約前の注意点を持たせる。画面でも別の節に表示し、駅から会場までの公式徒歩時間をホテルからの移動時間として扱わない。
型定義と入力の実行時検査を分ける
会場データの構造はTypeScriptの型で定義する。利用者の入力は別の関数で実在する日付、過去の日付、チェックアウトの前後関係、大人人数の範囲を検査する。不正な条件ではリンク先を外し、クリックやEnter操作でエラー欄へ焦点を移す。
日程未定でも地域から探せる
静的HTMLには地域名を含む検索リンクを用意する。JavaScriptが動くと宿泊条件のフォームを表示し、有効な入力に合わせてURLを更新する。日付が空欄で大人1名の場合は地域名だけの検索を維持し、条件を指定した場合は1室の条件を楽天へ渡す。
構成と制約
- 空室、宿泊料金、終電、終演時刻を自動判定しない。公式徒歩時間にはホテルからの移動や終演後の混雑を含まず、利用日の条件を予約先と交通機関で確認する必要がある。
- 引き継げる宿泊条件は1室、大人1〜6名と宿泊日である。子どもの人数や部屋数は移動先で変更する。楽天では移動先で検索を押す必要があり、掲載リンクは広告提携を伴わない一般リンクである。
実装確認：