こんにちは。タクスタでフロントエンジニアをしている今井(@imakei_)です。
現在リニューアルしている"宅スタ"、あたらめ"takusuta"でweb開発を行っております。
(リニューアル詳細はこちら)
現在リニューアルしている"宅スタ"、あたらめ"takusuta"でweb開発を行っております。
(リニューアル詳細はこちら)
今回はtakusuta(https://takusuta.com)で用いてるJavaScriptライブラリーRiot(http://riotjs.com/)をテーマに書きたいと思います。
軽量だからできることが少ないと思われるかもしれませんが、Server-Side Renderingまでこなすパワフルなライブラリーとなっています。
今回はRiotの超入門としていくつかの構文や文法の紹介をしたいと思います。
Riotとは
A React-like user interface micro-library
と公式サイトにもあるように、React(https://facebook.github.io/react/)のようなUIライブラリーです。ビューに特化しているライブラリーで、Reactのほか、Polymer(https://www.polymer-project.org/1.0/)やVue.js(http://vuejs.org/)といったものと比較されることが多いです。
その特徴はなんといってもそのサイズで、わずか12.5KBと超軽量です。Polymerの138KB、Reactの119KBと比べるとその軽さが際立ちます。
(各ライブラリーのサイズはRiot公式サイトより引用)
(各ライブラリーのサイズはRiot公式サイトより引用)
軽量だからできることが少ないと思われるかもしれませんが、Server-Side Renderingまでこなすパワフルなライブラリーとなっています。
今回はRiotの超入門としていくつかの構文や文法の紹介をしたいと思います。
超入門
Riotでは独自タグを用いてコンポーネントベースで開発していきます。
ではさっそくいつもの。
hello-world.tag
<hello-world>
<h1>Hello, World!</h1>
</hello-world>
ReactがJavaScriptの中にHTMLを書くようなものだったのに対して
RiotではHTMLの中にJavaScriptを書くようなイメージですね。
マウントは以下のようになります。
簡単ですね。HTML,CSSを触ったことある人であればすんなり理解できると思います。
index.html
<body>
<hello-world></hello-world>
<script src="riot+compiler.min.js"></script>
<script src="todo.js" type="riot/tag"></script>
<script>riot.mount('hello-world')</script>
</body>
簡単ですね。HTML,CSSを触ったことある人であればすんなり理解できると思います。
上記ではブラウザ上でコンパイルするサンプルになっていますが、
事前にコンパイルすることもできるので興味がある人は詳しく調べてみてください。
引数
上記のコードを少し変更して見ます。
Riotではカスタムタグの属性として引数を渡すことができ、
hello-world.tag
<hello-world>
<h1>Hello, { opts.user }!</h1>
</hello-world>
index.html
<hello-world user="Abema"></hello-world>
Riotではカスタムタグの属性として引数を渡すことができ、
optsという変数でそれらにアクセスしています。
また、{ }で変数を簡単に出力できます。
スタイリング
hello-world.tag
<hello-world>
<h1>Hello, { opts.user }!</h1>
<style>
h1 {
color: red;
border-bottom: 1px solid #E0E0E0;
}
</style>
</hello-world>
イベントハンドラ、繰り返し
では、簡単なアプリケーションを作ってみたいと思います。
テキストを入力するとリストになる、簡単なTODOリストを作りたいと思います。
scriptタグの中でLogicを書くことができます。
todo.tag
<todo>
<form onsubmit={ add }>
<input type="text">
<input type="submit" value="追加">
</form>
<ul>
<li each={ item, i in list }>
{ item }
</li>
</ul>
<style>
/* 略 */
</style>
<script>
this.list = [];
add(e) {
var input = e.target[0];
this.list.push(input.value);
input.value = '';
}
</script>
</todo>
scriptタグの中でLogicを書くことができます。
ここではTODOのアイテムを管理するlistと、それに値を追加するadd関数を用意しました。
イベントハンドラでDOMイベントが起きた際に呼ばれる関数を簡単に設定できます。
onsubmitに先ほど用意したadd関数を設定しています。
繰り返しはeach属性で行います。each属性を持った要素は配列の要素の数だけ繰り返されます。上記のプログラムの場合、listの要素数だけ繰り返され、listが要素が変更されると
自動的に新しい要素が追加/削除されます。
タクスタでのRiot
takusutaでは専属のweb開発部隊がいません。それでも流入経路の確保やSEOなどの観点からweb開発は外せませんでした。その中で見つけたのがRiotで、軽量ライブラリーであることに加えてサーバサイドレンダリングが可能でSEOに強く、そしてなんといっても学習コストが非常に低かったため、すぐに採用しました。Riot未経験だった自分もすんなり開発に入ることができ、非常に速度の速い開発ができていると思います。
また、現在爆速でリニューアルしているtakusutaのwebサイトは、近日公開予定ですのでよろしくお願いします。
また、現在爆速でリニューアルしているtakusutaのwebサイトは、近日公開予定ですのでよろしくお願いします。
終わりに
最後少し早足になってしまいましたが、HTML/CSSとほんの少しのJavaScriptだけ
簡単なアプリケーションを作ることができました。
これを機会にエンジニアの皆さんにはもちろん、デザイナーさんにも
これを機会にエンジニアの皆さんにはもちろん、デザイナーさんにも