1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:
こんにちは。タクスタでフロントエンジニアをしている今井(@imakei_)です。
現在リニューアルしている"宅スタ"、あたらめ"takusuta"でweb開発を行っております。
(リニューアル詳細はこちら)
今回はtakusuta(https://takusuta.com)で用いてるJavaScriptライブラリーRiot(http://riotjs.com/)をテーマに書きたいと思います。

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公式サイトより引用)

軽量だからできることが少ないと思われるかもしれませんが、Server-Side Renderingまでこなすパワフルなライブラリーとなっています。

今回はRiotの超入門としていくつかの構文や文法の紹介をしたいと思います。


超入門

Riotでは独自タグを用いてコンポーネントベースで開発していきます。
ではさっそくいつもの。

hello-world.tag
<hello-world>
  <h1>Hello, World!</h1>
</hello-world>

ReactがJavaScriptの中にHTMLを書くようなものだったのに対して
RiotではHTMLの中にJavaScriptを書くようなイメージですね。

マウントは以下のようになります。

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を触ったことある人であればすんなり理解できると思います。

上記ではブラウザ上でコンパイルするサンプルになっていますが、
事前にコンパイルすることもできるので興味がある人は詳しく調べてみてください。


引数

上記のコードを少し変更して見ます。

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>


上記のようにカスタムタグ内にstyleタグで記入できます。


イベントハンドラ、繰り返し

では、簡単なアプリケーションを作ってみたいと思います。
テキストを入力するとリストになる、簡単なTODOリストを作りたいと思います。

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が要素が変更されると
自動的に新しい要素が追加/削除されます。

今回のTODOリストのソースコードは下記においておきますので参考にお使いください。
https://github.com/imakei/riot-todo-smaple

タクスタでのRiot


takusutaでは専属のweb開発部隊がいません。それでも流入経路の確保やSEOなどの観点からweb開発は外せませんでした。その中で見つけたのがRiotで、軽量ライブラリーであることに加えてサーバサイドレンダリングが可能でSEOに強く、そしてなんといっても学習コストが非常に低かったため、すぐに採用しました。Riot未経験だった自分もすんなり開発に入ることができ、非常に速度の速い開発ができていると思います。

また、現在爆速でリニューアルしているtakusutaのwebサイトは、近日公開予定ですのでよろしくお願いします。


終わりに

最後少し早足になってしまいましたが、HTML/CSSとほんの少しのJavaScriptだけ  
簡単なアプリケーションを作ることができました。
これを機会にエンジニアの皆さんにはもちろん、デザイナーさんにも
Riotに関して少しでも興味を持っていただけたら幸いです。

---

takusuta - 見逃せないスクープから恋愛相談までLIVE中継
iOS App
Android App
PC(https://takusuta.com)

---

タクスタ
今井(@imakei_)
いいね!した人  |  リブログ(0)

1pixelさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

最近の画像つき記事  もっと見る >>
ページトップへ戻る