Diceこの広告は、90日以上更新していないブログに表示しています。呪縛から解き放たれました。前々から使ってみたかったんだけど機会がなかったRiot.jsを使うことができるようになったので、ここ一ヶ月ほどもりもり書いていました。ある程度の知見を得ることができたので、適当にメモしていきます。目指すところっぽいです。Polymerの方が実質的なライバルでしょう。*2また、ちょっとしたデータバインディングもできる*3ためか、Vue.jsからイチャモンをつけられているんですが、そもそもお互いが目指すゴールが違うので比較すること自体がなんだか妙な話です。*4なお、あくまでライブラリであって、フレームワークではないです。アプリをバリバリつくるんじゃ~い!」と思うのであれば、AngularJSでも使ったほうがいいと思います。実装されたことでちょっとしたニュースになりましたが、あれもまだまだ気軽に使えるとは言いがたい*5ので、こう言うライブラリでもっと楽できればいいよね、みたいな気楽なスタンスです。時間ぐらいかけて読めばほとんど全機能を使うことができます。書き換えていく作業をやってみましょう。概念と非常に相性がよくサンプルとして最適ですし、わかりやすく実用性があります。*6また、読むだけだとやっぱりわかりづらいので、適当なリポジトリを作っておきました。入ってればすぐ遊べます。元のソース面倒なので<body>以下のところを一部引っこ抜いてきました。class="jumbotron">からいきますか。[diff]まずは適当な.tagファイルを作ります。なんだから、jumbotron.tagとかでいいんじゃないですかね。(適当)作り方はとても簡単です。ルート要素として新しく作りたいタグ(今回は<jumbotron>)を指定する。</div></jumbotron>これで終わりです。そのまま読み込んでくれます。読み込んでみましょう。これもとても簡単です。riot.mount("jumbotron");</script>当然これだけだと何の旨味もありません。次は<nav>に書かれたグローバルナビゲーションもコンポーネント化してみましょう。コピペして.tagを作ってしまいます。名前はglobal-nav.tagとかでいいでしょう。次はカスタムタグのマウントです。マウントする要素が増えてきたらriot.mount('*')で一括指定してしまいましょう。</script></body>随分すっきりしましたね。しすぎてむしろちょっと不安です。これで<global-nav>を指定するだけでどんなページでもグローバルナビゲーションを呼び出すことが可能になりました。ついでに<nav>の中に書かれていた色んな要素もコンポーネント化してしまいましょう。一つの.tagファイルに複数のカスタムタグを定義できるので、黙々と分解してしまいます。[diff]困ったことに、このまま使っても<navbar>の.activeが一切変わらず使い物になりません。普通ならページごとに.activeを適用する場所だけを変えればいいんですが、せっかくコンポーネント化したのにそれはダサすぎです。自動でやってもらえるようにしましょう。オブジェクトを自由にバインディング可能です。*7また、ifやeachを使うことで要素の表示/非表示やループを簡単に定義することができます。[diff]ある日、不意に「グローバルナビゲーションの.activeの背景色だけ変えたいな...」と思う日が来るかもしれません。*8ちゃんとコンポーネント化してあれば簡単にできます。scoped>を定義しましょう。testなるものも<global-nav>に追加しておきました。scopedを削除するとそっちも変な青色になるのがわかると思います。して、他は全体に適用できるようにしたい」と思ってしまった人のために、:scope擬似クラスなんてものも用意されています。デフォルトで全部scopedにしておいてほしいような気もします*10が、まぁ妙な事故を起こさないよう適切に指定してあげてください。応用的な使い方なんとなく使い方はわかってきたと思うので、もう少し応用的な使い方も説明していきましょう。書きなおしていきます。[diff]まずはブログの内容部分をコンポーネント化してみますか。元々はこんな感じでした。--></div>カスタムタグにぶち込みます。持ってきてしまいましょう。ここ以外で使わなそうだし。</style></blog-post></blog-post>せっかくコンポーネント化したんだから、タイトルや投稿日、投稿者なんかはできれば外部からパラメータとして欲しいですね。カスタムタグはこんな感じに定義します。</style></blog-post>呼び出し元はこんな感じです。属性として指定したものはカスタムタグ内でoptsから取得することができます。どこでoptsを使ってどこで<yield/>を使うかは設計者の腕の見せどころです。optsに渡す情報はタグのマウント時に動的に指定することもできます。書かれていて、それを読み込んで表示する」みたいなパターンをやってみましょう。