埼玉県・近隣高校リスト

埼玉県および近隣地域の高校を、学科・コース単位で検索、絞り込み、ソートできる静的 Web アプリです。GitHub Pages でそのまま公開できるように、DB・ログイン・ビルド工程なしの Vanilla HTML/CSS/JavaScript で構成しています。

ローカル確認

ブラウザの file:// 直開きでは CSV の fetch が制限されることがあるため、簡易サーバーで確認します。

python3 -m http.server 8000

その後、http://localhost:8000/ を開きます。

GitHub Pages 公開

1. このリポジトリを GitHub に push します。
2. GitHub の Settings > Pages で、公開元を main ブランチの root に設定します。
3. index.html がエントリポイントとして配信されます。

データと設計

• 公開用メインデータ: resources/public_highschools.csv
• 出典一覧: resources/highschool_sources_stage19.md
• ローカル専用の調査メモ、作業ログ、品質集計CSVは .gitignore で公開対象から除外しています。

公開用CSVは学科・コース単位で 1 レコードです。一覧は学科単位で表示し、地図マーカーは school_id ごとに学校単位へ集約します。公開用CSVには学校基本情報、偏差値・内申点・大学進学率の参考値、出典リンクに必要な最小限の列だけを収録し、調査メモや作業ステータスは含めません。

このサイトは公開情報をもとに独自整理した参考情報です。偏差値・内申点・大学進学率・所在地は最新情報や公式情報と異なる場合があるため、受験判断では各校公式サイトと出典元を確認してください。

URL パラメータ

絞り込みとソート条件は URL に保存され、共有 URL から同じ画面を復元できます。

主なパラメータ:

• q: キーワード
• pref, city, sector, gender: 地域・属性フィルタ
• deptCat: 学科カテゴリフィルタ
• devMin, devMax: 偏差値範囲
• naishinMin, naishinMax: 内申点範囲
• postal: 距離計算の基準郵便番号
• sort, dir: ソートキーと順序

距離計算

郵便番号から取得した基準点と学校側の住所代表点の距離を Haversine 公式で計算し、km 単位で表示します。郵便番号が複数町域に対応する場合は、返却された緯度経度の平均を基準点にします。

学校側の座標は GSI 住所検索で取得した住所代表点による目安として扱います。座標が取得できない学校は、地図表示と距離ソートの対象外です。基準郵便番号の検索に API が利用できない場合も、通常の検索・絞り込み・地図表示は継続し、距離ソートだけ無効化します。

外部サービス

• 地図表示: Leaflet 1.9.4 と OpenStreetMap タイル
• 学校側の住所代表点作成: GSI 住所検索
• 基準郵便番号から緯度経度取得: HeartRails Geo API
• Google Maps ボタン: Google Maps の検索 URL を開く通常リンク

地図データ © OpenStreetMap contributors。

学校座標の出典: GSI 住所検索。

郵便番号検索の出典: 「位置参照情報ダウンロードサービス」（国土交通省）を加工して作成。

公開データの安全策

• アプリが読むCSVは resources/public_highschools.csv のみです。
• 公開CSVから、調査メモ、内部ステータス、座標取得元URL、座標レビュー列を除外しています。
• 元サイトの本文や表全体は収録せず、数値・学校基本情報・大学進学率を含む出典リンクに限定しています。
• 主要出典サイトや地図系サイトの利用規約には転載・再配布制限があり得るため、出典リンクを明記しつつ、公開CSVは最小限の事実値に絞っています。
• 学校側の座標は第三者地図サイト由来の値を使わず、GSI 住所検索で取得した住所代表点を使います。

技術的な知見

• GitHub Pages で扱いやすいよう、依存関係のインストールやビルドを不要にしています。
• CSV パーサーはクライアント側に最小実装し、引用符・改行・BOM を処理します。
• URL 状態同期は URLSearchParams と history.replaceState で実装し、入力のたびに共有可能な URL に更新します。
• 初期表示に入らない一覧カードには content-visibility: auto と contain-intrinsic-size を設定し、長い一覧の描画負荷を抑えます。
• フォームはネイティブの label、input、select を使い、キーボード操作とフォーカス表示を維持しています。
• プライバシーと権利リスクを下げるため、公開データを目的に必要な列へ最小化しています。