2019.12.04 - Article

Riot.jsで作った消費税計算ツールとRiot v3の好きな所

Tag:

これはRiot.js Advent Calendar 2019の4日目の記事です。

Riot.jsVue.jsがGitHubスター1万程の時は同じぐらいの知名度だったと思いますが、今では大きく差をつけられアドベントカレンダーも空きが目立つので(涙)、少しでも布教になればと書かせてもらいました。

しかしながら僕が好きなのはv3時代のRiotです。
最新版はv4ですが、v4になって制約が多くなりriot特有のメリットが薄れたと思うのでv3のまま使っています。

制作物


タックス | 消費税計算ツール

Riot.jsはツール的なもの作る時とても便利ですね。
v3でriotを使いたい時の参考にして下さい。
cssは無視しています。

index.html

 

tag.html

Riot v3 こうすると使いやすい

Riot.js v3は自由に書けるのですが使っていく内にある程度ルールを定めて使った方が使いやすくなりました。
そうとう意識の低いルールになっていますが、とてもコードを書くのが楽しいです。
上記のコードも基本的にこの規則に従っています。

1. settings.autoUpdateをfalseにして自動でタグが更新されないようにする
理由:自動でupdateするとパフォーマンスが悪いので手動でupdateするようにします。

2. タグ内でまずlet tag = this;と定義してインスタンスをtagという変数で扱う
理由:thisだと呼び出し元によって対象が変わるため

3. onclickなどのイベントにバインドする関数(イベントハンドラ)の名前はehではじめる
理由:どの関数がイベントハンドラ用か、わからなくなるから

4. riot-mainというカスタムタグを作り、その中でほかのカスタムタグを読み込み、ifディレクティブで調整する
理由:最初のみmountメソッドを使えば、以降はデータに応じで自動でmount, unmountしてくれる

5. tagファイルの拡張子を.htmlにする
理由:エディタでhtml, js, cssのシンタックスハイライトがきちんと動作する

6. 1アプリケーション1ファイルで複数のタグをまとめて書く
理由:処理を探すのが楽

7. タグの事前コンパイルはせずにブラウザでコンパイルする
理由:ビルドツールが不要なので気軽に書ける

8. タグ名はriot-で始める
理由:Riotによって作成されたタグだとわかりやすい

9. タグはdata-is属性でマウントする
理由:spanやliやtdなどで使えるので意図したレイアウトにしやすい

他にも作ってます

他にも各種サービス・ツールをRiot.jsを使って作っています。
ウェブゴトのサービス

RIOT! RIOT! RIOT!

コメントを残す