会場選びと幹事支援
集まりの場所
子連れの持ち寄り会の幹事が、人数、利用時間、会場費用を整理するサイト。準備と片付けを含む時間で3候補の総額と家族ごとの負担額を比べられる。定員や持ち込み条件の確認方法を記事で読み、確認リストを含む条件メモをコピーまたは印刷して参加者と相談できる。
公開サイトを見る (新しいタブ)
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | トップ、条件メモ、記事一覧と個別記事を静的に生成する。共通レイアウトでナビゲーションとページ情報を揃える。 |
| TypeScript | 記事データの構造と、計算処理に渡す入力や結果の型を定義する。入力値の妥当性は実行時の検証で別に確認する。 |
| JavaScript / BigInt | ブラウザ内で入力を検証し、会場費用を計算する。JavaScriptの整数型BigIntを使い、小数の利用時間を分数として扱って、総額を円単位で切り上げる。 |
| Astro Image | サイト内の生成画像を複数の幅のWebPへ変換する。画面幅に応じて表示し、実在会場の写真ではないことを添える。 |
| Cloudflare Workers Static Assets | 生成した静的ファイルを独自ドメインで配信し、存在しないページには404ページを返す。 |
処理の流れ
会場選びの確認項目を読む
人数、座席、予算、持ち込みと片付けの記事を読み、予約先へ確かめる条件を整理する。
人数と利用時間を揃える
大人と子どもの人数、費用を分ける家族数、会の時間、前後の準備と片付けの時間を入力する。
3候補の費用を比べる
各候補の税込時間料金と追加費用を入力する。同じ利用時間で総額と家族あたりの集金額を表示する。集金額は円単位で切り上げ、集金総額から会場費を引いた余りも確認できる。
条件メモで相談する
定員、子ども、持ち込み、清掃の確認状況を記録し、地域のメモと比較結果をコピーまたは印刷する。空き状況と最終条件は予約先で確認する。
実装の工夫
未入力の費用を0円にしない
人数と時間には範囲を設け、文字列の形式と数値を実行時に検証する。時間料金か追加費用が空欄、範囲外なら、その候補の計算結果を表示しない。無料の場合も0円を明示入力し、未確認の費用と区別する。
小数時間の金額を整数で計算する
1.5時間を15/10時間として扱うように、小数時間を整数の分子と分母へ変換する。BigIntで準備時間と追加費用を含む総額を計算し、円単位で切り上げる。その総額を家族数で割り、端数を切り上げた集金額と、集めたときに余る金額を表示する。
比較結果と確認状況を同じメモにする
コピー文は現在の入力と計算結果から組み立て、地域のメモ、未計算の候補、確認リストの状態も含める。クリップボードへの書込みが失敗した場合は、手動で選択してコピーできる欄を表示する。印刷時は操作ボタンを隠す。
構成と制約
- 計算は時間料金と追加費用から出す目安で、最低料金、時間区切り、時間帯別料金を反映しない。空き状況や利用条件への適合も判定せず、予約と決済は予約先で行う。
- 条件メモの入力はサーバーへ送信せず、自動保存もしない。再読み込みすると入力状態は失われるため、残したい結果はコピーまたは印刷する。
実装確認: