Download as PDF, PPTX
More Related Content
![[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント](https://cdn.slidesharecdn.com/ss_thumbnails/grapecity-webtechforum20181207-181225045631-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）
![[GrapeCity Web TECH FORUM 2018]レガシーからの移行 - 株式会社日本プロテック](https://cdn.slidesharecdn.com/ss_thumbnails/grapecitywebtechforum2018npc-181226045503-thumbnail.jpg?width=640&height=640&fit=bounds)
Angularを利用したシステム開発事例
- 1.
- 2. Copyright (C) JapanBusiness Systems, Inc. 2 ■ 会社案内 ■ フレームワークに求めること ■ デモ（勤怠管理システム） ■ Angularとは ■ Angularのメリット ■ Angularのデメリット ■ OSSライブラリと製品のバランス ■ デモ（見積システム）
- 3. Copyright (C) JapanBusiness Systems, Inc. 3 自己紹介 宮下 雄太 （みやした ゆうた） 情報システム本部 IT戦略室 エキスパート →システムの企画, 立案, 設計, PMO 趣味：スポーツ（ソフトテニス, スノーボード） 中谷 大造 （なかたに たいぞう） 情報システム本部 情報システム部 インプリメント課 →フレームワーク選定, システム実装 趣味：e-スポーツ（Splatoon）
- 4. Copyright (C) JapanBusiness Systems, Inc. 4 フ レ ー ム ワ ー ク に 求 め る こ と
- 5. Copyright (C) JapanBusiness Systems, Inc. 5 理想の時間の使い方 便利機能 +デザイン 主流機能の実装 要件整理
- 6. Copyright (C) JapanBusiness Systems, Inc. 6 実際の時間の使い方 便利機能 +デザイン 主流機能の実装 要件整理
- 7. Copyright (C) JapanBusiness Systems, Inc. 7 理想と現実 便利機能 +デザイン 主流機能の実装 要件整理 便利機能 +デザイン 主流機能の実装 要件整理 理想 現実
- 8. Copyright (C) JapanBusiness Systems, Inc. 8 理想と現実 便利機能 +デザイン 主流機能の実装 要件整理 便利機能 +デザイン 主流機能の実装 要件整理
- 9. Copyright (C) JapanBusiness Systems, Inc. 9 理想と現実 = フレームワークに求めるもの 便利機能 +デザイン 主流機能の実装 要件整理 便利機能 +デザイン 主流機能の実装 要件整理
- 10. Copyright (C) JapanBusiness Systems, Inc. 10 実装に時間がかかる理由 デザイン 便利機能 スキルの変化 マルチデバイス対応 わかりやすい＋テーマのあるUI Clientサイドの充実 ライブラリの変化の速さ ソート フィルタ グルーピング
- 11. Copyright (C) JapanBusiness Systems, Inc. 11 実装に時間がかかる理由 デザイン 便利機能 スキルの変化 マルチデバイス対応 わかりやすい＋テーマのあるUI Clientサイドの充実 ライブラリの変化の速さ ソート フィルタ グルーピング CSSフレームワーク JavaScriptフレームワーク
- 12. Copyright (C) JapanBusiness Systems, Inc. 12 フレームワークに求めるもの ドキュメントの量 サンプルソースの量 CSSフレームワーク JavaScriptフレームワーク フレームワーク間の親和性
- 13. Copyright (C) JapanBusiness Systems, Inc. 13 フレームワークに求めるもの ドキュメントの量 サンプルソースの量 CSSフレームワーク JavaScriptフレームワーク フレームワーク間の親和性 サポート体制 更新の頻度
- 14. Copyright (C) JapanBusiness Systems, Inc. 14 フレームワークに求めるもの ドキュメントの量 サンプルソースの量 CSSフレームワーク JavaScriptフレームワーク フレームワーク間の親和性 サポート体制 更新の頻度 価格
- 15. Copyright (C) JapanBusiness Systems, Inc. 15 実装に時間がかかる理由 デザイン 便利機能 スキルの変化 マルチデバイス対応 わかりやすい＋テーマのあるUI Clientサイドの充実 ライブラリの変化の速さ ソート フィルタ グルーピング CSSフレームワーク MDL JavaScriptフレームワーク AngularJS + Wijmo
- 16. Copyright (C) JapanBusiness Systems, Inc. 16 実 際 に 圧 縮 で き た 工 数
- 17. Copyright (C) JapanBusiness Systems, Inc. 17 工数比較 カレンダー TreeView Grid周り Excelエクスポート 列レイアウト 1W 1W 7W + アキラメ 3W + アキラメ 3W 自前で実装 15W + アキラメ
- 18. Copyright (C) JapanBusiness Systems, Inc. 18 工数比較 カレンダー TreeView Grid周り Excelエクスポート 列レイアウト 1W 1W 7W + アキラメ 3W + アキラメ 3W 自前で実装 3D 2D 5D 2D 3D 今回の実装 15W + アキラメ 15D ＝3W 12W＋アキラメの差
- 19. Copyright (C) JapanBusiness Systems, Inc. 19 工数比較 カレンダー TreeView Grid周り Excelエクスポート 列レイアウト 1W 1W 7W + アキラメ 3W + アキラメ 3W 自前で実装 3D 2D 5D 2D 3D 今回の実装 15W + アキラメ 15D ＝3W 12W＋アキラメの差 しかも、変更が容易
- 20. Copyright (C) JapanBusiness Systems, Inc. 20 A n g u l a r と は
- 21. Copyright (C) JapanBusiness Systems, Inc. 21 AngularJSとAngularは同じもの？違うもの？ AngularJS ＝ Angular AngularJS ≠ Angular
- 22. Copyright (C) JapanBusiness Systems, Inc. 22 AngularJSとAngularは同じもの？違うもの？ AngularJS ＝ Angular AngularJS ≠ Angular
- 23. Copyright (C) JapanBusiness Systems, Inc. 23 AngularJSとAngularは同じもの？違うもの？ ■ AngularJS ■ 2012年～ （ 2021年7月サポート終了予定 ） ■ MVC、双方向バインド、etc… （ 当時としては画期的だった ） ■ JavaScript の進歩に対応するには抜本的な改善が必要だった ■ Angular ■ 2016年～（ 最新バージョンは 8.2.x ） ■ Component ベースの JavaScript フルスタックフレームワーク ■ TypeScript を全面採用 ■ AngularJS からの移行パスはあるが互換性はない
- 24. Copyright (C) JapanBusiness 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) JapanBusiness Systems, Inc. 25 A n g u l a r の メ リ ッ ト ただし、個人の主観あり。
- 26. Copyright (C) JapanBusiness Systems, Inc. 26 フルスタックフレームワークであるということ UniversalRouterPWAProtractor Dependency Injection MaterialKarmai18n HttpFormsComponentsCompilerCLICDKAuguryAnimations Language Services Lazy Loading Library Template
- 27. Copyright (C) JapanBusiness Systems, Inc. 27 フルスタックフレームワークであるということ ■ アプリケーション開発に必要な機能が Angular で完結する ■ 開発に使用する各種ライブラリーを選定、更新する作業からの解放される ■ 使用する部品やベストプラクティスの共有が容易で、 プロジェクトを超えて同じ構造、クオリティに集約し維持できる
- 28. Copyright (C) JapanBusiness Systems, Inc. 28 強力なCLIの開発サポート ■テンプレート生成（ new / generate ） ■ Angular アプリのワークスペース生成 ■ Component や Service などの自動生成 ■ビルド（ serve / build ） ■ ローカル開発サーバーを実行 ■ 高度なビルド機能 ■ AOT（ Ahead of Time ）ビルドで高速実行 ■ Tree Shaking で不要な部品の除去
- 29. Copyright (C) JapanBusiness Systems, Inc. 29 強力なCLIの開発サポート ■モジュール更新（ update ） ■ Angularのバージョンを更新（依存関係を考慮して更新される） ■ メジャーバージョンアップに必要な変更点が自動で修正される ■ 手元のアプリケーションは v7 から v8 にアップグレードするのに約半日程度 ■CLIの拡張（ schematics ） ■ CLIのテンプレート生成や更新処理に機能を追加 ■ schematicsに対応しているライブラリーをCLI経由でインストール ■ ライブラリー追加時に必要なコードの修正が自動で反映される
- 30. Copyright (C) JapanBusiness Systems, Inc. 30 A n g u l a r の デ メ リ ッ ト ※個人の意見です。
- 31. Copyright (C) JapanBusiness Systems, Inc. 31 フルスタックフレームワークを採用するということ Angular がフレームワークとしてサポートする範囲 覚えていますか、、、？
- 32. Copyright (C) JapanBusiness Systems, Inc. 32 フルスタックフレームワークを採用するということ UniversalRouterPWAProtractor Dependency Injection MaterialKarmai18n HttpFormsComponentsCompilerCLICDKAuguryAnimations Language Services Lazy Loading Library Template
- 33. Copyright (C) JapanBusiness Systems, Inc. 33 フルスタックフレームワークを採用するということ とても数が多い これを全部覚えないと開発できない、、、？
- 34. Copyright (C) JapanBusiness 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) JapanBusiness Systems, Inc. 35 RxJSの罠 Reactive Extensions（ Rx ） という言葉をご存じでしょうか？
- 36. Copyright (C) JapanBusiness Systems, Inc. 36 RxJSの罠 Rx は時間軸をシーケンスとみなして関数で処理するライブラリー
- 37. Copyright (C) JapanBusiness Systems, Inc. 37 RxJSの罠 ■ RxJS は強力だが概念が難しく学習コストがとても高い。とても高い。 ■ RxJS につまずいて Angular を諦めた人もいるのではというレベル ■ Hot / Cold の概念 ■ オペレーター（処理を実行する関数）は全部で 100 個以上 ■ 適当に使うと解読困難な処理が量産され、バグの温床に ■ 多用しない（ Promiseを使う ）
- 38. Copyright (C) JapanBusiness Systems, Inc. 38 O S S ラ イ ブ ラ リ と 製 品 の バ ラ ン ス さらにAngular時代
- 39. Copyright (C) JapanBusiness Systems, Inc. 39 OSSライブラリと製品のバランス（ OSS ） ■NgRx ■ Angular チームが開発している Redux ライクな状態管理ライブラリー ■ Angular で Redux ライクなライブラリーのデファクトスタンダード ■ RxJS 必須なので学習コストは高め ■ immer と組み合わせると便利 ■Angular Material（ + CDK ） ■ Angular チームが開発している Material Design UI ライブラリー ■ Material で画面を実装するために必要となる部品は大体揃っている ■ ドラッグ＆ドロップ、オーバーレイなどの便利機能（ CDK ）
- 40. Copyright (C) JapanBusiness Systems, Inc. 40 OSSライブラリと製品のバランス（有償製品） ■SpreadJS ■ こちらも Angular に対応 ■ Wijmo では対応できない、数式を含む複雑なエクセル風入力 ■Wijmo ■ Angular に対応し、フレームワーク更新時のサポートも早い ■ 現在の主な用途は グリッド表示、グリッド入力とチャート （フォーム入力系は Angular Material に集約）
- 41. Copyright (C) JapanBusiness Systems, Inc. 41 ご 清 聴 あ り が と う ご ざ い ま し た 。