JS周りが混沌とする中、自分用のメモ。結局わかりにくくなってしまったが、個人用ということでお許しを。
Native, jQuery, Vue.jsで同じことを書いてみる
試したいことは
- HTML内のテキスト取得
- inputの値の取得
- classの編集
- イベント処理
と言ったところ。
Vue.jsは順番を追って書きづらい（Vue.jsが使いづらいという意味ではない）。
動作イメージ
下記のような感じのものが表示されるはず。
コードを書く
あと、別に<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>