React.jsのボタンの作成方法 ECショッピングサイトのカートの場合

前回、
React.jsは業務レベルで使えるのか？　実践的利用について解説で、
ReactでWebサイト構築するためには
従来のスキルの蓄積がまったく通用しない「リスク」の説明をしました。

従来のスキルの蓄積がまったく通用しない、というのは、まずは、巷で利用可能なよくあるWebサイトのMVCフレームワーク、テンプレートエンジンが使えません。それらのほとんどすべてはHTML＋JavaScirpt＋CSSというセット構成になっていますが、Reactは、すべてJavaScript(JSX)に一元化するので、そういうのは意味がなくなるわけです。

ボタンのクリックといえば、すぐにjQueryを利用した、DOMのセレクタ、Clickイベントなどを思い出しますが、これも使えません。Reactは、繰り返しになりますが、すべてすべてJavaScript(JSX)に一元化されており、HTMLのDOMを直接操作することはなくJSX上の仮想DOMで、コンポーネント指向で、という開発になります。
つまり、便利に活用できるすべてのjQueryライブラリはReactでは使用不能ということです。

巷で利用可能なCSSで装飾されたボタンも利用できません。ゼロベースでReactのJSX上で一元的に組み込むことになります。

念の為ですが、上記はReactの本来の設計に基づくストレートフォワードな利用法を想定しており、「ReactはMVCフレームワークのVである」と言ったような「イレギュラー」な利用法は想定していません。

百聞は一見に如かず、React.の流儀で、本当によくあるWebページ上のボタンを作成したらどうなるのか？
その方法を見て行きましょう。

今回は、特に前回の「業務レベルに耐えうるのか？」というテーマに基いて具体性をもたせるために、ECショッピングサイトのカートへの応用を前提とすることにします。

CSSで装飾されていて、アイコンも表示できて、マウスがボタン上にホバーしたら色が変わり、クリックしたら色が変わるような、よくあるボタンです。

(function() {
  'use strict';

  var ___ = worldcomponent;

  var BtnComponent = React.createClass({

    componentWillMount: function() {
      var com = this;
      ___.world = com.props.___color.compute(function(x) {
        com.forceUpdate();
      });
      ___.world = com.props.___color.appear("#ffae00");
    },
    onMouseEnter: function() {
      var com = this;
      ___.world = com.props.___color.appear("#ffbf22");
    },
    onMouseLeave: function() {
      var com = this;
      ___.world = com.props.___color.appear("#ffae00");
    },
    onMouseDown: function() {
      var com = this;
      ___.world = com.props.___color.appear("#ddaa11");
    },
    onMouseUp: function() {
      var com = this;
      ___.world = com.props.___color.appear("#ffbf22");
    },
    render: function() {
      var com = this;
      var btnStyle = {
        "padding": "10px 10px",
        "vertical-align": "middle",
        "margin": "0 0",
        "position": "relative",
        "background-color": com.props.___color.now(),
        "border-radius": "4px",
        "color": "#222",
        "font-size": "30px",
        "-webkit-transition": " none",
        "transition": "none",
        "text-shadow": "0 1px 1px rgba(0, 0, 0, .3)"
      };

      var imageLink;

      if (com.props.togo === "CHECKOUT") {
        imageLink = "./images/shopping-cart.svg";
      } else {
        imageLink = "./images/add-shopping-cart.svg";
      }

      var ulStyle = {
        "display": "table",
        "margin": "0 0 0 0",
        "padding": "0 0 0 0"

      };

      var liStyle = {
        "display": "table-cell",
        "margin": "0 0 0 0",
        "padding": "0 0 0 0",
        "vertical-align": "middle",
        "text-align": "center"
      };

      var el = (
        <button onMouseDown={com.onMouseDown} onMouseEnter={com.onMouseEnter} onMouseLeave={com.onMouseLeave} onMouseUp={com.onMouseUp} style={btnStyle}>

          <ul style={ulStyle}>
            <li style={liStyle}>
              <img height="50" src={imageLink}/>
            </li>
            <li style={liStyle}>
              {com.props.txt}
            </li>
          </ul>

        </button>
      );
      return el;
    }
  });

  var ContentComponent = React.createClass({
    render: function() {
      var divStyle = {
        "padding": "110px 0 0 0"
      };

      var el = (
        <div style={divStyle}>
          this is the content<br/>

          <BtnComponent ___color={___()} togo="CHECKOUT" txt="CHECK OUT"/></li>

          <BtnComponent ___color={___()} togo="ID001" txt="ADD TO CART"/>
          <BtnComponent ___color={___()} togo="ID002" txt="ADD TO CART"/>
        </div>
      );
      return el;
    }
  });

  var mount = React.render(<ContentComponent/>, document.body);

}
());

唯一のリアルDOMは、document.bodyであり、
ここでは簡単に、そこに<ContentComponent/>というReactコンポーネントの仮想DOMをマウントしています。

ContentComponentは、今回のメインテーマであるBtnComponentを利用して、コンポーネントを合成して設計されています。

<BtnComponent ___color={___()} togo="CHECKOUT" txt="CHECK OUT"/></li>

DIVのスタイルは、CSSファイルで定義するのではなく、

  var divStyle = {
        "padding": "110px 0 0 0"
      };

とJSX内でJSON形式で変数（定数）を定義しておき、

var el = (
        <div style={divStyle}>
          this is the content<br/>
          .......

というように、仮想DOMにスタイリングを反映させます。

動的なサイトでは、CSSも動的に変化させるコードを書きますが、それもJavaScriptで一元的に取り扱うようになっています。

BtnComponentですが、これはもう、クリックされるというUIなので「時間変化」するコンポーネントです。

Reactは時間変化するUIについてstateというFRP機構を実装していますが、ここでは筆者が独自に設計したFRP機構であるworldcomponentを外部ライブラリとして利用しています。

React組み込みFRPのstateを利用しない理由は、これはコンポーネントの構成が複雑になると通用しなくなるという問題があるからです。詳細は、
React 解説【動的HTML-FRP編】に解説しています。

とにもかくにも、Webサイト上に、ありふれたボタンひとつを設置するだけでも、Reactでは上記のようなコードになるわけで、従来のWeb技術がまったく援用できない、通用しないということが明確にわかると思います。

「これはやばい」と思った人は多いでしょう。
Reactという新規のWeb技術に適用してしまっているアーリーアダプターな技術者は、この辺多かれ少なかれ独力で克服しているわけですが、多くの技術者開発者にとっては、習得して適応するには、かなりハードルが高い技術であることが理解できると思います。

MVCフレームワークは使えない、jQueryも使えない（使うべきではない）、CSSのやり方も違う、開発者に完全リセットさせてゼロベースで開発を要求する非常にやばい技術、それがReactです。

しかし、多くの人がそういう共通認識を持つ、っていうことは問題となる事態は改善される余地があり、改善の余地があれば現状が改善されるのが技術の世界です。特にITでは。

次回はそのことを書きます。

React-Bootstrap　React.jsフロントエンドのための再構築されたテンプレート