前回はサイトの背景について書いたので、今回は技術的な部分について書いていく。
前提
作りたいものを実現するためには、
- ソースの公開が容易であること
- ブラウザで閲覧可能であること
は必須条件だった。
この段階では用いることのできる技術スタックは無数に存在する。例えば Observable や Google Colab といったプラットフォームに投稿することでも可能だし、あるいは GitHub に ipynb ファイルを投げれば実行結果がそのままブラウザに表示される。ただそれだとグラフを 1 箇所に集めることができない。自分でホストすれば Observable で使われている D3 も使えるし、JupyterLab の HTML 出力も載せられるし、その他 Apexcharts とかのライブラリも使える。使ったこと無いけどたぶん Bokeh で作ったインタラクティブなグラフも載せられる。要するに自分でサイトを作ればいろいろできるので、自分でサイトを作ることにした。
データの取得と加工
データは requests で取得して Pandas で集計や加工を行うオーソドックスな構成になっている。 geojson まわりに関しては npm パッケージをいくつか使っている。 Python の type hint を初めてちゃんと使ったけど正しく使えているのかよくわからない。データの処理は API から取得されたデータから必要な部分を取り出したり、ファイルを作成して書き込むみたいな処理が多くて、単体テストで何をすれば良いのかよくわからずテストが適当になってしまっている。
フロントエンド
用意されているデータを読み込んで表示するだけのサイトなので、フレームワークには静的サイトとして出力できる Gatsby、 Svelte Kit 、 Next.js か候補としてあったが、React でサクッと書けそうということで Next.js を採用した。（Svelte もいつかちゃんと触ってみたい）。 Next.js の static export を使うので SSR の機能は使わないのだが、dev 環境では SSR に関するエラーが出てきて対処が面倒だった。例えばクエリパラメータを使って表示するコンテンツを変えるようにした際に、 geojson のフェッチと数量データのフェッチを同じコンポーネントでやっていたときは大丈夫だったが、品目の変更をする度に地図も消えるのが煩わしかったので先に geojson をフェッチしてから数量データをフェッチするようにリファクタし、数量データが存在しない場合は地図のみを表示するようにしたら、数量データのフェッチ中に表示するコンポーネントでエラーが出るようになった（コード中の該当箇所）。 hydrateRoot の詳細とかを見ていくのも良い勉強になるとは思うけど、勉強したいことが山積みなので後回しかなあ。Next.js がどこからどこまでを自動で判定してくれているのかがよくわからないままでいる。
アクセス解析
アクセス解析ツールも一度は使っておくべきかなと思って Plausible を入れてみた。他にも Google Analytics、 PostHog、 Matomo が候補にあったが、以前ブログ記事で知った Plausible を使うことにした。ダッシュボードを見ると誰もサイトを訪れない日の方が多くて虚しかったので 30 日の無料トライアル期間が終わり次第サイトから外す予定。
ハマったポイント
CORS エラーが出続けて理由がわからずハマった時間があった。結局原因は Google の Cloud Storage で CORS の設定ファイルの中身は変更したけど update していないという気の抜けるようなミスだった。それ以外では、 make と geojson は触るのが初めてだったり e-stat が相変わらず難解だったりで手間取った部分はあったものの概ね順調に進んだと思う。
その他
やっぱりデータを並べて見たいよなあとか、トランジションしたほうがかっこいいよなあとか細かい欲が出てきて時間を食ってしまう。締切とかないので別に良いのだけど。