今キテる？riot.jsを試してみた
カテゴリ：新技術開拓記
こんにちは。inglowの開発担当です。
今回は、javascriptのライブラリを探していてみつけた、「Riot.js」を試してみました。
Riot.jsとは？
詳しい説明は、他にたくさん参考になる記事がありますので、そちらにおまかせして…。
ざっくり説明すると、HTMLタグ・css・javascriptをひとまとめにして、HTMLでいう、「div」や「p」のようなタグを自分で作成して表示する形のライブラリです。（コンポーネント型と呼ぶそうです。）
表示やスタイル、処理内容をひとまとめに管理することで、どこで操作された！？といった部分が追いかけやすくなります。
また、表示については、データ駆動となっており、変数の内容が変更されるとHTMLでの表示内容も一緒に代わってくれるので、jqueryのように、変数の内容が変更されるたびに処理を書く必要がありません。
最近はやっている「TypeScript」のように、環境の構築をしなくても動作させることができるので、さくっとお試しで使ってみることもできます。
始め方
まずは、riot.jsの簡単な使い方を紹介します。テキストを表示するだけであれば4ステップでできます！
はじめに、riot.jsをscriptタグで読み込みます。
ライブラリのファイルをダウンロードすることもできますが、今回はCDNで読み込みをします。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.2/riot+compiler.min.js"></script> |
次に、HTMLページに「Hello World!」と表示する処理を書いてみます。
riot.jsでは、スクリプトで操作したい範囲をオリジナルのタグとして定義して読み込むようにします。
まずは、表示部分を作成します。
|
1 2 3 4 5 |
<script type="riot/tag"> <testtag> //ここのタグの名前は自分で自由につけます。 <div>Hello World!</div> </testtag> </script> |
次に、作成したタグをHTML内で使えるように、「マウント」します。
マウントの処理は必ずテンプレートタグの定義より後に記述します。
|
1 |
<script type="text/javascript">riot.mount('testtag')</script> |
最後に、作成したタグをHTML内に追加します。タグの書き方は、他のHTMLタグと同じように書きます。
|
1 |
<testtag></testtag> |
ここまでできたら、HTMLファイルをブラウザで表示してみます。すると、画面に「Hello World！」と表示されていると思います。
簡単な使い方
よく使う処理を簡単に紹介していきます。
変数の定義
作成したタグの外に、「this.[変数名]」で変数を定義することができます。
|
1 2 3 4 5 6 |
<script type="riot/tag"> <testtag> <p>testtagの表示内容</p> this.test_name = '変数を指定して表示'; </testtag> </script> |
関数の定義
作成したタグの外に、「[関数名](){ //処理内容 }」で関数を定義することができます。関数は、クリックイベントを要素に追加する際に使用したり、他の関数から呼び出して使用することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="riot/tag"> <testtag> <p>testtagの表示内容</p> testActionA(){ //この中に処理を書いていきます。 } testActionB(){ //this.[関数名]で他の関数を呼び出すこともできます。 this.testActionA(); } </testtag> </script> |
テキストの表示
変数を「{}」で囲って指定することで変数の内容を表示することができます。
|
1 2 3 4 5 6 |
<script type="riot/tag"> <testtag> <p>{test_name}</p> this.test_name = '変数を指定して表示'; </testtag> </script> |
要素の繰り返し処理
繰り返したい要素にeachで変数を指定することで繰り返し処理をします。
|
1 2 3 4 5 6 7 8 9 10 |
<script type="riot/tag"> <testtag> <ul> <li each={name in test_list}></li> </ul> this.test_list = [ 'アイテム1', 'アイテム2', 'アイテム3' ]; </testtag> </script> |
クリックしたときの動作を指定する
onclick={[関数名]}とすることで押したときに関数が動くようにすることができます。
|
1 2 3 4 5 6 7 8 |
<script type="riot/tag"> <testtag> <button onclick={testActionA}>やっほーボタン</button> testActionA(){ alert('やっほー') } </testtag> </script> |
inputタグの入力内容を取得する
inputタグに指定したnameを、処理中に「this.[inputのname]」とすることで、入力された値を取得することができます。
|
1 2 3 4 5 6 7 8 |
<script type="riot/tag"> <testtag> <input name="testInput" /><button onclick={getInputValue}>アラートする</button> getInputValue(){ alert(this.testInput.value); } </testtag> </script> |
ちょっとしたものを作ってみる
先ほど紹介した使い方をもとに、テキストフォームに入力した内容をリストに表示する処理を作ってみます。
まずは、HTMLファイルを作成し、その中にテンプレートタグを準備します。
|
1 2 3 4 5 6 7 |
<!-- ライブラリの読み込みは所略します --> <testlist></testlist> <script type="riot/tag"> <testlist> </testlist> </script> <script type="text/javascript">riot.mount('testlist')</script> |
次に、リストデータを格納する変数を準備します。
|
1 2 3 4 5 6 7 |
<testlist></testlist> <script type="riot/tag"> <testlist> this.data_list = []; //配列で準備 </testlist> </script> <script type="text/javascript">riot.mount('testlist')</script> |
リストデータを表示するliを準備します。
|
1 2 3 4 5 6 7 8 9 10 |
<testlist></testlist> <script type="riot/tag"> <testlist> <ul> <li each={value in data_list}>{value}</li> </ul> this.data_list = []; //配列で準備 </testlist> </script> <script type="text/javascript">riot.mount('testlist')</script> |
テキストフォームとボタンを準備します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<testlist></testlist> <script type="riot/tag"> <testlist> <ul> <li each={value in data_list}>{value}</li> </ul> <div><input type="text" name="addvalue" /><button>追加</button></div> this.data_list = []; //配列で準備 </testlist> </script> <script type="text/javascript">riot.mount('testlist')</script> |
ボタンを押したときの処理を作成し、ボタンのクリックイベントに指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<testlist></testlist> <script type="riot/tag"> <testlist> <ul> <li each={value in data_list}>{value}</li> </ul> <div><input type="text" name="addvalue" /><button>追加</button></div> this.data_list = []; //配列で準備 addValue(){ this.data_list.push(this.addvalue.value); } </testlist> </script> <script type="text/javascript">riot.mount('testlist')</script> |
これでブラウザで表示をしてみましょう。
入力した内容がリストに追加される処理ができたと思います。
さいごに
データ駆動型なので、jqueryのように処理があるたびにDOM操作の処理を書く必要はないのと、手軽に始められるのが大変気に入っています。（自分はjqueryも好きです…！！）
今回はあまり実用的ではないものを作成しましたが、次回はもうちょっと実用的なものを作成してみようと思います。
