【Vue.js】NHK番組表APIで放送中の番組を表示する

# はじめに

先日に投稿した[NHK番組表APIの使い方](https://qiita.com/nkojima/items/88e5dd01a1401db8af7d)を踏まえて、Webページ上に放送中の番組を表示してみました。

フロントエンドの知識はさっぱりなので、当初はプレーンなJavascriptで書こうと考えていましたが、少しだけチャレンジしてみよう...ということでVue.jsを初めて使ってみました。
拙いコードだと思いますが、大目に見て頂けるとありがたいです。

# コード

## HTML

* NHK総合1チャンネルにおいて現在放送中の番組と、直前に放送された番組、直後に放送される予定の番組を表示させています。
* Javascriptの外部ファイルの読み込みは[head要素内よりもbody要素の最下部に置いた方が良い](https://www.1-firststep.com/archives/2086)という記事を参考にして、body要素の最下部に配置しました。

```html:nhk_api.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
    <link rel="stylesheet" href="./nhk_api.css">
    <title>NHKで放送中の番組</title>
    <meta name="description" content="NHK番組表APIを使って、現在放送中の番組を表示しています。">
    <meta name="author" content="nkojima">
</head>
<body>
    <div class="container" id="app">
        <h1 class="text-center">NHK総合1で放送中の番組</h1>
        <div class="columns medium-4">
            <div class="card">
                <div class="card-divider">
                    <span class="status">前の番組</span>
                </div>
                <div class="card-section">
                    <p><span class="title">{{results.previous_title}}</span></p>
                    <p>{{results.previous_subtitle}}</p>
                </div>
            </div>
        </div>
        <div class="columns medium-4">
            <div class="card">
                <div class="card-divider">
                    <p><span class="status">現在放送中の番組</span></p>
                </div>
                <div class="card-section">
                    <p><span class="title">{{results.present_title}}</span></p>
                    <p>{{results.present_subtitle}}</p>
                </div>
            </div>
        </div>
        <div class="columns medium-4">
            <div class="card">
                <div class="card-divider">
                    <span class="status">次の番組</span>
                </div>
                <div class="card-section">
                    <p><span class="title">{{results.following_title}}</span></p>
                    <p>{{results.following_subtitle}}</p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./nhk_api.js"></script>
</body>
</html>
```

## Javascript

* Vue.jsは全くの初心者なので、[Vue.jsのチュートリアル](https://jp.vuejs.org/v2/guide/)で少し勉強した後、様々な方のブログなどを参照して書いてみました。
 * それが原因で、統一感のないコードになっているかもしれません...
* HTTP通信は`XMLHttpRequest`ではなく、`axios`というものが一般的に使われているようだったので、それに倣って書いてみました。

```javascript:nhk_api.js
new Vue({
  el: '#app',
  data: {
    results: []
  },
  created() {
    axios.get("http://api.nhk.or.jp/v2/pg/now/130/g1.json?key={あなたのAPIキー}")
    .then(response => {
      this.results = {
        previous_title: response.data.nowonair_list.g1.previous.title,
        previous_subtitle: response.data.nowonair_list.g1.previous.subtitle,
        present_title: response.data.nowonair_list.g1.present.title,
        present_subtitle: response.data.nowonair_list.g1.present.subtitle,
        following_title: response.data.nowonair_list.g1.following.title,
        following_subtitle: response.data.nowonair_list.g1.following.subtitle
      }
    })
  }
});
```

## CSS

```css:nhk_api.css
span.status {
    font-weight:bold;
    font-size:x-large;
}

span.title {
    font-weight:bold;
}
```

# 実際のページ

* 短いコードですが、以下のように3カラム構成のページを作ることが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/312166/e080871a-7d66-e2e5-137e-4ab957444eb9.png)

# まとめ

* Vue.jsは難しい...
 * フロントエンドの知識がさっぱりなので、まずはプレーンなJavascriptを使いこなせないと厳しそう。
 * 難しいとはいっても、以前に触ったことがある[Ext JS 4](https://docs.sencha.com/extjs/4.2.1/)よりは理解しやすいかも...
* 慣れないとエラーを潰すのも大変。
 * `[Vue warn]: Property or method "〇〇〇" is not defined on the instance but referenced during render.`というエラーが出ても、原因が全く分からずに右往左往しました。
 * Vue.jsは利用者が多く、ネット上にも情報量が多いので、地道に調べれば自力である程度は解決できそうですが...