Current

prefCodeのスキーマに想定される都道府県コードをハードコードしている

Expected

スキーマはあくまで自然数文字列であることのみを判別し、実際の都道府県コードはRESAS APIからフェッチする

参照: https://opendata.resas-portal.go.jp/docs/api/v1/prefectures.html

要件を見落としていた...

<Checkbox>

スタイルが付加されたチェックボックス

<PrefectureCheckbox>

都道府県コードprefCodeとラベルの文字列を受け取り、値が変わるとそれに合わせてsearchParamsを変化させるコンポーネント

Expected Behavior

e.g. <PrefectureCheckbox prefCode={'8'} label="茨城県">の場合
チェックされると?prefCodesに8を追加、外されると削除

概要

devcontainer.jsonで設定した開発用コンテナを実行するために、OrbstackなどのVirtioFSを利用するコンテナ実行環境を用いると、pnpmが正しく動作しない。

参考

pnpm/pnpm#5803
misskey-dev/misskey#10207

概要

高速な並列実行が可能で、設定ファイルが少なくまとまるため。

• 参照: https://zenn.dev/kimuson/articles/husky_to_lefthook

移行前

• package.jsonのprepareにhusky installを記述する
• .husky/precommitにpnpm lint-stagedを記述する
• パッケージごとに.lintstagedrcを配置する

移行後

• ルートにlefthook.ymlを配置するだけ

概要

https://pagespeed.web.dev/analysis/https-resas-reoiam-dev-all/vfonuhliiu?form_factor=mobile

概要

• 各コンポーネントのフォルダに再exportするindex.tsを設けて、importパスを簡略化する
  • 外部から参照されたくないexportも示せる利点あり

概要

• Vitestの拡張機能を追加する
• forwardedPortsに色々追加する
• Playwrightのインストールコマンドを自動で実行するようにする
• その他

概要

現状の問題点

都道府県チェックボックス<PrefectureCheckbox>の値を押して変更しても、サーバー側でRSCがレンダーされて返却されるまでURLが書きかわらない。そのため、瞬時にチェックボックスの値が更新されない。また、URLが書き変わる前に再度他のチェックボックス<PrefectureCheckbox>を押しても、遷移先が最初の都道府県チェックボックスによる値を含まないものになってしまう。

解決法

1. /[statLabel]のfetch処理を<Suspense>内に移す

サーバー側の修正では対応不可能

• generateMetadata()内でもfetch処理を行っており、これは値が解決されるまでのフォールバックを設定できない。 vercel/next.js#45418
• searchParamsのみを更新する遷移では、loading.tsxで設定した<Suspense>バウンダリは呼び出されない。 vercel/next.js#53543

2. <PrefectureCheckbox>にステートを追加してOptimistic Updateを実装する

<PrefectureCheckbox>の間で共有ステートを作る必要がある。

• Context
• Jotai
• 親Client Componentを作り、親からイベントハンドラを渡す

概要

• .github/README.mdに記述を追加する

src/infra/resas/fetchPopulationComposition.ts

• RESAS APIのエンドポイントを唯一叩く関数。APIキーの参照はここに限る。

src/libs/getPopulationCompositionAll.ts

• ↑を並列実行する関数

src/libs/extractDataPointsByStatLabel.ts

• ↑の結果を、プロットする際に用いるデータ点の配列に整形する関数

type DataPoint = {
  year: Year;
} & Record<PrefCode, number>;

概要

概要

以下の二つのコンポーネントをlayout.tsxに追加する

• <PrefectureCheckbox> #15
• <PrefectureStateBar> #16

概要

<ThemeSelect>, <Select>がRadix UIを実装に用いてるから、実装を書き換えて依存しないようにする

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	@storybook/testing-library

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(): update pnpm to v8.15.9
• chore(web): update devdependencies (@babel/core, @next/env, @pandacss/dev, @pandacss/preset-panda, @playwright/test, @storybook/addon-a11y, @storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/addon-viewport, @storybook/blocks, @storybook/nextjs, @storybook/react, @storybook/test, @storybook/test-runner, jsdom, lefthook, playwright, postcss, prettier, storybook, tsup, turbo, typescript, webpack)
• fix(eslint-config-custom-next): update minor dependencies (@next/eslint-plugin-next, @pandacss/dev, @t3-oss/env-nextjs, @types/node, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint-config-next, eslint-config-turbo, eslint-plugin-react, lucide-react, next, pnpm)
• chore(): update dependency vitest to v2
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(): update pnpm to v9

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Current

• /のものが使われてしまっている

Expected

• statLabelとパラメータ?prefCodesの値に合わせて、茨城県の総人口のようにわかりやすいタイトルをOpenGraphにも設定する

概要

src/env.tsに書かれているスキーマに対応するドキュメントを書く

概要

• v8.0.5では失敗しなかった #15
• v8.1.3では失敗する #16

おそらく、@storybook/nextのnavigationの仕様変更が原因？

概要

現状

タイトル表示文字列を生成するために行っているfetchが終わるまで、ローディング画面の返却が行えていない。

理想

src/app/[statLabel]/page.tsxでのfetch処理の実行をやめて、<Suspense>で囲う。
しかし、結局generateMetadata()関数内でもfetchしているため、修正してもパフォーマンスの改善は望めないかもしれない。

• UIライブラリvaulに依存しており、課題の要件的にも不適格であるから

概要

未使用パッケージもしくはコードを全て削除する

概要

• クリアボタンを押すと、searchParamsからprefCodesを削除する。
• searchParamsからprefCodesを読み取り、選択中の都道府県の数を表示する

• Vercelのデプロイ環境で扱える最新LTSバージョンであるため。

概要

以下の型を持つデータ点の配列とその他表示用文字列を受け取って、グラフを表示するコンポーネントを作成する

export const dataPointValueRecordSchema = z.record(prefCodeSchema, z.number().min(0).nullable());
export type DataPointValueRecord = z.infer<typeof dataPointValueRecordSchema>;

export type DataPoint = {
  year: Year;
} & DataPointValueRecord;

参照

• Mantine Charts https://mantine.dev/charts/area-chart/
• Recharts https://recharts.org/en-US/api

概要

以下の文章とリンクをトップページに追加する

RESAS(地域経済分析システム)に掲載されている各種人口データを、都道府県別にグラフで比較できます。
株式会社ゆめみのフロントエンド課題の一環で白田連大 @ReoHakaseにより作成されました。

• /[statLabel]
• <PrefectureForm>
• <PopulationChart>
  などに対して実装する。

• 主にRESAS APIからのフェッチ部分のテストをするため

現状 (Current Behavior)

ラベルを押してもチェックボックスの値は書き換えることができるが、カーソルの見た目が通常時のまま。

理想 (Expected)

カーソルの見た目が指差しポインターになるように修正する。