Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

注目JavaScriptライブラリReactで「Wijmo(ウィジモ) 5」を使いこなす

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第14回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

ReactプロジェクトにWijmoを追加して動作させる

 ReactプロジェクトでWijmoを利用できるようにするには、リスト2のコマンドを実行します。Node.jsのパッケージマネージャーnpmを利用して、プロジェクトにWijmoを追加できます。

[リスト2]プロジェクトにWijmoを追加するコマンド
npm install --save wijmo

 プロジェクトに追加したWijmoの利用方法を、図2のサンプルで説明します。このサンプルでは、Wijmoのゲージコントロール(LinearGauge)と、ゲージの値を設定するテキストボックスを画面に表示します。マウスやタッチでゲージを操作すると、テキストボックスの数値が更新されます。逆に、テキストボックスの数値を変更すると、ゲージが更新されます。

図2 ReactプロジェクトでWijmoのゲージを表示するサンプル(p002-basic)
図2 ReactプロジェクトでWijmoのゲージを表示するサンプル(p002-basic)

 最初に、画面表示に対応するAppコンポーネント(App.js)にリスト3の通り記述して、Wijmoのファイルやモジュールをインポートします。(1)はWijmoのCSS、(2)は日本語リソースです。(3)は、このサンプルで利用するゲージ機能を含むWijmoのモジュール(wijmo.react.gauge)を「wjGauge」という名前でインポートする記述です。

[リスト3]Wijmoのファイルやモジュールをインポートする記述(p002-basic/src/App.js)
import 'wijmo/styles/wijmo.css'; // CSS ...(1)
import 'wijmo/cultures/wijmo.culture.ja'; // 日本語リソース ...(2)
import * as wjGauge from 'wijmo/wijmo.react.gauge'; // Wijmoモジュール ...(3)

 次に、Appクラスを、リスト4の通り実装します。

[リスト4]Appクラスの実装(p002-basic/src/App.js)
class App extends Component {
  // コンストラクター // ...(1)
  constructor(props) {
    // スーパークラスのコンストラクターでpropsを初期設定 // ...(2)
    super(props);
    // stateを初期設定 ...(3)
    this.state = {
      gaugeValue: 30
    }
    // メソッドをthisにバインド ... (4)
    this.gaugeChanged = this.gaugeChanged.bind(this);
    this.textboxChanged = this.textboxChanged.bind(this);
  }
  // コンポーネントの表示 ...(5)
  render() {
    return (
      <div className="App">
        <h1>Wijmo + React(ゲージ)</h1>
        {/* WijmoのLinearGauge ...(6) */}
        <wjGauge.LinearGauge className="wijmo-control" isReadOnly={false}
         value={this.state.gaugeValue} valueChanged={this.gaugeChanged}/>
        {/* ゲージの値を表示・設定するテキストボックス ...(7)*/}
        ゲージの値:<input type="text" className="textbox"
         value={this.state.gaugeValue} onChange={this.textboxChanged}/>
      </div>
    );
  }
  // ゲージが変更されたときの処理 ...(8)
  gaugeChanged(newValue) {
    this.setState({gaugeValue: newValue.value});
  }
  // テキストボックスが変更されたときの処理 ...(9)
  textboxChanged(newValue) {
    this.setState({gaugeValue: Number(newValue.target.value)});
  }
}

 (1)はクラスのコンストラクターです。Reactのコンポーネントでは、コンストラクターの引数で渡される情報のオブジェクト(props)を、スーパークラスのコンストラクターで(2)のように初期設定します。また、Reactコンポーネントの内部状態を管理するthis.stateプロパティを、(3)で初期設定します。ここではゲージ値の初期値30をgaugeValueに設定します。(4)は、後述するイベント処理内で、Appクラス自身をthisとして参照できるようにする処理です。

 (5)のrenderは、コンポーネントを表示するReactのメソッドで、HTMLタグによく似た記法でコンポーネントの表示内容を記述できます。この記法はJSXと呼ばれるJavaScript拡張記法です。

 (6)がWijmoのゲージ(LinearGauge)に対応する記述で、表1の属性を設定します。「value={this.state.gaugeValue}」のようにタグの属性値を{}で囲むのはReactの記法で、JavaScriptの変数やメソッドを設定できます。

表1 LinearGaugeに設定する属性
属性名 属性の意味 設定内容
isReadOnly 読み取り専用かどうか false(操作可能)
value ゲージの値 this.state.gaugeValue(stateに保持した値)
valueChanged ゲージ変更時の処理 リスト4(8)のthis.gaugeChangedメソッド

 同様に、テキストボックスに対応する記述(7)には、表2の属性を設定します。

表2 テキストボックスに設定する属性
属性名 属性の意味 設定内容
value テキストボックスの値 this.state.gaugeValue(stateに保持した値)
onChange テキストボックス変更時の処理 リスト4(9)のthis.textboxChangedメソッド

 ゲージの変更時は(8)、テキストボックスの変更時は(9)の処理が実行されます。引数から変更後の値を取得して、this.setStateメソッドでstateのgaugeValueを更新しています。this.setStateは、stateを更新するReactのメソッドで、更新内容は画面に自動的に反映されます。

[注]単一方向のデータフロー

 Reactでは、データフローが単一方向のため、画面が更新されても自動的に内部状態(state)が更新されません。画面が更新された場合、リスト4(8)(9)のようにthis.setStateメソッドで明示的にstateを更新する必要があります。

 対してAngularでは、双方向データバインディング機能で、画面と内部状態を双方向に同期します。図2と類似のサンプルをAngularで実装した本連載の過去記事も参照してください。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5