Vue.jsでSendGridのWeb APIを使う方法

vuejs

SendGridサポートエンジニアの菊田(@kikutaro_)です。最近、Webのフロントエンド技術を勉強するためにVue.jsを触っています。Vue.jsでWeb APIを使う方法について調べている中で、SendGridのWeb API v3を利用したサンプルを作成したので、本日のブログではその内容についてご紹介します。

Vue.jsでSendGridのWeb APIを使う方法

Vue.jsの利用方法

Vue.jsの利用方法はいくつかあります。今回はVue.jsを開発環境にインストールせずに使えるCDNを利用しました。ある程度の規模のアプリケーションを開発する場合は、NPMCLIで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アプリケーション画面はこちらです。

Webアプリケーション画面

テキストボックスにAPI Keyを入力してボタンを押すとBounces APIを呼び出し、APIの応答結果をテーブルに表示します。

Vue.jsの実装(app.js)では画面項目とデータをバインドするために「apikey」と「result」という2つの変数を用意しました。さきほどAxiosで書いたソースコードをメソッドの中に定義して、変数を利用する形へ変更します。メソッド名は call_bounces_apiとしています。

app.js

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ディレクティブでメソッドと紐づけています。

index.html

<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を呼び出してみるなど色々とお試しください。