ReactJSを使用したEsriJS（更新済み）

ReneRubalcava

<\/HEAD>

<\/P>

つい最近、ArcGIS JavaScript APIをReactJSと組み合わせてウィジェットで使う方法についてのブログ記事<\/A>を書きました。最近Reactについて何人かと話していたので、ここでその話題を再び取り上げようと思います。一番大きな疑問はなぜReactを使うのか？<\/A>ということかもしれません。個人的には、Reactは非常にエレガントなAPIだと思います。使い始めて、ユーザーインターフェースを構成するコンポーネントを簡単に組み合わせられることがわかると、それがReactの真価が発揮される瞬間だと思います<\/EM>。Reactの素敵な特徴の一つは仮想DOM<\/A>の使用です。基本的に、アプリケーションの状態をルートで更新すると、アプリケーション全体のDOMが再レンダリングされます。遅くなりそうに聞こえますが、実際はそうではありません。ただし、非常に大きなJSONエディター<\/STRONG>を作ろうとするなど馬鹿なことをすると遅くなることもあります **あはん**<\/EM>。更新がどのように行われるかについてはこちら<\/A>で詳しく読むことができます。<\/P>

<\/P>

すべては単なるDOMです<\/H2>DijitsやDijitライフサイクル<\/A>に慣れているなら、Reactコンポーネントにも似たようなライフサイクル<\/A>があります。どちらの場合も、それらを理解することは有益です。Reactはオプションの構文であるJSX<\/A>を使用します。JSXは完全にオプションであることを覚えておくことが重要です。一部の人々はDOMとJavaScriptを混ぜることに反対しますが、そうではありません。JSXは単にDOM構造を定義するのに役立つだけです。ブラウザで動作させるためには純粋なJavaScriptにコンパイルする必要があり、そのためのツール<\/A>やツール<\/A>があります。<\/P>

<\/P>

大衆向けウィジェット<\/H2>サンプルアプリケーションのソースコードはこちらで入手可能です<\/A>。アプリケーション全体を詳細に説明するつもりはありませんが、ウィジェットについて強調したいと思います。<\/P>

<\/P>

まず最初にLocatorというウィジェットがあります。これは単純にカーソルの地図座標を表示します。<\/P>

\/** @jsx React.DOM *\/
define([\n  'react',\n  'dojo/topic',\n  'helpers/NumFormatter'\n], function(\n  React,\n  topic,\n  format\n) {\n  var fixed = format(3);\n  var LocatorWidget = React.createClass({\n    getInitialState: function() {\n      return {\n        x: 0,\n        y: 0\n      };\n    },\n    componentDidMount: function() {\n      this.handler = this.props.map.on('mouse-move', function(e) {\n        this.update(e.mapPoint);\n      }.bind(this));\n    },\n    componentWillUnMount: function() {\n      this.handler.remove();\n    },\n    update: function(data) {\n      this.setState(data);\n      topic.publish('map-mouse-move', data);\n    },\n    render: function() {\n      return (\n        <div className='well'>\n          <label>x: {fixed(this.state.x)}<\/label>\n          <br \/>\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;
            );
        }
    });
    return LocatorWidget;
});

このコンポーネントは非常にシンプルです。ただ座標を表示し、これらの座標をアプリケーションに公開するために

dojo/topicを使用しています。以前dojo/topicについて話しました。次のコンポーネントはもう少し面白いものです。ボタンがあり、それを押すとdraw toolが起動し、描画中の距離を表示するラベルがあります。/** @jsx React.DOM */
define([
'react',
'esri/toolbars/draw',
'esri/geometry/geometryEngine',
'dojo/topic',
'dojo/on',
'helpers/NumFormatter'
], function(
React,
Draw, geomEngine,
topic, on,
format
) {
var fixed = format(3);
var DrawToolWidget = React.createClass({
getInitialState: function() {
return {
startPoint: null,
btnText: 'Draw Line',
distance: 0,
x: 0,
y: 0
};
},
componentDidMount: function() {
this.draw = new Draw(this.props.map);
this.handler = this.draw.on('draw-end', this.onDrawEnd);
this.subscriber = topic.subscribe(
'map-mouse-move', this.mapCoordsUpdate
);
},
componentWillUnMount: function() {
this.handler.remove();
this.subscriber.remove();
},
onDrawEnd: function(e) {
this.draw.deactivate();
this.setState({
startPoint: null,
btnText: 'Draw Line'
});
},
mapCoordsUpdate: function(data) {
this.setState(data);
// この条件チェックはあまり好きではありません
if (this.state.startPoint) {
this.updateDistance(data);
}
},
updateDistance: function(endPoint) {
var distance = geomEngine.distance(this.state.startPoint, endPoint);
this.setState({ distance: distance });
},
drawLine: function() {\n this.setState({ btnText: 'Drawing...' });
this.draw.activate(Draw.POLYLINE);
on.once(this.props.map, 'click', function(e) {
'this.setState({ startPoint: e.mapPoint });
'this.onDrawEnd(); }.bind(this)); }.bind(this)) }, render: function() { return ( {this.state.btnText} Distance: {fixed(this.state.distance)} ); } }); return DrawToolWidget; });このコンポーネントはもう少し複雑ですが、geometryEngine を使用します 開始点と終了点の間の距離を直線で計算するために。私は単一の線分の後に描画インタラクションを停止するためにいくつか醜いハッキーなことをしています。なぜなら、Drawツールでの単一描画は少し奇妙な動作だからです（私の意見では）。もし描画中のポリラインセグメントの総距離を追跡したい場合は、もう少し複雑で、開始点を最後の終了点に更新しながら距離を累積していく必要があります。これは素敵なreduce関数のように聞こえますね。その演習はあなたにお任せします。もしもっと時間をかけるなら、ここで起きているロジックの一部をヘルパーメソッドに分けたり、リスナーを整理したりするかもしれませんが、現状ではかなりうまく動作しています。<\/P><\/P>最後にやるべきことは、これらのコンポーネントを実際にページ上にレンダリングすることです。<\/P><\/P>\/\** @jsx React.DOM *\/\ndefine([\n  'react',\n  'dojo/query',\n  'dojo/dom',\n  'dojo/dom-construct',\n  '.\/components\/Locator',\n  '.\/components\/DrawTools'\n], function(\n  React,\n  query, dom, domConstruct,\n  Locator, DrawTools\n) {\n  var createContainer = function() {\n    var c = query('.widget-container');\n    if (c.length) {\n      return c.shift();\n    }\n    var container = domConstruct.create('div', {\n      className: 'widget-container'\n    }, dom.byId('map_root'), 'first');\n    return container;\n  };\n  var addContainer = function(map) {\n    React.render(\n      <div>\n        <Locator map={map} \/>\n        <DrawTools map={map} \/>\n      <\/div>,\n      createContainer());\n  };\n  return {\n    addContainer: addContainer\n  };\n});<\/PRE>ここでReactはページ上の定義されたDOM要素にコンポーネントをレンダリングし、マップをウィジェットにプロパティとして渡すことができます。propsやpropTypesについてはあまり触れませんでしたが、それらがどのように機能するかはこちらで詳しく読むことができます。また、Properties vs Stateについても良い解説があります。<\/P><\/P>ハッキング開始

このアプリケーションのデモはこちらでご覧いただけます。もし見逃した場合はソースコードがこちらにあります。<\/P>

ご覧の通り、これはArcGIS API for JavaScriptアプリケーションで任意のライブラリやフレームワークを統合できる別の例です。Dojoには使うべき部分（そして非常に便利なものもあります、例えばdojo/topic）がありますが、それ以外はJavaScriptライブラリをミックス＆マッチするのはそれほど難しくありません。Reactは完全なフレームワークではなく、そのことはFB開発者たちが最初に言うでしょうが、MVCの中でも特にVを非常によく担っています。だから皆さん、どんどんハックして何より楽しんでください！<\/P>

<\/P>

さらに多くのgeodevヒントやコツについては私のブログをご覧ください。<\/P><\/BODY><\/HTML>