はじめに

国土数値情報では、将来推計人口データが公開されています。

そこで、将来推計人口データを地図上で可視化し、年度ごとの変化を確認できるビューアを作成してみます。

今回は首都圏の変化を確認しやすくするため、埼玉県、千葉県、東京都、神奈川県のデータを使用します。

使用するデータ

今回使用するのは、国土数値情報が公開している「1kmメッシュ別将来推計人口データ（R6国政局推計）」です。

このデータは令和2年国勢調査をもとに、2070年までの将来人口を推計したものです。

データには総人口だけでなく、男女別や年齢階級別の推計値も含まれています。

今回は総人口を使用します。

データのダウンロードはこちらです。

今回は以下の4ファイルを使用しました。

埼玉県（1km_mesh_2024_11.geojson）
千葉県（1km_mesh_2024_12.geojson）
東京都（1km_mesh_2024_13.geojson）
神奈川県（1km_mesh_2024_14.geojson）

完成イメージ

完成すると以下のようになります。

人口モードでは指定した年度の人口を表示できます。

また、2025年比モードへ切り替えることで、人口の増減傾向も確認できます。

プロジェクト構成

今回の構成は以下の通りです。

mesh-population-viewer/
├─ index.html
└─ data/
   ├─ 1km_mesh_2024_11.geojson
   ├─ 1km_mesh_2024_12.geojson
   ├─ 1km_mesh_2024_13.geojson
   └─ 1km_mesh_2024_14.geojson

HTMLファイル1つで実装しています。

実装

今回はHTMLファイル1つで実装しました。

以下が全体コードです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>将来推計人口ビューア</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: sans-serif;
      }
      #container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      #toolbar {
        padding: 12px;
        background: #ffffff;
        border-bottom: 1px solid #cccccc;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
      }
      #map {
        flex: 1;
      }
      #yearLabel {
        font-size: 1.2rem;
        font-weight: bold;
      }
      input[type="range"] {
        width: 300px;
      }
      .legend {
        background: white;
        padding: 10px;
        line-height: 1.5;
        border-radius: 4px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
      }
      .legend i {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        opacity: 0.8;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="toolbar">
        <div>
          表示年：
          <span id="yearLabel">2025</span>
        </div>
        <input type="range" id="yearSlider" min="2025" max="2070" step="5" value="2025" />
        <label>
          <input type="radio" name="mode" value="population" checked />
          人口
        </label>
        <label>
          <input type="radio" name="mode" value="ratio" />
          2025年比
        </label>
      </div>
      <div id="map"></div>
    </div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
      // 地図を初期化し、首都圏が収まるよう表示位置を設定する
      const map = L.map("map");
      map.setView([35.681236, 139.767125], 9);
      L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "&copy; OpenStreetMap contributors",
      }).addTo(map);

      const yearLabel = document.getElementById("yearLabel");
      const yearSlider = document.getElementById("yearSlider");

      // 現在の表示モード（"population": 人口 / "ratio": 2025年比）
      let displayMode = "population";

      // 読み込んだGeoJSONデータとLeafletレイヤーを保持する変数
      let geojsonData = null;
      let geojsonLayer = null;

      // 都道府県ごとに分かれたGeoJSONファイルのパス一覧
      const files = ["./data/1km_mesh_2024_11.geojson", "./data/1km_mesh_2024_12.geojson", "./data/1km_mesh_2024_13.geojson", "./data/1km_mesh_2024_14.geojson"];

      // GeoJSONの属性名は「PTN_西暦年」の形式（例: PTN_2025）になっている
      function getPopulation(feature, year) {
        return Number(feature.properties[`PTN_${year}`]) || 0;
      }

      // 2025年の人口を基準として、指定年の人口比率（%）を算出する
      function getRatio(feature, year) {
        const base = Number(feature.properties["PTN_2025"]) || 0;
        const current = Number(feature.properties[`PTN_${year}`]) || 0;
        if (base === 0) return 0;
        return (current / base) * 100;
      }

      // 人口の多さを赤系の色で表現する（人口が多いほど濃い赤）
      function getPopulationColor(value) {
        if (value >= 5000) return "#800026";
        if (value >= 3000) return "#BD0026";
        if (value >= 1000) return "#E31A1C";
        if (value >= 500) return "#FC4E2A";
        if (value >= 100) return "#FD8D3C";
        return "#FFEDA0";
      }

      // 人口増加を赤、ほぼ横ばいを白、人口減少を青で表現する
      function getRatioColor(value) {
        if (value >= 130) return "#b30000";
        if (value >= 120) return "#cb181d";
        if (value >= 105) return "#fc9272";
        if (value >= 95) return "#f7f7f7";
        if (value >= 80) return "#c6dbef";
        if (value >= 70) return "#6baed6";
        if (value >= 60) return "#3182bd";
        return "#08306b";
      }

      // 年度を受け取り、GeoJSONレイヤーを再描画する
      // 年度切り替えのたびに既存レイヤーを削除して新たに追加する
      function renderLayer(year) {
        if (geojsonLayer) {
          map.removeLayer(geojsonLayer);
        }
        geojsonLayer = L.geoJSON(geojsonData, {
          style: (feature) => {
            let fillColor;
            if (displayMode === "population") {
              const population = getPopulation(feature, year);
              fillColor = getPopulationColor(population);
            } else {
              const ratio = getRatio(feature, year);
              fillColor = getRatioColor(ratio);
            }
            return {
              color: "#666",
              weight: 0.3,
              fillColor,
              fillOpacity: 0.7,
            };
          },
          // メッシュクリック時に人口・増減率を表示するポップアップを設定する
          onEachFeature: (feature, layer) => {
            const population = getPopulation(feature, year);
            const ratio = getRatio(feature, year);
            const changeRate = ratio - 100;
            layer.bindPopup(`
                    <table>
                        <tr>
                            <th align="left">メッシュID</th>
                            <td>${feature.properties.MESH_ID}</td>
                        </tr>
                        <tr>
                            <th align="left">年</th>
                            <td>${year}</td>
                        </tr>
                        <tr>
                            <th align="left">人口</th>
                            <td>${population.toLocaleString()} 人</td>
                        </tr>
                        <tr>
                            <th align="left">2025年比</th>
                            <td>${ratio.toFixed(1)} %</td>
                        </tr>
                        <tr>
                            <th align="left">増減率</th>
                            <td>${changeRate > 0 ? "+" : ""}${changeRate.toFixed(1)} %</td>
                        </tr>
                    </table>
                `);
          },
        }).addTo(map);
      }

      // 凡例コントロールを地図右下に追加する
      const legend = L.control({ position: "bottomright" });
      legend.onAdd = function () {
        const div = L.DomUtil.create("div", "legend");
        updateLegend(div);
        return div;
      };
      legend.addTo(map);

      // 表示モードに応じて凡例の内容を切り替える
      function updateLegend(element) {
        if (displayMode === "population") {
          element.innerHTML = `
            <strong>人口</strong><br>
            <i style="background:#800026;border:1px solid #ccc"></i>5000以上<br>
            <i style="background:#BD0026;border:1px solid #ccc"></i>3000以上<br>
            <i style="background:#E31A1C;border:1px solid #ccc"></i>1000以上<br>
            <i style="background:#FC4E2A;border:1px solid #ccc"></i>500以上<br>
            <i style="background:#FD8D3C;border:1px solid #ccc"></i>100以上<br>
            <i style="background:#FFEDA0;border:1px solid #ccc"></i>100未満
        `;
        } else {
          element.innerHTML = `
            <strong>2025年比</strong><br>
            <i style="background:#b30000;border:1px solid #ccc"></i>130%以上<br>
            <i style="background:#cb181d;border:1px solid #ccc"></i>120～130%<br>
            <i style="background:#fc9272;border:1px solid #ccc"></i>105～120%<br>
            <i style="background:#f7f7f7;border:1px solid #ccc"></i>95～105%<br>
            <i style="background:#c6dbef;border:1px solid #ccc"></i>80～95%<br>
            <i style="background:#6baed6;border:1px solid #ccc"></i>70～80%<br>
            <i style="background:#3182bd;border:1px solid #ccc"></i>60～70%<br>
            <i style="background:#08306b;border:1px solid #ccc"></i>60%未満
        `;
        }
      }

      // 複数のGeoJSONを並列で取得し、全件完了後に1つのFeatureCollectionとしてまとめて描画する
      Promise.all(files.map((file) => fetch(file).then((response) => response.json())))
        .then((results) => {
          geojsonData = {
            type: "FeatureCollection",
            features: results.flatMap((item) => item.features),
          };
          renderLayer(Number(yearSlider.value));
        })
        .catch((error) => {
          console.error(error);
          alert("GeoJSONの読み込みに失敗しました");
        });

      // スライダー操作で表示年度を切り替える
      yearSlider.addEventListener("input", () => {
        const year = Number(yearSlider.value);
        yearLabel.textContent = year;
        if (geojsonData) {
          renderLayer(year);
        }
      });

      // ラジオボタン切り替えで表示モードを変更し、凡例とレイヤーを更新する
      document.querySelectorAll('input[name="mode"]').forEach((radio) => {
        radio.addEventListener("change", (event) => {
          displayMode = event.target.value;
          const legendElement = document.querySelector(".legend");
          updateLegend(legendElement);
          renderLayer(Number(yearSlider.value));
        });
      });
    </script>
  </body>
</html>

実装上のポイントをいくつか見ていきます。

複数のGeoJSONをまとめて読み込む

将来推計人口データは都道府県ごとにファイルが分かれています。

今回は首都圏をまとめて表示したかったため、4つのGeoJSONを読み込み、1つの FeatureCollection として扱っています。

Promise.all を利用することで、複数ファイルの読み込み完了後にまとめて処理できます。

人口モードと2025年比モードを切り替える

人口データをそのまま表示すると、東京都心部や横浜市周辺は常に人口が多いため、年度を切り替えても変化が分かりにくいことがあります。

そこで2025年を基準として人口比率を計算し、人口増加地域を赤、人口減少地域を青で表示するモードを追加しました。

2025年比モードに切り替えると、人口の増減傾向が把握しやすくなります。

スライダーで年度を切り替える

GeoJSONには以下のような属性が格納されています。

PTN_2025
PTN_2030
PTN_2035
...
PTN_2070

スライダーで年度を選択し、その年度に対応する属性を参照することで、人口推移を確認できるようにしています。

おわりに

今回は国土数値情報の将来推計人口データを利用して、将来人口の推移を確認できるビューアを作成してみました。

人口そのものを表示するだけでなく、2025年比で表示することで、地域ごとの変化も把握しやすくなります。

また、GeoJSON形式で公開されているため、Leafletと組み合わせることで比較的手軽に可視化できます。

今回は首都圏の4都県を対象としましたが、他の都道府県のデータでも同様に利用できます。

将来人口データがどのように変化していくのか、地図上で眺めてみるだけでも新しい発見があるかもしれません。