Biz-Navi

「プログラミング」と「Webマーケティング」を駆使して会社員が副業でインターネットから収入を得るためのお役立ち情報を発信

【Vue.js】Axios+APIでBitCoin価格を取得するアプリを作成【初心者向け】

最終更新日：

「Vue.js」で「Axios」と「CoinDesk」社が提供する「Bitcoin Price IndexAPI」を使用し、BitCoin価格を表示するアプリを開発します。

完成品

この記事では、「Axios」とAPIを使用して、BitCoinの価格を表示するアプリを作成します。

  • BitCoin価格をAPIで取得して表示します
  • APIは、「CoinDesk Bitcoin Price Index API」を使用します
  • APIとの連携にはAxiosを利用します

See the Pen eaywgr by BizNavi (@Biz-Navi) on CodePen.

1.プロジェクトの雛形を作成

1-1：Vue.jsの読み込み（CDN）

CDNを利用して、「Vue.js」を読み込み、ルートテンプレートを作成します。

HTMLファイルに、以下を記述すればOKです。

<div id="app">
 
</div> 
<!-- Vue.jsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

公式サイト（CDNの項目を参照)

1-2：Vueインスタンスを作成

Vueインスタンスを作成し、データを格納するプロパティを追加します。

プロパティの名称は「info」とし、初期値はnullとしておきます。

Javascriptファイルに以下を記述して下さい。

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
    }
  }
})

2.axios(HTTPクライアント)の導入

2-1：axiosの導入

それでは、APIと連携するために、axiosを導入します。

Vue.jsの読み込みの後にCDNからaxiosの読み込みを追加します。

<div id="app">
 
</div> 
<!-- Vue.jsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- axiosの読み込み -->
<script　src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>

axiosのGitHubページ

2-2：Bitcoin価格をAPIから取得(準備編)

それでは、BitCoin価格をAPIから取得します。

CoinDesk Bitcoin Price Index APIのページに行き、Bitcoinのリアルタイムデータを取得するアドレスを確認します。

該当のアドレスをコピーし、ブラウザーに貼り付けてみましょう。

Google Chromeの場合、JSONViewというプラグインを使用すると、以下の様にJSONファイルを整えて見る事が出来ます。

bpiの中にある「description」と「rate_float」がBitcoinの価格表示に使えそうです。　

2-3：Bitcoin情報をAPIから取得

それでは、Bitcoin情報をaxiosを使用して取得していきましょう。

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
    }
  },
  mounted () {
   axios
     .get('https://api.coindesk.com/v1/bpi/currentprice.json')
     .then(response => (this.info = response))
 }
})

mounted()は、どのタイミングで実行されるかを示しています。

インスタンスの作成の後、DOMへのマウントが行われますが、Vueのライフサイクルの中でMountedと書かれているタイミングでaxiosがAPIからデータを取得するのだとザックリ捉えて貰えれば大丈夫です。

HTMLファイルに、infoを表示する様に追記します。

<div id="app">
   {{info}}
</div> 
<!-- Vue.jsの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- axiosの読み込み -->
<script　src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>

「Mustache構文{{ データオプションのプロパティ名 }}」を追記する事で、dataオプションのプロパティの内容を表示出来ます。

中括弧 {{ }} がヒゲの様に見える事から、Mustache構文と言われています。

2-4：途中結果の確認

途中結果を確認しましょう。HTMLファイルをブラウザで開き、以下の内容が表示されれば成功です。

{ "data": { "time": { "updated": "May 15, 2019 04:46:00 UTC", "updatedISO": "2019-05-15T04:46:00+00:00", "updateduk": "May 15, 2019 at 05:46 BST" }, "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org", "chartName": "Bitcoin", "bpi": { "USD": { "code": "USD", "symbol": "$", "rate": "8,027.8183", "description": "United States Dollar", "rate_float": 8027.8183 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "6,217.4650", "description": "British Pound Sterling", "rate_float": 6217.465 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "7,162.1707", "description": "Euro", "rate_float": 7162.1707 } } }, "status": 200, "statusText": "", "headers": { "content-type": "application/javascript", "cache-control": "max-age=15", "expires": "Wed, 15 May 2019 04:47:07 UTC" }, "config": { "transformRequest": {}, "transformResponse": {}, "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "headers": { "Accept": "application/json, text/plain, */*" }, "method": "get", "url": "https://api.coindesk.com/v1/bpi/currentprice.json" }, "request": {} }

ただ、余計なデータが沢山表示されてしまっていますね。なので、絞り込みを行います。

2-5：絞り込みの実施

必要なものは、「data」の中の「bpi」の中にある「symbol」、「description」、「rate_float」 なので、取得範囲を絞ります。

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
    }
  },
  mounted () {
   axios
     .get('https://api.coindesk.com/v1/bpi/currentprice.json')
     .then(response => (this.info = response.data.bpi))
 }
})

表示されるデータが絞り込まれ、以下の内容が表示されれば、成功です。

大分スッキリしましたね。

{ "USD": { "code": "USD", "symbol": "$", "rate": "7,991.8800", "description": "United States Dollar", "rate_float": 7991.88 }, "GBP": { "code": "GBP", "symbol": "£", "rate": "6,189.6311", "description": "British Pound Sterling", "rate_float": 6189.6311 }, "EUR": { "code": "EUR", "symbol": "€", "rate": "7,130.1076", "description": "Euro", "rate_float": 7130.1076 } }

3.BitCoin価格表示アプリの作成

3-1：HTMLを修正する

それでは、HTMLを以下の通り書き換えましょう。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bitcoin Dashboard</title>
  <!--CSSスタイルシートの読み込み  -->
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <div id="app">
    <h1>Bitcoin Price Index</h1>
    <div
      v-for="currency in info"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float  }}
      </span>
    </div>
  </div>

  <!-- Vue.jsの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <!-- axiosの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

h1タイトルを「Bitcoin Price Index」とし、v-for構文を使用して、infoの情報を通貨毎に一つ一つ取得していきます。

この場合、「USD」、「GBP」、「EUR」が一つ一つ取り出され、 「currency.description」、「currency.symbol」、「currency.rate_float」を描画します。

また、cssスタイルシートへのリンクを追記します。

3-2：cssを適用する

CSSを書いて、見た目を調整していきます。

body {
  display: flex;
  justify-content: center;
  background: #7E8D85;
  font-family: 'Roboto Slab', serif;
  line-height: 1.4;
}

#app {
  margin-top: 20px;
  width: 300px;
  padding: 0 40px 40px;
  background: #2F242C;
  border-radius: 5px;
  color: #B3BFB8;
}

h1 {
  color: #F0F7F4;
}

.lighten {
  color: white;
}

3-3：結果確認

それでは、結果を確認しましょう。

4.小数点以下桁数（filtersの適用）

フィルターを適用して、小数点以下2桁表示にします。

以下の記述をJavascriptファイルに追加します。toFixedメソッドを使用し、小数点以下桁数を整えています。

  filters: {
    currencyDecimal(value) {
       //  　小数点以下2桁表示
      return value.toFixed(2)
    }
  }

後は、HTMLファイルで「currencyDecimal」フィルターを追加します。

{{ currency.rate_float | currencyDecimal }}

フィルターの適用方法については、公式ページのこちらを参考にして下さい。

フィルターについて

公式サイト

axios を利用した API の使用

「Vue」学習の超オススメ講座

Vue入門決定版（Udemy）は、Vue開発の基礎から、一歩一歩ステップを踏み、とても丁寧に解説されているとても優良な講座です。

講座では、「ToDo管理アプリ」や、「Bitcoinの価格表示アプリ」を作ることが出来ます。

ランディングページ作成で10万円等、フロントエンド関連で稼げる美味しい案件は沢山あるため、「最短最速でプログラミングで稼げる様になりたい！」という人には、オススメです。

Vue入門早速受講してみる