Angularを使って、カートで商品を選択する画面を作ってみた〜親子コンポーネント・サービス間連携をしてみる〜
Angularの復習をしようと思った
今回の開発で、Angularを使った。
基本フロント側は一人で開発をしていたが、
1画面で扱っているコンポーネントの数が600個をこえたり、
画面間で引き継ぐ項目がどんどん増えてきたりで、
だんだん大変なことになってきた。
なぜ大変な事になってきたか
サービス増えすぎ問題
それぞれのコンポーネントで値(以下、モデル)を共有させようとした時に、
サービスをDIして共有させていた。
モデルごとにサービスを作ってしまっていたので、
モデルが増えるたびにサービスが増え、大変なことになってしまった。
サービスの役割2つあるよ問題
ページ間をまたがないデータはコンポーネントに持たせればよいのに、
なぜかサービスにデータを持たせてしまっていた。
よって、
サービスが「データの保持」「データ処理」の2つの役割を持ってしまっていた。
サービスの役割が曖昧になり、追加でいじる時にどこをいじればよいのかわかりにくくなってしまっていた。
作ったのがこれ
説明
構成
最上位にAppComponentをおく。
このコンポーネントが、この画面で扱うすべてのプロパティを保持している。
子供はAppComponentのプロパティを共有している。
子供で起こったイベントは、AppServiceを通じてAppComponentに伝えられる。
商品をクリックした時、どのように画面が変更されるか
クリックしたことをAppServiceに伝える
AppServiceは、AppComponentが持っているプロパティを操作する
子コンポーネントに、AppComponentのプロパティ変更が伝わる
子コンポーネントは親のプロパティを共有しているので、
そのまま親のプロパティの変更が伝わります。
画面に結果があらわれる
まとめ
今回、AppComponentに画面上で扱うすべてのプロパティをもたせたので、
シンプルになった。
また、AppServiceを用いたことにより、
子供から親へのイベントバブリングと言った複雑なことをしなくても良くなった。
今後はこういう設計にしていきたいなぁ。