1. HOME
  2. ブログ
  3. IT技術
  4. 【第3回】Vue.js 入門 〜オプション編〜

【第3回】Vue.js 入門 〜オプション編〜

オプションを覚えよう!

宮田宮田

(株) ライトコード Webエンジニアの宮田です。

前回までで、Vue.jsの主要なディレクティブが扱えるようになりました!

今回はもう一つ、基本的な要素である オプション」 についてみていきたいと思います。

これまでも Vueインスタンス内に「el」や「data」「methods」 といったプロパティが出てきたと思います。

これこそが、Vue.js におけるオプションと呼ばれるものなんです!

前回の記事はこちら

オプションとは

Vueインスタンス内で使用する、オブジェクトで定義されたデータやメソッドのことを指します。

コンポーネントオプションとも呼ばれます。

準備

いつものように、「プロジェクトファイル」と「index.html ファイル」を用意します。

index.html の内容は、下記のように記述しておきます。

まずは、お馴染みのオプションから、おさらいしながらいきましょう!

elオプション

elオプションは、 id名 または class名を指定することで Vueインスタンスを紐づける範囲の要素を指定できます。

ちなみに、el は「element」 の略です。

Vueインスタンス内に  el: '#id名' または el: '.クラス名' のように記述します。

例) id名が "app" の場合: el: '#app'

これまでも、毎回必ず出てきたオプションですね。

上記の例なら、id名が app のdivエレメント内の範囲でのみ、Vue が作用を及ぼすということを定義しています。

注意点

class名でも指定できますが、下記のコードのように同一class名で要素が複数あるものに対して使用することはできません。

そのため、必ず一つしか存在しない class名を指定する必要があります。

dataオプション

dataオプションには、Vueアプリケーション内で使用するデータを登録します。

こちらも、毎回お目にかかるオプションですね。

この dataに定義したプロパティの値が変更されると、Viewが再レンダリングされます。

使用例

ようこそ、〇〇 △△ さん」とメッセージを表示するプログラムに、名前のデータを登録てみます。

確認

実行すると、dataに登録した名前が埋め込まれたテキストが表示されました。

methodsオプション

methodsオプションには、Vueアプリケーション内で使用する関数を定義することができます。

ここで定義した関数は、v-onディレクティブを使ってイベントリスナーを加えることで呼び出すことができます。

使用例

ボタンを押すごとにおみくじの結果が表示されるプログラムを作ってみます。

methods には、結果を抽選して fortuneプロパティの値を変更する処理を行う submit関数を定義しました。

v-onディレクティブのイベントリスナーで、ボタンを click したときに、submit関数を呼び出すようにしています。

確認

では、実際に動かしてみましょう!

いい結果は出ましたか?

さて、ここまでは前回までに登場したオプションでした。

ここからは、まだ登場していなかったオプションです!

computedオプション(算出プロパティ)

computedオプション(算出プロパティ)は、dataの値を使って、それを関数で加工したデータを返すことができます。

プロパティですが、こちらも methods と同じように関数を使うことができます。

また computedオプションには、値に変更がない場合、キャッシュされたものがそのまま再利用されるという特徴があります。

そのため、処理が高速なことがメリットです。

使用例

フォームで入力した「あいさつ文」+「名前」+「敬称」の文字列を連結して一文を出力するプログラムを作ってみます。

greetingshonorifics  の配列にそれぞれ連結させる文字列を登録しておきました。

確認

実際に動かしてみましょう!

namegreetinghonorific  のいずれかの値が書き換わったとき、連動して出力メッセージも変更されることが確認できると思います。

computed を使わず下記のように直接記述することもできますが、コードが肥大化しメンテナンス性が悪くなるため好ましくありません。

複雑なロジックを用いた処理をしたい場合には {{ }}  内に処理は書かずに、computed を利用しましょう!

注意点

dataの値に変更が生じない限りキャッシュが再利用されるという特徴ですが、使用の際に注意しなければならないことがあります。

算出プロパティは、リアクティブな依存関係が更新されたときのみ再評価されます。

下記のコードの例は、return で返している値に data で定義しているプロパティが含まれていません。

この場合、値に変更が生じることがないため、再描画されても関数が実行されません。

ちなみに、methods の場合は再描画が起きると常に関数を実行するため、場面に応じて使い分ける必要があります。

watchオプション(監視プロパティ)

watchオプション(監視プロパティ)は、特定のプロパティの値の変更を監視し、変更時に設定した関数を実行することができます。

記法は data内のプロパティ名をキーに指定し、下記のように記述します。

データが変わるのに応じて、非同期処理やコストの高い処理を実行したいときに最も便利です。

使用例

テキストボックスに入力した値を変更するたびに、前の値と次の値をアラートで表示するプログラムを作ってみます。

テキストボックスに入力し、 Enterキーを押したタイミング( @keyup.enter)で値が変更されるように <input>内を下記のように記述します。

そして、watchオプションの中身を記述していきます。

今回は、data で保持している text の値を監視したいので、watchのオブジェクトのキーを text とします。

これで、text の値に変更があった場合のみ関数が実行されます。

また watch で定義する関数の引数には、第一引数に変更後の値、第二引数に変更前の値を渡すことができます!

そのため、アラートに変更前後それぞれの値を表示してみます。

初期値など値が空文字の場合は、わかりやすいように (未入力) と表示させます。

確認

試しにテキストを入力して実行してみましょう!

Enterキーを押した瞬間、このようにアラートが表示されましたね!

OK を押すと最新テキストの表示も、先ほど入力したテキストが表示されたと思います。

もう一度、別のテキストを入力してEnterキーを押してアラートを確認すると、変更前後の値がしっかり表示されていますね。

同じテキストを入力した場合は、変更が発生しないため関数も実行されずアラートも表示されません。

このように、特定のプロパティの値の変更時に実行したい処理がある場合や、変更前の値も使いたい場合などに便利です。

第4回につづく!

今回は、主要なオプションのうち、5種類をみてきました。

ですが、実はまだ他にも大きく分けて2つの系統の主要オプションがあります。

まず1つ目は、「props」「template」などの「コンポーネント」に関連するオプションです。

こちらについては、コンポーネントについての回で詳しくみていきたいと思っています。

そして2つ目が、「created」「mounted」などの「ライフサイクルフック」と呼ばれる特殊なオプションです。

次回は、この2つ目に深く関わる Vue の「ライフサイクル」と、「ライフサイクルフック」についてみていきたいと思います!

次回の記事はこちら

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア