仮想通貨取引所間のスプレッドを表示するサイト作ってみた。

2017年は仮想通貨すごく盛り上がりましたね。

Webサイト作ってみたいなと去年の5月から思い続けやっと一つ目完成しました。笑
ちなみにこんなサイト作ってるのに何一つ仮想通貨持ってません。笑

実際にこのサイトに取り掛かったのは11月ぐらいなので制作期間は3ヶ月ぐらいかと思います。

Library

Front-End

create-react-app - https://github.com/facebook/create-react-app
React v16.2 - https://github.com/facebook/react
React-router-dom v4.2 - https://www.npmjs.com/package/react-router-dom
Recharts v1 - https://github.com/recharts/recharts
Semantic-ui-react v0.77 - https://github.com/Semantic-Org/Semantic-UI-React
Bootstrap v4 - https://github.com/twbs/bootstrap
axios v0.17 - https://github.com/axios/axios
moment v2.20 - https://github.com/moment/moment

Back-End

Node.js v8.9.4 - https://nodejs.org/ja/
Loopback v3.18 - https://github.com/strongloop/loopback
MongoDB v3.6 - https://www.mongodb.com/
ccxt v1.10.1084 - https://github.com/ccxt/ccxt
node-cron v1.3 - https://github.com/kelektiv/node-cron

Deploy環境

Netlify Front-End - https://www.netlify.com/
AWS Route53 DNS - https://aws.amazon.com/jp/route53/
AWS Lightsail Ubuntu 16.04 LTS - https://aws.amazon.com/jp/lightsail/

こだわったところ。

REST API + 仮想DOM(SPA)
自動更新
Javascriptだけ。（結果的にそうなっただけの気もする。）

大変だったところ。

ES5以前とES6以降のJavascriptの構文（慣れるまで地獄。笑）

WebAppの設計ルールみたいなもの。

CRUD -> HTTPメソッドGet Post Put Delete
フロントエンドとバックエンドの役割分担の考え方

機能実装するための手段の把握

特定の時間にプログラムを実行する -> スケジューリング機能 -> Cron。
エラーが出た時に再度ループ処理する方法 -> foreverやpm2などでデーモン化。

この2点、設計段階でかなり悩んだポイントだったのですが、一つでもAppをデプロイしてたらわかったような単純な内容でした。笑

本番環境を見据えてTDDすべきだと改めて思った瞬間でした。笑

これからへはじめてWebアプリを作る方へ

本で勉強される方

古い良書よりも新しい普通の本を買いましょう。
Web技術は日々進化しているので情報が陳腐化します。
個人的に良書と聞くと分厚くて内容が細かい本が多いように思います。
はじめてのアプリ制作のお供には不必要だと思います。

狭くて深い本より広くて浅い本を買いましょう。
作っておしまいだけではなくて実際にデプロイまでするような本の方がためになることがあると思います。
また著者のコードの癖などがあり、部分的に学んでしまうと他の本を参考にした際に軽いパニックになることがあります。
一度全部してみて、こうやってWebアプリ作るんだと感覚を掴んでから次の本にいくのでも遅くありません。

映像で勉強される方

コードは万国共通。英語の動画も見てみるといいかもしれません。

どんな簡単なアプリでもいいので開発だけで終わらず、公開までした方がいいです。（人のこと言えないですが。笑）

今後の予定

反響があったら、他の通貨や取引所増やそうかなって思います。

何かありましたら、コメントやTwitterでご質問いただければ嬉しいです。