Vue.jsでSendGridのWeb APIを使う方法
- 2018年4月27日
- by 菊田 洋一
- Category: 技術ネタ
SendGridサポートエンジニアの菊田(@kikutaro_)です。最近、Webのフロントエンド技術を勉強するためにVue.jsを触っています。Vue.jsでWeb APIを使う方法について調べている中で、SendGridのWeb API v3を利用したサンプルを作成したので、本日のブログではその内容についてご紹介します。
Vue.jsの利用方法
Vue.jsの利用方法はいくつかあります。今回はVue.jsを開発環境にインストールせずに使えるCDNを利用しました。ある程度の規模のアプリケーションを開発する場合は、NPMやCLIでVue.jsをインストールしてください。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
Vue.jsでWeb APIを呼ぶ方法
Vue.jsのサイトで紹介されていた「Axios」を利用してWeb APIを簡単に呼び出せました。
SendGridのBounces APIを呼び出すソースコードは次のようになります。アスタリスクでマスクしている部分はSendGridのAPI Keyです。
axios.get("https://api.sendgrid.com/v3/suppression/bounces" , {
headers: {
'Authorization' : 'Bearer ' + ‘*************’,
'Content-Type': 'application/json'
}
})
.then((response) => {
console.log(response.data)
}
なお、AxiosもVue.js同様にCDNを使いました。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
上記のソースコードをVue.jsのアプリケーションへ反映します。
実装内容
作成したサンプルのWebアプリケーション画面はこちらです。
テキストボックスにAPI Keyを入力してボタンを押すとBounces APIを呼び出し、APIの応答結果をテーブルに表示します。
Vue.jsの実装(app.js)では画面項目とデータをバインドするために「apikey」と「result」という2つの変数を用意しました。さきほどAxiosで書いたソースコードをメソッドの中に定義して、変数を利用する形へ変更します。メソッド名は call_bounces_apiとしています。
var app = new Vue({
el: '#app',
data: {
apikey: '',
results: [],
},
methods: {
call_bounces_api: function() {
axios.get('https://api.sendgrid.com/v3/suppression/bounces' , {
headers: {
'Authorization' : 'Bearer ' + this.apikey,
'Content-Type': 'application/json'
}
})
.then((response) => {
this.results = response.data
})
}
}
})
画面のHTMLでは、app.jsのデータとバインドするためにディレクティブを使います。API Keyはv-modelディレクティブ、Web APIの結果は繰り返し表示するためv-forディレクティブを利用しました。ボタンクリックイベントは、v-onディレクティブでメソッドと紐づけています。
<body>
<div id="app">
<input type="password" v-model="apikey" placeholder="API Key">
<button v-on:click="call_bounces_api()">Call Bounces API</button>
<table>
<thead>
<tr>
<th>Email</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
<tr v-for="result in results">
<td>{{ result.email }}</td>
<td>{{ result.reason }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/app.js"></script>
</body>
実行結果は次のような表示となります。
（上記のHTMLコードでは省略していますが、画面デザインにはSemantic UIのCSSを利用しています。）
サーバサイドのアプリケーションを準備する必要がなく、HTMLとJavaScriptのみで実行できるため、とても手軽です。Vue.jsのディレクティブやAxiosも直感的で使いやすく、思っていたよりも簡単にWeb APIを組み込むことができました。
フロントエンドやVue.jsに興味がある方は今回作成したサンプルをベースに、他のWeb APIを呼び出してみるなど色々とお試しください。
