Riot.jsで更新情報なんかを作る時はどうしたらいいの？ということで、やってみた
jQueryのDOM操作にしてもそうなのですが、この手のCMS的なアプローチってテンション上がるなあと思うのです。
サーバサイドでプログラムが動かない時、スマホとPCが別ファイルだから両方更新するの面倒臭いよー！しまいにはTOPと下層ページで同じ原稿流し込むのも面倒臭いよー！でも更新を1ファイルで済ませたいよー！といった時によくJSに逃げ込んでいたわけですが。
試しに前々から興味を持っていたRiot.jsで似たようなことをやったらどうなるのかなーと、触ってみたのでめもめも。
今回の目標
jQueryのAjaxで外部ファイルのjsonを読み込んで表示するスクリプトっぽいものをRiot.jsにしてみる。というのが一番実戦的な気がするので、そんなことをしてみるなど。
jQueryでやるならこんな感じ？
<ul id="NewsArea"> <li> <div class="date">日付</div> <div class="detail"><a href="パーマリンク的な何か">タイトル</a></div> </li> </ul>
なんだかこんな感じのHTMLで、liタグのあたりを所定の量でいっぱい作るようなイメージ。
{
"news": [
{
"day": "日付",
"title": "タイトル"
},
{
"day": "日付",
"title": "タイトル"
},
]}
とりあえずこんな感じのjsonを用意しておいて、
$(function(){
$("#indexNewsArea").html("");
$.getJSON("news.json", function(data){
var i = 0;
$(data.news).each(function(){
if(i <= 4){
$('<li><div class="date">'+this.day+'</div><div class="detail"><a href="news_detail.html?id='+i+'">'+this.title+'</a></div></li>').appendTo('#newsArea');
}
i++;
})
})
});
多分こんな感じかなあ。$.ajax使ってもいいし何でもいいけど、うん。多分こんな感じ。
というわけでRiot.jsを触ってみたよ！
何はともあれ公式のドキュメントを斜め読み。
今回はブラウザ側でレンダリングする方法で試してみよう。。。
まずはRiot.jsを読み込む
<script src="https://cdn.jsdelivr.net/g/riot@2.2.4(riot.min.js+compiler.min.js)"></script>
ざっくりお試しなので、CDNから読み込んでみる。
いろんなパターンがあるので、公式を読むといいんじゃないだろうか。
カスタムタグを設置しつつ設定する
<news></news>
<script src="news.tag" type="riot/tag"></script>
<script> riot.mount('news')
</script>
ふむふむ。
カスタムタグを置いて、コンポーネントを読み込んでテンプレートファイル的なものを準備してマウントさせてやるわけですな。
コンポーネントを設定する
<news>
<ul>
<li each={ items }>{title} - {description}</li>
</ul>
</news>
this.items = [
{ title: 'hoge1', description: 'fuga' },
{ title: 'hoge2', description: 'fuga2' },
{ title: 'hoge3', description: 'fuga3' }
]
ふむ、なにやらこんな感じで書けばとりあえずいいようです。
標準のHTMLタグでも使えるようですが、今回は敢えてこんな感じ。
ただ、このままだとここに直接書いてある配列でしか処理ができないので、外からとってきたいなあ。。。
むしろこのあたりって、タグファイル側じゃなくて、大元で配列を設定して読み込むべきなのかも。
このあたりはRiot.jsで〜というよりも別の方法でやるのかな・・・。
というわけで、Riot.js確かに良いかも
jQueryでひたすらappendとかprependを使ってDOMを操作するくらいなら、Riot.jsを使ったほうが圧倒的に追加するDOMのHTMLまわりの見通しが良くなるなあという印象でした。
HTMLである程度動くモックアップなど、今後デザイン調整などが入るようなアプリケーションの骨組みとして使うのにちょうどいい雰囲気です。
JavaScriptで記述するあたりも、深い知識なしである程度の実装ができる手応えもあるので、もうちょっと触ってみようかなあといったところ。
これはもしかしたら、結構強い武器になるかもしれない。。。
