【Vue.js】TimeTreeの予定表をAPIで取得して出力する

# 概要
カレンダーシェアアプリのTimeTreeのAPIが2020年1月23日に公開されました。
本記事では、Vue.jsからTimeTreeのAPIを呼び出して、予定表を出力する所までのサンプルのソースコードを公開します。

# 事前準備
- [TimeTreeの開発者向けサイト](https://developers.timetreeapp.com/ja/docs/api)を参考にして以下の手順を実施してください。
	- [TimeTreeアカウントの登録](https://developers.timetreeapp.com/ja/docs/api#timetree%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E7%99%BB%E9%8C%B2)
	- [パーソナルアクセストークンの発行](https://developers.timetreeapp.com/ja/docs/api#%E3%83%91%E3%83%BC%E3%82%BD%E3%83%8A%E3%83%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E7%99%BA%E8%A1%8C)

- パーソナルアクセストークンは大事に控えておいてください。
- TimeTreeで任意の予定を登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235774/9a728e07-be1a-ff6f-b734-e44de5b1111d.png)


# APIの仕様を確認し、Postmanで動作確認を行います
- 今回は、TimeTreeのAPIの[GET /calendars/:calendar_id/upcoming_events](https://developers.timetreeapp.com/ja/docs/api#get-calendarscalendar_idupcoming_events)を使用して、当日以降のカレンダーの予定情報を取得します。

- API仕様は以下となっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235774/59ddf456-0f26-62c1-f690-d6c26a88b57e.png)

- 上記の仕様の通り、calendar_idが必要ですので、Postmanで[GET /calendars](https://developers.timetreeapp.com/ja/docs/api#get-calendars)でAPIを実行して、取得します。
- 設定値
	- HTTPメソッド："GET"
	- URI："https：//timetreeapis.com/calendars"
	- パラメータキー include：labels,members
	- Headersキー Authorization："Bearer (事前準備で取得したパーソナルアクセストークン)"
	
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235774/824d6eb7-d2d3-926f-3e68-c9a29804ef05.png)

- レスポンスボディより、カレンダーIDを把握、控えておきます。この例では、赤枠で囲った値"aBcDeFgHiJkL1"となっています。
- カレンダーIDが判明したので、本命のAPIの[GET /calendars/:calendar_id/upcoming_events](https://developers.timetreeapp.com/ja/docs/api#get-calendarscalendar_idupcoming_events)を同じようにPostmanで実行してみたいと思います。
- 設定値
	- HTTPメソッド："GET"
	- URI："https://timetreeapis.com/calendars/(上記で取得したカレンダーID)/upcoming_events"

	- Headersキー Authorization："Bearer (事前準備で取得したパーソナルアクセストークン)"

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235774/c8572bb2-fa77-9c68-a457-e904d13445ae.png)


- 正しく、TimeTreeの予定表を取得できているようです。

# 実装を開始します。

- APIを呼び出すので、axiosを使用します。
- axiosを使用するに当たり、本記事ではCDNでscriptタグを定義しました。

```html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```

- jsファイルの定義では、mounted にてAPIの呼び出しを定義しました。URI、ヘッダリクエストについては、上述のPostmanで動作確認した値と同じものとなります。

```js
    mounted: function () {
        axios.get("https://timetreeapis.com/calendars/(Postmanで取得したカレンダーID)/upcoming_events", 
            { headers: {'Authorization': 'Bearer (事前準備で取得したパーソナルアクセストークン)'} }).then(response => (this.items = response.data.data))
    }
```

- APIで取得した予定表は、以下のようにしてtableタグで出力しています。
- moment とあるのは、日付フォーマットライブラリのMomentを使っている為です。[こちら様の記事](https://www.webopixel.net/javascript/1227.html)が参考になると思います。

```html
                <table class="table">
                    <tr>
                        <th>タイトル</th><th>開始</th><th>終了</th>
                    </tr>
                    <tr v-for="item in items" >
                        <td>{{ item.attributes.title }}</td>
                        <td>{{ item.attributes.start_at | moment }}</td>
                        <td>{{ item.attributes.end_at | moment }}</td>
                    </tr>
                </table>
```

#完成したソースコード
- 以下公開します。
- 見栄えの為、Bootstrap4を使用しています。



```html:index.html
<html lang='ja'>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
        <script type="text/javascript" src="app.js" defer></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <div class="card">
            <div class="card-header">
                <span>予定表</span>
            </div>

            <div id="app" class="card-body">
                <table class="table">
                    <tr>
                        <th>タイトル</th><th>開始</th><th>終了</th>
                    </tr>
                    <tr v-for="item in items" >
                        <td>{{ item.attributes.title }}</td>
                        <td>{{ item.attributes.start_at | moment }}</td>
                        <td>{{ item.attributes.end_at | moment }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

```

```js:app.js
var app = new Vue({
    el: '#app',
    filters: {
        moment: function (date) {
            return moment(date).format('YYYY/MM/DD HH:mm');
        }
    },
    data: {
        items:[],
    },
    mounted: function () {
        axios.get("https://timetreeapis.com/calendars/(Postmanで取得したカレンダーID)/upcoming_events", 
            { headers: {'Authorization': 'Bearer (事前準備で取得したパーソナルアクセストークン)'} }).then(response => (this.items = response.data.data))
    }
})
```

# 出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235774/57a045a3-d51b-384a-5501-f529bdd09977.png)