手取川ダムの貯水量が気になってグラフ化しました(2026年夏)

2026/08/31

2026年夏に発生した大地震や記録的豪雨で被災された皆様に、謹んでお見舞い申し上げます。私の暮らしている地域も記録的豪雨に見舞われましたが、幸いにも私の住居の周辺は河川氾濫などに遭うことなく、大きな災害から免れています。

私が暮らしている地域の生活用水は石川県加賀地方の手取川ダムに依存しています。2026年8月中頃までは降雨量が非常に少なく、手取川ダムの貯水量が激減してましたが、その後の災害級の大雨で貯水量は増加傾向にあります。当記事では貯水量と雨量をグラフ化してみました。

8月末時点の手取川ダムの貯水量と雨量

以下は、国土交通省水文水質データベースの利用上の注意に則って、手取川ダムのリアルタイムダム諸量一覧表を2026年8月31日16時までの1週間分をダウンロードしてグラフ化したものです。

2026年8月27日は、前夜から石川県羽咋市〜富山県氷見市で振り続けた激しい雨が早朝に線上降水帯となって、レベル5特別警報が発令する事態となりました。それまで減少傾向にあった手取川ダムの貯水率は17%を下回りましたが、豪雨災害が発生した後は上昇傾向に変わり、20%を超える貯水率となっています。

そして、8月29日の夜から石川県南部〜福井県にかけて再び激しい雨となり、福井県でも河川氾濫が発生するほどの災害が起きてしまいました。この豪雨を境に、手取川ダムの貯水率は急激に上昇して、8月31日には遂に50%に達しました。

8月中旬までほとんど降雨が無く猛暑日が続いていたせいで、手取川ダムは取水制限を既に実施していますが、これで水不足解消に向かうことになっても素直に喜べないことが悔やまれます。

グラフのソースコード

手取川ダムのリアルタイムダム諸量一覧表は表形式のため、グラフで可視化したいと思って拙作TypeScriptライブラリの@yamakox/vue3-plotlyを使ってグラフ化しました。

GitHub - yamakox/vue3-plotly: A Vue 3 wrapper component for Plotly.js charts github.com

A Vue 3 wrapper component for Plotly.js charts. Contribute to yamakox/vue3-plotly development by creating an account on GitHub.

ソースコードは以下のとおりです。Plotly.jsは多機能で優秀だと思いますが、あまりにも設定項目が多すぎて、簡単に素早くグラフを作成しようとするには不向きです。X軸・Y軸などレイアウト設定にこれだけの行数を要すると、再びグラフを作ろうという気になれません。

また、複数のグラフ(今回の場合は貯水率と雨量)を表示するときにY軸を左右に分けると、overlayingという値を設定しないと1つしかグラフが表示されなかったり、xaxisやyaxisの設定項目が系列データとレイアウトの両方に存在していてそれぞれ何の値を持つのか調べたりと、使い方で混乱させられました。

詳細なリファレンスはありますが、多数の項目を読み返すのに時間がかかってしまうのも問題です。結局はAIコーディングエージェント(私の場合はCursor)に頼ってしまいました。

import Plot from '@yamakox/vue3-plotly'
import fs from 'fs'
import path from 'path'

{/* データファイルの読み込み */}
export function loadFile() {
  const rawDataPath = path.join(
    process.cwd(),
    'src/content/docs/posts/2026/08/31/2026-08-31.txt'
  )
  console.log('rawDataPath', rawDataPath)
  const rawData = fs.readFileSync(rawDataPath, 'utf-8')
  const lines = rawData.split('\n')
  return {
    title: lines[0],
    waterSystem: lines[1].split(',')[1],
    riverName: lines[2].split(',')[1],
    observatoryName: lines[3].split(',')[1],
    observatoryCode: lines[4].split(',')[1],
    // 年月日,時刻,流域平均雨量,流域平均雨量属性,貯水量,貯水量属性,流入量,流入量属性,放流量,放流量属性,貯水率,貯水率属性
    values: lines.slice(9).map((line) => line.split(',')),
  }
}

export const data = loadFile()

{/* グラフ表示用データの取得 */}
export function getChartData() {
  // 日付文字列を yyyy/mm/dd → yyyy-mm-dd に変更する
  const dateTimes = data.values.map((a) =>
    new Date(`${a[0]} ${a[1]}`).toLocaleString().replaceAll('/', '-')
  )
  // グラフ1: 貯水率
  const waterStorageCapacity = {
    name: '貯水率',
    x: dateTimes,
    y: data.values.map((a) => a[10]),
    type: 'scatter',
    mode: 'lines',
    fill: 'tozeroy',
    fillcolor: 'rgba(31, 119, 180, 0.25)',
    color: 'rgba(31, 119, 180, 1.0)',
    yaxis: 'y',
  }
  // グラフ2: 流域平均雨量(1時間ごとに加算)
  const rainFall = {
    name: '流域平均雨量',
    x: dateTimes,
    y: data.values.map((a) => a[2]),
    type: 'histogram',
    histfunc: 'sum',
    xbins: { size: 1000 * 60 * 60 * 1 },
    yaxis: 'y2',
  }
  return [waterStorageCapacity, rainFall]
}

{/* グラフのレイアウト設定 */}
export const layout = {
  title: {
    text: `${data.title}: ${data.waterSystem}`,
    subtitle: {
      text: '出典:国土交通省 水文水質データベース(https://www1.river.go.jp/) (2026年8月31日に参照)を加工して作成'
    },
  },
  xaxis: {
    type: 'date',
    title: { text: '時刻' },
    tickformatstops: [
      {
        dtickrange: [1000 * 60 * 60 * 24, null],
        value: '%m月%d日',
      },
      {
        dtickrange: [null, 1000 * 60 * 60 * 24],
        value: '%m月%d日 %H:%M',
      },
    ],
    showgrid: true,
  },
  yaxis: {
    title: { text: '貯水率 (%)' },
    range: [0, 100],
    side: 'left',
    overlaying: 'y2',
  },
  yaxis2: {
    title: { text: '流域平均雨量 (mm/h)' },
    side: 'right',
    range: [0, 50],
  },
  legend: {
    x: 1.08,
    xanchor: 'left',
    y: 1,
    yanchor: 'top',
  },
}

{/* @yamakox/vue3-plotly を使ってPlotlyでグラフ表示する */}
<Plot client:only="vue" data={getChartData()} layout={layout} />