2019年02月25日

国内のサッカースタジアム・アリーナ周辺の人口を調べる

昨年国内のサッカースタジアム周辺の人口を求めるという記事を書きました。
前回の記事で算出結果の表示のために作ったページを新たに作り直し、ついでに前回算出しなかった半径 10km 圏内の人口と Bリーグのアリーナを加えました。

概要

スタジアム・アリーナと人口

cieloazul310.github.io

スタジアム: 149ヶ所 (J1, J2, J3, JFLのホームスタジアム, 地域リーグの一部、その他)
アリーナ: 52ヶ所 (B1, B2, B3のホームアリーナ, 地域リーグの一部)
距離: 1000m, 3000m, 5000m, 10000m

以前公開した同様の機能のページ
URL: https://cieloazul310.github.io/figure/stadiums_population/

スタジアム: 102ヶ所 (J1, J2, J3, JFLのホームスタジアム, 地域リーグの一部、その他)
距離: 500m, 1000m, 1500m, 3000m, 5000m

主な変更点

Bリーグのページを作った(公開停止)
サッカースタジアムを50ヶ所くらい増やした
表を作り直した
表でカテゴリー毎にフィルタできるようにした
新たに 10km 圏の人口を算出した
8方位毎の人口を算出した
地図を作り直した
地図をズームできるようにした
地形モードを搭載した
静的なサイトにした

以前のページは、一応 Single Page Application (SPA) の体は成しているものの、各スタジアムに対して固有のリンクを持たない仕様でした。今回は静的なサイトなので、それぞれのスタジアムが(例) https://cieloazul310.github.io/gatsby-stadiums-population/venues/ajista/ のように固有の HTML ページを持っています。

技術的な話

Gatsby JS を使って、 TypeScript で開発しました。 Gatsby は React で SPA (Single Page Application) 風の静的なサイトを作るフレームワークです。ビルド時に GraphQL を実行することでデータを用いた HTML ページを作成することができます。

各スタジアム・アリーナの JSON ファイルを生成し、JSON ファイルから HTML ページを機械的に作成します。200以上の html ファイルがあっという間に作成できます。

バイナリベクトルタイルと Turf.js を用いて各スタジアムの距離圏人口を求め、JSON ファイルを作成するプログラムの書き方はいつか載せます。

学習したこと

npm から yarn への以降

今まではパッケージ管理を npm でおこなってきましたが、 yarn を使ってみました。

TypeScript の基礎

Dart + Flutter を使ったことで型の重要性に気づき TypeScript を学び始めました。
このページを作成しながら TypeScript の基礎的な部分は押さえられたと思います。

TypeScript + React の書き方は以下のページを参考にしています。

React & Redux in TypeScript - Static Typing Guide

github.com

CSS3 の Flex

後述する Material-UI が flex を多く使っているため、この機に flex レイアウトを学びました。
今まで CSS によるレイアウトはとても苦手だったんですが、少し好きになりました。

で、やっていくうちに気づいたのですが、 Flutter のレイアウトも flex 的な発想で作られていますね。 Flutter を学んでおいてよかった。

CSS フレックスボックスレイアウト

developer.mozilla.org

Gatsby のファイルシステム

Gatsby JS は GraphQL を使うことによって開発に強力な効果を発揮することができます。
今回作ったスタジアム・アリーナと人口では、 gatsby-transformer-json を使って、 ./src/data/ ディレクトリ傘下の独立した JSON ファイルを GraphQL で取得しています。独立した JSON ファイルのデータセットを用意している点では旧バージョンも同じなのですが、旧バージョンがクライアント側でデータを fetch してデータを処理していたのに対し、Gatsby バージョンではビルド時に GraphQL を実行し静的な HTML ページを作成しています。