Vue.jsに限らずJavaScriptフレームワークでフロントエンドを実装していると、アプリケーションによってデータを取得したりなど、外部のAPIなどと通信を行う機会も多く発生します。今回はVue.jsでのAPIリクエストをaxios＆RepositoryFactoryで実装してみます。

Vue.jsでのAPIリクエストをaxios＆RepositoryFactoryパターンで実装する

Vue.js に限らず JavaScript フレームワークでフロントエンドを実装していると、アプリケーションによって データを取得したりなど、外部の API などと通信を行う機会も多く発生します。
今回、API 周りを良い感じに実装できるパターンが無いかなと探していたところ、以下の記事で Repository＆ Factory パターンでの実装パターンを紹介していました。
【 Vue.js 】 Web API通信のデザインパターン 
<a href="https://qiita.com/07JP27/items/0923cbe3b6435c19d761" rel="noopener noreferrer" target="_blank">https://qiita.com/07JP27/items/0923cbe3b6435c19d761</a>
今回は Vue.js での API リクエストを axios＆ RepositoryFactory で実装してみます。
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83">開発環境</a></li>
<li><a href="#axios">axios</a>
<ol>
<li><a href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">インストール</a></li>
</ol>
</li>
<li><a href="#repositoryfactory-%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">RepositoryFactory パターン</a></li>
<li><a href="#repository">Repository</a></li>
<li><a href="#userrepository">userRepository</a></li>
<li><a href="#repositoryfactory">RepositoryFactory</a></li>
<li><a href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85">コンポーネント実装</a></li>
<li><a href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89%E5%81%B4%E5%87%A6%E7%90%86">バックエンド側処理</a></li>
</ol>
<h2 id="開発環境">開発環境</h2>
今回の開発環境は以下の通りです。
<ul>
<li>Vue.js 2.x</li>
<li>Vue CLI 3.x</li>
<li>axios 0.18.0</li>
<li>Node.js 12.x</li>
<li>npm 6.5</li>
</ul>
<h2 id="axios">axios</h2>
axios は、ブラウザ及び node.js 用の Promise ベースの HTTP クライアントです。
axios 
<a href="https://github.com/axios/axios" rel="noopener noreferrer" target="_blank">https://github.com/axios/axios</a>
<ul>
<li>ブラウザから XMLHttpRequests を作成する</li>
<li>node.js から http リクエストを行う</li>
<li>Promise API をサポート</li>
<li>リクエスト・レスポンス内容の出力（interceptors）</li>
<li>リクエスト及びレスポンスデータの変換</li>
<li>リクエストのキャンセル</li>
<li>JSON データの自動変換</li>
<li>XSRF から保護するためのクライアント側のサポート</li>
</ul>
今回は axios を使ってサーバ側へリクエストを投げます。
<h3 id="インストール">インストール</h3>
axios のインストールは npm なら以下コマンドで出来ます。
<pre><code class="hljs language-shell">npm install axios
</code></pre>
その他、yarn/bower でもインストール可能。詳細は公式参照。
<h2 id="repositoryfactory-パターン">RepositoryFactory パターン</h2>
Repository パターンは永続化の隠蔽、Factory パターン（ここでは FactoryMethod の方）はオブジェクトの生成に関するデザインパターン。
紹介記事では RepositoryFactory として、Repository パターンと Factory（FactoryMeyhod）パターンの両方を用いて実装しています。
<h2 id="repository">Repository</h2>
では実装してみます。まずは大本のリソースを定義します。
<dl class="description_setting">
<dt>Repository.js</dt>
<dd>
<pre><code class="hljs language-javascript">import axios from 'axios'

const baseDomain = 'localhost:8000'
const baseURL = `http://${baseDomain}`

export default axios.create({
 baseURL: baseURL
})
</code></pre>
</dd>
</dl>
変更の必要の無い部分をベースの URL として axios のインスタンス生成時に渡しています。
<h2 id="userrepository">userRepository</h2>
次はエンティティのリソース定義です。 今回はユーザーに関する CRUD 操作を仮定して、userRepository を作成します。
<dl class="description_setting">
<dt>userRepository.js</dt>
<dd>
<pre><code class="hljs language-javascript">import Repository from './Repository'

const resource = 'store.php'

export default {
 register (payload) {
 Repository.defaults.headers.post['Content-Type'] = 'multipart/form-data'

 return Repository.post(`${resource}`, payload)
 }
}
</code></pre>
</dd>
</dl>
ユーザー登録を想定して記述しています。画像などのファイルもアップロードするので、ContentType を multipart/form-data に指定しています。
例えばユーザー情報を取得したりする場合には、ここにメソッドを追加していく流れになります。
<h2 id="repositoryfactory">RepositoryFactory</h2>
続いて Factory です。
<dl class="description_setting">
<dt>RepositoryFactory.js</dt>
<dd>
<pre><code class="hljs language-javascript">import userRepository from './userRepository'

const repositories = {
 user: userRepository,
}

export const RepositoryFactory = {
 get: name => repositories[name]
}
</code></pre>
</dd>
</dl>
repositories に必要なリポジトリを登録していき、RepositoryFactory の get メソッドで必要なリポジトリを取得する流れです。
<h2 id="コンポーネント実装">コンポーネント実装</h2>
これらを使用する為にコンポーネント側を実装します。
<dl class="description_setting">
<dt>sameComponent.vue</dt>
<dd>
<pre><code class="hljs language-javascript">import { RepositoryFactory } from "./Repositories/RepositoryFactory";
const UserRepository = RepositoryFactory.get('user')

export default {
 /*
 * 省略
 */
 methods: {
 async send () {
 const response = await UserRepository.register({/* something form data */})
 if (response.data.success) {
 this._sendSuccess(response)
 } else {
 this._sendError(response.data.message)
 }
 }
 /*
 * 省略
 */
</code></pre>
</dd>
</dl>
Repository 使用部分のみ抜粋して記載しています。 Factory から UserRepository を取得し、register メソッドでフォームデータを投げています。
<h2 id="バックエンド側処理">バックエンド側処理</h2>
このセクションはおまけです。今回リクエストを投げる関係で折角なら一通り動作させたいので、PHP で簡単に受け側を実装しました。
<dl class="description_setting">
<dt>store.php</dt>
<dd>
<pre><code class="hljs language-php">&#x3C;?php
header("Access-Control-Allow-Origin: *");

if(!empty($_FILES)) {
 $file_path_dir = "uploads";

 try {
 foreach ($_FILES as $key => $file) {
 $store_path = sprintf("%s/%s", $file_path_dir, $file['name']);

 if (!move_uploaded_file($file['tmp_name'], $store_path)) {
 throw new Exception('ファイルの保存に失敗しました');
 }
 }
 $response = [
 'success' => true,
 'message' => ''
 ];
 } catch(Exception $e) {
 $response = [
 'success' => false,
 'message' => $e->getMessage()
 ];
 }

 echo json_encode($response);

} else {
 echo json_encode([
 'success' => false,
 'message' => 'FILE None'
 ]);
}
</code></pre>
</dd>
</dl>
データベースは使いませんが、代わりにファイルを保存します。 処理後は、結果を json で返します。
もし Mac で PHP が動作する環境であれば、以下のコマンドで開発用ビルトインウェブサーバーを起動できます。
<pre><code class="hljs language-shell"># ドキュメントルートへ移動
cd /path/to/project

# ビルトインウェブサーバーの起動
php -S localhost:8000
</code></pre>
<h2 id="まとめ">まとめ</h2>
RepositoryFactory を用いるとそれぞれが分離されて、拡張や保守も簡単になります。 
コンポーネント側の実装も axios や API部分が隠蔽されているのでコードもすっきりしていていい感じです。 
JavaScript でもしっかり設計して実装していきたいですね。
<a href="https://github.com/rito328/www.ritolab.com-sample-sources-vuejs-axios-repository-factory" rel="noopener noreferrer" target="_blank">サンプルコード</a>

Author