こんにちは、いまこです。
最近仕事では主にLaravelを使用しており、
新しい技術に触れることが出来て非常に楽しいのですが、
jsはフロントエンジニアさんにまかせっきりになってしまい、あまり触る機会が無くなっており…
そこで!時代に取り残されない為にも!
今回は今流行り?のRiot.jsについて書いていこうと思います!
目次
Riot.jsとは
- React likeを謳う、コンポーネント指向なJavaScriptフレームワーク
- Reactよりも軽量で書きやすい(比較コード)
- VirtualDom
- コンパイラ搭載
- プリコンパイルも可能で好きな言語を使用可能(詳細)
Hello World!
ではとりあえず試してみましょう!
コード
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Riot.js Test</title>
<!-- riot.js読み込み -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js'></script>
</head>
<body>
<!-- helloタグ -->
<hello></hello>
<script type="riot/tag">
// helloタグの中身
<hello>
<h1>{ title }</h1>
// titleを取得
this.title = opts.title;
</hello>
</script>
<script>
// マウント
riot.mount('hello', {
// タイトルをセット
title: 'Hello World!'
});
</script>
</body>
</html>
解説
riot.js読み込み
riot.jsは普通にダウンロード、CDN、パッケージマネージャー等、様々な方法で入手できますが、今回はとりあえずCDNで読み込んでいます。
読み込んでいるのは、コンパイラ付のファイルなので、自動的にコンパイルしてくれます。
helloタグ
riot.jsで作成された、
helloタグの中身
タグの中身を作成します。
普通にhtmlタグを使用することが可能です。
opts
はタグに渡されたオプションで、マウント時にセットしたtitleが入っています。
マウント
最後にマウントを行います。
ここでtitleをセットしています。
TODOアプリ
簡単な使い方がわかったところで、TODOアプリを作ってみようと思います。
コード
html
<!doctype html>
<html>
<head>
<title>Riot todo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/todo.css">
</head>
<body>
<!-- todoタグ出力 -->
<todo></todo>
<!-- todoタグの中身読み込み -->
<script src="js/todo.tag" type="riot/tag"></script>
<!-- riot.js読み込み -->
<script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
<script>
// todoタグマウント
riot.mount('todo', {
title: 'TODOリスト',
// 初期リスト
items: [
{ title: 'タスク1' },
{ title: 'タスク2' },
{ title: 'タスク3' }
],
// ステータス
status: [
{ name: '未対応', value: '1' },
{ name: '対応中', value: '2' },
{ name: '対応済', value: '3' },
]
})
</script>
</body>
</html>
todo.tag
<todo>
<h3>{ opts.title }</h3>
<ul>
<!-- 初期リストループ -->
<li each={ items.filter(whatShow) }>
<!-- done=trueの場合はcompletedクラスが付く、背景色の設定 -->
<label class={ completed: done } style="background-color:{ color }">
<!-- チェックがついたらtoggleメソッドが実行され、doneが変更される -->
<input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
<!-- 値が変更されたらchangeColorメソッドが実行され、colorが変更される -->
<select onchange={ changeColor }>
<!-- ステータスループ -->
<option each={ status } value={ value }>{ name }</option>
</select>
</label>
</li>
</ul>
<!-- submit時にaddメソッドを実行 -->
<form onsubmit={ add }>
<!-- クリック後にeditメソッドを実行 -->
<input name="input" onkeyup={ edit }>
<!-- textが無い場合はdisabled、次のタスクが何個目なのかを表示 -->
<button disabled={ !text }>Add #{ items.filter(whatShow).length + 1 }</button>
<!-- doneがfalseの場合はdisabled(チェックがついていない場合)、クリック時にremoveAllDoneメソッドを実行、チェック数を表示 -->
<button disabled={ items.filter(onlyDone).length == 0 } onclick={ removeAllDone }>X{ items.filter(onlyDone).length }</button>
</form>
<!-- this script tag is optional -->
<script>
// 使用する値の設定
this.items = opts.items
this.status = opts.status
this.color = 'red'
// textの設定
edit(e) {
this.text = e.target.value
}
// textが入っていた場合itemsに追加、追加後はtextを空にする
add(e) {
if (this.text) {
this.items.push({ title: this.text })
this.text = this.input.value = ''
}
}
// done=true(チェックがついている物)を削除(itemsの値を変更)
removeAllDone(e) {
this.items = this.items.filter(function(item) {
return !item.done
})
}
// hidden=trueの物を表示させない
whatShow(item) {
return !item.hidden
}
// done(チェックがついているか)を返す
onlyDone(item) {
return item.done
}
// doneの値を変更
toggle(e) {
var item = e.item
item.done = !item.done
return true
}
// リストの色を変更
changeColor(e) {
var value = e.target.options[e.target.selectedIndex].value
var color
switch (parseInt(value)){
case 1:
color = 'red'
break;
case 2:
color = 'blue'
break;
case 3:
color = 'green'
break;
}
e.target.parentElement.style.backgroundColor = color
}
</script>
</todo>
デモ
デモ
基本的に公式ページTODOアプリのパクリですはい。
しかしそれだけじゃさすがにと思ったので、ステータスを持たせ、
ステータスによってタスクの色が変化する処理を追加しました。
最後に
本当に少しさわってみただけですが、たしかにReactよりも取っ付きやすい感じはありました。
といってもReactもチュートリアルくらいしかやったことがないので、
あまり知識がないやつがこんなふうに感じた、と思っていただければ。
あとずっとjqueryを使っていたので、
javascriptを勉強しないとな・・・と感じました。
使いこなせるようになると楽しいんだろうな・・・
終わり。