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

序章

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

API、またはアプリケーションプログラミングインターフェイスは、2つのアプリケーションが相互に通信できるようにするソフトウェア仲介者です。 APIは、データベースやプログラミング言語の違いを気にすることなく、他の開発者が自分のアプリで消費できるデータを公開することがよくあります。開発者は、JSON形式でデータを返すAPIからデータを頻繁にフェッチし、フロントエンドアプリケーションに統合します。 Vue.jsは、これらの種類のAPIを使用するのに最適です。

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

注：Cryptocompare APIは、非営利目的でのみライセンスされています。商用プロジェクトで使用する場合は、ライセンス条項を参照してください。

前提条件

このチュートリアルを開始する前に、次のものが必要です。

Atom 、 Visual Studio Code 、 SublimeTextなどのJavaScript構文の強調表示をサポートするテキストエディター。これらのエディターは、Windows、macOS、およびLinuxで使用できます。
HTMLとJavaScriptを一緒に使用することに精通していること。詳細については、JavaScriptをHTMLに追加する方法をご覧ください。
JavaScriptでJSONを操作する方法で詳細を学ぶことができる、JSONデータ形式に精通していること。
APIへのリクエストの作成に精通していること。 APIの操作に関する包括的なチュートリアルについては、Python3でWebAPIを使用する方法を参照してください。 Python用に書かれていますが、APIを使用するためのコアコンセプトを理解するのに役立ちます。

ステップ1—基本的なVueアプリケーションを作成する

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

テキストエディタを使用して、index.htmlという名前の新しいファイルを作成します。

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

index.html

<!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"></script>
  </body>
</html>

行テンプレート:BTCinUSDは、Vue.jsが提供するデータのプレースホルダーです。これが、VueでUIにデータを宣言的にレンダリングする方法です。そのデータを定義しましょう。

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

index.html

...

    <script>
      const vm = new Vue({
              el: '#app', 
              //Mock data for the value of BTC in USD
              data: { BTCinUSD: 3759.91}
            });
    
    </script>
...

このコードは、新しいVueアプリインスタンスを作成し、appのidを持つ要素にインスタンスをアタッチします。 Vueは、このプロセスをマウントアプリケーションと呼んでいます。新しいVueインスタンスを定義し、構成objectを渡して構成します。このオブジェクトには、このアプリケーションをマウントする要素のidを指定するel オプションと、使用可能なデータを含むdataオプションが含まれています。景色。

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

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

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

このファイルをブラウザで開きます。画面に次の出力が表示され、模擬データが表示されます。

米国での価格を表示していますドル。ユーロなどの追加の通貨で表示するには、データモデルに別のキーと値のペアを追加し、マークアップに別の列を追加します。まず、データモデルを変更します。

index.html

  <script>
  const vm = new Vue({
          el: '#app',
          //Mock data for the value of BTC in USD
          data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
        });
  
  </script>

次に、既存のコードの下にユーロで価格を表示する新しいセクションをマークアップに追加します。

index.html

  <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">
          {{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>

次に、ファイルを保存してブラウザにリロードします。アプリは、ビットコインの価格をユーロと米ドルの両方で表示するようになりました。

すべての作業を1つのファイルで実行しました。保守性を向上させるために、物事を分割しましょう。

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

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

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

ファイルの次のセクションを見つけます。

index.html

...
    <script src="https://unpkg.com/vue"></script>
    <script  language="JavaScript">
    const vm = new Vue({
            el: '#app',
            // Mock data for the value of BTC in USD
            data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
          });
    </script>
...

そして、次のように変更します。

index.html

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

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

この新しいファイルに、元々index.htmlファイルにあったものと同じJavaScriptコードを、<script>タグなしで配置します。

vueApp.js

const vm = new Vue({
        el: '#app',
        // Mock data for the value of BTC in USD
        data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
      });

ファイルを保存し、ブラウザでindex.htmlをリロードします。以前に見たのと同じ結果が表示されます。

Bitcoiinだけでなく、より多くの暗号通貨をサポートしたいので、それをどのように行うかを見てみましょう。

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

現在、ビットコインの価格でいくつかの模擬データを表示しています。しかし、イーサリアムも追加しましょう。これを行うには、データを再構築し、新しいデータで機能するようにビューを変更します。

vueApp.jsファイルを開き、データモデルを次のように変更します。

vueApp.js

const vm = new Vue({
        el: '#app',
        data: {
          results: {"BTC": {"USD":3759.91,"EUR":3166.21}, 
                    "ETH": {"USD":281.7,"EUR":236.25}}
        }
      });

私たちのデータモデルは、ネストされたデータ構造でもう少し複雑になっています。これで、2つのレコードを含むresultsというキーができました。 1つはビットコインの価格用で、もう1つはイーサリアムの価格用です。この新しい構造により、私たちの見解の重複を減らすことができます。また、cryptocompareAPIから取得するデータにも似ています。

ファイルを保存します。次に、マークアップを変更して、よりプログラム的な方法でデータを処理しましょう。

index.htmlファイルを開き、ビットコインの価格が表示されているファイルの次のセクションを見つけます。

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>
...

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

index.html

...
  <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>
...

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

これをブラウザにリロードすると、模擬価格が表示されます。

この変更により、vueApp.jsのresultsデータに新しい通貨を追加し、それ以上変更せずにページに表示できるようになります。これを試すには、別のモックエントリをデータセットに追加します。

vueApp.js

const vm = new Vue({
        el: '#app',
        data: {
          results: {"BTC":{"USD":3759.91,"EUR":3166.21},
                    "ETH":{"USD":281.7,"EUR":236.25},
                    "NEW Currency":{"USD":5.60,"EUR":4.70}}
        }
      });

Etheriumエントリの後に末尾のコンマを追加することを忘れないでください。

ここでWebブラウザにページをロードすると、新しいエントリが表示されます。

プログラムでデータに取り組むと、マークアップに手動で新しい列を追加する必要はありません。

それでは、実際のデータを取得しましょう。

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

モックアップされたデータをcryptocompareAPIのライブデータに置き換えて、ウェブページにビットコインとイーサリアムの価格を米ドルとユーロで表示します。

このページのデータを取得するには、次のURLにリクエストを送信します。このURLは、ビットコインとイーサリアムを米ドルとユーロでリクエストします。

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

このAPIはJSON応答を返します。 curlを使用してAPIにリクエストを送信し、応答を確認します。

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

次のような出力が表示されます。

Output{"BTC":{"USD":11388.18,"EUR":9469.64},"ETH":{"USD":1037.02,"EUR":865.99}}

この結果は、前の手順で使用したハードコードされたデータモデルとまったく同じように見えます。ここで行う必要があるのは、アプリからこのURLにリクエストを送信してデータを切り替えることだけです。

リクエストを行うには、Vueの Mounted（）関数をAxiosライブラリのGET関数と組み合わせて使用し、データをフェッチして[に保存します。 X178X]データモデルの配列。 mounted関数は、Vueアプリが要素にマウントされると呼び出されます。 Vueアプリがマウントされたら、APIにリクエストを送信し、結果を保存します。 Webページに変更が通知され、値がページに表示されます。

まず、index.htmlを開き、Vueを含めた行の下にスクリプトを追加してAxiosライブラリをロードします。

index.html

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

ファイルを保存し、vueApp.jsを開いて変更し、APIにリクエストを送信して、データモデルに結果を入力します。

[label vueApp.js]    

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";

const vm = new Vue({
        el: '#app',
        data: {
          results: []
        },
        mounted() {
          axios.get(url).then(response => {
            this.results = response.data
          })
        }
      });

resultsのデフォルト値を削除し、空の配列に置き換えたことに注意してください。アプリが最初に読み込まれたときはデータがありませんが、データが壊れることはありません。私たちのHTMLビューは、ロード時に一部のデータが繰り返されることを期待しています。

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

ファイルを保存し、Webブラウザでindex.htmlページをリロードします。今回は、暗号通貨の現在の価格が表示されます。

そうでない場合は、チュートリアル JavaScript開発者コンソールの使用方法を参照し、JavaScriptコンソールを使用してコードをデバッグしてください。

結論

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

基本を理解したので、アプリケーションに他の機能を追加できます。このアプリケーションを変更して追加の通貨を表示するか、このチュートリアルで学習した手法を使用して、別のAPIを使用して別のWebアプリケーションを作成します。