Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

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

目次

はじめに

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

 Wijmoは単体での利用に加え、さまざまなJavaScriptフレームワークやライブラリと組み合わせて利用できます。本連載で主に紹介してきたAngularのほか、ReactVue.jsKnockoutをサポートします。今回は、最近注目が高まっている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 create-react-appで生成したプロジェクトの実行結果(p001-default)

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


  • 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-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5