VueComponentの切り方

この記事はAizu Advent Calendar 2019 の16日目の記事です。

Vue.jsでWebアプリを作ってる際、どう設計していいか迷うことがあるので、その際参考にした記事を自分なりに備忘録としてまとめようと思います。

コンポーネントってどう分ければいいんだよ！！

Vue.jsを使ってSPAを作ろうと早くも何ヶ月も経ってしまった...

だってどこでコンポーネント分けていいかわかんないんだもん！

そんなこんなで開発が止まってしまうことがよくあります。ありますよね？！ね？？

なぜVueComponentの設計が難しいか

従来のMVVMと違う

• VueComponentはView+ViewModelを持っている

本来ViewはViewModelからデータを受け取るため、View同士(もしくはViewModel同士)でデータを受け渡すことを想定していない。そのためつなぎ目を意識しなくてよいが、VueComponentの設計を考えないとデータの受け渡しなどに苦労する。

• Modelについての仕組みやルールがない

そのためVuex等の状態管理ライブラリを使う。
しかし理解してやらないと状態管理がめちゃくちゃになる。

今回はModelやVuexの取り扱いには触れず、どのようにコンポーネントを分ければいいかにだけ触れます。

VueComponentの切り方

責務によって切る!!

*参考記事にはContainerの責務と5つのComponentの責務がありますが、今回は自分に必要そうなContainerの責務と3つのComponentの責務を書きます。

• 「Container」の責務

• 「Component」の責務

  • 「ViewModel」の責務
  • Templateが肥大化したときに分割されつくられる「View」の責務
  • 「汎用UIパーツ」としての責務

「Container」の責務

*Containerは１画面につき１つ
#####1. ページの構成を表す

• 画面内に配置するComponentを定義する
• 画面全体で必要なModelやStateを管理する
• 画面内で共通の処理を定義する
• Component間のイベントバスになる

#####2. 他ページとの関係を表す

• 画面同士でデータや状態のやりとりを行う
• ルーティング処理を定義する
• vue-routerがurlと紐付けるコンポーネントとなる

「Component」の責務

「ViewModel」の責務

VueComponentはView(<template>部分)+ViewModel(<Script>部分)を持つ。
なので、ViewModelの役割を過不足なく実装されているとViewModelの責務を持っている。
######ViewModelの役割とは

https://aloerina01.github.io/blog/2018-05-01-1

・methodsにコンポーネントを操作するロジックを持つ
・data, computedにコンポーネントのStateを定義する
・data, computedにコンポーネントに必要なModelを定義し、リアクティブに更新する
・Templateにdataやcomputedで定義した値を反映する、またv-model等でTemplateの変更を検知する

ViewModelComponentはそれ単体で1つの機能を担っている。
Component名がその機能を表しているか確認する。

「View」の責務

View ComponentはReactのようにステートレスなコンポーネントで、親コンポーネントから受け取るpropsのみで動作させる。

そのため独自のViewのみを持ちViewModelを持たないComponentである。

ロジックを実装したり過剰に機能を持たせたりしないように注意する必要がある。

「Design」の責務

実装の仕方は「View」の責務と同じである。
違う点はUIパーツのデザイン共通化を目的に作られること。

#最後に
わかりづらい部分があると思いますがお許しください。アウトプットってむずかしい...

まだまだVueだけでなくエンジニアとしても🔰なのでこれからも学び続けたいです。

ご指摘大歓迎です。

#参考

メンテナンスしやすいVueComponentを設計するために気をつけていること
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと