ウェブサイト検索

Vue.jsとAxiosを使用してAPIからデータを表示する方法

紹介

Vue.jsはユーザーインターフェースを構築するためのフロントエンドJavaScriptフレームワークです。これは、徐々に採用できるようにゼロから設計されており、他のライブラリや既存のプロジェクトと良好に統合されます。このアプローチにより、小規模なプロジェクトだけでなく、他のツールやライブラリと組み合わせて使用する際に洗練されたシングルページアプリケーションにも適しています。

API、つまりアプリケーションプログラミングインタフェースは、二つのアプリケーションが互いに通信することを可能にするソフトウェアの仲介者です。APIは、他の開発者が自分のアプリに取り込むことができるデータを公開することが多く、データベースやプログラミング言語の違いについて心配する必要がありません。開発者は、JSON形式でデータを返すAPIからデータを取得することが多く、それをフロントエンドアプリケーションに統合します。Vue.jsは、このようなAPIを消費するのに非常に適しています。

このチュートリアルでは、Cryptocompare APIを使用してビットコインとイーサリアムという2つの主要な暗号通貨の現在の価格を表示するVueアプリケーションを作成します。Vueに加えて、Axiosライブラリを使用してAPIリクエストを行い、取得した結果を処理します。Axiosは、JSONデータを自動的にJavaScriptオブジェクトに変換し、Promiseをサポートするため、読みやすくデバッグしやすいコードが実現できるため、非常に適しています。また、見た目を良くするために、Foundation CSSフレームワークを使用します。

注: Cryptocompare APIは非商用利用のみライセンスされています。商用プロジェクトで使用する場合は、ライセンス条件を確認してください。

前提条件

このチュートリアルを始める前に、以下のものが必要です:

  • JavaScriptの構文ハイライトをサポートするテキストエディタ、例えばAtom、Visual Studio Code、またはSublime Textなどです。これらのエディタはWindows、macOS、Linuxで利用可能です。
  • HTMLとJavaScriptを一緒に使うことに慣れる。HTMLにJavaScriptを追加する方法についてさらに学ぶ。
  • JSONデータ形式に関する知識が必要です。詳しくは「JavaScriptでのJSONの扱い方」を参照してください。
  • APIにリクエストを送ることに慣れておくことが重要です。APIを使用するための包括的なチュートリアルについては、『Python3でWeb APIを使用する方法』を参照してください。これはPython向けに書かれていますが、APIを扱う際の基本的な概念を理解するのに役立つでしょう。

ステップ 1 — ベーシックな Vue アプリケーションの作成

このステップでは、基本的なVueアプリケーションを作成します。最終的にAPIからのライブデータに置き換えるモックアップデータを使用した単一のHTMLページを作成します。このモックデータを表示するためにVue.jsを使用します。この最初のステップでは、すべてのコードを単一のファイルにまとめます。

テキストエディタを使ってindex.htmlという新しいファイルを作成してください。

このファイルには、HTMLの基本構造を定義し、コンテンツ配信ネットワーク（CDN）からFoundation CSSフレームワークとVue.jsライブラリを読み込むためのHTMLマークアップを追加します。CDNを使用することで、アプリの構築を開始するためにダウンロードする必要がある追加のコードはありません。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
  <meta charset="utf-8">
  <title>Cryptocurrency Pricing Application</title>
</head>

  <body>
    <div class="container" id="app">
      <h3 class="text-center">Cryptocurrency Pricing</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in USD  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinUSD }}</p>
          </div>
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/vue@3"></script>
  </body>
</html>

コード {{ BTCinUSD }} は、Vue.js が提供するデータのプレースホルダーであり、これが Vue がどのように UI にデータを宣言的にレンダリングさせるかを示しています。それでは、そのデータを定義しましょう。

<script>タグのすぐ下に、このコードを追加して新しいVueアプリケーションを作成し、ページに表示するためのデータ構造を定義します:

...
   <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return {
              BTCinUSD: 3759.91
            }
          }  
        }).mount('#app')
    </script>
...

このコードは新しいVueアプリのインスタンスを作成し、そのインスタンスをidがappの要素に接続します。Vueはこのプロセスをアプリケーションをマウントすると呼びます。新しいVueインスタンスを定義し、設定オブジェクトを渡すことで構成します。createAppインスタンスには、BTCinUSDの値を返すデータオブジェクトを渡します。さらに、createAppインスタンスのmountメソッドを、アプリケーションをマウントする要素のidを指定する#app引数で呼び出し、ビューで利用可能にしたいデータを含むdataオプションを提供します。

この例では、私たちのデータモデルにはビットコインの価格のモック値を保持する単一のキーとバリューペアが含まれています：{ BTCinUSD: 3759.91}。このデータは、二重の波括弧で囲んだキーの場所で、私たちのHTMLページまたはビューに表示されます。

<div class="card-divider">
  <p>{{ BTCinUSD }}</p>
</div>

最終的には、このハードコーディングされた値をAPIからのライブデータに置き換えます。

このファイルをブラウザで開いてください。画面に次の出力が表示され、モックデータが表示されます:

私たちは価格を米ドルで表示しています。ユーロのような追加の通貨で表示するには、データモデルに別のキーと値のペアを追加し、マークアップに別の列を追加します。まず、データモデルにユーロの行を追加してください。

  <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return { 
              BTCinUSD: 3759.91, 
              BTCinEURO: 3166.21
            }
          }  
        }).mount('#app')
    </script>

その後、既存の<div class>セクションを以下の行で置き換えてください。

  <div class="container" id="app">
      <h3 class="text-center">Cryptocurrency Pricing</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in USD  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinUSD }}</p>
          </div>
        </div>
      </div>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in EURO  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinEURO }}</p>
          </div>
        </div>
      </div>
    </div>

今、ファイルを保存してブラウザで再読み込みしてください。アプリは現在、ビットコインの価格をユーロと米ドルの両方で表示します。

このステップでは、Vueアプリを作成し、ロードできることを確認するためのサンプルデータを追加しました。これまでのところ、すべての作業を1つのファイルで行いましたので、今後はメンテナンス性を向上させるために、別々のファイルに分けます。

ステップ2 — 明確さのためにJavaScriptとHTMLを分離する

物事がどのように動作するかを学ぶために、すべてのコードを1つのファイルにまとめました。このステップでは、アプリケーションコードを2つの別々のファイル、index.htmlとvueApp.jsに分けます。index.htmlファイルはマークアップを処理し、JavaScriptファイルにはアプリケーションロジックが含まれます。両方のファイルは同じディレクトリに保持します。

まず、index.html ファイルを修正し、JavaScript コードを削除して、vueApp.js ファイルへのリンクに置き換えます。

ファイルのこのセクションを見つけてください:

...
    <script src="https://unpkg.com/vue@3"></script>
    <script> 
        const { createApp } = Vue
        
        createApp({    
          data() {
            return {
              BTCinUSD: 3759.91,
              BTCinEURO: 3166.21
            }
          }             
        }).mount('#app')
    </script>
...

そして、これのように見えるように修正してください。

...
    <script src="https://unpkg.com/vue@3"></script>
    <script src="vueApp.js"></script>
...

次に、index.htmlファイルと同じディレクトリにvueApp.jsファイルを作成します。

この新しいファイルには、元々index.htmlファイルにあったのと同じJavaScriptコードを、<script>タグなしで置いてください:

 const { createApp } = Vue
        
createApp({    
  data() {
    return {
      BTCinUSD: 3759.91,
      BTCinEURO: 3166.21
    }
  }  
}).mount('#app')

ファイルを保存し、ブラウザでindex.htmlを再読み込みしてください。以前に見たのと同じ結果が表示されます。

ここでは、アプリをマークアップから分離しました。次に、ビットコインだけでなく、他の暗号通貨をサポートするために、より多くのデータを追加します。

ステップ3 — Vueを使用してデータを反復処理する

このステップでは、データを再構築し、ビットコインとイーサリアムの両方の価格を表示するようにビューを変更します。

vueApp.jsファイルを開き、データモデルのreturn部分を次のように修正してください:

const { createApp } = Vue
      
createApp({
  data() {
    return { 
        results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
    }
  }
}).mount('#app')

私たちのデータモデルは、ネストされたデータ構造により少し複雑になりました。現在、resultsというキーがあり、ビットコインの価格とイーサリアムの価格の2つのレコードが含まれています。この新しい構造は、私たちのビューの重複を減らすのに役立ちます。また、これはCryptocompare APIから得られるデータに似ています。

ファイルを保存してください。

さて、データをよりプログラム的に処理するためにマークアップを修正しましょう。

index.htmlファイルを開き、ビットコインの価格を表示しているこのセクションを見つけてください:

...
    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in USD  </p>
        </div>
        <div class="card-divider">
          {{BTCinUSD}}
        </div>
      </div>
    </div>

    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in EURO  </p>
        </div>
        <div class="card-divider">
          {{BTCinEURO}}
        </div>
      </div>
    </div>

  </div>
...

定義したデータセットを反復処理するこのコードに置き換えてください。

...
  <div class="columns medium-4" v-for="(result, index) in results">
    <div class="card">
      <div class="card-section">
        <p> {{ index }} </p>
      </div>
      <div class="card-divider">
        <p>$ {{ result.USD }}</p>
      </div>
      <div class="card-section">
        <p> &#8364 {{ result.EUR }}</p>
      </div>
    </div>
  </div>
...

このコードは、v-forディレクティブを使用しており、これはforループのように機能します。それはデータモデル内のすべてのキーと値のペアを反復処理し、それぞれのデータを表示します。

ブラウザで再読み込みすると、モックされた価格が表示されます:

この修正により、vueApp.js の results データに新しい通貨を追加し、さらなる変更をすることなくページに表示できるようになります。

この情報を強調してデータセットにもう1つのモックエントリーを追加して試してみてください:

const { createApp } = Vue
      
createApp({
  data() {
    return {
        results: {"BTC": {"USD":3759.91,"EUR":3166.21}, 
        "ETH": {"USD":281.7,"EUR":236.25},
        "NEW Currency":{"USD":5.60,"EUR":4.70}}
    }
  }
}).mount('#app')

Ethereumのエントリの後にトレーリングカンマを含めてください。ファイルを保存します。

今、ウェブブラウザでページを読み込むと、新しいエントリが表示されます。

データをプログラム的に処理すると、新しい列を手動でマークアップに追加する必要がなくなります。

ここでは、サンプルデータを使用して複数の通貨の価格を表示しました。次に、Cryptocompare APIを使用して実際のデータを取得しましょう。

ステップ4 — APIからデータを取得する

このステップでは、モックアップデータをCryptocompare APIからのライブデータに置き換え、ウェブページでビットコインとイーサリアムの価格を米ドルとユーロで表示します。

私たちのページのデータを取得するために、https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EURにリクエストを送信します。これはビットコインとイーサリアムの米ドルとユーロでの価格を取得します。このAPIはJSON形式のレスポンスを返します。

curlを使用してAPIにリクエストを送り、ターミナルセッションでレスポンスを確認します:

  1. curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

このような出力が表示されます:

{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}

この結果は、前のステップで使用したハードコーディングされたデータモデルのように見えますが、現在のビットコインとイーサリアムの値が使われています。今私たちがしなければならないのは、アプリからこのURLにリクエストを送ってデータを変更することです。

リクエストを行うために、Vueのmounted()関数とAxiosライブラリのGET関数を組み合わせてデータを取得し、データモデル内のresults配列に保存します。mounted関数は、Vueアプリが要素にマウントされたときに呼び出されます。Vueアプリがマウントされると、APIへのリクエストを行い、結果を保存します。ウェブページはその変更を通知され、値がページに表示されます。

まず、index.htmlを開き、Vueを含めた行の下にスクリプトを追加してAxiosライブラリを読み込みます:

...
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="vueApp.js"></script>
...

ファイルを保存し、次に vueApp.js を開いてください。

vueApp.jsを修正して更新し、APIにリクエストを送り、データモデルに結果を埋め込むようにします。

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
      
createApp({    
  data() {
    return {
        results:[]
    }
},
    mounted() {
        axios.get(url).then(response => {
            this.results = response.data
        })
  }
}).mount('#app')

デフォルト値のresultsを削除し、空の配列に置き換えたことに注意してください。アプリが最初に読み込まれたときにはデータがありませんが、HTMLビューは読み込まれる際に反復処理するためのデータを期待しています。

axios.get 関数は Promise を使用します。API がデータを正常に返すと、then ブロック内のコードが実行され、データが私たちの results 変数に保存されます。

ファイルを保存して、ウェブブラウザでindex.htmlページを再読み込みしてください。今回は、暗号通貨の現在の価格が表示されます。

何も見えない場合は、JavaScript開発者コンソールの使い方を確認し、JavaScriptコンソールを使用してコードをデバッグできます。このページは、APIからのデータで更新されるまでに1分かかることがあります。

このGithubリポジトリも見ることができ、htmlおよびjsファイルが含まれており、クロス確認のためにダウンロードできます。また、リポジトリをクローンすることもできます。

このステップでは、アプリを変更してライブデータを呼び出すようにしました。

結論

50行未満で、Vue.js、Axios、Cryptocompare APIの3つのツールだけを使ってAPIを消費するアプリケーションを作成しました。ページにデータを表示する方法、結果を反復処理する方法、静的データをAPIからの結果に置き換える方法を学びました。

基本を理解したので、アプリケーションに他の機能を追加することができます。このアプリケーションを修正して追加の通貨を表示したり、このチュートリアルで学んだ技術を使って別のAPIを用いた別のウェブアプリケーションを作成してください。

関連記事: