新たな言語を始めたばかりのときは、覚えることが多く大変ですよね。 この記事では、Vue.js初学者に向けて基礎的な構文ルールなどを実例を用いて紹介しています。
僕自身実際のエンジニアの現場でも目にする、頻出かつ基礎的なものばかりです。
実例のコードや結果画像を添付しているので、初学者には非常にわかりやすい内容になっているでしょう。
ぜひコードを理解しVue.jsの基礎をマスターしてください！
・Vue.jsの導入方法
・Vue.jsの基礎構文
・Vue.js頻出のディレクティブ
目次
実行環境
実行環境はJSFiddleを用いて開発を行います。
自身のPCで挙動を確認したい方は、画像の赤枠を選択しVueを選択してください。
Vue.jsの導入
Vue.jsを使用するには、Vueの公式サイトから以下のコードでVueを導入する必要があります。
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
上記のコードをJSFiddleのHTML欄に入力します。
以下のように雛形を作っていきましょう。現時点のHTMLの結果は{{ message }}が表示されている状態です。
ここまでで、Vueの実行環境は整いました。
基本構文
次にVueのインスタンスを作成し、ブラウザ上にHello Vue！を表示させます。
これでVueのアプリケーションが作成されています。中括弧で囲われていたmessageがVue.jsによって文字を表示しています。
これがVue.jsの基本的な構文です。
elとは？
elとはElementの略で、HTMLのElementである#appを指定しています。
このidがappの指定した範囲でVue.jsを記載するとVue.jsとして認識されるということです。
変数の記載方法
dataというのは、Vueインスタンス内で定義できる変数のようなものです。このdataを定義することでHTMLと連携が行われます。
今回ではdata内にmessageと定義した変数はhtml側で{{ }}をつけると呼び出すことができるという仕組みです。
Vue methods 関数の作成
基礎的な変数への代入は、説明してきました。ではメソッドの作成方法をみていきましょう。
ここではボタンをクリックすると文字が反転するメソッドを作成してみます。
このように日本語に切り替えることができました。
これは、‘こんにちはVue！’をthis.messageに代入していることで表示が切り替わっています。
thisとはVueインスタンスそのものを表しており、data内のmessageにアクセスしているという仕組みです。
dataは省略して記載できるよ！
Vueディレクティブについて
Vue.jsを使用する上で重要な役割を果たすものがディレクティブです。
ディレクティブとは、Vue.jsで提供されている属性を示すために v- 接頭辞で利用することができます。
代表的なディレクティブみていきましょう。
v-if 条件分岐
v-ifは条件式を用いて、trueの時に条件を返します。v-elseはv-ifの条件式がfalseのときに呼び出される仕様です。
v-for 繰り返し処理
v-forは配列の中身を繰り返し取り出すことが可能です。Rubyでいうところのeachメソッドの役割があります。
v-bind html属性との連携
v-bindはHTMLの属性とVue.jsのデータを連動する場合に利用するディレクティブです。
また、v-bindは省略して以下のように記載することも可能です。
<div :class='pokemon'>ピカチュー</div>
v-on
v-onは主にイベント発火の際に利用するディレクティブです。具体的にはクリックイベントなどで利用します。
こちらは先ほどVue methods 関数の作成で紹介していているディレクティブと同じです。
先ほど紹介した記述では、以下のように@clickと記載しており、これも省略形になります。
<div id='app'>
<p>{{ message }}</p>
<button @click='change'>変換</button>
</div>
@clickを省略せず記載すると、以下のようにv-on:clickと記述することが可能です。
<div id='app'>
<p>{{ message }}</p>
<button v-on:click='change'>変換</button>
</div>
v-model
v-modelはHTMLとdataを双方向の連携を可能にするVue.jsの醍醐味といえるディレクティブです。
主には、formのinputタグなどと一緒に利用されます。
computed 算出プロパティ
computed算出プロパティーとは、関数の戻り値を変数として利用する場合に利用し、Vue.js内にcomputed要素内に定義します。
Vue.jsのルールとしてreturnを付与するのを忘れないようにしましょう。
Vue.js入門 まとめ
Vue.jsは近年React、Angularとともに普及しており、コンポーネントによって自由度の高いフロントエンドを構築することができるため人気のフレームワークです。
日本国内でも幅広いプロジェクトで利用されております。
企業のフロントエンジニア募集要項でも、Vue.js経験者を採用とする動きがあり費用対効果は高いでしょう。
ぜひ、この機会に学んでみてはいかがでしょうか。
