京都でフリーランスのWebデザイナーをしている山根（@sho_yamane）です。
今回はVue.js + Nuxt.jsで仮想通貨のチャート表示サービスを作ったのでそのご紹介です。作ったサイトは以下になります。
構成
仮想通貨取引所のコインチェックのAPIがクロスドメイン対応していなかったので一度APIサーバーを作ってそこ経由で情報を渡しています。
APIサーバー
- ConoHaVPSの一番安いプラン
- Ruby
- デーモン化して5秒ごとにチャート情報を取得
表示してるほうのサーバー
- Netlifyで0円
- Vue.js + Nuxt.js
- チャートはD3.jsとTechanJSを使用
- setIntervalで5秒ごとにAPIサーバーの情報取得
感想
特にハマったところもなくリアルタイム表示サービスなのでVue.jsを使うことでとても楽にコーディングできました。設定からカラム数を変えたりダークモードに切り替えられたりするんですがそのへんはVue.jsを使うととても楽に書ける部分ですね。
Nuxt.js入れる意味あるのかよって話だとも思うんですが、今後文章情報を入れたい場合の拡張性を考えて最初からNuxt.jsを導入しました。ルーティングもOGP対応も楽ですしね。
サーバーはNetlifyでGithub経由で簡単デプロイです。AmazonのS3も検討したのですが、Netlifyは無料ですしCDNも勝手にやってくれますしデプロイ楽すぎでNetlifyを選びました。
おわり
以上、コードの紹介でもなく事例紹介になってしまいましたが、Vue.jsをつかうとこういうリアルタイム性のあるサイトも作りやすいよっていうお話でした。これをみてVue.js使ってみよ！って思う人がちょっとでも増えるとうれしいです。