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