メディアチーム【第3回】Vue.js 入門 〜オプション編〜
メディアチームIT技術
オプションを覚えよう！
宮田(株) ライトコード Webエンジニアの宮田です。
前回までで、Vue.jsの主要なディレクティブが扱えるようになりました！
今回はもう一つ、基本的な要素である 「オプション」 についてみていきたいと思います。
これまでも Vueインスタンス内に「el」や「data」「methods」 といったプロパティが出てきたと思います。
これこそが、Vue.js におけるオプションと呼ばれるものなんです！
前回の記事はこちら
オプションとは
Vueインスタンス内で使用する、オブジェクトで定義されたデータやメソッドのことを指します。
コンポーネントオプションとも呼ばれます。
準備
いつものように、「プロジェクトファイル」と「index.html ファイル」を用意します。
1$ mkdir vue-option
2$ cd vue-option
3$ touch index.htmlindex.html の内容は、下記のように記述しておきます。
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>オプションの使い方</title>
6 </head>
7 <body>
8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
9 <script>
10 </script>
11 </body>
12</html>まずは、お馴染みのオプションから、おさらいしながらいきましょう！
elオプション
elオプションは、 id名 または class名を指定することで Vueインスタンスを紐づける範囲の要素を指定できます。
ちなみに、el は「element」 の略です。
Vueインスタンス内に el: '#id名' または el: '.クラス名' のように記述します。
例) id名が "app" の場合： el: '#app'
1<div id="app"></div>1const app = new Vue({
2 el: '#app'
3})これまでも、毎回必ず出てきたオプションですね。
上記の例なら、id名が app のdivエレメント内の範囲でのみ、Vue が作用を及ぼすということを定義しています。
注意点
class名でも指定できますが、下記のコードのように同一class名で要素が複数あるものに対して使用することはできません。
そのため、必ず一つしか存在しない class名を指定する必要があります。
1<div class="app">
2 <!-- ... -->
3</div>
4<div class="app">
5 <!-- ... -->
6</div>dataオプション
dataオプションには、Vueアプリケーション内で使用するデータを登録します。
こちらも、毎回お目にかかるオプションですね。
この dataに定義したプロパティの値が変更されると、Viewが再レンダリングされます。
使用例
「ようこそ、〇〇 △△ さん」とメッセージを表示するプログラムに、名前のデータを登録てみます。
1<body>
2 <div id="app-1">
3 ようこそ、{{ name }} さん
4 </div>
5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6 <script>
7 const app1 = new Vue ({
8 el: '#app-1',
9 data: {
10 name: '山田 太郎'
11 }
12 })
13 </script>
14</body>確認
実行すると、dataに登録した名前が埋め込まれたテキストが表示されました。
methodsオプション
methodsオプションには、Vueアプリケーション内で使用する関数を定義することができます。
ここで定義した関数は、v-onディレクティブを使ってイベントリスナーを加えることで呼び出すことができます。
使用例
ボタンを押すごとにおみくじの結果が表示されるプログラムを作ってみます。
1<body>
2 <div id="app-2">
3 <h2>おみくじガチャ</h2>
4 <p>{{ fortune }}！</p>
5 <button @click="submit">引いてみる</button>
6 </div>
7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8 <script>
9 const app2 = new Vue ({
10 el: '#app-2',
11 data: {
12 items: ['大吉', '中吉', '小吉', '吉', '凶', '大凶'],
13 fortune: 'ここに表示されるよ'
14 },
15 methods: {
16 submit: function() {
17 const items = this.items
18 let item = items[Math.floor(Math.random() * items.length)]
19 this.fortune = item
20 }
21 }
22 })
23 </script>
24</body>methods には、結果を抽選して fortuneプロパティの値を変更する処理を行う submit関数を定義しました。
v-onディレクティブのイベントリスナーで、ボタンを click したときに、submit関数を呼び出すようにしています。
確認
では、実際に動かしてみましょう！
↓
いい結果は出ましたか？
さて、ここまでは前回までに登場したオプションでした。
ここからは、まだ登場していなかったオプションです！
computedオプション（算出プロパティ）
computedオプション（算出プロパティ）は、dataの値を使って、それを関数で加工したデータを返すことができます。
プロパティですが、こちらも methods と同じように関数を使うことができます。
また computedオプションには、値に変更がない場合、キャッシュされたものがそのまま再利用されるという特徴があります。
そのため、処理が高速なことがメリットです。
使用例
フォームで入力した「あいさつ文」+「名前」+「敬称」の文字列を連結して一文を出力するプログラムを作ってみます。
1<body>
2 <div id="app-3">
3 <h2>あいさつメーカー</h2>
4 <select v-model="greeting">
5 <option value="" disabled selected style="display:none">あいさつを選択</option>
6 <option v-for="item in greetings" :value="item">{{ item }}</option>
7 </select>
8 <input type="text" v-model="name" placeholder="名前を入力" />
9 <select v-model="honorific">
10 <option value="" disabled selected style="display:none">敬称を選択</option>
11 <option v-for="item in honorifics" :value="item">{{ item }}</option>
12 </select>
13 <p>出力 → {{ message }}</p>
14 </div>
15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16 <script>
17 const app3 = new Vue ({
18 el: '#app-3',
19 data: {
20 name : '',
21 greeting: '',
22 honorific: '',
23 greetings: [ 'おはよう', 'こんにちは', 'こんばんは', 'おやすみ'],
24 honorifics: ['さん', 'くん', 'ちゃん', '様', '殿']
25 },
26 computed: {
27 message: function() {
28 return this.greeting + ' ' + this.name + ' ' + this.honorific
29 }
30 }
31 })
32 </script>
33</body>greetings 、honorifics の配列にそれぞれ連結させる文字列を登録しておきました。
確認
実際に動かしてみましょう！
name 、greeting 、honorific のいずれかの値が書き換わったとき、連動して出力メッセージも変更されることが確認できると思います。
computed を使わず下記のように直接記述することもできますが、コードが肥大化しメンテナンス性が悪くなるため好ましくありません。
1<p>出力 → {{ greeting + ' ' + name + ' ' + honorific }}</p>複雑なロジックを用いた処理をしたい場合には {{ }} 内に処理は書かずに、computed を利用しましょう！
注意点
dataの値に変更が生じない限りキャッシュが再利用されるという特徴ですが、使用の際に注意しなければならないことがあります。
算出プロパティは、リアクティブな依存関係が更新されたときのみ再評価されます。
下記のコードの例は、return で返している値に data で定義しているプロパティが含まれていません。
この場合、値に変更が生じることがないため、再描画されても関数が実行されません。
ちなみに、methods の場合は再描画が起きると常に関数を実行するため、場面に応じて使い分ける必要があります。
1computed: {
2 now: function () {
3 return Date.now()
4 }
5}watchオプション（監視プロパティ）
watchオプション（監視プロパティ）は、特定のプロパティの値の変更を監視し、変更時に設定した関数を実行することができます。
記法は data内のプロパティ名をキーに指定し、下記のように記述します。
1watch: {
2 プロパティ名: function(変更後の値, 変更前の値) {
3 // 処理
4 }
5}データが変わるのに応じて、非同期処理やコストの高い処理を実行したいときに最も便利です。
使用例
テキストボックスに入力した値を変更するたびに、前の値と次の値をアラートで表示するプログラムを作ってみます。
1<body>
2 <div id="app-4">
3 <p>最新テキスト: {{ text }}</p>
4 <input type="text" :value="text" @keyup.enter="text = $event.target.value" />
5 </div>
6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7 <script>
8 const app4 = new Vue ({
9 el: '#app-4',
10 data: {
11 text: '',
12 },
13 watch: {
14 text: function(nextText, prevText) {
15 let prev = prevText
16 let next = nextText
17 if(!prev) prev = '(未入力)'
18 if(!next) next = '(未入力)'
19 alert('値が変更されました 前: ' + prev + ' → 次: ' + next)
20 }
21 }
22 })
23 </script>
24</body>テキストボックスに入力し、 Enterキーを押したタイミング（@keyup.enter）で値が変更されるように <input>内を下記のように記述します。
1<input type="text" :value="text" @keyup.enter="text = $event.target.value" />そして、watchオプションの中身を記述していきます。
今回は、data で保持している text の値を監視したいので、watchのオブジェクトのキーを text とします。
これで、text の値に変更があった場合のみ関数が実行されます。
また watch で定義する関数の引数には、第一引数に変更後の値、第二引数に変更前の値を渡すことができます！
そのため、アラートに変更前後それぞれの値を表示してみます。
初期値など値が空文字の場合は、わかりやすいように (未入力) と表示させます。
1data: {
2 text: '',
3},
4watch: {
5 text: function(nextText, prevText) {
6 let prev = prevText
7 let next = nextText
8 if(!prev) prev = '(未入力)'
9 if(!next) next = '(未入力)'
10 alert('値が変更されました 前: ' + prev + ' → 次: ' + next)
11 }
12}確認
試しにテキストを入力して実行してみましょう！
Enterキーを押した瞬間、このようにアラートが表示されましたね！
OK を押すと最新テキストの表示も、先ほど入力したテキストが表示されたと思います。
もう一度、別のテキストを入力してEnterキーを押してアラートを確認すると、変更前後の値がしっかり表示されていますね。
同じテキストを入力した場合は、変更が発生しないため関数も実行されずアラートも表示されません。
このように、特定のプロパティの値の変更時に実行したい処理がある場合や、変更前の値も使いたい場合などに便利です。
第4回につづく！
今回は、主要なオプションのうち、5種類をみてきました。
ですが、実はまだ他にも大きく分けて2つの系統の主要オプションがあります。
まず1つ目は、「props」「template」などの「コンポーネント」に関連するオプションです。
こちらについては、コンポーネントについての回で詳しくみていきたいと思っています。
そして2つ目が、「created」「mounted」などの「ライフサイクルフック」と呼ばれる特殊なオプションです。
次回は、この2つ目に深く関わる Vue の「ライフサイクル」と、「ライフサイクルフック」についてみていきたいと思います！
次回の記事はこちら
2019.12.05【第3回】Vue.js 入門 〜オプション編〜オプションを覚えよう！宮田(株) ライトコード Webエンジニアの宮田です。前回までで、Vue.jsの主要なディレクテ...
こちらの記事もオススメ！
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
