信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

2018

7

8月

Vuejsって聞いたことある?

テクログ

こんちわ!新納です。


突然ですが皆さんVue.jsって知ってます?

読み方はビュージェーエスです。


JSではいろんなライブラリが出ていますよね。

その中でもjQueryは特に有名で使いやすいライブラリだと思います。

個人的にも、jQuery大好きです。(簡単にかけるので)


ですが、jQueryも簡単は書きやすい反面ミニマムな機能実装にはおすすめですが

大規模、且つ複数のJSファイルに分かれるような状態になると中々メンテが大変な事になってきます。


更に、あまり良いこととは言えませんがjQueryでは階層指定でバインドしている場合も多々あると思うので、

うかつにHTMLをいじると既存処理が動かなくなったよーなんてことになったりします。


.parent().parent.().children()……とかやっていると少しHTMLいじっただけで死ねますよねw


まあ双方向バインディングとかVirtualDOMとかいろいろ特徴があるのでとくとくと説明していきたいところですが、

今回はあまり概念には触れず超簡単なサンプルを使ってjQueryとの書き方の違いを比較したいと思います。


コピペのまま動くようにしたいので今回はどちらのライブラリもCDNからロードしています。


★やりたいこと

痩せるためにはボタンを押したらリストの2番めの要素の文言を『昼はぬいてダイエット』に変える


◆jQueryの場合


-----------------------------------

test_jquery.html



<html lang="ja">
<head>
<meta charset="UTF-8">
<title>てすと</title>
</head>
<body>
<div id="content">
<input type="button" value="痩せるためには">
<ul>
<li>朝ごはん</li>
<li>昼ごはん</li>
<li>晩ごはん</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./test_jquery.js"></script>
</body>
</html>


test_jquery.js


$(function(){
	$("#content input").on("click",function(){
		$("#content ul li").eq(1).text("昼は抜いてダイエット");
	});
});

-----------------------------------------------------------------------


◆Vuejsの場合


------------------------------

test_vue.html


<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>てすと</title>
</head>
<body>
<div id="content">
<form>
<input type="button" value="痩せるためには" v-on:click="ibentohakka" />
</form>
<ul>
<li v-for="gohan in list">{{ gohan }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="./test_vue.js"></script>
</body>
</html>


test_vue.js


var app = new Vue({
	el: '#content',
	data: {
		list: [ '朝ごはん''昼ごはん''晩ごはん' ]
	},
	methods: { 
		ibentohakka: function() {
			Vue.set(this.list1'昼は抜いてダイエット');
		}
	}
});

---------------------------------------------------------


…どうすか?

画面で見ると結果は全く同じです。


『jQueryの方が記述短いじゃねーかいい加減にしろ!』とお怒りの方。

ごもっともです…


Vueは特徴的なところが何点かありますね。


<input type="button" value="痩せるためには" v-on:click="ibentohakka" />

これは、jQueryのonclickと似ています。

これが押されたらjsに書いてあるmethodsのibentohakkaが発火し中の処理

Vue.set(this.list, 1, '昼は抜いてダイエット’);

が実行されます。


<li v-for="gohan in list">{{ gohan }}</li>

jQueryではHTMLに直接リストを記述しましたが、Vueはリストの部分にこれしかありません。

これは、gohan in listの部分で

データ・セットの部分

data: {

list: [ '朝ごはん', '昼ごはん', '晩ごはん' ]

},


のリストをループして出力します。


jQueryだと

$("#content ul li").eq(1).text("昼は抜いてダイエット”);

でdomを指定して値を書き換えていますが、これだと例えばulの要素が1つ上に追加されたら

想定外の部分が書き換わってしまいます。


ですが、Vueであれば

<li v-for="gohan in list">{{ gohan }}</li>

で作り出したものに対して

Vue.set(this.list, 1, '昼は抜いてダイエット');


としているので、仮にHTMLの階層が変わってしまっても変更したい要素がうまく切り替わってくれます。


この短いコードではあまりメリットを感じられないかもしれません。

が、プロジェクト規模が大きくなり、HTMLの改修が増えるほどVueのメリットは大きくなってくると思っています。


ライブラリを読むだけで使えるしjQueryとの共存もできるのでいきなり全書換は嫌だけど簡単な部分だけでもVueで記述していったら

いつか良さに気づく日もくるんじゃないでしょうか。


ではまた!



この記事を書いた人

マスオさん

新納誠一

所 属:
役員
出身地:
新潟
仕事内容:
プログラミング