fluxとはなんぞ？
調べてもイマイチしっくりくる解説がないので、
自分で書いてみてその便利さを体験してみようと思います。
予定としてはこんな感じ。
- Riotでfluxを学ぶ ToDo編①（本記事）
- Riotでfluxを学ぶ ToDo編②
- Riotでfluxを学ぶ ToDo編③
- Riotとfluxでカウンターとカレンダーを試す
さて始めるか
っと思いましたが、そもそもriotの使い方が怪しいので←
この章では、fluxとか考えず普通の使い方で簡単なToDoリストを作ってみます。
riotのカスタムタグ
todo.tag
<todo></todo>
<script type="riot/tag">
<todo>
<h1>TODO - 普通の使い方</h1>
<form onsubmit="{addTask}">
<input ref="task" placeholder="新規タスクを入力">
<button>追加</button>
</form>
<ul>
<li class="{is-done: task.done}" each="{task in tasks}" onclick="{toggleTask.bind(this, task)}">{task.title}</li>
</ul>
<style>
.is-done {
text-decoration: line-through;
color: #ccc;
}
</style>
this.tasks = [
{title:"riotで何か作ってみる", done:true},
{title:"fluxを実践してみる", done:false},
];
addTask(e) {
e.preventDefault()
this.tasks.push({title:this.refs.task.value, done:false})
this.refs.task.value = ""
}
toggleTask(task, e) {
task.done = !task.done
}
</todo>
</script>
riot.jsの読み込みとカスタムタグのマウント
todo.html
<script src="https://cdn.jsdelivr.net/npm/riot@3.6.0/riot+compiler.min.js"></script>
<script>
riot.mount("todo")
</script>
ちなみに、riotの利点はサっとHTMLに直接書いてしまえる事だと考えているので、
簡単なものを試すだけなのに、ファイル分割してタスクランナーでコンパイルなんてしないです。
もちろん、巨大なプロジェクトではそれなりの開発環境を整えますよ。
どっちもイケるってのが、やはりriotの凄いところだ。
小さなものもriotで、
大きなものもriotで。
riotもっと流行れ！
コード解説
ん、シンプルだ。
思いのほかスッキリしたのが書けたけど、一応説明しますと
- コンストラクタ？でthis.tasksにToDoを２件登録
- this.tasksを、liタグのループで展開されるよう、埋め込んでおく
- 追加ボタンのonclickにaddTask()を登録
- addTask()では、入力されたToDoをthis.tasksに追加する
- riotが自動で、this.update()を実行する
- この時、liタグに埋め込んだ this.tasks のループ部分が再描写されるので、追加したToDoが追加表示されることになる
- liタグに表示されるToDoのonclickに、toggoleTask()を登録
- toggleTask()では、ToDoの状態を反転させるだけ
- addTask()と同様に、自動でthis.update()が実行され、状態が更新された最新のthis.tasksでToDoリストが再描写される
この書き方で十分分かりやすいし、
MVCだのfluxだのって考え方を取り入れなくても問題ないんじゃないの？
そんなの採用したら、複雑化して余計分からなくなるだけじゃないの？
と思わないこともない。
っがそんな無秩序に書いていけば、それほど遠くない未来にカオスになるだろう、
というのも想像に難くない。と思わなくもない。
全体が頭に入っている状態なら、細かいトコにすら目が届くが、
数カ月後に機能を追加するとなった時、この無秩序に何でも追加できる環境は、カオスを生み出す助けをする
いや、秩序のない環境で書かれたコードは、既にカオスだ。
今はカオスに見えなくても、それはカオスなのだ。
まぁカオスの話はおいといて、
次は、riot.observableを使って、このToDoリストを書きなおしてみる事にする。
fluxにはまだ遠い。