tmegos blog

スクールアイドルがすきです

技術編:鹿児島市の灰を捨てる場所を探す「灰これ」を作りました

こちらの記事のテクニカルな話です

tmegos.hatenablog.jp

使ったもの

リポジトリ

github.com

React

会社では使っていましたが、個人開発で使うことが少なかったので使ってみました
create-react-appのv3が出たことも理由の1つです
create-react-appでプロジェクトを作ったので、PWA化されています

react-router

Reactでルーティングをするためのライブラリです
当初はシングルページで地図とAboutページを出す予定でしたが、マーカーが多い関係で画面遷移のボタンをタップしてから数秒待たされるという問題が発生しました
この問題を解決するため、地図とAboutページは別ページとして画面遷移に時間がかからないようにしました

Onsen UI

Webアプリでネイティブアプリのようなスタイルを実現するためのライブラリです
1つのコードでiOSAndroid両対応になることも特徴の1つです

ドキュメントのAPI一覧を見ていて新しく気づいたことがありました
普段はVue.jsで利用することが多いのですが、Vue.jsの場合は「実例(ブラウザ上で動くもの)」、「サンプルコード」、「プロパティ一覧」でまとまっていて完成形がわかりやすいです
Reactの場合は実例がなく、完成形がわかりませんでした
ReactのAPI一覧にも実例が追加されればOnsen UIがより普及するのかなと思いました

Leaflet

JavaScriptで地図を表示するためのライブラリです
GoogleMapは一定アクセスを超えると有料になるため、今回はやめておきました

Reactで使う場合はReact-Leafletを使うといいです

Leaflet.markercluster

Leafletでマーカーの数が多いときにクラスタ化するためのプラグインです
マーカーの数が多いと(今回は5000件)とても重たくなりますが、こちらのプラグインクラスタ化すると、 ズームレベルに応じてマーカーがクラスタ化されるため、動作が軽くなります

f:id:tmegos:20190506091543p:plain:w200

Reactで使う場合はreact-leaflet-markerclusterを使うといいでしょう
ただし、React-Leafletとreact-leaflet-markerclusterのバージョン互換性の問題で、react-leafletのv2を使う場合はreact-leaflet-markerclusterもv2を使う必要があります
以下のissueのとおり、npmreact-leaflet-markercluster@nextを指定してください

Importing MarkerClusterGroup results in TypeError · Issue #71 · YUzhva/react-leaflet-markercluster · GitHub

反省点

マーカーの位置情報がCSVで提供されていたので、Google SpreadsheetにCSVを登録してGoogle Apps Scriptでjson化すればよかったかなと思いました