React.js

わにる.jp 2016/05/24

武田ソフト / 武田広幸

React.js

Facebookが作成しているオープンソース
JavaScriptフレームワーク

Why React?

We built React to solve one problem:
building large applications
with data that changes over time.

・・・・そんなサイト作らねーよ。

デザイナーは
何が知りたい?

  • vs. jQuery
  • 何がうれしいの?
  • 学習方法・情報収集
  • ・・・その他、知りたいと思ったこと
    は、いつでも挙げてください。

プログラマ向けトピックは避けます

  • 「常にデータが変わる大規模サイト」
  • Fluxアーキテクチャ
  • Virtual DOM
  • サーバーサイド連携
  • 周辺のソフトウェアスタックや開発環境など

デモ

刻々とデータが変わる大規模サイト!

ダウンロード:react-wanir-kit.zip

jQuery vs. React


  $("#what").doSomething().doNextThing()....
          

what にいろんな something(DOM操作/スタイル操作/Ajax通信/アニメーション etc)をする総合JSフレームワーク


  ReactDOM.render(
    <Something /> ,
    document.getElementById("what")
  );
          

Something(オリジナルHTMLタグ)を作成し、
whatにSomethingをレンダーするViewフレームワーク

・・・・・・ そもそもの土俵が違うことに注意 ・・・・・・

View比較 その1 - プラグイン -

「jQuery + plugin」で検索

2015年総まとめ、jQueryのプラグインとスクリプト100選
もうなんでもかんでもある感じ

「React + Component」で検索

React UI Components
JS.COACH/react
React Components
現在JP情報は皆無。これからどんどん増える?

View比較 その2 - アニメーション -

jQueryサイコー!


  $("#what").animate({top: "100px"}, "swing", "slow");
  $("#what").fadeOut("slow");
              

Reactのアニメーションは理解不能。(CSS-Transitionベース) アニメーションだけの目的では使わないように。 Componentを探してみるのは良いかも。例 : react-flip-move

View比較 その3 - スタイル変更 -

jQueryサイコー!


  $("#what").css({color: "red"});
              

Reactにはそういう機能はない。
(・・実は、これはアドバンテージでもあるのだが・・)

アレ、Reactだめじゃん?

・・・・ 既存サイトを手軽にちょっとカッコよくしたい。
という用途には React.jsは全く向かないようだ。

比較的 低レベルAPIであり、
"一発でできること"はない。
反面、"覚えること"は少ない。

(再掲: jQueryとは土俵が違うことに注意。)

Reactでプラグインへの接し方が変わる?

自作

jQuery Plugin vs. React Component

Reactを使うとなぜjQueryが要らなくなるのか

ソースコードの雰囲気をつかんでください。

JSX

render(){
    return (
      <ul className="item-list">
        {props.items.map(item => 
            <li className={'item' + item.stock === 0 ? ' soldout' : ''}>
            <div className="item-name">{item.name}</div>
            <div className="item-price">{item.price}</div>
            <OrderButton onClick={
                  orderClickHandler.bind(null, item.id)} />
            </li>;
        )}
      </ul> );
  };

JavaScript内にHTMLが書ける。
可変部分は { } で式を書ける。
繰り返し・分岐なども普通に書ける。
まるでJavaScriptの中にPHPを書いているような・・

プラグインに対する接し方

jQueryの場合・・・

  • 1. プラグイン紹介サイトを眺めて使えそうなのを選ぶ。
  • 2.A 動いた!(終わり)
  • 2.B ほんのちょっとCSSや機能をカスタマイズしたい。
    (・・のに・・もやもやして終わり)
  • 3. オリジナリティが生まれない。「あー、あのプラグインねっ」

Reactの場合・・・

  • 1.こんな機能が作りたい!
  • 2.A HTMLを少しずつReact Component化していく
  • 2.B HTMLデザインだけやってプログラマに実装してもらう
  • 3. オリジナルComponentがいつでも作れる!

というクリエティブな発想になりやすいかもしれない。

ところでさっきの・・・
View比較その3 - スタイル変更 -

jQueryサイコー???


  $("#what").css({color: "red"});
              
データの変更があったら、データに対応するHTMLタグを見つけて、{color:red}を設定。

データの変更があったら、

データに対応するHTMLタグ

を見つける。

だと??

$("#what").css({color: "red"});

React流 - スタイル変更 -


  var Something = ...
    <ul>
      {props.items.map( function(item){ 
        <li style={item.stock==0 ? {color:red}:{}}>{item.name}</li>;
      } ) }
    </ul>;
    
  ReactDOM.render(
    <Something items={data} /> ,
    document.getElementById("what")
  );
          
Reactは、「全体をレンダーし直す。」・・というプログラミングでよい。
(実際の動作は差分更新 - Virtual DOM - )

CSS selectorが前提のコーディングから解放!

コンポーネント指向のデザインへ

想像:React Componentで全てのHTMLを作る

ReactCSSを使って、
散らかった or 行き当たりばったりのCSSをパッケージング

⇒ "再利用可能"なオリジナルタグの蓄積。

アプリへの発展

Electronと合わせてデスクトップアプリも
TECH.KAYAC.COM: Electron + React + Redux

React Nativeと合わせてiOSアプリも
React Nativeを用いた初めてのiOSアプリ開発

Appendix

チュートリアル

「React+デザイナ」記事

面白サイト

ここ1~2年のjQueryに関する議論

最新JavaScript仕様(HTML5/ECMAScript6)を踏まえて・・

ご清聴
ありがとう
ございました