Edited at

Riotでfluxを学ぶ ToDo編①

More than 1 year has passed since last update.

fluxとはなんぞ?

調べてもイマイチしっくりくる解説がないので、

自分で書いてみてその便利さを体験してみようと思います。

予定としてはこんな感じ。

さて始めるか

っと思いましたが、そもそもriotの使い方が怪しいので←

この章では、fluxとか考えず普通の使い方で簡単なToDoリストを作ってみます。

今回作る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を2件登録


    • 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にはまだ遠い。