Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angularを利用したシステム開発事例
Similar to Angularを利用したシステム開発事例 (20)
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社）
More from Developer Solutions事業部 メシウス株式会社 （旧グレープシティ株式会社） (20)
Recently uploaded
Recently uploaded (9)
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 ご 清 聴 あ り が と う ご ざ い ま し た 。