君は心理学者なのか?

大学時代に心理学を専攻しなぜかプログラマになった、サイコ(心理学)プログラマかろてんの雑記。

Angularを使って、カートで商品を選択する画面を作ってみた〜親子コンポーネント・サービス間連携をしてみる〜

Angularの復習をしようと思った

今回の開発で、Angularを使った。

基本フロント側は一人で開発をしていたが、

1画面で扱っているコンポーネントの数が600個をこえたり、

画面間で引き継ぐ項目がどんどん増えてきたりで、

だんだん大変なことになってきた。

なぜ大変な事になってきたか

サービス増えすぎ問題

それぞれのコンポーネントで値(以下、モデル)を共有させようとした時に、

サービスをDIして共有させていた。

モデルごとにサービスを作ってしまっていたので、

モデルが増えるたびにサービスが増え、大変なことになってしまった。

サービスの役割2つあるよ問題

ページ間をまたがないデータはコンポーネントに持たせればよいのに、

なぜかサービスにデータを持たせてしまっていた。

よって、

サービスが「データの保持」「データ処理」の2つの役割を持ってしまっていた。

サービスの役割が曖昧になり、追加でいじる時にどこをいじればよいのかわかりにくくなってしまっていた。

作ったのがこれ

f:id:karoten512:20180128205736g:plain

github.com

説明

構成

f:id:karoten512:20180128211839p:plain

最上位にAppComponentをおく。

このコンポーネントが、この画面で扱うすべてのプロパティを保持している。

子供はAppComponentのプロパティを共有している。

子供で起こったイベントは、AppServiceを通じてAppComponentに伝えられる。

商品をクリックした時、どのように画面が変更されるか

クリックしたことをAppServiceに伝える

f:id:karoten512:20180128211859p:plain

AppServiceは、AppComponentが持っているプロパティを操作する

f:id:karoten512:20180128212001p:plain

コンポーネントに、AppComponentのプロパティ変更が伝わる

f:id:karoten512:20180128212033p:plain

コンポーネントは親のプロパティを共有しているので、

そのまま親のプロパティの変更が伝わります。

画面に結果があらわれる

f:id:karoten512:20180128212121p:plain

まとめ

今回、AppComponentに画面上で扱うすべてのプロパティをもたせたので、

シンプルになった。

また、AppServiceを用いたことにより、

子供から親へのイベントバブリングと言った複雑なことをしなくても良くなった。

今後はこういう設計にしていきたいなぁ。