<templete>内における変数の参照／Vue.jsのv-if・v-forをNuxt.jsで使う／NUXT自己流チュートリアル（１）－２

今回は条件付きレンダリング（v-if）やリストレンダリング（v-for）および変数参照方法などのVue.jsベースの基本的なところを確認していきます。

f:id:arakan_no_boku:20190509225706p:plain

この記事は「NUXT自己流チュートリアル（１）」として続き物で書いている記事の２回目です。

1回目から続けて読んでもらえることを想定して書いていますのでご了承ください。

arakan-pgm-ai.hatenablog.com

事前に頭にいれといた方が良いこと

Nuxt.jsは「Vue.jsアプリケーションを開発するためのフレームワーク」なので、当然、Vue.jsのディレクティブ（v-で始まり、HTMLタグ内で使う特別な属性）やテンプレート構文（”Mustache” 構文(二重中括弧{{}}）で変数を参照するなど）を使います。

なので。

今回は大部分が「Vue.js」に関連する内容になります。

今回の記事の前提的なこと

自己流チュートリアル（１）の続きなので、その記事で「前提」と「チュートリアルの準備」として書いていることは、できている必要があります。

つまり。

インストール・環境設定・テスト専用Chromeショートカットの作成、自前の画像ファイルの準備・・うんぬんですね。

まだの方は、下記記事を先に参照して、環境設定をお願いします。

arakan-pgm-ai.hatenablog.com

あと、サンプルの中で、市区町村APIを使っています。

こちらは郵便番号と違い事前にAPI-KEYを取得しておく必要があります。

こちらからメールアドレスを登録して、API-KEYを取得してださい。

今回の目的

vue.jsの以下の機能を使ってみたいと考えてます。

テンプレート内で利用する機能

条件付きレンダリング

ディレクティブ	ふるまい
v-if	ブロックを条件に応じて描画したい場合に使用する。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。
v-else	v-if に対する “else block” を示すために、v-else ディレクティブを使用します:
v-else-if	v-if の “else if block” として使用します。複数回連結することができます:
v-show	v-show はシンプルに要素の display CSS プロパティを切り替えます。
注意事項	v-forディレクティブと一緒に使わないこと

リストレンダリング

ディレクティブ	ふるまい
v-for	配列の要素にマッピングする。 v-for=""item in items"" {{ item.message }}
v-for	配列の要素にマッピングする。 v-for=""(item, index) in items"" {{ item.message }}{{ index }}
v-for	オブジェクトにマッピングする v-for=""value in object"" {{ value }}
v-for	オブジェクトにマッピングする v-for=""(value, name) in object"" {{ value }}{{ name }}
注意事項	v-ifディレクティブと一緒に使わないこと

データバインディング

構文	ふるまい
{{ boo }}	変数「boo」の参照。 {{}}はmustache タグと呼ぶ。 HTML構文の中では使えない。
v-bind	<div v-bind:id="dynamicId"></div> 上記例の様に、HTML属性の中で変数の展開が必要な場合に使う
{{ number + 1 }}	mustacheタグの中で、JavaScriptの式を動作させる。左例だと、変数numberの値に1加算して返す。
v-bind	<div v-bind:id=""dynamicId""></div> <a v-bind:href=""url""> ... </a> 上記の様に、HTML属性の中で変数の展開が必要な場合に使う
v-bindの省略記法	<a v-bind:href=""url""> ... </a>を以下のようにも書ける <a :href=""url""> ... </a>
v-bind:class	クラスを動的に書き換える。 <div v-bind:class=""{ active: isActive }""></div> だとisActiveがTrueの場合だけ、activeクラスが適用される。

v-onなどのイベント系や入力系ディレクティブは別の機会にまわします。

Scriptタグ内で使う機能

種類はたくさんありますが、今回はまだ、初期表示しか行わないので、以下の３つだけを使います。

状態	意味と使いわけ
data	変数に値を定義します。テンプレート内で利用する変数を単純に返します。
computed	関数を定義（例えば、test()みたいな）します。その結果をテンプレート内で「test」として受け取ります
asyncData	コンポーネントをロードする前に非同期の処理を行います。 DOM構築前なので内部でthisは使えません。

状態

意味と使いわけ

data

変数に値を定義します。

テンプレート内で利用する変数を単純に返します。

computed

関数を定義（例えば、test()みたいな）します。

その結果をテンプレート内で「test」として受け取ります

asyncData

コンポーネントをロードする前に非同期の処理を行います。

DOM構築前なので内部でthisは使えません。

利用法のサンプルは、コード例に書くので割愛します。

さて、サンプルを作ってみよう

今回も画面の体裁（CSS）はほぼ無視です。

やることは。

郵便番号APIを使って、正常（200）の場合だけ、情報を表示する。
市区町村APIを使って、取得した市区町村をテーブルにリストする。
変数を使ってURLを渡して外部リンクを機能させる。
システム日付を取得して今日の日付を表示してみる。

です。

この中で、上記にあげた各ディレクティブや状態・テンプレート構文などを使います。

なお、JavaScriptの関数例の中で、日付を扱う予定です。

JavaScriptのデフォルトだと少々ごちゃごちゃするので、すっきりさせるため、momentという日付処理ライブラリもインストールしてます。

いれてない場合は、以下でインストールしておいてください。

npm install moment

layouts

共通レイアウトは、自己流チュートリアル（１）のままです。

こんな感じの超シンプルなものをそのまま使います。

layouts/default.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

最低限の基本系です。

pages/index.vue

まずはルート[/」に対応する「index.vue」です。

自己流チュートリアル（１）のソースを変更して。

当日日付を取得してフォーマットして返す関数とその表示
リンクの名称を変数でわたすように変更

などをやってます。

あと、画像ファイルを追加します。

以下の画像を「（プロジェクトフォルダ）\assets\00_nuxt.JPG」で保存しておきます。

f:id:arakan_no_boku:20190830002137j:plain

pages/index.vue

<template>
  <div>
    <p>今日は{{ today }}です。</p>
    <img src="~assets/00_nuxt.JPG" alt="image01">
    <br>
    <ul>
      <li>
        <NLink to="/about">
          {{ linkname1 }}
        </NLink>
      </li>
      <li>
        <NLink to="/cityapi">
          {{ linkname2 }}
        </NLink>
      </li>
      <li>
        <a :href="outurl">
          {{ linkname3 }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  head: {
    title: 'First page'
  },
  data () {
    return {
      outurl: 'https://ja.nuxtjs.org/',
      linkname3: '（外部リンク）v-bindのサンプル',
      linkname2: '（内部リンク）市区町村サンプル',
      linkname1: '（内部リンク）郵便番号サンプル'
    }
  },
  computed: {
    today () {
      return moment().format('YYYY/MM/DD dddd')
    }
  }
}
</script>

ここでのポイントは以下です。

mustache 構文「{{}}」で囲ってHTMLタグ外での変数の参照をする点
HTMLタグ内では「{{}}」が使えず、b-bindを使って変数の参照をする点
内部リンクと異なり外部リンクは普通に<a></a>をつかう必要があること
data()内で使う変数を定義して初期値のセットをすること
computed：内でのJavascriptの実行して値を返して、変数として受け取ること

です。

最後だけ補足すると、computed:内のJavaScriptの「today()」という関数名を、{{today}}と変数のように受けて戻り値を参照します。

あと、<templete>内で使う変数で、関数等の戻り値として初期値がセットされないものは、data()の中で初期値をセットして定義しておかないと、エラーになります。

pages/about.vue

郵便番号APIから結果を受け取って表示します。

自己流チュートリアル（１）のソースでは、ステータスだけを表示してましたが、今回はそれに手を加えて、ステータスを見て正常（200）だったらレスポンスのJSONの内容を展開して表示して、以外だったらメッセージだけ表示するという感じの条件付き表示をやってます。

<template>
  <div>
    <NLink to="/">
      ルートのページへ戻ります
    </NLink>
    <br>
    <img src="/post.JPG" alt="image02">
    <div v-if="datas.status == 200">
      <p>郵便番号APIから応答がありました</p>
      <ul>
        <li>郵便番号：{{ datas.results[0].zipcode }}</li>
        <li>都道府県名：{{ datas.results[0].address1 }}</li>
        <li>市区町村名：{{ datas.results[0].address2 }}</li>
        <li>町域名：{{ datas.results[0].address3 }}</li>
      </ul>
    </div>
    <div v-else>
      <p>郵便番号APIからの応答ステータスがエラーになりました「 {{ datas.status }}」です。</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  asyncData () {
    return axios.get(`http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060&limit=1`)
      .then((res) => {
        return { datas: res.data }
      })
  },
  head: {
    title: 'About page'
  }
}
</script>

今回のソース修正部分のポイントは。

v-ifを使った条件分岐（タグの表示・非表示）
JSONを受け取った時の内容表示の方法

です。

v-ifを使った条件分岐（タグの表示・非表示）

v-ifで条件に一致したものだけ表示するのは直感的にわかりやすいので、別に補足はいらないと思いますが、今回は使っていないのですが、v-ifと同様に、条件によって表示・非表示を切り替えるディレクティブに「v-show」があって、ちょっと勘違いしやすいところがあるので補足します。

v-ifの場合は「初期表示において false の場合、何もしない」です。

なので、条件が最初に true になるまで描画自体されません（遅延描画）。

でも。

v-showの場合は、条件がTrueでもfalseでも描画自体は行われて、CSSのdisplayの切り替えで表示・非表示になるだけです。

なので、頻繁に表示・非表示を切り替える必要がある場合は、当然、v-showの方が速いとかがあるので、特徴を理解して使い分ける必要があります。

JSONを受け取った時の内容表示の方法

JSONが、こんな感じで入れ子になっているときは（一部割愛してますが）、datas.results[0].zipcodeのようにアクセスしないといけない・・というのが、意外と間違えやすい点です。

{
"message": null,
"results": [
{
"address1": "北海道",
"address2": "美唄市",
"address3": "上美唄町協和",
"zipcode": "0790177"
},
{
"address1": "北海道",
"address2": "美唄市",
"address3": "上美唄町南",
"zipcode": "0790177"
}
],
"status": 200
}

pages/cityapi.vue

今回新規に付け加えるソースです。

都道府県コードを指定して、市町村の一覧を取得して、それをテーブル展開します。

準備として、画像をひとつ追加しておきます。

以下の画像を「(プロジェ区とフォルダ）\static\jamap.JPG」で保存しておきます。

f:id:arakan_no_boku:20190830001747j:plain

今回は簡単にするため、あえて、都道府県コードは固定にしています。

<template>
  <div>
    <NLink to="/">
      ルートのページへ戻ります
    </NLink>
    <br>
    <img src="/jamap.JPG" alt="image03">
    <div v-if="datas.message == null">
      <p>市区町村APIから応答がありました</p>
      <table>
        <tr>
          <th>都道府県コード</th>
          <th>市区町村コード</th>
          <th>市区町村名称（漢字名称）</th>
          <th>大都市識別フラグ</th>
        </tr>
        <tr v-for="data in datas.result" :key="data.id">
          <td>{{ data.prefCode }}</td>
          <td>{{ data.cityCode }}</td>
          <td>{{ data.cityName }}</td>
          <td>{{ data.bigCityFlag }}</td>
        </tr>
      </table>
    </div>
    <div v-else>
      <p>市区町村APIからの応答ステータスがエラーになりました「 {{ datas.message }}」です。</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  asyncData () {
    return axios
      .get(`https://opendata.resas-portal.go.jp/api/v1/cities?prefCode=1`, {
        headers: {
          'X-API-KEY': 'nomgXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
        },
        data: {}
      })
      .then((res) => {
        return { datas: res.data }
      })
  },
  head: {
    title: 'CityApi page'
  }
}
</script>

ここでのポイントは、