RESAS API を用いた人口推移の可視化アプリ

app
├── api             ## API routes
│   ├── population/composition/perYear/route.ts
│   └── prefectures/route.ts
├── components      ## コンポーネント
│   ├── molecules
│   │   ├── ChartPane.tsx
│   │   ├── CheckBoxPane.tsx
│   │   └── PopulationChart.tsx
│   └── organisms
│       ├── PopuTrackLogo.tsx
│       └── PopuTrackPane.tsx
├── hooks           ## Custom hooks
│   ├── useActivePopulationCompositionData.ts
│   ├── usePrefectures.ts
│   └── usePrefecturesPopulation.ts
├── lib/api.ts      ## API routes へのリクエスト処理
├── styles          ## CSS Modules
├── types/index.ts  ## 型定義
├── ui              ## フォント関連など
├── layout.tsx      ## レイアウト
└── page.tsx        ## ルート

API_KEY= # Your API key
POPULATION_COMPOSITION_API_URL="https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear"
PREFECTURES_API_URL="https://opendata.resas-portal.go.jp/api/v1/prefectures"

import { z } from "zod";

const querySchema = z.object({
  prefCode: z.string().refine((val) => {
    const intValue = parseInt(val);
    return intValue >= 1 && intValue <= 47;
  }),
});

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const prefCode = searchParams.get("prefCode");

  try {
    querySchema.parse({ prefCode });
  } catch {
    return new Response("Invalid query parameter", { status: 400 });
  }

  return await fetch(
    `${process.env.POPULATION_COMPOSITION_API_URL}?cityCode=-&prefCode=${prefCode}`,
    {
      method: "GET",
      headers: {
        "X-API-KEY": process.env.API_KEY || "",
      },
    }
  );
}

import styles from "@/app/styles/page.module.css";
import React from "react";

import { PopuTrackLogo } from "./components/organisms/PopuTrackLogo";
import { PopuTrackPane } from "./components/organisms/PopuTrackPane";

const Page: React.FC = () => {
  if (!process.env.API_KEY) {
    throw new Error("API_KEY not found.");
  }

  return (
    <main className={styles.main}>
      <div className={styles.mainContainer}>
        <div className={styles.header}>
          <PopuTrackLogo />
        </div>
        <PopuTrackPane />
        <footer className={styles.footer}>
          <p>&copy; {new Date().getFullYear()} seelx3</p>
        </footer>
      </div>
    </main>
  );
};

export default Page;

import { expect, test } from "@playwright/test";

test.beforeEach(async ({ page }) => {
  await page.goto("http://127.0.0.1:3000");
});

test("東京都のチェックボックスのチェックの切り替え", async ({ page }) => {
  // 東京都のチェックボックスをクリックする
  await page.check("#東京都");

  // 東京都のチェックボックスがチェックされている
  await expect(page.locator("#東京都")).toBeChecked();

  // Highcharts に折れ線グラフが 1 本描画されている
  await expect(page.locator(".highcharts-tracker-line")).toHaveCount(1);

  // Highcharts の凡例に "東京都" の 1 つだけが表示されている
  const legendItem = page.locator(".highcharts-legend-item");
  await expect(legendItem).toHaveCount(1);
  await expect(legendItem).toHaveText("東京都");

  // 東京都のチェックボックスのチェックを外す
  await page.uncheck("#東京都");

  // Highcharts の折れ線グラフがない
  await expect(page.locator(".highcharts-tracker-line")).toHaveCount(0);

  // Highcharts の凡例がない
  await expect(page.locator(".highcharts-legend-item")).toHaveCount(0);
});

name: Playwright Tests
on: push
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm install -g yarn && yarn
      - name: Install Playwright Browsers
        run: yarn playwright install --with-deps
      - name: Run Playwright tests
        env:
          API_KEY: ${{ secrets.API_KEY }}
          PREFECTURES_API_URL: ${{ secrets.PREFECTURES_API_URL }}
          POPULATION_COMPOSITION_API_URL: ${{ secrets.POPULATION_COMPOSITION_API_URL }}
        run: yarn test-e2e:chromium
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30