初めてのVue.js
初めてのVue.js
majirouです。社内でVue.jsを広めるために記事を投下します。
- 脱jQuery！と共に、最近のフロントエンドJSフレームワークに慣れ親しむ記事です。
- 本稿では、Vue（ビュー）を用いたページ作りを記述します。
※ すいませんが、majirouは Vueしか触っていません。 - 歴史とか、技術的な背景はいったんすっとばし、「慣れる」に重きを置きます。
フロントエンドJSフレームワーク御三家
- Angular
- React
- Vue
この３形体…色見や特色から、ヒトカゲ・ゼニガメ・フシギダネって話もありますね…。
なんとなく、親しみがわいたと思いますので、 今回は「フシギダネ」もとい「Vue.js！君に決めた！！」
公式の説明は以下参照ですが、感覚的にVueがどんなものかを理解してから読んだ方が良いと思います。 ※ Vueは公式ドキュメントに日本語が充実してるから～とか言われますが、初学者には不慣れな言葉が飛び交うためオススメしません。
はじめにVue.js とは？ https://jp.vuejs.org/v2/guide/index.html
インストール
CDNで簡単に扱うことにします。
<html> <head> <!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> </body> </html>
以上です
Hello Vue!
VueはJavaScriptなので、scriptタグで呼び出していきます。
ポイントは、
* vueを適用させるトップDOM要素に任意のidをつける
* そのidに対して、vueをインスタンス化する
* データの呼び出しは {{データ名}}で行う
<html> <head> <!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> <script> var app = new Vue({ el: '#app', // vueを適用させるトップDOM要素のidを指定します data: { // #app配下で呼び出すデータなどを定義します。 message: 'Hello Vue!' } }) </script> </html>
このHTMLファイルを開くと下図のようになります。
バインディング
jQueryより楽！と最初に思ったのがこの機能でした。
例として、inputタグの値を処理していくスクリプトを組み込んでいきます。
<html> <head> <!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} <br> <input v-model="message"> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </html>
以下のような画面になり、入力フォーム内にも{{message}}の内容が表示されました。
この入力フォームに「こんにちはビュー！」と入力してみます。
入力内容に連動して、messageが書き換えられました。
jQueryで考える
仮にこの操作をjQueryで行うとどうでしょうか。 （だいぶ久しぶりにjQueryを書いたのでもっと楽な書き方があるかもしれませんが…）
<html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> <div id="app"> <span></span><br> <input> </div> </body> <script> $(document).ready( function(){ var message = 'Hello Vue!' ; $("#app input").on("change", function( event ){ message = event.target.value ; $("#app span").text( message ) ; } ) ; $("#app span").text( message ) ; $("#app input").val( message ) ; } ) ; </script> </html>
実際やろうとすると結構手間です。
- 都度都度どこそこのDOM要素に対して何をするという記述
- 常にDOMを意識する必要がある
- デザイン変更で順番やID名、クラス名が変わるとロジック部までに影響する可能性あり。
もう私はこの記述に戻ることはできません。 これだけでも、jQueryの面倒くささが、大分Vueで軽減されることが実感できると思います。
