目次
はじめに
リライトして目次を追加しました。
内容は2019年5月当時のままです。
僕がNuxt.jsの各機能を理解するために、ひとつひとつ確認したことをまとめていこうと考えています。
インストール・環境構築は、以下の手順でできている前提です。
Nuxt.jsを整理する方針
Nuxt.js関連資料やサンプルソースを見ると混乱することが多いのは、Nuxt.jsはVue.jsの機能を包含していて、ひとつのソースの中で、どれがNuxt.js特有の機能で、どれがVue.jsの機能かの区別がつけにくいからだと感じています。
その混在しているイメージを図にしてみると、こんな感じに見えます。
なので、僕はアプローチとして、各技術要素にわけて、一回に少しずつ要素を確認していくことにしました。
分け方としては、以下のようになると考えています。
- Nuxt.js独自の要素ー基本
- Vue.js独自の要素
- BulmaのCSS要素（Burfyのclassは、Bulmaを使っている場合が多い）
- Buefy独自の要素
- Nuxt.js独自の要素ー応用
- テストフレームワーク他モジュールの要素
今回は、Nuxtの要素の中で使うVue.jsの要素のうち、今回は、テキストボックスなどの入力部品の入力内容を、javaScriptで処理する場合をやってみます。
今回やることと確認ポイント
今回は以下のようなことをやります。
- テキストボックス（Input）への入力バインド
- @clickを使ったイベントハンドリング
- メソッドの呼び出しと画面の部分更新
です。
そこでの確認ポイントは。
- 画面表示および入力値受取用の変数の宣言と初期化
- 入力値を変数におさめる（フォーム入力バインディング）
- ボタンにイベントトリガ（@click）をつけて、住所取得メソッドを実行させる。
- methodsで住所取得メソッドを定義し、パラメータを受け渡す。
- 画面の住所情報表示を部分更新する。
みたいなことです。
バリデーションとかは今回はやりません。
どんな入力画面にでも必要になる超基本の部分だけ、まずはやってみます。
サンプルコード１
テキストボックスをおいて、そこに郵便番号を入力してボタンを押した時に、住所情報を取得しにいって結果を表示するみたいなことをやります。
ここで
- 画面表示および入力値受取用の変数の宣言と初期化
- 入力値を変数におさめる（フォーム入力バインディング）
- ボタンにイベントトリガ（@click）をつけて、住所取得メソッドを実行させる。
- methodsで住所取得メソッドを定義し、パラメータを受け渡す。
- 画面の住所情報表示を部分更新する。
を確認していきます。
修正後のソース全体がこちらです。
pages/about.vue
<template>
<div>
<NLink to="/">
ルートのページへ戻ります
</NLink>
<br>
<img src="/post.JPG" alt="image02">
<br>
<input v-model="zip" placeholder="郵便番号を入力する">
<br>
<button @click="getAddr({zip})">
住所情報取得
</button>
<div v-if="datas != null">
<p>郵便番号APIから応答がありました</p>
<ul v-if="datas.status == 200">
<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>
<ul v-else>
<li>指定の郵便番号では住所情報の取得ができませんでした。</li>
</ul>
</div>
<div v-else>
<p>郵便番号を入力してボタン「住所情報取得を押します。</p>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
zip: '',
datas: null
}
},
asyncData () {
},
methods: {
async getAddr ({ zip }) {
const url = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&limit=1`
await axios.get(url)
.then((res) => {
this.datas = res.data
})
return this.data
}
},
head: {
title: 'About page'
}
}
</script>
ポイントを補足していきます。
画面表示および入力値受取用の変数の宣言と初期化
以下の部分で初期化しています。
data(){
return{
zip:'',
datas:null
}
},
zipは、テキストボックスの入力値を受け取る変数です。
datasは、郵便番号APIからのレスポンス（JSON)を収めるオブジェクトですが、今回は最初から表示するわけではないので、nullで初期化しています。
<templete>内で使う変数は、ここで定義して初期値を与えておかないと、なんやかんやとエラーがでて実行できません。
ちなみに、asyncData(){}は今回必要ないので空っぽにしてます。
注意が必要なのは、<templete＞内で「datas」を参照しているところです。
たとえば、「datas.results[0].zipcode」とかみたいな。
初期値の時点では「datas」はNULLなので、当然ながら、そのメンバーはありません。
なので、そこを通ってしまうとエラーになるので、到達しないように
<div v-if="datas != null">
というDIVタグを置いて、下に流れないようにする必要があります。
入力値を変数におさめる（フォーム入力バインディング）
上記で定義した変数を、入力フォームに関連づけるのはv-modelです。
<input v-model="zip" placeholder="郵便番号を入力する">
こんな感じでやっとくと、入力された文字列や値が「zip」に格納されます。
利用法のサンプルは、コード例に書くので割愛します。
日本語IMEの場合は変換が確定したとき、半角英数字などIMEを使わない場合は、入力とほぼ同時に変数（今回はzip）に格納されていきます。
ボタンにイベントトリガ（@click）をつけて、住所取得メソッドを実行させる。
ボタンにクリックを拾わせるには「@click」または「v-on:click」を使います。
<button @click="getAddr({zip})">住所情報取得</button>
または
<button v-on:click="getAddr({zip})">住所情報取得</button>
みたいな感じですね。
getAddrが住所情報を取得するメソッドです。
入力した郵便番号を「zip」に収めて、それを引数にするわけですが、ここでは「{zip}」のように{}で囲っておかないと、値が引き継がれないので注意が必要です。
methodsで住所取得メソッドを定義し、パラメータを受け渡す。
イベントをトリガにして呼ばれるメソッドは「methods：」ブロックに書きます。
今回、新たに使うのは以下です。
| 状態 | 意味と使いわけ |
|---|---|
| methods |
JavaScriptの関数を定義します。 ここで定義した関数は@clickなどのイベントに紐づけて実行できます。 |
ソースの該当部分です。
methods: {
async getAddr ({ zip }) {
const url = `http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&limit=1`
await axios.get(url)
.then((res) => {
this.datas = res.data
})
return this.data
}
},
メソッドのパラメータも{} で囲って取得してます。
axiosを使ってWEB-APIにリクエストしてレスポンスを得る方法自体はasyncData()の中に書いていた前回と同じです。
画面の住所情報表示を部分更新する。
asyncData()の場合は「return」で返していたところを、変数「this.datas」に直接代入してやると、画面が部分更新されます。
実行イメージ
プロジェクトフォルダをカレントにして。
npm run dev
して、「http://localhost:3000」にアクセスします。
郵便番号サンプルをクリックします。
1000001を入力して「住所情報取得」ボタンを押します。
とれてますね。
ちなみに、後ろの0001を消して「住所情報取得」ボタンをおすと。
うん・・OKですね。
今回はこんなところで。
ではでは。