Riot.js+browserify+riotifyでtodoリストを作ってみる【基本的な使い方】

スポンサーリンク
Pocket
LINEで送る

Riotjsは10KBほどの軽量javascriptフレームワーク。

ドキュメントを読んでみるとカスタムタグというjavascriptとhtmlが内包されたコンポーネントを作って組み合わせていく感じ。

 

Riotjsを使い方

とりあえず、Todoリスト作成を目標に作っていきます。

 

必要なモジュールをインストールする

まずは必要なものnpmでインストール

nppm init

npm  install -D riot riot http-server browserify riotify 

これでインストール完了

riot: Rotjsの本体

http-server: webサーバー

browserify: モジュール管理できるやつ

riotify: Riotjsの.tagファイルをbrowserifyでrequireできるようにするもの

これで準備完了

 

カスタムタグを使ってみる

 

まずはカスタムタグを作ります。

今回はtodoリストを作るのでカスタムタグを作っていきます。

<todo>
  <h2>todo list</h2>
  <ul>
    <li each={list}>{ title }</li>
  </ul>
  this.list = [
    {title: ‘tag1’},
    {title: ‘tag2’},
    {title: ‘tag3’}
]
</todo>

Riotjsはこんな感じでhtmlタグとjavascriptをコンポーネント内に一つにまとめることができます。

 

main.js

riot = require('riot')
todo = require('./tags/todo.tag')
riot.mount(todo) 

riotjsと使うカスタムタグを読み込み、マウントさせることで使うことができます。

 

これをビルドします。

browserify -t riotify -e main.js -o bundle.js

riotifyを使うことで.tag拡張子をrequireすることができます。

 

これをブラウザで確認すると

スポンサーリンク

こんな感じで表示されます。

 

削除機能をつけてみる

クリックしたらリストから項目を削除する機能をつけていきます。

riotjsでクリックイベントをつけるのにonclickを使います。

 

<todo>
 <h2>todo list</h2>
 <ul>
 <li each={list} onclick="{ parent.remove }">
 { title }
 </li>
 </ul>
this.list = [
 {title: 'tag1'},
 {title: 'tag2'},
 {title: 'tag3'}
]
remove(event) {
 var item = event.item
 var index = this.list.indexOf(item)
 this.list.splice(index, 1)
}
</todo>

removeイベントを追加します。

なぜparentかというとループの中だからです。

event.itemでループ中のアイテムにアクセスできます

 

classを付与する

<todo>
 <h2>todo list</h2>
 <ul>
 <li each={list} class="{active: active}" onclick="{ parent.remove }">
 { title }
 </li>
 </ul>
this.list = [
 {title: 'tag1', active: true},
 {title: 'tag2', active: true},
 {title: 'tag3', active: false}
]
remove(event) {
 var item = event.item
 var index = this.list.indexOf(item)
 this.list.splice(index, 1)
}
</todo>

これでjsonのactiveがtrueだと’active’というclassが付与されます

 

項目を追加する

<todo>
 <h2>todo list</h2>
 <ul>
 <li each={list} class="{active: active}" onclick="{ parent.remove }">
 { title }
 </li>
 </ul>
 <input onkeyup="{ updateInput }" type="text">
 <button onclick="{ add }">追加</button>
this.list = [
 {title: 'tag1', active: true},
 {title: 'tag2', active: true},
 {title: 'tag3', active: false}
]
updateInput(event) {
 this.itemName = event.target.value
}
add(event) {
 this.list.push({title: this.itemName })
}
remove(event) {
 var item = event.item
 var index = this.list.indexOf(item)
 this.list.splice(index, 1)
}
</todo>

フォーム入力中にitemNameを更新し、addイベントでlistに追加します。

todoリストの基本的な機能を実装していきました。

 

まとめ

独自のタグとかもとくにないので学習コストも低く割と使いやすいフレームワークなのかなと思います。

今回のフォルダはgithubで公開しています。

https://github.com/komayuki/example-Riotjs