yaakaito.org

世の中のサンプルがTODOアプリなのは案外理にかなってる気がした

Memo

こんにちは!うきょーです! 最近いろいろJavaScriptフレームワークのサンプルを見るんですが、Todoアプリだらけで飽きてきました!!!! というかTodoMVCがそもそもTodoだし、世の中にはTodoアプリがあふれすぎている、もっと面白いの、例えば御坂美琴サーチとかはよ!と思ってたんですが、 風呂にはいって考えてみたら、結構Todoアプリは理にかなってる気がしたので、メモる。

わりとどうでもいいことしか書いてないです。

大抵のTodoアプリの仕様

  • タスクを入力する
  • タスクがリストに追加される
  • チェックをトグルできる
  • リストにはいったタスクを編集できる

こんな感じか

実にただしい・・・

まず

タスクを入力する

ユーザー入力のハンドリングと、モデル化のフロー、生成イベントの発行、保存あたりを表現する。

イベントの受け取り方はUIを書くなら付きまとうし、最初に知らなきゃいけないところと言っても良い。 そして大抵の場合、空だった場合はタスクとして認識しないというバリデーションを挟んでいる。 大体合わせて5~10行くらいのコードだと思うんだけど、この10行は強い・・・。

そのあと、そのデータをアプリケーション内でどう扱うか、というところを提示する。 生で扱っちゃ駄目よ、とクラスにラップするような処理があったりする場合も多いし、作法が読み取れる、すごい。

さらにそれを生成した、というイベントをリスナーに通知する、この辺のパターンはUI書くならキモになってくる部分だし、すごい、簡潔に表現されている・・・。

そして保存する。JavaScriptだとLocalStorageが多いけど、サーバーに送ったりとか、iOSならCoreDataに保存する見たいなサンプルにちゃんとなってる・・・。

タスクがリストに追加される

リストビューあたりを表現する。

リストビューみたいなのはよく使うパターンだし、それをちゃんとやってる、すごい。 コレクション的なものの使い方も分かってくるし、おそらく一番使うUIパターンだし、シンプルなのでわかりやすい。

あとはここで簡単なフィルター機能とかがつくと、ちょっとロジカルなコードも表現される。TodoMVCもたしかにそれがあった。

チェックをトグルできる

モデルに対するアップデートと、それに付随するUIのアップデート、その通知の仕組み。

ただの一個のboolですべてを表現したぞ、すごい!

リストにはいったタスクを編集できる

リストビューの中にある、個々のコンポーネントに対してどのようにハンドリングを行うかが分かる。(まあ上のやつもそれをちょっと含んでいるんだけど)

この辺ってわりと面倒くさいところで、それをどういう風に解決しているのか見れる。なるほど。 ここが気に入るか気に入らないかは結構大切だなーと思うので、一発で把握できてよい。

まだまだ要素はありそう

というわけでTodoアプリはすごかった!飽きたとか言ってすまんかった!!!! このあたりの要素を、この規模で、綺麗に表現しきれるアプリが他に思いつかないのは事実としてある。(せいぜいメモアプリに名称変更するくらい)

「サンプルアプリ作りましょう、Todoとか」じゃなくて、「Todo相当のサンプルアプリを作りましょう」だった。

まとめ

Sはよ