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

前書き

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

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

このチュートリアルでは、https：//www.cryptocompare.com/api/ [Cryptocompare API]を使用して、2つの主要な暗号通貨の現在の価格を表示するVueアプリケーションを作成します：BitcoinとEtherium。 Vueに加えて、https：//github.com/axios/axios/blob/master/README.md [Axios library]を使用して、APIリクエストを作成し、取得した結果を処理します。 AxiosはJSONデータを自動的にJavaScriptオブジェクトに変換し、https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises [Promises]をサポートするため、最適です。読みやすく、デバッグしやすい。そして、見栄えを良くするために、https：//foundation.zurb.com/ [Foundation] CSSフレームワークを使用します。

前提条件

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

http://atom.io [Atom]、https：//code.visualstudio.com/ [Visual Studio Code]、https：//www.sublimetext.com/ [などのJavaScript構文の強調表示をサポートするテキストエディター崇高なテキスト]。これらのエディターは、Windows、macOS、およびLinuxで使用できます。
HTMLとJavaScriptを一緒に使用することに関する知識。詳細については、https：//www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html [JavaScriptをHTMLに追加する方法]をご覧ください。
JSONデータ形式に精通していること。https：//www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript [JavaScriptでJSONを使用する方法]で詳細を確認できます。。
APIへのリクエストの作成に関する知識。 APIの操作に関する包括的なチュートリアルについては、https：//www.digitalocean.com/community/tutorials/how-to-use-web-apis-in-python-3 [Python 3でWeb APIを使用する方法]をご覧ください。 ]。 Python向けに書かれていますが、APIを使用する際のコアコンセプトの理解に役立ちます。

ステップ1-基本的なVueアプリケーションの作成

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

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

このファイルに、HTMLスケルトンを定義し、コンテンツ配信ネットワーク（CDN）からFoundation CSSフレームワークと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アプリのインスタンスを作成し、インスタンスを要素に追加します。要素の + id +`は `+ app +`です。 Vueはこのプロセスを_mounting_アプリケーションと呼びます。新しいVueインスタンスを定義し、構成https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript[object]を渡すことで構成します。このオブジェクトには、このアプリケーションをマウントする要素の `+ id +`を指定するhttps://vuejs.org/v2/api/#el [+ el `]オプションとhttps：// vuejsが含まれていますビューで使用したいデータを含む.org / v2 / api /＃Options-Data [` data +`]オプション。

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

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

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

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

image：https：//assets.digitalocean.com/articles/vuejs_api_cryptocurrency/NyjwbIM.png [ビットコイン価格のモックデータを米ドルで表示するVueアプリ]

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

index.html

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

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

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

image：https：//assets.digitalocean.com/articles/vuejs_api_cryptocurrency/jTDUE3m.png [ビットコインのモック価格が米ドルとユーロの両方であるVueアプリ]

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

ステップ2-わかりやすくするためにJavaScriptとHTMLを分離する

動作の仕組みを学ぶために、すべてのコードを単一のファイルに配置しました。次に、アプリケーションコードを2つの独立したファイル、「+ index.html 」と「 vueApp.js 」に分離します。 ` 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>

...

次に、 + index.html`ファイルと同じディレクトリに + vue App.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`をリロードします。以前に見たのと同じ結果が表示されます。

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

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

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

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

vueApp.js

const vm = new Vue({
       el: '#app',
       data: {


       }
     });

ネストされたデータ構造により、データモデルはもう少し複雑になりました。現在、2つのレコードを含む「+ results +」というキーがあります。 1つはビットコインの価格、もう1つはイーサリウムの価格です。この新しい構造により、ビューの重複を減らすことができます。また、cryptocompare APIから取得するデータに似ています。

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

`+ 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" >
   <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-loopのように動作するhttps://vuejs.org/v2/api/#v-for [+ v-for +]ディレクティブを使用します。データモデル内のすべてのキーと値のペアを反復処理し、それぞれのデータを表示します。

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

image：https：//assets.digitalocean.com/articles/vuejs_api_cryptocurrency/PMg24or.png [ビットコインとイーサリアムのモック価格のVueアプリ]

この変更により、新しい通貨を「+ vue App.js」の「+ results of」データに追加し、さらに変更することなくページに表示することができます。これを試すには、データセットに別の模擬エントリを追加します。

vueApp.js

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

       }
     });

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

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

image：https：//assets.digitalocean.com/articles/vuejs_api_cryptocurrency/lYEvm4r.png [ビットコイン、イーサリアム、仮想通貨モック価格のVueアプリ]

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

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

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

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

ページのデータを取得するには、次の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のhttps://vuejs.org/v2/api/#mounted [+ mounted（）+]関数とAxiosライブラリの `+ GET `関数を組み合わせて使用します。データを取得し、データモデルの ` results `配列に保存します。 Vueアプリが要素にマウントされると、 ` mounted +`関数が呼び出されます。 Vueアプリがマウントされると、APIにリクエストを送信し、結果を保存します。 Webページに変更が通知され、値がページに表示されます。

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

index.html

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

...

ファイルを保存し、 `+ vue App.js`を開いて修正し、APIにリクエストを行い、データモデルに結果を入力します。

vueApp.js

const vm = new Vue({
       el: '#app',
       data: {







     });

`+ results +`のデフォルト値を削除し、空の配列に置き換えたことに注意してください。アプリが最初に読み込まれた時点ではデータはありませんが、破壊することは望みません。 HTMLビューでは、ロード時に一部のデータが反復処理されることを想定しています。

`+ axios.get `関数はhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises[Promise]を使用します。 APIがデータを正常に返すと、「 then 」ブロック内のコードが実行され、データが「 results +」変数に保存されます。

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

そうでない場合は、チュートリアルhttps://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[JavaScript Developer Consoleの使用方法]をご覧ください。 JavaScriptコンソールを使用してコードをデバッグします。

結論

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

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

TOC

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

前書き

前提条件

ステップ1-基本的なVueアプリケーションの作成

ステップ2-わかりやすくするためにJavaScriptとHTMLを分離する

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

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

結論

Related