グレープシティ ECHO Tokyo 2019 日本ビジネスシステムズ株式会社 情報システム本部 IT戦略室 エキスパート 宮下 雄太様 情報システム本部 ビジネスサービス部 インプリメント課 中谷 大造様による「Angularを利用したシステム開発事例」の登壇資料です。

1. Angularを利用したシステム開発事例

2. Copyright (C) Japan Business Systems, Inc. 2
■ 会社案内
■ フレームワークに求めること
■ デモ（勤怠管理システム）
■ Angularとは
■ Angularのメリット
■ Angularのデメリット
■ OSSライブラリと製品のバランス
■ デモ（見積システム）

3. Copyright (C) Japan Business Systems, Inc. 3
自己紹介
宮下 雄太 （みやした ゆうた）
情報システム本部 IT戦略室 エキスパート
→システムの企画, 立案, 設計, PMO
趣味：スポーツ（ソフトテニス, スノーボード）
中谷 大造 （なかたに たいぞう）
情報システム本部 情報システム部 インプリメント課
→フレームワーク選定, システム実装
趣味：e-スポーツ（Splatoon）

4. Copyright (C) Japan Business Systems, Inc. 4
フ レ ー ム ワ ー ク に 求 め る こ と

5. Copyright (C) Japan Business Systems, Inc. 5
理想の時間の使い方
便利機能
+デザイン
主流機能の実装
要件整理

6. Copyright (C) Japan Business Systems, Inc. 6
実際の時間の使い方
便利機能
+デザイン
主流機能の実装
要件整理

7. Copyright (C) Japan Business Systems, Inc. 7
理想と現実
便利機能
+デザイン
主流機能の実装
要件整理
便利機能
+デザイン
主流機能の実装
要件整理
理想
現実

8. Copyright (C) Japan Business Systems, Inc. 8
理想と現実
便利機能
+デザイン
主流機能の実装
要件整理
便利機能
+デザイン
主流機能の実装
要件整理

9. Copyright (C) Japan Business Systems, Inc. 9
理想と現実 = フレームワークに求めるもの
便利機能
+デザイン
主流機能の実装
要件整理
便利機能
+デザイン
主流機能の実装
要件整理

10. Copyright (C) Japan Business Systems, Inc. 10
実装に時間がかかる理由
デザイン
便利機能
スキルの変化
マルチデバイス対応
わかりやすい＋テーマのあるUI
Clientサイドの充実
ライブラリの変化の速さ
ソート
フィルタ
グルーピング

11. Copyright (C) Japan Business Systems, Inc. 11
実装に時間がかかる理由
デザイン
便利機能
スキルの変化
マルチデバイス対応
わかりやすい＋テーマのあるUI
Clientサイドの充実
ライブラリの変化の速さ
ソート
フィルタ
グルーピング
CSSフレームワーク
JavaScriptフレームワーク

12. Copyright (C) Japan Business Systems, Inc. 12
フレームワークに求めるもの
ドキュメントの量
サンプルソースの量
CSSフレームワーク JavaScriptフレームワーク
フレームワーク間の親和性

13. Copyright (C) Japan Business Systems, Inc. 13
フレームワークに求めるもの
ドキュメントの量
サンプルソースの量
CSSフレームワーク JavaScriptフレームワーク
フレームワーク間の親和性
サポート体制
更新の頻度

14. Copyright (C) Japan Business Systems, Inc. 14
フレームワークに求めるもの
ドキュメントの量
サンプルソースの量
CSSフレームワーク JavaScriptフレームワーク
フレームワーク間の親和性
サポート体制
更新の頻度
価格

15. Copyright (C) Japan Business Systems, Inc. 15
実装に時間がかかる理由
デザイン
便利機能
スキルの変化
マルチデバイス対応
わかりやすい＋テーマのあるUI
Clientサイドの充実
ライブラリの変化の速さ
ソート
フィルタ
グルーピング
CSSフレームワーク
MDL
JavaScriptフレームワーク
AngularJS + Wijmo

16. Copyright (C) Japan Business Systems, Inc. 16
実 際 に 圧 縮 で き た 工 数

17. Copyright (C) Japan Business Systems, Inc. 17
工数比較
カレンダー
TreeView
Grid周り
Excelエクスポート
列レイアウト
1W
1W
7W + アキラメ
3W + アキラメ
3W
自前で実装
15W
+ アキラメ

18. Copyright (C) Japan Business Systems, Inc. 18
工数比較
カレンダー
TreeView
Grid周り
Excelエクスポート
列レイアウト
1W
1W
7W + アキラメ
3W + アキラメ
3W
自前で実装
3D
2D
5D
2D
3D
今回の実装
15W
+ アキラメ
15D
＝3W
12W＋アキラメの差

19. Copyright (C) Japan Business Systems, Inc. 19
工数比較
カレンダー
TreeView
Grid周り
Excelエクスポート
列レイアウト
1W
1W
7W + アキラメ
3W + アキラメ
3W
自前で実装
3D
2D
5D
2D
3D
今回の実装
15W
+ アキラメ
15D
＝3W
12W＋アキラメの差
しかも、変更が容易

20. Copyright (C) Japan Business Systems, Inc. 20
A n g u l a r と は

21. Copyright (C) Japan Business Systems, Inc. 21
AngularJSとAngularは同じもの？違うもの？
AngularJS ＝ Angular
AngularJS ≠ Angular

22. Copyright (C) Japan Business Systems, Inc. 22
AngularJSとAngularは同じもの？違うもの？
AngularJS ＝ Angular
AngularJS ≠ Angular

23. Copyright (C) Japan Business Systems, Inc. 23
AngularJSとAngularは同じもの？違うもの？
■ AngularJS
■ 2012年～ （ 2021年7月サポート終了予定 ）
■ MVC、双方向バインド、etc… （ 当時としては画期的だった ）
■ JavaScript の進歩に対応するには抜本的な改善が必要だった
■ Angular
■ 2016年～（ 最新バージョンは 8.2.x ）
■ Component ベースの JavaScript フルスタックフレームワーク
■ TypeScript を全面採用
■ AngularJS からの移行パスはあるが互換性はない

24. Copyright (C) Japan Business Systems, Inc. 24
リリーススケジュール
■ リリースは年に2回
■ 全てのバージョンが18ヶ月のサポート期間
■ 1つ前のバージョンに対する互換性保証
6.0.0 Active
7.0.0 Active
8.0.0 Active
6.0.0 LTS
7.0.0 LTS
8.0.0 LTS

25. Copyright (C) Japan Business Systems, Inc. 25
A n g u l a r の メ リ ッ ト
ただし、個人の主観あり。

26. Copyright (C) Japan Business Systems, Inc. 26
フルスタックフレームワークであるということ
UniversalRouterPWAProtractor
Dependency
Injection
MaterialKarmai18n
HttpFormsComponentsCompilerCLICDKAuguryAnimations
Language
Services
Lazy Loading Library Template

27. Copyright (C) Japan Business Systems, Inc. 27
フルスタックフレームワークであるということ
■ アプリケーション開発に必要な機能が Angular で完結する
■ 開発に使用する各種ライブラリーを選定、更新する作業からの解放される
■ 使用する部品やベストプラクティスの共有が容易で、
プロジェクトを超えて同じ構造、クオリティに集約し維持できる

28. Copyright (C) Japan Business Systems, Inc. 28
強力なCLIの開発サポート
■テンプレート生成（ new / generate ）
■ Angular アプリのワークスペース生成
■ Component や Service などの自動生成
■ビルド（ serve / build ）
■ ローカル開発サーバーを実行
■ 高度なビルド機能
■ AOT（ Ahead of Time ）ビルドで高速実行
■ Tree Shaking で不要な部品の除去

29. Copyright (C) Japan Business Systems, Inc. 29
強力なCLIの開発サポート
■モジュール更新（ update ）
■ Angularのバージョンを更新（依存関係を考慮して更新される）
■ メジャーバージョンアップに必要な変更点が自動で修正される
■ 手元のアプリケーションは v7 から v8 にアップグレードするのに約半日程度
■CLIの拡張（ schematics ）
■ CLIのテンプレート生成や更新処理に機能を追加
■ schematicsに対応しているライブラリーをCLI経由でインストール
■ ライブラリー追加時に必要なコードの修正が自動で反映される

30. Copyright (C) Japan Business Systems, Inc. 30
A n g u l a r の デ メ リ ッ ト
※個人の意見です。

31. Copyright (C) Japan Business Systems, Inc. 31
フルスタックフレームワークを採用するということ
Angular がフレームワークとしてサポートする範囲
覚えていますか、、、？

32. Copyright (C) Japan Business Systems, Inc. 32
フルスタックフレームワークを採用するということ
UniversalRouterPWAProtractor
Dependency
Injection
MaterialKarmai18n
HttpFormsComponentsCompilerCLICDKAuguryAnimations
Language
Services
Lazy Loading Library Template

33. Copyright (C) Japan Business Systems, Inc. 33
フルスタックフレームワークを採用するということ
とても数が多い
これを全部覚えないと開発できない、、、？

34. Copyright (C) Japan Business Systems, Inc. 34
フルスタックフレームワークを採用するということ
Angularの機能を全て覚える必要は無いが、最初に覚えることは多い
Web標準 Angular専用
HTML
CSS / SCSS / LESS
ECMAScript / TypeScript
HTML5 API
Module
Component / Directive
Dependency Injection
Router
HttpClient
etc…

35. Copyright (C) Japan Business Systems, Inc. 35
RxJSの罠
Reactive Extensions（ Rx ） という言葉をご存じでしょうか？

36. Copyright (C) Japan Business Systems, Inc. 36
RxJSの罠
Rx は時間軸をシーケンスとみなして関数で処理するライブラリー

37. Copyright (C) Japan Business Systems, Inc. 37
RxJSの罠
■ RxJS は強力だが概念が難しく学習コストがとても高い。とても高い。
■ RxJS につまずいて Angular を諦めた人もいるのではというレベル
■ Hot / Cold の概念
■ オペレーター（処理を実行する関数）は全部で 100 個以上
■ 適当に使うと解読困難な処理が量産され、バグの温床に
■ 多用しない（ Promiseを使う ）

38. Copyright (C) Japan Business Systems, Inc. 38
O S S ラ イ ブ ラ リ と 製 品 の バ ラ ン ス
さらにAngular時代

39. Copyright (C) Japan Business Systems, Inc. 39
OSSライブラリと製品のバランス（ OSS ）
■NgRx
■ Angular チームが開発している Redux ライクな状態管理ライブラリー
■ Angular で Redux ライクなライブラリーのデファクトスタンダード
■ RxJS 必須なので学習コストは高め
■ immer と組み合わせると便利
■Angular Material（ + CDK ）
■ Angular チームが開発している Material Design UI ライブラリー
■ Material で画面を実装するために必要となる部品は大体揃っている
■ ドラッグ＆ドロップ、オーバーレイなどの便利機能（ CDK ）

40. Copyright (C) Japan Business Systems, Inc. 40
OSSライブラリと製品のバランス（有償製品）
■SpreadJS
■ こちらも Angular に対応
■ Wijmo では対応できない、数式を含む複雑なエクセル風入力
■Wijmo
■ Angular に対応し、フレームワーク更新時のサポートも早い
■ 現在の主な用途は グリッド表示、グリッド入力とチャート
（フォーム入力系は Angular Material に集約）

41. Copyright (C) Japan Business Systems, Inc. 41
ご 清 聴 あ り が と う ご ざ い ま し た 。