Riotでfluxを学ぶ ToDo編① #riot

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