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

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

　本連載では、グレープシティが提供するJavaScriptライブラリWijmo（ウィジモ）について、サンプルとともに利用例を紹介します。今回は、最近注目のJavaScriptライブラリReactと組み合わせて、Wijmoを利用する方法を紹介します。Reactの環境では、WijmoのコントロールをReactのコンポーネントとして利用できます。

はじめに

　Wijmo（ウィジモ）は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。

　Wijmoは単体での利用に加え、さまざまなJavaScriptフレームワークやライブラリと組み合わせて利用できます。本連載で主に紹介してきたAngularのほか、ReactやVue.js、Knockoutをサポートします。今回は、最近注目が高まっているReactでWijmoを利用する方法を紹介します。

対象読者

• WebサイトやWebアプリケーションのレベルをワンランク上げたい方
• AngularでWijmoを使っていて、最近話題のReactも試したい方
• 高度なUI部品を手軽に使いたいReactユーザーの方

必要な環境

　Wijmo 5はECMAScript 5に対応するブラウザーをサポートします。詳細はWijmoのWebサイトで案内されています。

　Reactでは、プロジェクトを生成する「create-react-app」ツールが利用できます。ツールの動作にはNode.jsが必要です。

　以上を踏まえて、今回は以下の環境で動作を確認しています。

• Windows 10 64bit版
  • Wijmo 5 5.20182.524
  • React 16.5.2
  • Node.js v8.12.0 64bit版
  • Microsoft Edge 42.17134.1.0

　サンプルコードを実行するには、プロジェクトのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「npm start」コマンドを実行します。

Reactとは

　Reactは、Facebook社とオープンソースコミュニティで開発されているJavaScriptライブラリで、以下の特徴があります。

Viewのみを担当

　Reactは画面のユーザーインターフェース（View）作成にフォーカスしたライブラリで、それ以外の機能を提供する任意のライブラリと組み合わせて利用できます。

仮想DOM

　Webページ要素のツリー構造をメモリー上で操作して、最小限の差分だけを実際のWebページ（DOMツリー）に反映する仕組みで、高速な動作を実現します。

単一方向のデータフロー

　Reactでは、保持しているデータを画面に反映する一方で、画面の変更を自動的にデータに反映する機能（いわゆる「双方向データバインディング」）は提供しません。データの流れを単一方向にすることで、わかりやすいコードを実現します。

　Reactの詳細については、CodeZineの連載記事「基礎からはじめるReact入門」も参考にしてください。

Reactプロジェクトを生成して内容を確認

　ReactでWijmoを利用する前準備として、ここでは、create-react-appツールで生成するReactのプロジェクトについて説明します。Node.jsがインストールされている環境で、リスト1の通りコマンドを実行すると、Reactのプロジェクトを生成して実行できます。（1）のnpxは、create-react-appをインストールせずに、直接実行できるコマンドです。

［リスト1］Reactのプロジェクトを生成して実行するコマンド

npx create-react-app p001-default # プロジェクト生成 ...（1）
cd p001-default                   # プロジェクトフォルダーに移動 ...（2）
npm start                         # プロジェクト実行 ...（3）

　リスト1（3）を実行するとWebブラウザーが起動して、図1のように表示されます。

図1　create-react-appで生成したプロジェクトの実行結果（p001-default）

　本記事では、リスト1のコマンドで生成したReactプロジェクトを修正して、WijmoのコントロールをReactプロジェクトで表示させています。Reactプロジェクト構成の詳細については、CodeZineのReact記事も参考にしてください。