本記事では、2015/2/21に行われた「Frontrend Conference」のJSトラックセッション「Reactive Programming in JavaScript」から抜粋した内容を紹介します。

「リアクティブプログラミング」（以下、RP）という言葉を、みなさんはご存じでしょうか。RPは、オブジェクト指向プログラミングや関数型プログラミングと同様に、プログラミングパラダイムのひとつです。このRPというパラダイムを、近年のWebフロントエンドの風潮になぞらえて見ていきます。

リアクティブプログラミングという考え方

RPは「イベントや変化する値の関係性」に注目し、これを簡潔に記述することで相互作用を上手に扱おうとするプログラミングパラダイムです。

これはオブジェクト指向プログラミングが「オブジェクトと相互のメッセージング」に注目したり、関数型プログラミングが「関数の作用」に注目したりするように、プログラミングを捉えるときの着眼点、切り口のひとつであるとも言えます。

GUIにとってReactiveは身近な概念

GUIプログラミングにおいて、データ（一般的には、Model）に変化があったときや何らかの非同期処理が終わったときなど、表示（一般的にはView）の更新につながる処理が頻繁に実行されます。

RPでは「イベントや変化する値の関係性 = データフロー」に注目した上で、特に「データフローの宣言によって、片方の変化を他方に自動で伝播させる」ことが重要です。これによって、しばしば複雑になりがちなデータの相互作用を容易に管理できるようにします。

GUIで発生する同期/非同期を問わずに発生する何らかのイベントと、それに伴う画面の更新は「片方の変化を他方に自動で伝播させる」仕組み作りが有効に作用する分野です。

Reactiveなアプローチはフロントエンドでも試みられてきた

Webフロントエンドでは、これまでどのようにReactiveなアプローチが試みられてきたのでしょうか？RPの主題とも言える「データフローの宣言によって、片方の変化を他方に自動で伝播させる」という振る舞いの成り立ちは、作ろうとしているプロダクトの種類や開発言語、使用するライブラリによって異なります。

たとえばMVVM(Model View ViewModel)に代表されるようなデータバインディングの仕組みは、データ（Model）と表示（View）を宣言的に結びつけるReactiveな仕組みと言えます。

今年から特に話題にのぼることが多くなったReactについても、Fluxというアーキテクチャモデルが加わることで、データの変更を表示に伝播させるReactiveなデータフローを実現しようとしています。

Functional Reactive Programming

Functional Reactive Programming（以下FRP）とは、RPのモデルに関数型プログラミング（Functional Programming）の要素を加えたものです。

本セッションではデータバインディングや Fluxに続く（正確にはそれらよりもずっと前からあるものなのですが…）Reactiveなアプローチとして、FRPにという考え方に基づいた Reactive Extensionsと呼ばれるライブラリを紹介していきます。

Reactive Extensions と非同期データストリーム

FRPを基にしたReactive Extensions というライブラリでは、すべての値を「時間軸に沿って値が流れるリスト = 非同期データストリーム」というモデルに落とし込みます。これだけだと、少し分かりづらい概念かもしれません。

参考: Functional Reactive Programming with RxJS

少々強引ですが、今風に喩えて言えば、イベントが起こる度に何度も値を流してくるPromiseと捉えることもできます。それをリストとして捉えることで、mapやfilterといった高階関数を活かした、関数型のイディオムを適用できるようになります。

非同期データストリームのモデルが優れているところは、Promiseのような非同期であっても、散発的に発生する click のような非同期イベント、通常の値であっても、すべて同じモデルに落とし込んでRPを実践できるように抽象化されているところです。

RxJS を利用してみる

ここでは Reactive Extensions の JavaScript実装であるRxJSを取り上げて、一つの例を紹介します。次に示すリンクは、+（プラス）または-（マイナス）をクリックすると、中央の数字が更新されるサンプルです。この中にRxJSで使われる基本的なメソッドが詰まっています。

• RxJSのSample(CodePen)

上記サンプルのJavaScript部分を抜粋してコメントをつけると次のようになります。サンプルの動作自体は簡単なので、らくに読めると思います。中でもストリームやオブザーバを宣言している部分と、それらをどのようにつなぎ合わせているかに注目するとよいでしょう。

document.addEventListener('DOMContentLoaded', function() {

  // 要素のセットアップ
  var plusEl    = document.getElementById('plus');
  var minusEl   = document.getElementById('minus');
  var counterEl = document.getElementById('counter');
  
  // <span id="plus">+</span> を click すると 1 が流れるストリーム
  var plus    = Rx.Observable.fromEvent(plusEl, 'click').map(1);
  // <span id="minus">-</span> を click すると -1 が流れるストリーム
  var minus   = Rx.Observable.fromEvent(minusEl, 'click').map(-1);

  // plusとminusをひとつにマージする
  var both = plus.merge(minus);

  // scanは第一引数に初期値、第二引数にアキュムレータを受け取る
  // curtValueは現在値を示し、bothから1/-1が流れてくるたびに加算する
  var curtValue = both.scan(0, function(acc, v) {
    return acc + v;
  });

  // 流れてきた値を処理するオブザーバを定義する
  var setHtml = Rx.Observer.create(function(v) {
    counterEl.innerHTML = v;
  });

  // curtValue (現在値) に更新があると、オブザーバが動作する
  var subscription = curtValue.subscribe(setHtml);
});

非同期データストリームにほとんどについて、Rx.Observableのインターフェースに集約されており、全て取り上げると莫大な数（150超）のメソッドが実装されています。（APIドキュメント）

いきなり全てのメソッドを把握しようとすると、あまりにも大変ですが、まずは今回のサンプルで登場したような限られたメソッドを把握するだけでも、簡単な動きを作ることはできるでしょう。

• Rx.Observable.fromEvent(element, eventType)
• Rx.Observable#merge(otherObservable)
• Rx.Observable#scan(seedValue, accumlator)
• Rx.Observable#subscribe(observer)

本編セッションでは、より多くのサンプルを紹介しているので動画やスライド資料も参考にしてみてください。

RxJS に影響を受けたその他のライブラリ

Webフロントエンドで利用できるFRPライブラリは、RxJSだけではありません。Reactive Extensions、あるいは RxJSそのものに影響を受けて作られたライブラリが他にあります。

Bacon.jsはRx.Observable相当の概念を、EventStreamというProperty に整理しています。これはReactive ExtensionのObservableにおけるHot/Coldという、やや複雑な概念をシンプルに整理し直したものです。

Kefir.js はBacon.jsと同じ概念を踏襲しつつ、コード実装を最適化して、より優れたパフォーマンスを得ることを目的としたライブラリです。

Reactive Programmingを学ぶ意義

FRPの考え方を忠実に再現しようとすること自体は、現在のフロントエンドにおけるJavaScriptの設計パターンと必ずしもマッチするものではないかもしれません。

しかし、オブジェクト指向言語に関数型のエッセンスが徐々に取り入れられているのと同じように、RPも少量のエッセンスを取り入れることには十分な価値があることでしょう。

本記事では限られた範囲での紹介でしたが、セッションの動画も公開されていますので、もっと知りたい方はそちらもご覧いただけると幸いです。2015年に入ってからReactive ExtensionsまたはRxJS関係の情報も増えてきていますので、今後より一層注目されるようになるかもしれません。

この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。

Material Designという視覚的言語

Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。

それを実現するため、伝統的なグラフィックデザインとテクノロジーによる可能性を引き出して開発に取り組み、ガイドラインは生きたドキュメントとして更新され続けるとしています。

フラットな中に、自然な影や動きを取り入れた

Material Designは、フラットデザインを取り入れた他のデザインガイドラインと同様に、伝統的なグラフィックデザイン、たとえばタイポグラフィーやレイアウトの原則を取り込んでいます。文字やグラフィックを中心に構成された現在のアプリやWebに、はるか昔から積み重ねられてきたノウハウを融和させることで、優れたビジュアルが得られます。

しかし、単なるビジュアルのルールだけでは、スクリーンサイズの多様性の中で、UIや体験の一貫性を保つのはどこかで限界があるのかもしれません。そこでMaterial Designは、「Material is the Metaphor」というコンセプトを取り込んでいます。

http://googledevelopers.blogspot.jp/2014/06/this-is-material-design.html

規則性のある影や、連続性のあるモーションなどを、現実世界のメタファとして細部に取り込むことで、深いレベルで一貫性をもった世界を構築しようとしています。これらの表現に、現実の物質世界と同じ物理的性質をもたせることで、認知的な負担を少なくし、より自然にアフォーダンスを受け取れるようにしています。

例えば、フラットな面に影の表現を加えることで、オブジェクトの重なりやヒエラルキーが表現できます。強く影をつけた大きなボタンは、ユーザーの目にひときわ浮き立つプライマリなアクションとして認識されます。

このような影について、Android Lではリアルタイムソフトシャドウとして、現実世界のメタファを通して、より自然な振る舞いになるようエンジニアリングが発揮されています。モーションについても、直線的な動きではなく、現実世界の慣性に従った動きになるようにガイドラインで定められています。

Material Design Paper

Material Designのコンセプトについて詳しくは、PDFで9つの特徴にまとまっています。Google I/Oのデザインブースでは、このPDFの図画が、実際の紙にインクで印刷されたものが頒布されていました。

「具体的な」デザインガイドライン

Material Designのガイドラインとして、具体的にどのようなデザインを実現すれば良いかのドキュメントは、プレビュー版としてすでに公開されています。

以前のAndroid Designにおいても詳細な項目が用意されていましたが、今回のガイドラインでは、そこにアニメーションや陰影の深度に関する項目をはじめとして、多岐にわたり詳細な情報が掲載されています。特徴的なのは、文字のレイアウト、アニメーション、陰影の表現、画像のフェード効果など細部に至るまで、具体的な数値とサンプルをもって表現していることです。

ガイドラインの一例

さらにAndroidの開発ライブラリはもちろん、後半で紹介するPaper Elementsが、ガイドラインを体現した実装として存在しています。具体的なガイドラインと、それを反映した実装の2つが揃うことによって、Material Designのガイドラインは、他のデザインガイドラインよりも確かで、強固なものになっています。

Google I/O でのセッション

• Google I/O 2014 – Material design principles – YouTube
• Google I/O 2014 – Material design: Structure and components – YouTube
• Google I/O 2014 – Material design: Visual style and imagery – YouTube
• Google I/O 2014 – Material design: Motion – YouTube

キーノートの中で紹介されたMaterial Designですが、その後のセッションでもテーマごとに、詳細な内容の紹介がありました。より深く理解したい方は、これらの動画もチェックしてみると面白い話が聞けるはずです。（YouTubeでは英語字幕が表示されるので、聞きやすいです）

Webで実現するためのPolymerとPaper Elements

ここまでMaterial Designについて紹介しましたが、いよいよこのデザイン原則をWebの世界に取り込むため、PolymerとPaper Elementsについて説明します。

はじめにPolymerとは、Web Componentsが変えるWeb開発の未来で説明されたWeb Componentsをより強力に、より柔軟に使えるようにGoogleで開発されているラッパーライブラリです。Web Componentsが注目を集め始めたのと同時に、Polymerの話題も多く目にするようになっています。

Polymerには、そのラッパーとしての機能を活かして作成された、汎用コンポーネント群があります。それがCore ElementsとPaper Elementsです。このうち、Paper ElementsがMaterial DesignをWebで表現するための鍵になりますが、実際に開発するにはPolymer本体に、これらCore ElementsとPaper Elementsを組み合わせて利用します。

ここでは、Rob DodsonによるUnlock the next era of UI development with Polymerというセッション（SlideShare）の内容を参考に紹介していきます。

レイアウトを構築する

はじめにCore Elementsを使ったアプリケーションのレイアウトについて紹介します。Core Elementsには、一般的なナビゲーションパターンのレイアウトを、手軽に制御できるコンポーネントが用意されています。

たとえばcore-header-panelを利用すると、よくある固定ヘッダーとコンテンツ部分の管理ができます。これまで、普通にHTMLとCSSでレイアウトして、インナースクロール用のJavaScriptライブラリを組み込んで実現していたUIが、ひとつのコンポーネントをHTML内に取り込むだけで作れるようになります。

core-drawer-panel (参考スライドP27から引用)

上図のようなドロワーメニューを内包したレスポンシブなレイアウトも、core-drawer-panelを利用すると、drawerとmainという属性をそれぞれ持った要素を、子要素として追加すれば容易に制御できます。

もうひとつレイアウトするための強力な機能が存在します。それがLayout attributesです。これはPolymer本体に備えられた機能です。

layout属性 (参考スライドP35から引用)

このように、layout属性を付与して、要素を並べる方向（vertical, horizontal）や、子要素にflexなどの指定を行うことで、CSSを使わずにHTML側で基本的なレイアウトを制御できます。ここでは一例を紹介しましたが、詳細はPolymerのドキュメントを確認してみてください。

Material Designを使う

いよいよPaper Elementsが登場します。Core Elementsが基本的な機能と素朴な見た目しか持たない汎用コンポーネント群であるのに対して、Paper ElementsはMaterial DesignのガイドラインにおけるUIコンポーネントを、ビジュアルとインタラクションの両面において実装しています。

たとえばpaper-tabsは、次の画像のようなマークアップでMaterial Designで表現されたタブのUIを組み込むことができます。

paper-tabs (参考スライドP44から引用)

このようなPaper ElementsのUIコンポーネントはPaper Elements Samplerで動作デモを確認できます。

Material Designは影や波紋のようなエフェクトといったインタラクションも重要です。Paper Elementsの中にはそのような、特定のUIを表現するものではなく、エフェクトを適用するための要素も用意されています。

paper-shadow (参考スライドP47から引用)

paper-shadowは親要素に、z属性で指定されたコンテンツの深度に応じて、適切な影の表現をつけられます。Material Designでは、影を表現するために、深さを表現するKey Shadowと、オブジェクトの形態を示すAmbient Shadowの2つが使われています。このpaper-shadowもCSSのbox-shadowで2種類の影をかさねて表現しています。

前半で説明したとおり、Material Designにおける影は、ただの装飾ではなく、オブジェクトの階層やユーザーのフォーカスを得るための、意図的な表現です。多くのオブジェクトに、このようなエフェクトを積極的に使っていくことになります。

paper-ripple (参考スライドP46から引用)

paper-rippleは親要素に、clickやtouchしたときのエフェクトを適用できます。デモを見ると、それがどのような効果か分かりやすいはずです。このエフェクトは、親の要素と同じサイズのcanvasを展開して、その上で波紋のようなエフェクトを表現しています。

スタイルを適用する

Polymerの要素は、Shadow DOMが使われているため、従来どおりのCSSセレクタでは、内側の要素にスタイルを適用できません。ここではCSS Scoping Moduleとして定義されている、::shadowと/deep/セレクタを紹介します。

::shadowは、疑似要素としてShadow DOMのルートにアクセスできます。次の例では、Polymerで作られたx-fooが持つShadow DOM内のspanにアクセスして、color: redを指定しています。

<style>
x-foo::shadow span {
  color: red;
}
</style>

<polymer-element name="x-foo" noscript>
  <template>
    <span>Hi!</span> <!-- color: red -->
  </template>
</polymer-element>

<x-foo></x-foo>

/deep/は、::shadowと同じくShadow DOM内へのアクセスを可能にしますが、より強力にネストしたShadow DOMの奥深くまで適用できます。次の例では、x-helloの中にあるすべてのspanにcolor:blueを適用しています。::shadowの場合だと、x-worldの中のspanにはネストしたShadow DOMの境界を越えられず適用されません。

<style>
x-hello /deep/ span {
  color: blue;
}
</style>

<polymer-element name="x-hello" noscript>
  <template>
    <span>Hello</span> <!-- color: blue -->
    <x-world></x-world>
  </template>
</polymer-element>

<polymer-element name="x-world" noscript>
  <template>
    <span>World</span>  <!-- color:blue -->
  </template>
</polymer-element>

<x-hello></x-hello>

一方、Core ElementsにはPolymerの要素間でスタイルを共有するために、core-styleというコンポーネントが用意されています。

core-style (参考スライドP58から引用)

core-styleを使ってid属性が指定されたStyle Producerで定義されたスタイルを、ref属性を指定してStyle Consumerから参照することで、コンポーネントをまたいで特定のスタイルを共有できます。

トランジションを利用する

core-animated-pagesを利用すると、Single Page Applicationのように、ひとつのHTMLで複数のコンテンツを切り替えて表示するときに、トランジションを適用できます。core-animated-pagesも、対象の要素に属性を付与するだけで、トランジション効果を得られます。

<polymer-element name="animated-sample" noscript>
  <template>
    <style>
      section > div { color:white; height: 500px; }
    </style>

    <!-- コンテンツ切り替え用のタブ -->
    <paper-tabs id="tabs" selected="0">
      <paper-tab>ONE</paper-tab>
      <paper-tab>TWO</paper-tab>
      <paper-tab>THREE</paper-tab>
    </paper-tabs>

    <!-- コンテンツとトランジション付与 -->
    <core-animated-pages
      selected="{{$.tabs.selected}}"
      transitions="cross-fade-all">
      <section>
        <div style="background:red">
          <h1>ONE</h1>
        </div>
      </section>
      <section>
        <div style="background:blue">
          <h1>TWO</h1>
        </div>
      </section>
      <section>
        <div style="background:orange">
          <h1>THREE</h1>
        </div>
      </section>
    </core-animated-pages>
  </template>
</polymer-element>

<animated-sample></animated-sample>

core-aniamted-pagesのtransitions属性で、使いたいトランジションの種類を宣言すると、中のコンテンツが切り替わるときにトランジションが適用されます。

Paper Elementsのサンプルアプリ

Paper Elementsを駆使することで、Material DesignがWebでどのように表現されるのかは、Topekaというサンプルのクイズアプリが用意されています。スマートフォンにも対応しているので、モバイルデバイスでどの程度動いてくれるのかも、自分でさわって確かめてみると面白いはずです。

http://www.polymer-project.org/apps/topeka/

さいごに

今回はMaterial Designとそれを実現するPolymerとPaper Elementsについて、Google I/O 2014での情報をもとにご紹介しました。Material DesignもPolymerも、Preview版というステータスであり、まだ始まったばかりのプロジェクトです。これらが、今後どのように普及し、Webの世界にも影響を与えていくのか楽しみに思います。

先日開催された第49回HTML5とか勉強会でも「Material Design with Polymer」と題して、同じようなテーマについてご紹介しました。YouTubeとSpeakerDeckでそれぞれ当日の録画とスライドが公開されているので、こちらも合わせてご覧いただけると理解が深まるはずです。Material Designについて詳しく説明していたり、Paper Elementsを利用したオリジナルのデモを行っていたりもしますので、ぜひご覧ください。