Vueを学ぶ

第6章. 外部データを取り込む

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、コンポーネント間のデータの受け渡しや、コンポーネント内でのデータの変更やイベントの処理など、コンポーネントを扱うための基本的な準備を行った。これで、Vueコンポーネントを使用して、アプリケーションのデータを画面上に取り込み、ユーザに表示する準備が整ったことになる。

たいていの場合、アプリケーションはアプリケーション自身の中で利用可能なデータを持っていない。その代わりに、通常は外部のサーバやデータベースにデータをリクエストし、受け取ったデータをアプリケーションに適切なUIに入力する。この章では、堅牢なVueアプリケーションを開発するためのこの側面、つまりHTTPリクエストツールとしてAxiosを使用した、外部リソースからの外部データの通信と処理方法について説明する。

アクシオスとは何か？

外部リソースへの HTTP リクエストには、組み込みのfetch メソッド、古典的なXMLHttpRequest 、Axios などのサードパーティ製ライブラリなど、Vue 開発者が利用できるさまざまなオプションがある。組み込みのfetch は、データを取得するためだけの HTTP リクエストを行うには良い選択肢だが、Axios は長期的には、より複雑な外部リソースの API を扱うときに便利な追加関数を提供する 。

Axiosは、HTTPリクエストを行うためのJavaScriptオープンソースの軽量ライブラリである。fetch と同様、プロミスベースのHTTPクライアントで、ノード（サーバ側）とブラウザ側の両方をサポートする同型のものである。

Axiosを使用する大きな利点は、HTTPリクエストをインターセプトしてキャンセルする機能と、クライアントサイドのための組み込みのクロスサイトリクエストフォージェリ保護である。Axiosのもう一つの利点は、レスポンスデータを自動的にJSON形式に変換することで、組み込みのfetch を使用するよりも、より良い開発者体験でデータを扱うことができる。

Axiosの公式Webサイトには、APIドキュメント、インストール、主な使用例が掲載されている（図6-1）。

図6-1. Axios公式Webサイト

アクシオスをインストールする

プロジェクトのルート・ディレクトリ内のVueプロジェクトにAxiosを追加するには、ターミナルで次のコマンドを使用する ：

yarn add axios

Axiosをインストールしたら、以下のコードで必要なコンポーネントにAxiosライブラリをインポートできる：

import axios from 'axios';

その後、axios を使って、アプリケーションのデータのクエリを開始できる。Axiosとライフサイクル・フックを組み合わせて、データをロードして表示する方法を探ろう .

ライフサイクル・フックとアクシオスでデータをロードする

第3章で学んだように、beforeCreate 、created 、beforeMounted のライフサイクル・フックを使えば、データ・フェッチなどのサイド・コールを実行できる。しかし、外部データをロードしてコンポーネント内で使用し、Options ...