Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@lara_bell

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

More than 3 years have passed since last update.

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

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

Screen Shot 2018-02-22 at 16.46.20 (2).png

実際にこのサイトに取り掛かったのは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でご質問いただければ嬉しいです。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
lara_bell
最近はGoとPythonがメインです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?