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

  • 401 ビュー
  • 9分の読み物
ハディ・バハドリ
  • 2024年6月29日
0 株式
0
0
0
0
0
株式
0
0
0
0

導入

Vue.jsは、ユーザーインターフェースを構築するためのフロントエンドJavaScriptフレームワークです。段階的な導入と、他のライブラリや既存のプロジェクトとのスムーズな統合を可能にするよう、ゼロから設計されています。このアプローチにより、他のツールやライブラリと組み合わせることで、小規模なプロジェクトだけでなく、複雑なシングルページアプリケーションにも適しています。.

API（アプリケーション・プログラミング・インターフェース）は、2つのアプリケーションが相互に通信できるようにするソフトウェア・インターフェースです。APIは多くの場合、他の開発者がデータベースやプログラミング言語の違いを気にすることなく、自身のアプリケーションで利用できるデータを公開します。開発者は多くの場合、JSON形式でデータを返すAPIからデータを取得し、それをフロントエンド・アプリケーションに統合します。Vue.jsは、このようなAPIの利用に最適です。.

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

前提条件
  • Atom、Visual Studio Code、Sublime Textなど、JavaScript構文のハイライト表示をサポートするテキストエディタ。これらのエディタは、Windows、macOS、Linuxで利用できます。.
  • HTMLとJavaScriptの併用に関する知識。詳しくは「HTMLにJavaScriptを追加する方法」をご覧ください。.
  • JSON データ形式について理解し、JavaScript で JSON を操作する方法について詳しく学びます。.
  • APIリクエスト入門 APIの使い方に関する包括的なチュートリアルについては、「Python3でWeb APIを使用する方法」をご覧ください。Python向けに書かれていますが、APIの使い方の基本概念を理解するのに役立ちます。.

ステップ1 – 基本的なVueアプリを作成する

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

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

このファイルに、HTMLスケルトンを定義し、コンテンツ配信ネットワーク（CDN）からCSS Foundationフレームワークと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が提供するデータのプレースホルダであり、UIに宣言的にデータを表示することができます。では、そのデータを定義してみましょう。.

タグのすぐ下 با Vue، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:

...
<script>
const { createApp } = Vue

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

このコードは、新しいVueアプリインスタンスを作成し、そのインスタンスをアプリIDを持つ要素にバインドします。Vueはこのプロセスを呼び出してアプリをマウントします。新しいVueインスタンスを定義し、設定オブジェクトを渡して設定します。createAppインスタンスには、BTCinUSDの値を返すデータオブジェクトを渡します。さらに、createAppインスタンスのmountメソッドを引数 #app で呼び出します。この引数には、アプリをマウントする要素IDと、ビューで表示したいデータを含むデータオプションを指定します。.

この例では、データモデルにはビットコインの価格を表すダミー値 { BTCinUSD: 3759.91} を持つキーと値のペアが1つ含まれています。このデータは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つのファイルにまとめます。このステップでは、アプリケーションコードをindex.htmlとvueApp.jsという2つのファイルに分割します。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 ファイルを作成します。.

この新しいファイルに、<code> タグなしで、元の index.html ファイルにあったのと同じ JavaScript コードを貼り付けます。 قرار دهید:

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

このコードでは、forループのように動作するv-for文を使用しています。データモデル内のすべてのキーと値のペアを反復処理し、それぞれのデータを表示します。.

ブラウザをリロードすると、法外な価格が表示されます。

この変更により、vueApp.js の結果データに新しい通貨を追加し、それ以上変更せずに画面に表示できるようになります。.

これを試すには、強調表示された情報を含む別の模擬エントリをデータセットに追加します。

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 からのライブ データに置き換えて、Web ページに Bitcoin と Ethereum の価格を米ドルとユーロで表示します。.

ページのデータを取得するには、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":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}

この結果は、前のステップで使用したエンコードされたデータモデルに似ていますが、ビットコインとイーサリアムの現在の値が含まれています。あとは、アプリケーションからこのURLをリクエストしてデータを変更するだけです。.

リクエストには、Vueのmounted()関数とAxiosライブラリのGET関数を組み合わせてデータを取得し、データモデル内の結果配列に格納します。mounted関数は、Vueアプリが要素にマウントされた際に呼び出されます。Vueアプリがマウントされた後、APIにリクエストを送信し、結果を保存します。Webページに変更が通知され、ページ上に値が表示されます。.

まず、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 がデータを返すと、ブロック内のコードが実行され、データが results 変数に格納されます。.

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

何も表示されない場合は、「JavaScript 開発者コンソールの使い方」を確認し、JavaScript コンソールを使用してコードをデバッグしてください。ページが更新され、API データが反映されるまで 1 分ほどかかる場合があります。.

こちらのGithubリポジトリもご覧ください。クロスバリデーション用にダウンロードできるHTMLファイルとJSファイルが含まれています。リポジトリをクローンすることも可能です。.

この時点で、レビュー用にライブ データを呼び出すようにアプリケーションを変更しました。.

結果

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

基礎を理解できたので、アプリケーションに機能を追加できます。このアプリケーションを修正して他の通貨を表示したり、このチュートリアルで学んだテクニックを使って、異なるAPIを使った他のWebアプリケーションを作成したりしてみましょう。.

この記事の内容:
,,
投稿者:
フォローする
コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
次の記事
あなたも気に入るかもしれない