観光客数の積み上げ棒｜国内 / 訪日を一枚に Claude Code で

2. 使うデータ: 宿泊旅行統計の都道府県別宿泊客数

観光庁の 宿泊旅行統計調査 は、ホテル・旅館・簡易宿所・その他の宿泊施設を対象に、月次で宿泊者数を集計している調査だ。e-Stat 上では「観光庁」の調査として登録されており、statsDataId を 1 つ叩けば全国 + 47 県 × 国籍区分（日本人 / 外国人）のクロス集計が一気に取れる。

データの粒度は概ねこうなっている。

「人泊」ベースである点は重要だ。観光統計で「観光客数」と言うとき、来訪者の頭数を指す場合と、宿泊数を指す場合がある。本データは後者で、リピーターや連泊客の効果がそのまま積み上がる。

2-1. 国籍区分の取り方

宿泊旅行統計の cat02 軸には「総数 / 日本人 / 外国人」の区分が含まれている。今回欲しいのは以下の 2 系列。

• 国内宿泊客数 = cat02 == 日本人
• 訪日宿泊客数 = cat02 == 外国人

総数は「日本人 + 外国人」とほぼ一致するが、不詳が少し混じるので、積み上げ棒では「日本人」と「外国人」だけを足し合わせて見せるほうがクリーンだ。総数を別途引いてラベルだけ表示するのもあり。

2-2. 施設タイプの取り方

cat01 軸には「全宿泊施設 / ホテル / 旅館 / 簡易宿所 / その他」のような施設タイプが入る。今回の積み上げ棒は 施設タイプは「全宿泊施設」固定 で、国籍だけを積み上げる。施設タイプも積み上げると 3 階建ての積み上げになり、Part 11 のスコープを超えるのでやらない。

3. Step 1: 2 つの系列を Claude Code に取らせる

ここから手を動かす。最終的にやりたいのは「指定年の 12 か月合計を、47 県 × 2 系列で配列に整形してファイル出力」だ。

まず Claude Code に渡す前提を共有する。プロジェクトのセットアップは Part 01 で済んでいるものとして、packages/estat-api 経由で API キー読み込みと R2 キャッシュが動く想定。Part 02 の /search-estat スキルで statsDataId の候補当たりをつけたあとに、本番取得に進む。

Claude Code への最初の依頼はこう書く。

@.claude/skills/estat/fetch-estat-data/SKILL.md

宿泊旅行統計調査（観光庁）から、2024 年（年間集計）の都道府県別
「全宿泊施設 × 日本人」「全宿泊施設 × 外国人」の延べ宿泊者数を取ってきて、
scripts/tourism/fetch-overnight-2024.ts として書き出して。

要件:
- e-Stat API は packages/estat-api 経由（cdArea / cdTime は使わない）
- 全年・全県を一括取得してメモリでフィルタ
- 出力は data/tourism/overnight-2024.json
- スキーマ:
  { year: 2024, items: [
    { areaCode: "01000", areaName: "北海道", domestic: 12345678, inbound: 234567 },
    ...
  ] }
- 1 県でも欠損があれば warn ログ + nullable で詰める
- 既存の指標登録テーブル indicators を汚さない（読み取りオンリーで OK）

@ でスキルを直接食わせるのが Part 02 で習った癖。Claude Code は SKILL.md を読み、e-Stat API の規約（cdArea / cdTimeFrom を使わない・全件取得してメモリでフィルタ）を勝手に守った形で吐いてくれる。

実行すると、こんな感じのスクリプトが返ってくる。

// scripts/tourism/fetch-overnight-2024.ts
import { fetchEstatStats } from "@stats47/estat-api";
import { writeFile, mkdir } from "node:fs/promises";
import { dirname } from "node:path";

const STATS_DATA_ID = "0003445XXX"; // 宿泊旅行統計の確報テーブル
const TARGET_YEAR = "2024";

type OvernightRow = {
  areaCode: string;
  areaName: string;
  domestic: number | null;
  inbound: number | null;
};

async function main() {
  // 全件取得（cdArea / cdTime 指定なし）
  const raw = await fetchEstatStats({
    statsDataId: STATS_DATA_ID,
    cdCat01: "ALL_FACILITIES", // 全宿泊施設
  });

  // 軸を解釈: AREA / TIME / CAT02(日本人・外国人)
  const byPref = new Map<string, OvernightRow>();

  for (const row of raw.values) {
    if (!row.timeCode.startsWith(TARGET_YEAR)) continue;
    const code = row.areaCode;
    if (!byPref.has(code)) {
      byPref.set(code, {
        areaCode: code,
        areaName: row.areaName,
        domestic: 0,
        inbound: 0,
      });
    }
    const target = byPref.get(code)!;
    if (row.cat02Code === "JAPANESE") {
      target.domestic = (target.domestic ?? 0) + row.value;
    } else if (row.cat02Code === "FOREIGN") {
      target.inbound = (target.inbound ?? 0) + row.value;
    }
  }

  // 47 県だけに絞る（00000 全国 / 99000 不詳を除く）
  const items = [...byPref.values()]
    .filter((r) => r.areaCode.endsWith("000") && r.areaCode !== "00000")
    .sort((a, b) => a.areaCode.localeCompare(b.areaCode));

  for (const r of items) {
    if (r.domestic == null || r.inbound == null) {
      console.warn(`[warn] missing series at ${r.areaCode} ${r.areaName}`);
    }
  }

  const outPath = "data/tourism/overnight-2024.json";
  await mkdir(dirname(outPath), { recursive: true });
  await writeFile(outPath, JSON.stringify({ year: 2024, items }, null, 2));
  console.log(`[done] wrote ${items.length} rows to ${outPath}`);
}

main().catch((e) => {
  console.error(e);
  process.exit(1);
});

実行コマンドはお馴染みの 1 行。

npx tsx scripts/tourism/fetch-overnight-2024.ts

API キーは .env から読まれる前提で、初回だけ e-Stat にリクエストが走り、2 回目以降は R2 キャッシュにヒットしてミリ秒単位で返ってくる。

ここまでで「データを取る」フェーズはおしまい。e-Stat API そのものの細かい話は Part 01〜03 で散々書いたので深入りしない。

4. Step 2: 47 県 × 2 系列 の行列に整形

API レスポンスを保存した overnight-2024.json はこんな構造になる。

{
  "year": 2024,
  "items": [
    { "areaCode": "01000", "areaName": "北海道", "domestic": 36456000, "inbound": 9120000 },
    { "areaCode": "02000", "areaName": "青森県", "domestic": 4980000, "inbound": 360000 },
    { "areaCode": "03000", "areaName": "岩手県", "domestic": 5210000, "inbound": 290000 },
    { "areaCode": "13000", "areaName": "東京都", "domestic": 51230000, "inbound": 28760000 },
    { "areaCode": "26000", "areaName": "京都府", "domestic": 21560000, "inbound": 14210000 },
    { "areaCode": "27000", "areaName": "大阪府", "domestic": 31870000, "inbound": 19340000 },
    { "areaCode": "47000", "areaName": "沖縄県", "domestic": 18920000, "inbound": 4530000 }
  ]
}

数値はサンプル。実値は e-Stat 側の確報を見てほしい。

積み上げ棒に食わせるには、これを 「stack の対象キー（series）」と「行レコード（areaCode 単位）」 の 2 階層に整える。d3-shape の d3.stack() が受け取れる形にしてやるイメージだ。

// scripts/tourism/build-stack-input.ts
import { readFile, writeFile } from "node:fs/promises";

type Row = {
  areaCode: string;
  areaName: string;
  domestic: number | null;
  inbound: number | null;
};

const SERIES = ["domestic", "inbound"] as const;
type Series = (typeof SERIES)[number];

type StackInput = {
  series: typeof SERIES;
  rows: Array<{
    areaCode: string;
    areaName: string;
    total: number;
    domestic: number;
    inbound: number;
  }>;
};

async function main() {
  const raw = JSON.parse(await readFile("data/tourism/overnight-2024.json", "utf-8")) as {
    items: Row[];
  };

  const rows = raw.items.map((r) => {
    const domestic = r.domestic ?? 0;
    const inbound = r.inbound ?? 0;
    return {
      areaCode: r.areaCode,
      areaName: r.areaName,
      domestic,
      inbound,
      total: domestic + inbound,
    };
  });

  // 合計値降順で並び替え（積み上げ棒の常套手段）
  rows.sort((a, b) => b.total - a.total);

  const out: StackInput = { series: SERIES, rows };
  await writeFile(
    "data/tourism/overnight-2024.stack.json",
    JSON.stringify(out, null, 2)
  );
  console.log(`[done] ${rows.length} rows ready for d3.stack`);
}

main();

ここで効いているのが「合計値降順ソート」。47 県のような多数カテゴリを並べると、五十音順や areaCode 順で並べたグラフは「読み手の脳に負荷を強いるだけ」になる。「視覚的に山なりに減っていく」絵にするだけで、読みやすさが体感 2 倍は変わる。

実は Claude Code に「Step 2 の整形スクリプトを書いて。stack 用の series キーと rows 配列。並びは合計値降順」とだけ伝えれば、上記スクリプトはほぼそのまま出てくる。意図（並び順、key 名）を文字で伝える のがコツで、Claude Code は意図を取り違えるよりも「意図がないところを勝手に埋める」ほうがエラー率が高いので、書きすぎても損はしない。

5. Step 3: d3.stack で積み上げレイアウト

ここからフロント側。packages/visualization/d3 配下に積み上げ棒コンポーネントが既にあれば再利用、なければ Claude Code に新規生成させる。今回は新規前提で進める。

Claude Code に投げるプロンプト。

packages/visualization/d3/StackedBarChart.tsx を作成。

要件:
- props: { data: StackInput; width: number; height: number; colors?: Record<Series, string> }
- d3-scale, d3-shape のみ使用（React は SVG をそのまま描画、d3 セレクションは触らない）
- x: scaleBand（areaName）, y: scaleLinear（0 〜 total max）
- d3.stack().keys(series) で積み上げ
- 描画は SVG 直書き、d3.select はしない
- アクセシビリティ: <title> で areaName + 各系列の値、role="img"
- ホバー時の tooltip は別 PR でやるので、今は描画のみ
- 単位は「万人泊」に丸める（生値 / 10000、小数 1 桁）

返ってくる中身がこうなる。

// packages/visualization/d3/StackedBarChart.tsx
import { scaleBand, scaleLinear } from "d3-scale";
import { stack } from "d3-shape";
import { max } from "d3-array";

type Series = "domestic" | "inbound";

type Row = {
  areaCode: string;
  areaName: string;
  domestic: number;
  inbound: number;
  total: number;
};

type StackInput = {
  series: readonly Series[];
  rows: Row[];
};

const DEFAULT_COLORS: Record<Series, string> = {
  domestic: "#3b82f6", // blue-500
  inbound: "#ef4444", // red-500
};

const SERIES_LABEL: Record<Series, string> = {
  domestic: "国内（日本人）",
  inbound: "訪日（外国人）",
};

const MARGIN = { top: 24, right: 24, bottom: 80, left: 56 };

export function StackedBarChart({
  data,
  width,
  height,
  colors = DEFAULT_COLORS,
}: {
  data: StackInput;
  width: number;
  height: number;
  colors?: Record<Series, string>;
}) {
  const innerW = width - MARGIN.left - MARGIN.right;
  const innerH = height - MARGIN.top - MARGIN.bottom;

  const x = scaleBand<string>()
    .domain(data.rows.map((r) => r.areaName))
    .range([0, innerW])
    .padding(0.15);

  const yMax = max(data.rows, (r) => r.total) ?? 0;
  const y = scaleLinear()
    .domain([0, yMax])
    .nice()
    .range([innerH, 0]);

  const series = stack<Row, Series>()
    .keys([...data.series])
    .value((row, key) => row[key])(data.rows);

  return (
    <svg
      role="img"
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
    >
      <g transform={`translate(${MARGIN.left},${MARGIN.top})`}>
        {/* Y 軸グリッド + ラベル */}
        {y.ticks(5).map((t) => (
          <g key={t} transform={`translate(0,${y(t)})`}>
            <line x1={0} x2={innerW} stroke="#e5e7eb" />
            <text x={-8} y={4} fontSize={11} textAnchor="end" fill="#64748b">
              {(t / 10000).toFixed(0)}万
            </text>
          </g>
        ))}

        {/* 各系列の rect */}
        {series.map((s) => (
          <g key={s.key} fill={colors[s.key as Series]}>
            {s.map((seg, i) => {
              const row = data.rows[i];
              const xPos = x(row.areaName) ?? 0;
              const yTop = y(seg[1]);
              const yBot = y(seg[0]);
              return (
                <rect
                  key={row.areaCode}
                  x={xPos}
                  y={yTop}
                  width={x.bandwidth()}
                  height={Math.max(0, yBot - yTop)}
                >
                  <title>
                    {row.areaName} / {SERIES_LABEL[s.key as Series]}:{" "}
                    {((seg[1] - seg[0]) / 10000).toFixed(1)} 万人泊
                  </title>
                </rect>
              );
            })}
          </g>
        ))}

        {/* X 軸ラベル（縦書きで 47 件さばく） */}
        {data.rows.map((r) => {
          const xPos = (x(r.areaName) ?? 0) + x.bandwidth() / 2;
          return (
            <text
              key={r.areaCode}
              x={xPos}
              y={innerH + 12}
              fontSize={10}
              textAnchor="end"
              transform={`rotate(-60, ${xPos}, ${innerH + 12})`}
              fill="#334155"
            >
              {r.areaName}
            </text>
          );
        })}
      </g>
    </svg>
  );
}

ポイントは 3 つ。

1. d3.stack() の戻り値 series は 3 次元配列 に近い構造で、series[seriesIndex][rowIndex] = [y0, y1] という形になる。y0 が下端、y1 が上端で、ここをそのまま y(seg[0]) - y(seg[1]) で高さに変換する。
2. d3.select には触らない。React で d3 を扱うときの鉄則。レイアウト計算は d3、描画は React の流儀で完結させる。
3. X 軸ラベルは 47 件入る都合、rotate(-60) で縦傾けが現実解。フォントを 10px まで落とすと収まる。

このコンポーネントを apps/web/src/app/blog/cc-estat-11-tourism-stacked/Chart.tsx あたりから呼び出せば、記事内チャートとして配信できる。

StackedBarChart のデフォルトカラーを Okabe-Ito パレットに合わせて。
国内 = '#0072B2'（青）、訪日 = '#D55E00'（オレンジ）。
WCAG AA を満たすか自己チェックも吐いて。

function Legend({ colors }: { colors: Record<Series, string> }) {
  return (
    <ul className="flex flex-wrap gap-4 text-sm text-slate-700 mb-2">
      {(Object.keys(colors) as Series[]).map((key) => (
        <li key={key} className="flex items-center gap-2">
          <span
            aria-hidden
            className="inline-block w-3 h-3 rounded-sm"
            style={{ backgroundColor: colors[key] }}
          />
          <span>{SERIES_LABEL[key]}</span>
        </li>
      ))}
    </ul>
  );
}

type SortKey = "total_desc" | "inbound_ratio_desc" | "inbound_desc" | "domestic_desc";

const COMPARATORS: Record<SortKey, (a: Row, b: Row) => number> = {
  total_desc: (a, b) => b.total - a.total,
  inbound_ratio_desc: (a, b) =>
    b.inbound / Math.max(b.total, 1) - a.inbound / Math.max(a.total, 1),
  inbound_desc: (a, b) => b.inbound - a.inbound,
  domestic_desc: (a, b) => b.domestic - a.domestic,
};

export function sortRows(rows: Row[], key: SortKey): Row[] {
  return [...rows].sort(COMPARATORS[key]);
}

const ANNOTATIONS = [
  { areaName: "東京都", text: "全国一の合計\n訪日比率 35%", dx: -40, dy: -30 },
  { areaName: "京都府", text: "訪日比率 39%（最高）", dx: 40, dy: -50 },
  { areaName: "沖縄県", text: "九州最高の合計", dx: 60, dy: -20 },
];

d3.stack のキー順は ["domestic", "inbound"] 固定で。
domestic を下、inbound を上に積む。順序を逆にしてはいけない。

搜索結果から速報（preliminary）でなく確報（confirmed）の statsDataId を選んで。
公表時期が遅い方が確報。