今キテる?riot.jsを試してみた

カテゴリ:新技術開拓記

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

こんにちは。inglowの開発担当です。
今回は、javascriptのライブラリを探していてみつけた、「Riot.js」を試してみました。

Riot.jsとは?

詳しい説明は、他にたくさん参考になる記事がありますので、そちらにおまかせして…。
ざっくり説明すると、HTMLタグ・css・javascriptをひとまとめにして、HTMLでいう、「div」や「p」のようなタグを自分で作成して表示する形のライブラリです。(コンポーネント型と呼ぶそうです。)
表示やスタイル、処理内容をひとまとめに管理することで、どこで操作された!?といった部分が追いかけやすくなります。
また、表示については、データ駆動となっており、変数の内容が変更されるとHTMLでの表示内容も一緒に代わってくれるので、jqueryのように、変数の内容が変更されるたびに処理を書く必要がありません。
最近はやっている「TypeScript」のように、環境の構築をしなくても動作させることができるので、さくっとお試しで使ってみることもできます。

始め方

まずは、riot.jsの簡単な使い方を紹介します。テキストを表示するだけであれば4ステップでできます!
はじめに、riot.jsをscriptタグで読み込みます。
ライブラリのファイルをダウンロードすることもできますが、今回はCDNで読み込みをします。

次に、HTMLページに「Hello World!」と表示する処理を書いてみます。
riot.jsでは、スクリプトで操作したい範囲をオリジナルのタグとして定義して読み込むようにします。
まずは、表示部分を作成します。

次に、作成したタグをHTML内で使えるように、「マウント」します。
マウントの処理は必ずテンプレートタグの定義より後に記述します。

最後に、作成したタグをHTML内に追加します。タグの書き方は、他のHTMLタグと同じように書きます。

ここまでできたら、HTMLファイルをブラウザで表示してみます。すると、画面に「Hello World!」と表示されていると思います。

簡単な使い方

よく使う処理を簡単に紹介していきます。

変数の定義

作成したタグの外に、「this.[変数名]」で変数を定義することができます。

関数の定義

作成したタグの外に、「[関数名](){ //処理内容 }」で関数を定義することができます。関数は、クリックイベントを要素に追加する際に使用したり、他の関数から呼び出して使用することができます。

テキストの表示

変数を「{}」で囲って指定することで変数の内容を表示することができます。

要素の繰り返し処理

繰り返したい要素にeachで変数を指定することで繰り返し処理をします。

クリックしたときの動作を指定する

onclick={[関数名]}とすることで押したときに関数が動くようにすることができます。

inputタグの入力内容を取得する

inputタグに指定したnameを、処理中に「this.[inputのname]」とすることで、入力された値を取得することができます。

ちょっとしたものを作ってみる

先ほど紹介した使い方をもとに、テキストフォームに入力した内容をリストに表示する処理を作ってみます。

まずは、HTMLファイルを作成し、その中にテンプレートタグを準備します。

次に、リストデータを格納する変数を準備します。

リストデータを表示するliを準備します。

テキストフォームとボタンを準備します。

ボタンを押したときの処理を作成し、ボタンのクリックイベントに指定します。

これでブラウザで表示をしてみましょう。
入力した内容がリストに追加される処理ができたと思います。

さいごに

データ駆動型なので、jqueryのように処理があるたびにDOM操作の処理を書く必要はないのと、手軽に始められるのが大変気に入っています。(自分はjqueryも好きです…!!)
今回はあまり実用的ではないものを作成しましたが、次回はもうちょっと実用的なものを作成してみようと思います。

一覧へ戻る