【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネントの選定と活用ポイント

Web TECH FORUM 2017 in 大阪
JavaScript UIコンポーネントの
選定と活用ポイント
エス・ビー・エス株式会社
第一システム部
泉雄大

自己紹介
◆泉雄大（いずみゆうだい）
・大規模Webシステム開発に関わって7年目
Webの画面開発を中心とした開発標準を策定
・近年はASP.NET MVCを用いた開発案件がメイン
・HTML5 プロフェッショナル認定試験 Level 1 取得
・MCP 70-480 [Programming in HTML5 with JavaScript and CSS3] 取得
MS認定のWeb開発標準に関する試験

今日のお題
そもそもJavaScriptで何するの？
UIコンポーネントに求められるモノ
実際どう作るのか？

そもそもJavaScriptで何するの？

ここ数年JavaScript周りで良く聞くキーワード
SPA / MVVM / Flux
You Don’t Need jQuery
Angular + TypeScript
React(Redux) + Babel
Vue.js(Vuex)
Node.js / NPM
Browserify / Webpack
REST / GraphQL
JavaScript Fatigue

色々言われているけど、
結局何から始めたらよいのか？

今のJavaScriptについて整理しましょう

今のJavaScriptができること
・スタイル操作
・DOM(BOM)操作
・イベント制御
・通信制御（非同期）
・ルーティング（画面遷移）管理
・状態管理（DOM以外のデータ管理）
jQuery
（ちょっと前まで）
SPA Framework
（ここ最近）
PL（プレゼンテーションロジック）の
JavaScriptへの移行が進む

今のJavaScriptができること
これから始めるのであれば
Progressiveに取り込むのが吉
スタイル操作
DOM(BOM)操作
イベント制御
ルーティング制御
状態管理
通信制御

JavaScriptを用いたアプリ構成の例
サーバーサイドにもPLを持つ場合(ASP.NET MVC, etc.)
クライアントサイド
（JavaScript）
DOM(BOM)操作
通信制御
サーバーサイド
（ASP.NET MVC）
View
(aspx/razor)
Controller
(WorkerService)
Model
JSON
スタイル操作
イベント制御
状態管理

JavaScriptを用いたアプリ構成の例
JavaScriptでPLを実現する場合（SPA+WebAPI）
（JavaScript）
DOM(BOM)操作
通信制御
サーバーサイド
（ASP.NET MVC）
View
(aspx/razor/html)
Controller
(WorkerService)
Model
JSON
スタイル操作
イベント制御
状態管理
ルーティング状態管理(VM)

と、いうわけで

今日は特にこの部分のお話をします
（JavaScript）
DOM(BOM)操作
スタイル操作
イベント制御
どんなフレームワークでも
この部分はJavaScript

画面が業務システム内で担う機能は
インプット＆アウトプット

インプット … フォームコントロール
アウトプット … 表示用コントロール

入力をわかりやすく
ストレスを少なく
表示を見やすく
きれいに／かっこよく

＋開発生産性も大事
開発コスト
（工数／価格）
保守性
サポート

実際どう作るのか？

では実際どう作るか？
1. まずは手作りしてみる
2. ライブラリ導入（OSS）
3. ライブラリ導入（有償製品）
徹底比較！

まずは手作りしてみる

手作りする
◆インプット
・プレーンにHTMLで！
※入力チェックなどは
HTML5 constraint validation API ＋ JavaScript
で実装
◆アウトプット
・CSSで頑張る！

デモ（手作り編）

手作りする
◆対要件
・Web標準技術だけでも十分に画面開発できる
（そこまで入力仕様が難しくなければ）
・見た目のカスタマイズは自由
（開発者のセンス次第）
・複雑な要件に追従していくには標準仕様の知識が必須

手作りする
◆生産性
・一から作るのはやはり大変
・各種標準仕様の学習コスト
・自力でのブラウザ／デバイス非互換吸収は至難の業
・長期的な保守コストが高い
・専門の開発者がいない限りはおススメしません

余談：手作り部品の思い出
要件：
・日付入力の部品が欲しい
・和暦表示もしてほしい
・ライブラリ選んでる暇はない
自力で頑張りました

余談：手作り部品の思い出
その後どうなったか…
・リリースから半年後、特定の日付のみ発生する
障害が発覚
・平成が終わる？？！！

ライブラリ導入（OSS）

◆インプット
・jQuery UI
・jQuery Validation Plugin
・jQuery UI
・Chart.js

デモ（OSS編）

◆対要件
・無償ライブラリでもできることの幅は広い
・マルチブラウザ／デバイス対応（程度の差はあり）
・要件的にかゆいところに手が届かない場合も

◆生産性
・標準仕様APIが分からなくても開発効率アップ
・１つのライブラリだけではすべてを満たせないことも
・サポートのレベルは配布元による

ライブラリ導入（有償製品）

◆インプット
・Wijmo5
・Wijmo5

デモ（有償製品編）

◆対要件
・入力から出力までオールインワン
・とにかく使える機能が多い
・見た目のカスタマイズも自力（＝CSS）で可能
・レスポンシブルレイアウト／タッチサポート

◆生産性
・あらゆる点でOSS＋＋
・マルチブラウザ／デバイスへの対応
・品質、サポート面の安心感
・お金がかかる

◆作り方の比較
まとめ
開発工数保守工数サポート費用規模
手作り × × －〇小規模
OSS 〇 ▲ ×～▲ 〇小～中規模
製品〇〇 ▲～〇 × 中～大規模

まとめ
ポイントは何を「コスト」として考えるか？
開発工数？
保守工数？
費用？

まとめ
Webの場合は製品導入が近道なことも
開発工数
保守工数
費用

ご清聴ありがとうございました

【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント

More Related Content

What's hot

Similar to 【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント

More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）