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

公開

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

きっかけ

僕はもともと釣りが好きで学生時代は毎日のように釣りをしていたのですが、海釣りではその日の潮の動きが釣果に少なからず影響するため、タイドグラフは釣りに行く際よくチェックしていました。

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

どうやって作ったか

データの取得

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

当初は潮汐データを数値計算により算出しようかと考えていたのですが、よくよく調べてみていくと気象庁にてデータが無償公開されていることを知りました。そこで、今回はこの気象庁で公開されているデータを利用することにしました。

アプリ部分

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

yarn create react-app my-app

簡単に react 開発環境を構築することができ便利です。また、以下のライブラリを利用しました。

material-ui

https://material-ui.com

material-ui は react でマテリアルデザインを簡単に実現できるライブラリです。小さなアイコンから全体のレイアウトにいたるまで本当にさまざまなものが用意されておりすごく便利でした。

yarn add @material-ui/core

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

nivo

https://nivo.rocks/

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

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

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

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

leaflet

https://leafletjs.com/

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

yarn add leaflet

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

ホスティング

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

Netlify は無料枠が大きく高速は静的サイトのホスティングサービスです。GitHub と連携させておけば push するだけでホスティングまで完了してくれます。。

さいごに

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

プロフィール画像
tamaosa

釣りと登山が好き。

About | © 2019 Tamaosa, Built with Gatsby