RIOT.JS-クイックガイド
RIOT.jsは、Webアプリケーションを開発するための非常に小さいサイズ/軽量のWebコンポーネントベースのUIライブラリです。これは、React.JSとPolymerの利点を、非常に簡潔な実装と、学習して使用するための単純な構造と組み合わせたものです。縮小版はほぼ10KBサイズです。
以下はRIOT.jsの主な機能です
式のバインディング
DOMの更新およびリフロー中の非常に小さなペイロード。
変更は、親タグから子タグ/コントロールに下向きに伝播します。
コンパイル済みの式を使用し、それらをキャッシュしてパフォーマンスを向上させます。
ライフサイクルイベントを適切に制御します。
基準に従う
独自のイベントシステムはありません
ポリフィルライブラリへの依存はありません。
既存のHTMLに追加の属性は追加されません。
jQueryとうまく統合します。
基本的価値観
RIOT.jsは、以下の値を考慮して開発されています。
シンプルでミニマル。
習得と実装が簡単です。
ユーザーインターフェイスを構築するためのリアクティブビューを提供します。
独立したモジュールでAPIを構築するためのイベントライブラリを提供します。
ブラウザの戻るボタンでアプリケーションの動作を処理します。
RIOTjsを使用する方法は2つあります。
Local Installation − RIOTライブラリをローカルマシンにダウンロードして、HTMLコードに含めることができます。
CDN Based Version − RIOTライブラリをコンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。
ローカルインストール
に移動します https://riot.js.org 利用可能な最新バージョンをダウンロードします。
今すぐダウンロードしてください riot.min.js / riotjsなど、Webサイトのディレクトリにあるファイル。
例
これで、次のようにriotjsライブラリをHTMLファイルに含めることができます-
<!DOCTYPE html>
<html>
<head>
<script src = "/riotjs/riot.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>これにより、次の結果が生成されます-
CDNベースのバージョン
コンテンツ配信ネットワーク（CDN）から直接、RIOTjsライブラリをHTMLコードに含めることができます。GoogleとMicrosoftは、最新バージョンのコンテンツ配信を提供しています。
Note −このチュートリアルでは、CDNJSバージョンのライブラリを使用しています。
例
CDNJSのjQueryライブラリを使用して上記の例を書き直してみましょう。
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>これにより、次の結果が生成されます-
RIOTは、カスタムの再利用可能なhtmlタグを作成することで機能します。これらのタグはWebコンポーネントに似ており、ページやWebアプリ間で再利用できます。
RIOTを使用する手順
HTMLページにriot.jsをインポートします。
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>スクリプトセクションを開始し、タグコンテンツをhtmlとして定義します。スクリプトを含めることもできます。これについては、チュートリアルの後半で説明します。
var tagHtml = "<h1>Hello World!</h1>";riot.tag（）メソッドを使用してタグを定義します。タグの名前、messageTag、およびタグの内容を含む変数を渡します。
riot.tag("messageTag", tagHtml);riot.mount（）メソッドを使用してタグをマウントします。タグの名前messageTagを渡します。マウントプロセスは、htmlページに出現するすべてのメッセージタグをマウントします。MessageTagタグは、マウントする前にriot.jsを使用して定義する必要があります。
riot.mount("messageTag");
</script>以下は完全な例です。
例
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>これにより、次の結果が生成されます-
RIOTは、カスタムの再利用可能なhtmlタグを作成することで機能します。これらのタグはWebコンポーネントに似ており、ページやWebアプリ間で再利用できます。HTMLページにRIOTフレームワークを含めると、インポートされたjsは、riotオブジェクトを指すriot変数を作成します。このオブジェクトには、タグの作成やマウントなど、RIOT.jsと対話するために必要な関数が含まれています。
タグを作成して使用するには、2つの方法があります。
Inline HTML− riot.tag（）関数を呼び出す。この関数は、タグ名とタグ定義を使用してタグを作成します。タグ定義には、HTML、JavaScript、CSSなどを含めることができます。
Seperate Tag file−タグ定義をタグファイルに保存する。このタグファイルには、タグを作成するためのタグ定義が含まれています。このファイルは、riot.tag（）呼び出しの代わりにインポートする必要があります。
<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<以下はインラインタグの例です。
例
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>これにより、次の結果が生成されます-
以下は、外部ファイルタグの例です。
例
messageTag.tag
<messageTag>
<h1>Hello World!</h1>
</messageTag>index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script src = "messageTag.tag" type = "riot/tag"></script>
<script>
riot.mount("messageTag");
</script>
</body>
</html>これにより、次の結果が生成されます-
RIOTjsは{}を使用して式を定義します。RIOT jsでは、次のタイプの式を使用できます。
Simple Expression −変数を定義し、タグ内で使用します。
<customTag>
<h1>{title}</h1>
<script>
this.title = "Welcome to TutorialsPoint.COM";
</script>
</customTag>Evaluate Expression −操作で使用するときに変数を評価します。
<customTag>
<h2>{val * 5}</h2>
<script>
this.val = 4;
</script>
</customTag>Get value from Options object −属性を介してタグに渡される値を取得します。
例
以下は、上記の概念の完全な例です。
customTag.tag
<customTag>
<h1>{title}</h1>
<h2>{val * 5}</h2>
<h2>{opts.color}</h2>
<script>
this.title = "Welcome to TutorialsPoint.COM";
this.val = 4;
</script>
</customTag>index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<customTag color="red"></customTag>
<script src = "customTag.tag" type = "riot/tag"></script>
<script>
riot.mount("customTag");
</script>
</body>
</html>これにより、次の結果が生成されます-
RIOT jsタグには独自のスタイルを設定でき、タグ内のコンテンツにのみ影響するスタイルをタグ内に定義できます。タグ内でスクリプトを使用してスタイルクラスを設定することもできます。以下は、RIOTタグのスタイリングを実現する方法の構文です。
custom1Tag.tag
<custom1Tag>
<h1>{title}</h1>
<h2 class = "subTitleClass">{subTitle}</h2>
<style>
h1 {
color: red;
}
.subHeader {
color: green;
}
</style>
<script>
this.title = "Welcome to TutorialsPoint.COM";
this.subTitle = "Learning RIOT JS";
this.subTitleClass = "subHeader";
</script>
</custom1Tag>index.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<h1>Non RIOT Heading</h1>
<custom1Tag></custom1Tag>
<script src = "custom1Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom1Tag");
</script>
</body>
</html>これにより、次の結果が生成されます-
条件文は、RIOTタグの要素を表示/非表示にするために使用される構造です。以下は、RIOTがサポートする3つの条件です。
if −渡された値に基づいて要素を追加/削除します。
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>show − style = "を使用する要素を示しますdisplay:' ' 「真に渡された場合。
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>hide − style = "を使用して要素を非表示にしますdisplay:'none' 「真に渡された場合。
<custom2Tag>
<h2 show = {showMessage}>Using show!</h2>
<script>
this.showMessage = true;
</script>
</custom2Tag>例
以下は完全な例です。
custom2Tag.tag
<custom2Tag>
<h2 if = {showMessage}>Using if!</h2>
<h2 if = {show}>Welcome!</h1>
<h2 show = {showMessage}>Using show!</h2>
<h2 hide = {show}>Using hide!</h2>
<script>
this.showMessage = true;
this.show = false;
</script>
</custom2Tag>custom2.htm
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom2Tag></custom2Tag>
<script src = "custom2Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom2Tag");
</script>
</body>
</html>これにより、次の結果が生成されます-
Yieldは、外部のhtmlコンテンツをRIOTタグに入れるメカニズムです。利回りを行うには複数の方法があります。
Simple Yield−タグ内の単一のプレースホルダーを置き換える場合。次に、このメカニズムを使用します。
<custom3Tag>
Hello <yield/>
</custom3Tag><custom3Tag><b>User</b></custom3Tag>Multiple Yield−タグ内の複数のプレースホルダーを置き換える場合。次に、このメカニズムを使用します。
<custom4Tag>
<br/><br/>
Hello
<yield from = "first"/>
<br/><br/>
Hello
<yield from = "second"/>
</custom4Tag><custom4Tag>
<yield to = "first">User 1</yield>
<yield to = "second">User 2</yield>
</custom4Tag>例
以下は完全な例です。
custom3Tag.tag
<custom3Tag>
Hello <yield/>
</custom3Tag>custom4Tag.tag
<custom4Tag>
<br/><br/>
Hello
<yield from = "first"/>
<br/><br/>
Hello
<yield from = "second"/>
</custom4Tag>custom3.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom3Tag><b>User</b></custom3Tag>
<custom4Tag>
<yield to = "first">User 1</yield>
<yield to = "second">User 2</yield>
</custom4Tag>
<script src = "custom3Tag.tag" type = "riot/tag"></script>
<script src = "custom4Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom3Tag");
riot.mount("custom4Tag");
</script>
</body>
</html>これにより、次の結果が生成されます-
refsオブジェクトを使用してHTML要素にアクセスするのと同じ方法で、イベントをHTML要素に添付できます。最初のステップとして、DOM要素にref属性を追加し、タグのスクリプトブロックでthis.refを使用してアクセスします。
Attach ref −DOM要素にref属性を追加します。
<button ref = "clickButton">Click Me!</button>Use the refs object−マウントイベントでrefsオブジェクトを使用します。このイベントは、RIOTがカスタムタグをマウントし、refsオブジェクトにデータを入力したときに発生します。
this.on("mount", function() {
console.log("Mounting");
console.log(this.refs.username.value);
})例
以下は完全な例です。
custom5Tag.tag
<custom5Tag>
<form>
<input ref = "username" type = "text" value = "Mahesh"/>
<input type = "submit" value = "Click Me!" />
</form>
<script>
this.on("mount", function() {
console.log("Mounting");
console.log(this.refs.username.value);
})
</script>
</custom5Tag>custom5.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom5Tag></custom5Tag>
<script src = "custom5Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom5Tag");
</script>
</body>
</html>これにより、次の結果が生成されます-
refsオブジェクトを使用してHTML要素にアクセスできます。最初のステップとして、DOM要素にref属性を追加し、タグのスクリプトブロックでthis.refを使用してアクセスします。
Attach ref −DOM要素にref属性を追加します。
<button ref = "clickButton">Click Me!</button>Use the refs object−マウントイベントでrefsオブジェクトを使用します。このイベントは、RIOTがカスタムタグをマウントし、refsオブジェクトにデータを入力したときに発生します。
this.on("mount", function() {
this.refs.clickButton.onclick = function(e) {
console.log("clickButton clicked");
return false;
};
})例
以下は完全な例です。
custom6Tag.tag
<custom6Tag>
<form ref = "customForm">
<input ref = "username" type = "text" value = "Mahesh"/>
<button ref = "clickButton">Click Me!</button>
<input type = "submit" value = "Submit" />
</form>
<script>
this.on("mount", function() {
this.refs.clickButton.onclick = function(e) {
console.log("clickButton clicked");
return false;
};
this.refs.customForm.onsubmit = function(e) {
console.log("Form submitted");
return false;
};
})
</script>
</custom6Tag>custom6.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom6Tag></custom6Tag>
<script src = "custom6Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom6Tag");
</script>
</body>
</html>これにより、次の結果が生成されます-
プリミティブまたはオブジェクトのRIOT配列を反復処理し、外出先でhtml要素を作成/更新できます。「各」構成を使用して、それを実現できます。
Create array −オブジェクトの配列を作成します。
this.cities = [
{ city : "Shanghai" , country:"China" , done: true },
{ city : "Seoul" , country:"South Korea" },
{ city : "Moscow" , country:"Russia" }
];Add each attribute −「each」属性を使用します。
<ul>
<li each = { cities } ></li>
</ul>Iterate array of objects −オブジェクトのプロパティを使用して配列を繰り返します。
<input type = "checkbox" checked = { done }> { city } - { country }例
以下は完全な例です。
custom7Tag.tag
<custom7Tag>
<style>
ul {
list-style-type: none;
}
</style>
<ul>
<li each = { cities } >
<input type = "checkbox" checked = { done }> { city } - { country }
</li>
</ul>
<script>
this.cities = [
{ city : "Shanghai" , country:"China" , done: true },
{ city : "Seoul" , country:"South Korea" },
{ city : "Moscow" , country:"Russia" }
];
</script>
</custom7Tag>custom7.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom7Tag></custom6Tag>
<script src = "custom7Tag.tag" type = "riot/tag"></script>
<script>
riot.mount("custom7Tag");
</script>
</body>
</html>これにより、次の結果が生成されます-
Mixinを通じて、タグ間で共通の機能を共有できます。Mixinは、関数、クラス、またはオブジェクトにすることができます。各タグが使用する必要がある認証サービスのケースを考えてみましょう。
Define Mixin − mount（）を呼び出す前に、riot.mixin（）メソッドを使用してミックスインを定義します。
riot.mixin('authService', {
init: function() {
console.log('AuthService Created!')
},
login: function(user, password) {
if(user == "admin" && password == "admin"){
return 'User is authentic!'
}else{
return 'Authentication failed!'
}
}
});Initialize mixin −各タグでミックスインを初期化します。
this.mixin('authService')Use mixin −初期化後、ミックスインをタグ内で使用できます。
this.message = this.login("admin","admin");例
以下は完全な例です。
custom8Tag.tag
<custom8Tag>
<h1>{ message }</h1>
<script>
this.mixin('authService')
this.message = this.login("admin","admin")
</script>
</custom8Tag>custom9Tag.tag
<custom9Tag>
<h1>{ message }</h1>
<script>
this.mixin('authService')
this.message = this.login("admin1","admin")
</script>
</custom9Tag>custom8.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom8Tag></custom8Tag>
<custom9Tag></custom9Tag>
<script src = "custom8Tag.tag" type = "riot/tag"></script>
<script src = "custom9Tag.tag" type = "riot/tag"></script>
<script>
riot.mixin('authService', {
init: function() {
console.log('AuthService Created!')
},
login: function(user, password) {
if(user == "admin" && password == "admin"){
return 'User is authentic!'
}else{
return 'Authentication failed!'
}
}
});
riot.mount("*");
</script>
</body>
</html>これにより、次の結果が生成されます-
Observablesメカニズムにより、RIOTはあるタグから別のタグにイベントを送信できます。以下のAPIは、RIOTオブザーバブルを理解するために重要です。
riot.observable(element)−指定されたオブジェクト要素のオブザーバーサポートを追加するか、引数が空の場合、新しい監視可能なインスタンスが作成されて返されます。この後、オブジェクトはイベントをトリガーしてリッスンできるようになります。
var EventBus = function(){
riot.observable(this);
}element.trigger(events) −指定されたイベントをリッスンするすべてのコールバック関数を実行します。
sendMessage() {
riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');
}element.on(events, callback) −指定されたイベントをリッスンし、イベントがトリガーされるたびにコールバックを実行します。
riot.eventBus.on('message', function(input) {
console.log(input);
});例
以下は完全な例です。
custom10Tag.tag
<custom10Tag>
<button onclick = {sendMessage}>Custom 10</button>
<script>
sendMessage() {
riot.eventBus.trigger('message', 'Custom 10 Button Clicked!');
}
</script>
</custom10Tag>custom11Tag.tag
<custom11Tag>
<script>
riot.eventBus.on('message', function(input) {
console.log(input);
});
</script>
</custom11Tag>custom9.htm
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<custom10Tag></custom10Tag>
<custom11Tag></custom11Tag>
<script src = "custom10Tag.tag" type = "riot/tag"></script>
<script src = "custom11Tag.tag" type = "riot/tag"></script>
<script>
var EventBus = function(){
riot.observable(this);
}
riot.eventBus = new EventBus();
riot.mount("*");
</script>
</body>
</html>これにより、次の結果が生成されます-