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

概要

スタジアム・アリーナと人口
URL: https://cieloazul310.github.io/gatsby-stadiums-population/

  • スタジアム: 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 で開発しました。 GatsbyReact で 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
https://github.com/piotrwitek/react-redux-typescript-guide

CSS3 の Flex

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

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

CSS フレックスボックスレイアウト
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

Gatsby のファイルシステム

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

Material-UI

Material-UI は Google の Material Design を React で使えるようにした React のライブラリです。
一度離れたものの、Flutter を使ったおかげで Material Design を良いと思えるようになったため再び使い始めました。

以前一度使ったバージョンはまだ v0系 でしたが、いつの間にか v3.9.2 になっていました。Bootstrap のような Grid レイアウトができるようになっています。
CSS を使った UI デザインが苦手なので、今後は全て Material-UI に丸投げしてしまおうと思います。

全体的に Flutter を勉強したことがとてもとても生きています。

今後

Gatsby の使い方がわかってきたので、以前 create-react-app で作ったJクラブ経営情報2005-2017ロック大陸測量部も Gatsby で作り直したいと思います。

Can’t Give You Anything (But My Love) / The Stylistics (1974)

広告