Script#Vue.js#Webデザイン#ディレクティブ#入門こんにちは。アイレットデザイン事業部のマークアップ/フロントエンドエンジニアの工藤です。UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。今回から3回にわたってVue.js再入門シリーズを更新していきます。Vue.jsの特徴Vue.jsの大きな特徴に、仮想DOMを使用してビューをレンダリングできることが挙げられます。仮想DOMは、変更があった場合に全体を再描画するのではなく、必要な部分だけを更新することでパフォーマンスを向上できます。Vue.jsはリアクティブなデータバインディングを特徴としています。リアクティブなデータバインディングとは、データが変更されると自動的にビューを更新する機能を指します。これに対して、JavaScriptやjQueryでは直接DOMを操作する必要があります。データの変更に対しては基本的にはページの全体を更新する必要があります。学習のモチベーション筆者は長くjQueryのレガシーな実装に親しんできたので上記の違いに戸惑うことがあり、改めてVue.jsの学習をしていくことにしました。Vue.jsのディレクティブについてVue.jsは、HTML要素に対して動的な振る舞いを付加できる、ディレクティブと呼ばれる機能を提供しています。ディレクティブはv-で始まる属性によって表され、ビューのレンダリング中にVue.jsが監視し、リアクティブなレンダリングを可能にします。基本構文Vue.jsには以下のような基本的なディレクティブがあります。真偽に応じて要素を表示または非表示にする。真偽に応じて要素を表示または非表示にする。v-ifとは異なり要素がDOMに残るため、頻繁に表示/非表示を切り替えるコンテンツの描画に有効。配列やオブジェクトの要素をループして、要素を生成。要素の属性に値をバインドする。要素のスタイルをバインドする。要素のクラス属性をバインドする。フォームの入力値を双方向バインドする。イベントリスナーをバインドします。省略形として@が利用できる。一度だけレンダリングされ、その後は更新されない。省略構文v-bindとv-onには省略構文があります。以下のように使用します。me</button>イベントに関わるディレクティブVue.jsに限らずJavaScriptでは「ボタンをクリックした」、「値を入力した」といったイベントをきっかけ(トリガー)に特定のコードが実行されます。イベントをきっかけに動くコードのことをイベントハンドラーと言います。以下はVue.jsで書いたイベントとイベントハンドラーのコードです。部分が、現在時刻に置き換わります。v-modelと双方向バインディングv-modelはディレクティブの仲間ですが、テキストボックスやラジオボタン、チェックボックスなどのフォーム要素に使用し、Vue.jsの特徴である双方向データバインディングを実現するのに欠かせない点でより重要であり、使いこなせるようになるととても便利です。以下の例は、v-model="message"がテキストボックスとmessageデータをバインドし、テキストボックスの値が変更されると、messageデータも同時に更新される実装です。''}}}).mount("#app");v-modelはv-bindとv-onの組み合わせ実はv-modelの挙動はv-bindとv-onの組み合わせと言えるため、上記のコードはv-bindとv-onの組み合わせによって書き直すことができます。実際には簡潔に書けるものをわざわざ冗長に書くシーンは少ないと思いますが、概念の理解に役に立ちますね。event.target.value;}}}).mount("#app");自分でディレクティブを定義するdirectiveメソッドVue.jsでは、自分でカスタムディレクティブを定義することもできます。以下はmy-directiveという名前のディレクティブを定義しています。ややこしいですが5つのフック関数(bind、inserted、update、componentUpdated、unbind)を持ち、それぞれが特定のタイミングで呼び出される実装です。unbind時の処理を記述}})上記に対し、HTMLファイルに下記のようにディレクティブを使用すると、自分で定義したフック関数が呼び出されますね。v-my-directive></div>まとめというわけでいったんまとめです!今回学んだディレクティブを使うことで、簡単にDOM要素の表示/非表示、データの双方向バインディング、イベントのハンドリングなど基本的な機能を実現できるようになったはずです(汗)。この学習を通じて、Vue.jsの特徴や機能について深く理解し、これまで以上に品質の高いwebフロントエンド開発ができるようになりたいと思います。デザイン事業部が書いた記事twitterfacebookはてなブックマークpocketお客様のご要望に柔軟に対応いたします。お気軽にご相談ください。cloudpackは、アイレット株式会社が提供するクラウド支援サービスです。問い合わせまでトータルサポート!お問い合わせはこちらアイレットでは、様々な職種で一緒に働ける仲間を募集しています。インフラエンジニア、開発エンジニア、クリエイティブ職、営業職など、様々な職種で一緒に働ける仲間を募集しています。アイレット公式サイト採用情報をご覧ください。プライバシーポリシークラウド導入のご相談、お見積り、サービスについてのご質問などお気軽にお問い合わせください。