Edited at

Vue.jsに至る道(Native, jQuery, Vue.js書き比べ)

JS周りが混沌とする中、自分用のメモ。結局わかりにくくなってしまったが、個人用ということでお許しを。


Native, jQuery, Vue.jsで同じことを書いてみる


試したいことは


  • HTML内のテキスト取得

  • inputの値の取得

  • classの編集

  • イベント処理

と言ったところ。

Vue.jsは順番を追って書きづらい(Vue.jsが使いづらいという意味ではない)。


動作イメージ

下記のような感じのものが表示されるはず。

スクリーンショット 2018-10-09 12.52.09.png


コードを書く

あと、別に<script>分ける必要ないのだけど、わかりやすさのために分けました。

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>test</title>
<style>
/* 切り替え用のCSS */
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color:green;
}
</style>
</head>

<body>

<div>
<h3></h3>
<!-- native -->
<div id="native">
<p id="native_text">Nativeさん。こんにちは。</p>
<p><input type="text" value="native" id="native_input"></p>
<p><button id="native_button">native</button></p>
</div>
<!-- jQuery -->
<div id="jquery">
<p id="jquery_text">jQueryさん。こんにちは。</p>
<p><input type="text" value="jquery" id="jquery_input"></p>
<p><button id="jquery_button">jQuery</button></p>
</div>
<!-- vuejs -->
<div id="vuejs">
<p id="vuejs_text" v-bind:class="className">{{ message }}</p>
<p><input type="text" value="vuejs" id="vuejs_text" v-model="vuejs_input"></p>
<p><button id="vuejs_button" v-on:click="vuejs_click">Vue.js</button></p>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
//Native
(function(){
//値の取得(普通の要素)
var element1 = document.getElementById("native_text");
console.log(element1.textContent);
//値の取得(input)
var element2 = document.getElementById("native_input");
console.log(element2.value);
//classをいじる
element1.classList.add("red");
//イベント
document.getElementById("native_button").addEventListener("click", function(){
alert("native");
});
})();
</script>
<script>
//jQuery
$(function(){
//値の取得(普通の要素)
var text1 = $("#jquery_text").text();
console.log(text1);
//値の取得(input)
var text2 = $("#jquery_input").val();
console.log(text2);
//classをいじる
$("#jquery_text").addClass("blue");
//イベント
$("#jquery_button").click(function(){
alert("jquery");
});
});
</script>
<script>
//Vue.js
var app = new Vue({
el: "#vuejs",
data: {
message: "Vue.jsさん。こんにちは",
className: "green",
vuejs_input: "vuejs"
},
methods : {
vuejs_click : function(){
alert("vuejs");
}
}
})
</script>
</body>

</html>


おまけ


React

同じHTML内に書ききれない(Vueがシンプルってことかな)。

素の状態だと、input毎にonChange書かないと行けなかったり・・・しんどい。

Reactは


  • 何をするにもJSXで書く

  • 共通のデータはstateで管理

  • stateはsetState()で書き換える(でしか、書き換えられない)

  • inputではvalueと紐付けるが、onChangeイベントでゴニョゴニョ(値のマップと再描画)しないと動かない

Vueに慣れてるとちょっとしんどい。

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>react test</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<style>
.purple{
color: purple;
}
</style>
<body>
<div id="root"></div>
<script type="text/babel">
(()=>{

class ReactForm extends React.Component{

constructor(){
super();
this.state = {
data: {
name: ''
}
};
this.send = this.send.bind(this);
this.inputChange = this.inputChange.bind(this);
}

inputChange(event){

var data = this.state.data;

switch(event.target.name){
case 'name':
data.name = event.target.value;
break;
default:
break;
}

this.setState({
data: data
});

}

send(event){
event.preventDefault();
console.log(this.state.data.name);
alert("react");
}

render(){
return (
<form>
<input type="text" name="name" value={this.state.data.name} onChange={this.inputChange}/>
<button onClick={this.send}>送信</button>
</form>
);
}
}

function Greeting(props){
return (
<p className={props.color}>Reactさん。こんにちは</p>
);
}

ReactDOM.render(
<React.Fragment>
<Greeting color="purple"/>
<ReactForm/>
</React.Fragment>,
document.getElementById('root')
);

})();
</script>
</body>


参考