活用のコツと開発のポイント
ツール事業部 プロダクトマーケティングマネージャー
村上功光
グレープシティ JavaScript 製品のご紹介

はじめに

昨今の Web 開発と業務システムについて
3Developer Tools
レガシーの衰退
Webアプリケーションの構築に広く利用された技術が
現在、サポートの終了を迎えようとしています。
耐用年数
業務システムの耐用年数は一般に5〜10年。
近頃、旧システムの刷新ニーズが増えているようです。
HTML5
レガシーからの移行、新システムの構築にあたり
HTML5 / JavaScript の利用に注目が集まっています。

本日のセッション
4Developer Tools
グレープシティ JavaScript 製品のご紹介
活用のコツと開発のポイント

目次
1. 使い分け
2. 使いかた
3. JS フレームワークについて
4. おわりに
Developer Tools 5

GC JavaScript 製品の使い分け

GrapeCity の JavaScript ライブラリ
Developer Tools 7
Wijmo InputManJS SpreadJS

GrapeCity の JavaScript ライブラリ
Developer Tools 8
Wijmo InputManJS SpreadJS

Wijmo
9Developer Tools
あらゆる開発に対応する「標準ツール」として

Wijmo
Developer Tools 10

業務システムに求められる UI
Developer Tools 11

業務システムに求められる UI
Developer Tools 12
Tree
View
Input Chart
GridView

特徴
13Developer Tools
40+のコントロール
業務システムに必要とされることの多い
UI や機能を豊富に収録
軽量・高速
大量データも高速に処理
ライブラリ利用で懸念されがちなサイズにも注力し、軽量化を実現。
高品質 すべての収録コントロールが品質管理済み

InputManJS
14Developer Tools
「日本仕様」の入力フォームに

InputManJS
Developer Tools 15

17

18
漢字・ひらがな・カタカナ
全角・半角入力への対応
入力書式
和暦対応

InputManJS ふりがな、文字種変換、マスク 機能
19Developer Tools
文字種変換ふりがな取得 マスク

20

21
入力検証
カレンダー表示 時刻ピッカー
高機能コンボ

SpreadJS
22Developer Tools
お客様の「エクセルライク！」に応える

SpreadJS
Developer Tools 23

業務システムに求められる 「エクセルライク！」
24Developer Tools

業務システムに求められる 「エクセルライク！」
25Developer Tools
Excel ライクに
お願いします！

「Excel ライク」から想定される機能
26
フィルタ キーマップ
ピクチャ数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式
条件付き書式
マルチシート
罫線
書式
数式
テキストボックス
インデント
ウィンドウ枠の
固定
セル結合
スパークライン
グリッド表示
エクセル関数
チャート
エクセル入出力
ソート PDF出力

一般的なグリッドコンポーネントの機能範囲
27
フィルタ キーマップ
ピクチャ数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式
条件付き書式
マルチシート
罫線
書式
数式
テキストボックス
インデント
ウィンドウ枠の
固定
セル結合
スパークライン
グリッド表示
エクセル関数
チャート
エクセル入出力
ソート PDF出力

一般的なスプレッドシートコンポーネントの機能範囲
28
フィルタ キーマップ
ピクチャ数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式
条件付き書式
マルチシート
罫線
書式
数式
テキストボックス
インデント
ウィンドウ枠の
固定
セル結合
スパークライン
グリッド表示
エクセル関数
チャート
エクセル入出力
ソート PDF出力

Spread.Sheets の機能範囲 （全部できます）
29
フィルタ キーマップ
ピクチャ数式入力
テーブル
スライサー
入力検証
グループ化
Excelテーマ
数式
条件付き書式
マルチシート
罫線
書式
数式
テキストボックス
インデント
ウィンドウ枠の
固定
セル結合
スパークライン
グリッド表示
エクセル関数
チャート
エクセル入出力
ソート PDF出力

Spread.Sheets による Excel ファイル読込
30Microsoft Excel

Spread.Sheets による Excel ファイル読込
31GpapeCity Spread.Sheets

GrapeCity の JavaScript ライブラリ
Developer Tools 32
Wijmo InputManJS SpreadJS

各製品の特徴
Developer Tools 33

各製品の特徴
Developer Tools 34
収録コントロール数
InputManJS
収録コントロール数 : 9
SpreadJS
収録コントロール数 : 2
Wijmo
収録コントロール数 : 40+

各製品の特徴
Developer Tools 35
収録コントロール数
用途特化型汎用型
InputManJS
収録コントロール数 : 9
SpreadJS
収録コントロール数 : 2
Wijmo
収録コントロール数 : 40+

GrapeCity の JavaScript ライブラリ の使い分け
36Developer Tools
Wijmo ？
InputManJS ？
SpreadJS ？
多様な業務システムの要件に幅広く対応する標準ツールとして
日本固有の入力要件に対応する入力UIライブラリ集として
顧客の思う「Excelライク！」に完全対応するUIとして

GC JavaScript 製品の使いかた

GrapeCity が
おすすめする
製品活用法
1. デザイナの活用
2. ラッピング
3. 組み合わせる
Developer Tools 38

デザイナの活用
39Developer Tools
GUIベースのアプリ設計で、開発を効率化

デザイナ （Wijmo）
40

デザイナ （InputManJS）
41

デザイナ （SpreadJS）
42

ポイント
43Developer Tools
直感的にデザイン GUIをつかって、UIを直感的に設定
コード量削減 増大しがちな初期化処理のコードも、デザインデータの読み込みのみに
再利用 デザインデータを社内で共有。同一画面の作成工数はゼロに

デザイナの用法
44Developer Tools
デザイナによる
外観・プロパティ設定
保存
（JSON出力）
プログラムでの
JSON読込
初期画面
表示完了

◼ デモ

ライブラリをラッピング
46Developer Tools
最初のひと手間で、開発に柔軟性

オーソドックスな API の利用方法
47Developer Tools
API をコール
処理結果を戻す
アプリケーション
処理
ライブラリ

ビジネスロジックと API 間に生じる仕様の不一致
48Developer Tools
画面
表示
データ取得
UIへの値設定

ビジネスロジックと API 間に生じる仕様の不一致
49Developer Tools
画面
表示
データ取得
UIへの値設定
• データを表示前に検証したい
• 表示したくないデータがある
• DB値に応じて変換の上、表示したい
• API の動作を補正したい
• API の動作を制限したい

オーソドックスな API の利用方法
50Developer Tools
window.onload = function( ) {
var value;
・・・
// A1セルに値を設定
sheet.getCell(0, 0).setValue( value );
};

例） ラッピング
51Developer Tools
MySetValue( row, col, value ) {
// 開発アプリに応じたロジック処理
・・・
// セルに値を設定
sheet.getCell(row, col).setValue( value );
};

API のラッピングで解消
52Developer Tools
API をコール
処理結果を戻す
アプリケーション
処理
ライブラリ
関数やクラス処理で
ラッピング
柔軟性向上

組み合わせる
53Developer Tools
複数の製品を活用して、アプリケーションをもっと便利に

GrapeCity の JavaScript ライブラリ連携
Developer Tools 54
Wijmo x InputManJS
SpreadJS x InputManJS

Wijmo x InputManJS
55Developer Tools
InputManJS ドロップダウンプラグイン
お好きなコントロールを
組み合わせ ！
InputManJS
コントロール

Wijmo x InputManJS
56Developer Tools
従来のコンボボックス
With Wijmo (FlexGrid)
With Wijmo (TreeView)

SpreadJS x InputManJS
57Developer Tools
• Spread.Sheets V12J （2019年1月予）の新機能
• セル型としてInputManJSの機能を利用
• 数値、マスク、カレンダーコントロールの利用が可能に
InputManJS セル

JavaScript フレームワークについて

JavaScript フレームワーク対応状況
Developer Tools 59
Angular React Vue.js
Wijmo
○ ○ ○ ○
InputManJS
○ ○ ○ ○
SpreadJS
○
（Spread.Sheetsのみ）
○
（Spread.Sheetsのみ）
○
（Spread.Sheetsのみ）
○
（Spread.Sheetsのみ）

JS フレームワークのご利用状況
60Developer Tools
GrapeCity のお客さまは、どんなフレームワークをご利用か？

調査内容
61Developer Tools
• 弊社テクニカルサポートにお知らせいただく
「ご利用フレームワーク」情報を集計。
• 対象製品 ： Wijmo
• 集計期間 ： 2017年7月 – 2018年11月
総数として、1056 件のお問い合わせから集計

JavaScript フレームワークの利用状況
Developer Tools 62
49.6 %
0.8 %
0.6 %
7.3 %
41.8 %
8
524
6
77
441
期間 2017年7月 – 2018年11月 総数 1,056 件

Angular
63Developer Tools
利用率 49.0%

Angular （Ver. 2.x 〜）
64Developer Tools
フルスタック SPA のフロントエンド開発に必要な機能をフル実装
エンタープライズ向け
TypeScriptを採用。
エンタープライズ、大規模開発に求められる堅牢性に優れる
Google製
新バージョンのテストは、Googleのシステム・アプリへの適用。
世界有数の Tech 企業が品質を担保

フルスタック
Developer Tools 65
機能 Angular React
コンポーネントタイプのUI ○ ○
AJAX リクエスト ○ (Fetch API / axios)
ルーター ○ （React-router）
DI（依存性の注入） ○ (MobX)
入力フォーム作成 ○ -
コンポーネント単位のCSS ○ (styled-components)
XSSプロテクション ○ ○
ユニットテストツール ○ ○

フルスタックでない場合
66Developer Tools
• カバーされていない部分は自分で選定
• 選定工数の懸念
• テスト工数増加の懸念
自分の好きな部品、使いやすい部品などを組み合わせて
最適な下地を構築できるという利点もあります。

◼ AngularJS (V1.x 〜) は2021年6月30日でサポート終了
◼ 現在 V1.7.x が LTS （Long Time Support） 期間中
◼ これからの新規開発には不向き
AngularJS について
参考 LINK ： https://docs.angularjs.org/misc/version-support-status

React と Vue.js
68Developer Tools
利用率 0.6 % , 7.3%

React vs Vue.js
Developer Tools 69
機能 React Vue.js
コンポーネントタイプのUI ○ ○
AJAX リクエスト (Fetch API / axios) (Fetch API / axios)
ルーター （React-router） （Vue-router）
DI（依存性の注入） (MobX) (di-lite.js / injector.js)
入力フォーム作成 - -
コンポーネント単位のCSS (styled-components) ○
XSSプロテクション ○ ○
ユニットテストツール ○ ○

なぜ Vue.js の利用率が高いのか
Developer Tools 70
使いやすいです
GrapeCity お客様の声
• 先発のフレームワークから良い部分を吸収
• 理解しやすいコード
• 日本語ドキュメント
参考サイト
Comparing the React and Vue Ecosystems with a Real-World SPA
https://vuejsdevelopers.com/2018/09/04/comparing-vue-and-react/

「Comparing the React and Vue Ecosystems with a Real-World SPA」 より
React / Vue.js ルーティングコード比較
<Route path="/dashboard" render={() => (
this.props.user) ? <Dashboard /> : <Redirect to="/" />
)}/>
<Route path="/createNote" render={() => (
(this.props.user) ? <CreateNote /> : <Redirect to="/" />
)}/>
<Route path="/editNote" render={() => (
(this.props.user) ? <EditNote /> : <Redirect to="/" />
)}/>

「Comparing the React and Vue Ecosystems with a Real-World SPA」 より
React / Vue.js ルーティングコード比較
{
path: '/account',
component: Account,
name: 'account',
meta: {title: 'Account', requiresAuth: true}
},
{
path: '/createNote',
component: CreateNote,
name: 'createNote',
meta: {title: 'Create Note', requiresAuth: true}
},
{
path: '/editNote',
component: EditNote,
name: 'editNote',
meta: {title: 'Edit Note', requiresAuth: true}
}

https://jp.vuejs.org/index.html
日本語化されている Vue.js の公式サイト

フレームワーク ご利用傾向 総括
74Developer Tools
Angular
一番人気のフレームワーク。
企業向け開発に必要とされるフロントエンド機能をフル装備
Vue.js ローカライズを含めた使いやすさで浸透中。
React 弊社のお客様間では一番低い利用率。
*世界的には広く利用されています

React vs Vue.js
Vue.js の利用でハッピーな人の割合 – state of JS 2018 : https://2018.stateofjs.com/front-end-frameworks/vuejs/

React vs Vue.js
React の利用でハッピーな人の割合 – state of JS 2018 : https://2018.stateofjs.com/front-end-frameworks/react/

おわりに

今回のまとめ
78Developer Tools
使い分け 特徴をおさえた最適な用途での製品利用で、間違わない開発
使いかた
デザイナやラッパー、製品の併用を駆使して、
効率的に高性能なアプリの開発
フレームワーク
安心のAngular。Vue.jsも浸透中。
余裕のあるかたはReactでの検証もあり。

END