私はJavaScriptが嫌いでございます。
最近のフロント側は混沌としている感じがします。
なんとなく流れは見ているのですが手を出す気ならなくて(JavaScript嫌いだし)
流れとして
・SPA(シングルページアプリーケーション)
・MVW→Flux(構造の変化)
・コンポーネント指向
・サーバレスもしくはREST APIだけ
乱立するフレームワーク達
↓
React.js+Redux,Angular.js,Backbone.js,Knockout.js,Vue.js,Riot.jsとか
その他フロント側の色々
↓
□テンプレート系
JSX,jade,Handlebars.js,Mustache.js,Underscore.jsとか
□CSS拡張系
sass,scss,lessとか
□CSS設計系
BEM,SMACSS,MCSS,OOCSS,FLOCSSとか
□タスクランナー系
grunt,gulp,他コンパイル系
□サーバレスアーキテクチャ
[AWS] S3 + API Gateway + Lambda
あー、フロントエンジニア様は本当に大変でございますね。(他人事)
とりあいずやってみよう。
reactの場合
hello world 的なアレ
[js]
import React from ‘react’;
import ReactDOM from ‘react-dom’;
class Todo extends React.Component {
constructor(props) {
super(props);
this.state = {items: [], text: ”};
}ukeireru
render() {
const {items, text} = this.state;
return (
<div>
<h3>TODO</h3>
<ul>
<li>{items.map((item, i)=> <li key={i}>{item}</li>)}</li>
</ul>
<form onSubmit={this._onSubmit}>
<input onChange={this._onChange} value={text}/>
<button>Add #{items.length + 1}</button>
</form>
</div>
);
}
_onChange(e) {
this.setState({text: e.target.value});
}
_onSubmit(e) {
e.preventDefault();
const {items, text} = this.state;
this.setState({
items: items.concat(text),
text: ”
});
}
}
ReactDOM.render(<Todo/>, mountNode);
[/js]
あーうん…なんだろうこのjs感
コンポーネントが増えてきたら混乱しそう(ほぼ確実)
今のところ多くの機能は必要としていない、学習コストがかかるのは避けたい(勉強したくない)
出来るだけシンプルに記述したい(見やすく楽したい)
そんなJavaScriptが嫌いな私でも受け入れできそうなもの
「Riot.js」
とりあいずルーティングと各ページコンテンツ別のtagファイルを作ってテスト
index.html
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riot.js</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/riot/2.5.0/riot+compiler.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1 class="title">Riot.js</h1>
<p class="lead">SPA(ルーティング+TODO+CSS+jQuery)</p>
<ul class="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#todo">TO DO</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#jquery">JQuery</a></li>
</ul>
<!– 各ページ要素を読み込む場所 –>
<page></page>
<!– 各パーツ読み込み –>
<script src="tag/todo.tag" type="riot/tag"></script>
<script src="tag/css.tag" type="riot/tag"></script>
<script src="tag/jquery.tag" type="riot/tag"></script>
<!– ルーティング設定 –>
<script type="text/javascript">
riot.route.start(true);
riot.route(function(page) {
page = page || ‘home’;
riot.mount(‘page’, page);
});
</script>
</div>
</body>
</html>
[/html]
それぞれのタグファイル
htmlとcssとscriptを入れてあるので、ソースコードも見やすい。
todo.tag
[html]
<todo>
<h1>TODO</h1>
<p>Hello World!</p>
<ul>
<li each={items}>
{title}
<form onsubmit={delete}>
<button class="delete">削除</button>
</form>
</li>
</ul>
<form onsubmit={add}>
<input onkeyup={edit}>
<button disabled={!text}>追加</button>
</form>
<style scoped>
:scope ul {
list-style-type:none;
padding-left:0;
margin-bottom:60px;
}
:scope li{
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
margin-bottom:20px;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
:scope form {
display:inline-block;
}
:scope input {
width:100%;
margin-bottom:10px;
display:inline-block;
}
:scope button {
background:#fc0e49;
border:none;
color:#fff;
padding:8px 20px;
}
:scope button.delete {
background:#fff;
border:1px solid #fc0e49;
color:#fc0e49;
padding:8px 8spx;
}
:scope button[disabled]{
opacity:0.3;
}
</style>
<script>
this.items = []
edit(e) {
this.text = e.target.value
}
add(e) {
var input = e.target[0]
this.items.push({title: input.value})
this.text = ”
input.value = ”
}
delete(e) {
this.items.splice(this.items.indexOf(e.item), 1)
}
</script>
</todo>
[/html]
css.tag
[html]
<css>
<h1>CSS</h1>
<p>styleにscopedをつけてCSSを記述</p>
<p>h1のCSSにcolor:#666;をかけているがh1のRiot.jsには影響しない。</p>
<style scoped>
:scope h1 {
color:#666;
}
</style>
<script>
</script>
</css>
[/html]
jquery.tag
[html]
<jquery>
<h1>jQuery</h1>
<p>jQueryのフェードイン</p>
<p>jQueryを使ったアニメーションは明確に止めたりしないと前のアニメーションがそのまま動く場合があったり、うまく動作しない場合がある、jQueryを使う場合はある程度調整が必要だと思う。(rootにかけた場合、IOSだとfadeしない等)</p>
<style scoped>
:scope h1{
opacity:0;
}
</style>
<script>
this.on( ‘updated’,function(){
$(‘h1’, this.root).animate({‘opacity’: ‘1’},3500);
})
</script>
</jquery>
[/html]
□ざっくり感想
・多くのフレームワークがJSの中にhtmlみたいな何かを書くってスタイルが多いけど、Riot.jsはどちらかというとhtmlの中にJSを書いていくスタイル
・CSSをタグごとのスコープで使うことが出来るので、グッバイCSS設計(そのかわり書くコードの量は増えると思う)
・jQueryとの併用可能だが、アニメーションとか使う場合は注意が必要
・コンポーネントにhtml,css,jsを書くことが出来る。MVC的な何かをまとめられる
・オブザーバ機能
・コンパイラ(lessとか)
・簡単なルーティング
・RESTはjQueryとかでやる
□考えること
・コンポーネントの複雑化(このコンポーネントどうなってんだだろう…細分化しすぎてよくわかんね)設計やルールが必要
・パラメータの複雑化(柔軟性や再利用できるものを重視して…パラメータ多すぎて訳がわかんね)書き換えが必要な箇所を明確にする、コンポーネントの拡張性をコントロールする
