ランダムで駅を出すツールを作る

2024/11/28 Zakki

もともとZennに投稿しようとしていた文章。いい感じに書ける気がしなかったのでここに供養。

ある時、1時間程度暇な時間があり、特に意味もなく適当な駅で降りてみようと思ったことがあった。その適当な駅を決めるために、MapFanの駅一覧からテキストを取ってきて、ルーレットに入れて回す…ということをしていた。

でも、テキストはきれいに改行されておらず、複数の路線を対象にすると労力も増える。そこで、簡単に指定駅の中からランダムな駅を出すツールを作ることにした。

使用している技術

すべて生のHTML, CSS, JavaScript。外部APIや外部データの使用は一切なし。

TIP

世の中には駅データ.jpや経度緯度付き全国沿線・駅データベースなどの、データを簡単に取得できるサービスがあります。本来はそちらを使うべきです。

制約

プログラムを作るに当たり、以下の制約を定める。

駅は路線ごと、路線は事業者ごと、事業者は地方・都道府県単位で分類
チェックボックスに路線・駅単位でユニークなIDを振る
async、awaitは使わない

作る

フォーマットを決める

駅

事業者が複数の路線を持っている場合は、

const multi = {
  "jr-east-yamanote": [
    { name: "東京", id: "tokyo" },
    { name: "神田", id: "kanda" },
    ...
    { name: "有楽町", id: "yurakucho" },
  ],
  ...
};

のように、事業者ID-路線IDをキーにして、{ name: "駅名", id: "ローマ字駅名" }を複数持つリストとする。

事業者が一つの路線しか持たない場合は、

const single = [
  { name: "新木場", id: "shinkiba" },
  { name: "東雲", id: "shinonome" },
  ...
  { name: "大崎", id: "osaki" },
];

のように、ただのリストとして作る。

路線（事業者）

路線（事業者）は、次のようなオブジェクトとする。

const kantoRailways = {
  id: "kanto",
  name: "関東",
  railways: {
    "jr-east": {
      id: "jr-east",
      name: "JR東日本",
      icon: "assets/kanto/jr-east/jr.svg",
      railway: [
        {
          name: "山手線",
          id: "yamanote",
          icon: "assets/kanto/jr-east/jy.svg",
        },
        ...
        {
          name: "鹿島線",
          id: "kashima",
          icon: "assets/kanto/jr-east/kashima.svg",
        },
      ],
    },
  },
};