Riot.jsで「日用品残りHPメーター」を作ってみる

カテゴリ:新技術開拓記

公開日:2020.09.01 最終更新日:2020.08.26
このエントリーをはてなブックマークに追加

こんにちは!inglowの開発担当です。
今回は、前回紹介した「Riot.js」を使って簡単なツールを作ってみました。
Riot.jsの簡単な使い方については、前回の記事を参考にしてください!

▼今キテる?riot.jsを試してみた https://inglow.jp/techblog/js-riotjs/

今回作るもの

今回はこんなデザインのものを作成しようと思います。
この日用品があと残りどれくらいなのかをメモできる簡単なアプリケーションです。

HTMLコーディング~タグ埋め込み

まずは、とりあえずHTMLをコーディングしていきます。
実際にブラウザでみたら、アイテムの追加フォームは上の方が使いやすいかなと思い、上に移動させました。
コーディングする時に、繰り返しになるものや、変数を組み込む位置も意識できるといいです。
コーディングの詳細は所略します。

日用品残りHP

台所洗剤

次に、動作を組み込みたい部分をテンプレートタグとして読み込みさせます。今回は、というタグ名で作成します。

日用品残りHP

データの準備

テンプレートタグの準備ができたら、埋め込むデータの構造を考えていきます。
このアプリケーションでは、日用品について、「名前」「残りの数値(今回は100%をmaxとした値)」を一つの日用品としてデータを保持したいので、下記のようなデータの構造になります。
とりあえず、入りそうなデータを直接指定して格納して実装をしてみます。

データが準備できたら、次はeachで日用品の配列データが表示できるようにしていきます。
また、残りHPによってバーの色や文字色が変更できるように、バーの色・文字色も動的に指定されるようにデータを追加します。

{item.name}

各種ボタンの実装

データが準備できたら、次はボタンの実装をしていきます。
まずは、「+」「-」のボタンを実装します。
処理の内容はシンプルで、引数でイベントを取得し、対象itemの「hp」の値を変更しています。
上がり幅・下がり幅を同じにするため、あらかじめ変数で変動値を指定しています。

この状態で一度ボタンをクリックしてみると、HPバーの長さが変更されると思います。
ですが、このままだと、101以上になるし、0以下になってしまうので、101を超えたら100に、0を下回ったら1になるよう調整する共通の関数を用意します。
また、数値を確認してバーや文字の色を変更する処理も共通の関数に記述します。

項目を増やす・減らす処理の実装

次に、項目をふやす処理を書いていきます。
テキストフォームに入力したあと、「+」ボタンを押すことで項目を追加します。
また、バーの左にあるゴミ箱ボタンで項目を削除します。

・・・

保存機能の実装

ここまでくれば大方完成です!が、今の状態だと、せっかくメモしてもセッション切れなどでブラウザを再読み込みした時にデータがなくなってしまうので、「localStorage」にデータを保存するようにします。
セーブする関数と、データを読み込む関数を作成します。
セーブする関数は、値が変動する事にセーブされるように、今まで作った関数の中で最後に呼び出すように追記します。

データの呼び出しは、ページが読み込みされた時に実行したいので、テンプレートタグがマウントされた時に実行されるように処理を書きます。

出来上がり

大方出来上がりました!最後に、より便利にするためにバーの中に、透明な「最大値にする」ボタンと「最小値にするボタン」を組み込みました。
完成系はcodePenで公開しますので、ソースコード等自由に見てください。

さいごに

大規模な開発には向かないとのことですが、このくらいのちょこちょこっとしたものであれば簡単に実装できていいなと思いました。
Riot.jsには、jQueryのajaxのような非同期通信の関数はありませんが、こちらも別のライブラリで対応が可能です。
簡単な動的表示や操作だったらかなり使い勝手がいいなと思いました。

一覧へ戻る