Ractive.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Webフロントエンドの開発において欠かせないのがDOM操作です。jQueryを使って行う人が多いと思いますが、今回はそれより少し大きな規模になってきた時に活躍しそうなRactive.jsを紹介します。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.41.27_thumb.1375707288.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.41.27.1375707288.png)
サンプルのTodoアプリ。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.41.35_thumb.1375707295.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.41.35.1375707295.png)
HTMLテンプレート。よくある形で誰でもすぐに使いこなせるでしょう。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.41.50_thumb.1375707298.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.41.50.1375707298.png)
JavaScript。エレメントを指定したり、データを指定したりします。シンプルで分かりやすいです。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.42.04_thumb.1375707302.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.42.04.1375707302.png)
コメント機能のデモ。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.42.19_thumb.1375707305.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.42.19.1375707305.png)
雰囲気的にBackbone.jsを簡素化した感じでしょうか。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.42.47_thumb.1375707309.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.42.47.1375707309.png)
無限スクロールのデモ。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.43.29_thumb.1375707312.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.43.29.1375707312.png)
このような複雑な図を描くデモもあります。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.43.35_thumb.1375707316.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.43.35.1375707316.png)
クリックでさらに深く潜れます。

[![](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.43.47_thumb.1375707319.png)](http://images.moongift.jp/2013/08/Screenshot 2013-08-05 10.43.47.1375707319.png)
インタラクティブなグラフ。

Ractive.jsはインタラクティブなWeb操作を行うのに必要なDOM操作、イベント処理、データバインドを効率的に行えるようになっています。HTMLのパースやテンプレート機能も備わっています。Webアプリケーションを素早く作るのに向いていそうです。

MOONGIFTはこう見る

Webフロントエンドフレームワークが続々と登場しています。今のところ抜きん出てきているのは幾つかはありますが、まだまだ分かりません。こういった時にはそれぞれを試し、自分が最も手に馴染むと思うものを採用するのが良いのではないでしょうか。

ちょっとしたイフェクトであればjQueryが便利ですが、システム全体を制御しようと思うとjQueryでは物足りなく感じるようになってきています。JavaScriptにおいてもフレームワークを活用して開発効率をアップしましょう。

Ractive.js - next-generation DOM manipulation

Rich-Harris/Ractive