Reactで簡単なWebアプリを作りました

2020/05/07

最近、React で タイドグラフを表示する簡単な web アプリを作りました。

きっかけ

まえまえから何か自分のアプリを作ってみたいと考えており思いついたのがこのタイドグラフを表示するアプリでした。僕はもともと釣りが好きで学生時代は毎日のように釣りをしていました。海釣りではその日の潮の動きが釣果に少なからず影響するため、タイドグラフは釣りに行く際よくチェックしていました。

ちまたには既にタイドグラフを表示してくれるアプリなんかはたくさんありますが、自分好みのものを作ってみたかったため挑戦してみました。

どうやって作ったか

データの取得

タイドグラフを作成するにはその元となる潮汐に関するデータが必要です。

当初は潮汐データを数値計算により算出しようかと考えていたのですが、よくよく調べてみていくと気象庁にてデータが無償公開されていることを知りました( https://www.data.jma.go.jp/gmd/kaiyou/db/tide/suisan/index.php)。 そこで、今回はこの気象庁で公開されているデータを利用することにしました。

気象庁で公開されているデータはそのままでは少々扱いづらい形式であったため、実際のアプリではあらかじめ python で整形しておいたデータを利用しています。

アプリ部分

今回は create-react-app をベースに作成しました。

yarn create react-app my-app

簡単に react 開発環境を構築することができ便利

material-ui



material-ui は react でマテリアルデザインを簡単に実現できるライブラリです。小さなアイコンから全体のレイアウトにいたるまで本当に様々なものが用意されており大変便利です。今回こういったライブラリを使いこなせればアプリ開発のスピードが爆上がりすることを身をもって体感しました。

yarn add @material-ui/core

各コンポーネントの利用はドキュメントが大変分かりやすかったです。

nivo



タイドグラフの描画のために利用したグラフ描画ライブラリです。ライブラリの選択肢としては、他にもChart.JSなど選択肢はあったのでうが今回はこの nivo を利用してみました。(...理由はweb サイトがオシャレだったからです。)

今回は単純な線グラフの描画に利用しましたが、他にも様々なグラフが書けるみたいです。

yarn add @nivo/bar @nivo/sankey ...

ここでは必要なコンポーネントのみ install すればオッケーです。

leaflet



オープンソースの Javascript 地図ライブラリです。google-map は料金がかかる可能性もあるようだったので今回は leaflet を使ってみました。

yarn add leaflet

ピンのクラスター表示などのプラグインも一通り揃っていて良い感じです。

ホスティング

今回作成した web アプリはNetlifyにホスティングしています。

Netlify は無料枠が大きく高速は静的サイトのホスティングサービスです。github と連携させておけば push するだけでホスティングまで完了してくれます。ちなみにこのブログも netlify にあげています。

工夫したところ

ダークモード対応

ダークモードに対応させています。これが一番したかった。

地図から各地点を選択できるように

leaflet で作成した地図から各地点のタイドグラフへ移動できるようにしました。

表示するタイドグラフの日付を指定できるように

表示するタイドグラフの日付をカレンダーから指定できるようにしています。

さいごに

ソースはこちらです。よかったらみて下さい。自分好みのタイドグラフサイト作ったはいいけど最近釣りに行ってない...

logo

たまおさ

釣りとか登山とか好きです。(@tamaki_osamu)