AngularとBootstrapを使った業務システムの設計について考えた。

AngularとBootstrapを使った業務システムの設計について考えた。
コンポーネントとルーティングをサンプルを示しながら説明します。

Transcript

1. AngularとBootstrapを使った 業務システムの設計と実装 2019.3.28
2. 自己紹介 ふるてつ@tetsufuru19681 https://tetsufuru.hatenablog.com/ 福岡のエンジニア 客先常駐するタイプ COBOL→VB6.0→VB.net→ Spring BootなIT人生。 他 jQuery→AngularJS→Angular 夢は定年後に個人IT発明家になること （年金をもらいながら） ちょくちょく参加するコミュニティ 最近ハマっているもの
3. わたしが業務システムにもとめるもの 観点 もとめるもの もとめる 度合い 説明 ユーザ視点 デザイン性 △ 画面の複雑さ △ 遷移の複雑さ △ その他 メニュー ◦ 業務システムにはほぼ必要 ユーザ権限でメニュー切替 ◦ 製造視点 作りやすさ（早く作れること） ◦ 担当PGによるばらつきがないコード ◦ 安定したライブラリ・フレームワーク ◦ サポート終了は大きなリスク。 Bootstrapは長く続きそう。
4. Bootstrapを使用した画面構成の案（1年前の構想） SignInComponent 通信に中にエラーが発生しました ErrMessageComponent InformationComponent SigniInService InformationService ErrMessageService DB Rest API Rest API AppComponent
5. Bootstrapを使用した画面構成の案（1年前の構想） PagenationComponent HeaderComponent FooterComponent Router xxSearchComponent AppComponent HeaderService Rest API DB xxSearchService Rest API
6. 実現したかった内容 No 内容 詳細 できているか？ 1 コンポーネントを分けた実装 Angular4くらいの時に1画面作ったことがあり、 その時はAppComponentに全部書きました！ 〇 2 Bootstrapを使ってレスポンシブに 人がやっているのを見て、ちょっとかっこいいなと思い ◦ 3 Angular Routingを使いたい 前回チャレンジした時よくわからなかったので ◦ 4 多言語化 多言語化はしておきたい ◦ 5 ページング 前回チャレンジしなかった。 （サーバで件数を絞る感じにしたい） × 途中 6 バリデーション 前回チャレンジしたがもう一度 ◦ 7 セッション管理 Sessionとかtokenとかcsrfとか苦手なので × 8 ユーザの権限でメニュー管理 一般と管理者でメニューを分けたい × 9 ログインせずに直リンクを防ぐ Guardというのを使う？ ×
7. Bootstrapについて 使い方 備考 今回 使用 1 ng-bootstrap Angularを使用してBootstrapを再構築 ◦ 2 ngx-bootstrap ng-bootstrapと似たもの （開発プロジェクトが異なる、Boostrapのバージョンも） 3 素のBootstrapを使う npm install --save @ng-bootstrap/ng-bootstrap npm install --save bootstrap npm install --save jquery popper.js npm install --save @ng-bootstrap/ng-bootstrap 参考）Angular6でBootstrap4を使ってみる。 https://dev.classmethod.jp/client-side/angular6-bootstrap4/ Node.jsのコマンドでインストールできます。
8. コンポーネント作成時に使用したAngular CLIコマンド ng new MyApp npm install --save @ng-bootstrap/ng-bootstrap 参考）Angular公式リファレンスの CLI Command Reference https://angular.jp/cli ・Project作成 ng generate component ./component/common/header ng generate component ./component/common/footer ng generate component ./component/common/pagenation ng generate component ./component/pages/signIn ng generate module app-routing --flat --module=app ・Component追加 ・Router作成 ng generate service service/common/header ng generate service service/sign-in/signIn ・その他 Service追加
9. それぞれのソース Bootstrapの navbar 業務画面 Router
10. バリデーションについて 使い方 備考 今回 使用 1 テンプレート駆動フォーム 割と簡単にできる方 （htmlにrequiredなどを書く感じ） 2 リアクティブフォーム ちょっと難しい方。 こちらの方が柔軟にできるらしい。 ◦ npm install --save @ng-bootstrap/ng-bootstrap
11. バリデーションについて リアクティブ・フォームにしました（ちょっと難しい方）
12. 多言語化 使い方 備考 今回 使用 1 Angular純正 2 ngx-translate 勤務先で他の方が実装していて簡単そうだったから ◦ npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save npm install --save @ng-bootstrap/ng-bootstrap 参考）リポジトリのReadMeを参考にしました。 https://github.com/ngx-translate/core Node.jsのコマンドでインストールできます。
13. 多言語のソース AppModule SignInComponent
14. 1年やってみて困ったこと・課題 npm install --save @ng-bootstrap/ng-bootstrap Node.jsのコマンドでインストールできます。 No 困ったこと・課題 対策など 1 Bootstrapを使いこなせない。 １～2か月ほどBootstrapの勉強が必要でした。 cssの書き方も勉強しました。 2 コンポーネントをどう分けていいか、やっぱり良くわからなくて手探りになった。 よく考えてみた。 3 前に勉強していた時とhttpのデータ取得のやり方が違っていた。最初勉強し た時はpromise。いまはObservableになってる。 もう1回勉強中。 4 http通信でデータを取得した後に .map とか .pipe がでてくると途端に分か らなくなる。（JavaのStreamっぽい感じの） 5 いざコードを書くと自分の思ったようにかけない（サービス内のメソッドなど） ・メソッド内でインスタンスを new したいけどできそうにない。 ・httpで取得した値を別のインスタンスに複製したい⇒.map?を使う 公式ドキュメントを見る 6 迷うことが多い 日本語化もどちらが良いか迷った。 バリデーションもどちらが良いか迷った。 Bootstrapも ネットで調べた。 あと人の話を聞いた。 7 やりだすとサーバも作りたくなり、Angularとは別のことまで手を出し始めて 時間が足りなくなってきた。
15. 今後、知りたいこと No 知りたい内容 備考 1 Angular（SPA）でのセキュリティ対策はどうしたらいいですか？ Session、csrf、tokenとか苦手で… どこかにベストプラクティス的なものが掲載 されていれば教えてください。 2 ページングのコンポーネントを作ろうとして なんだかめんどくさくなってきました。 ゴリゴリ書くしかないですか？ 3 ユーザの権限でメニュー管理をしたい。 これもDBから権限を取得して書くしかないですか？ Bootstrapのnavbarを書くのがめんどくさくなって… 4 ログインした後に、ログインユーザの情報（氏名、ユーザID、管理者 権限の有無）などをどこかに保持したいのですが、 適当な保持場所はどこですか？ （ユーザーが故意に変更できない場所が良いのですが） どこかにベストプラクティス的なものが掲載 されていれば教えてください。 ↓sessionService的なクラスを作るので しょうか？ https://qiita.com/Yamamoto0525/items/efc0e5 617c7427fea86a
16. まとめ No 結果 備考 1 1年たった割にはやりたかったことができていません。 困ったこと・課題がいっぱいあったから… 2 Bootstrapを使うとデザイン性は高くはないが、 楽に画面を作ることができる。 ※cssは知ってないといけません。 しかし他の人がやっているAngular Materialはきれいだし使いやすそうだった。 3 Bootstrapを使うと業務画面の開発者をロジックに大分集中させら れると思います。 （HtmlのデザインはBootstrapのclassを指定するだけ） 4 複雑な画面、画面遷移は設計時に避けた方が良いかと。 画面遷移はメニュー（navbar）中心にしたほうが後で苦労しないと 思います。 5 業務系はバリデーションはリアクティブフォームが良いかと思います。 6 日本語しか使わなくとも、多言語化はしておいて損はないと思いま す。
17. 以上、ありがとうございました。