【Vue.js】はじめの一歩
はじめに
世の中にJavascriptのフレームワークはいくつかありますが、その中でも人気上位の「Vue.js」について見ていきたいと思います。導入方法とごく基本的な文法事項、個人的に便利だなと感じる点を紹介したいと思います。
jQueryとの違い
よく引き合いに出される「jQuery」との違いについて、簡単に触れて行こうと思います。
jQueryはJavascriptを簡単な文法で記述できるように設計されたライブラリであるのに対し、Vue.jsはJavascriptでの開発を効率化させてくれるフレームワークです。
jQueryが「Javascriptでの記述を簡素化する」のに対し、Vue.jsは「データの送受信や加工など、全体的な処理の流れを枠組みにする」という感じで、それぞれ役割を異にしているという認識で良いと思います。
導入・使用準備
公式サイト上で丁寧なガイド等が用意されているので、そちらを参照しながらでも環境構築・使用は充分可能だと思います。導入自体は至って簡単です。jQueryをCDNで導入する際と同じ要領で、対象のindex.htmlに下のコードを貼り付けます。
<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>開発用と本番用の二つのバージョンがあるので、練習する際は開発用コードを用いましょう。下の画像みたいになると思います。
メッセージの出力
Vueの使用準備は整ったので、早速記述を進めていきます。
試しに以下のコードを書いてみましょう。
<div id="app01">
{{ message }}
</div>var app = new Vue({
el: "#app01", //対象となるID
data: {
message: "こんにちは"
}
});
そうすると、div#app01の中に「こんにちは」という文字列が表示されたと思います。通常なら「{{ message }}」というテキストがそのまま表示されるはずなのですが、ここでVue.jsが働きかけてくるのです。(messageという単語を「{{」「}}」で囲むのがポイントです)
var app = new Vue({
//ここに諸々の記述を書いていきます
});Javascriptの記述を詳しくみていきましょう。上の記述形式がVue.jsの基本形となりますので、覚えてしまいましょう。ここに、「div#app01を対象要素として、その中にdataで定義した文字列を表示させる」という内容の記述を書いていきます。
el: "#app01", //対象となるID
data: {
message: "こんにちは"
}いくつかの値を設定するだけで、簡単に出来てしまいます。
「el: “#app01″」という記述で対象範囲を設定、「message: “こんにちは”」という記述でmessageの値を定義するだけで、任意の場所に任意の文字列を表示させることが出来るようになります。
コンポーネント化
これだけだとVue.jsの恩恵はあまり感じないとは思いますが、もちろん他にも様々な機能が備わっています。その中でも個人的に便利だなと感じたのが、「コンポーネント」機能です。ざっくり紹介すると、HTMLの一部分を切り取ってコンポーネント化して自由に呼び出せるようにする、というものです。サイト全体で使い回すものに適用しておくと、更新もグッと楽になりますね。
// navigation
Vue.component('l-nav',{
template:`
<div class="l-nav">
<ul class="l-nav__menu">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="service.html">service</a></li>
<li><a href="#">recruit</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">comment</a></li>
</ul>
</div>
`
});
var app = new Vue({
el: "#l-nav"
});<div id="l-nav">
<l-nav></l-nav>
</div>まず、Vueの方で独自のタグを定義してコンポーネント化したいHTMLを登録します。そこで定義したタグをHTML側で記述することで登録されているHTMLを呼び出すことができる、というのが大まかな流れになります。
詳しくは公式のドキュメントを参照してください。
