Help us understand the problem. What is going on with this article?

Riotでfluxを学ぶ ToDo編①

More than 3 years have 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にはまだ遠い。

0ceanMoo
WEBプログラマ。 主にサーバサイドを担当。Perl、Python、PHPなど。 けど結局フロントエンドもやるよね。小さい会社だし。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away