Design大阪からこんにちは、福山健(@kenfdev)です。Designというのを聞いたことがあるかもしれません。フロントエンドの開発をしていく上で大事なことの一つに、画面の部品をどのようにComponentに分割していくかというものがあります。たくさんのフロントエンドエンジニアがこの点については毎回悩まれると思います。Designという考え方があると僕は解釈しています。Frostさんという方が提唱したもので、英語であれば下記にて公開されていますし、本を注文することもできます。atomicdesign.bradfrost.comまた、日本では下の書籍がReactを使って具体的にわかりやすく説明されています。DesignのComponentがどのようにやり取りすると良いかを紹介します。Designだから」、という問題では無いのですが「誰がVuexを意識するのか?」という課題が常につきまとってきます。StoreにActionをdispatchしていいのかという2点がポイントになってきます。ここに一定のルールを設けないと、そこら中からStateを受け取ったり、そこら中からActionをdispatchしたりしてどこで何が起きているのかかなり追いづらくなってしまいます。イメージとしては下図のような状況です。OrganismsはPropsを受け取ることもあれば、Storeからstateを受け取ることもあり、eventを$emitすることもあればStoreにdispatchすることもある。これでは流れが追いにくかったり、実装するときも迷いが生じやすくなります。DesignとVuexの関係は下図のようになります。Templates以外はdispatchしてはいけない(イベントは$emitするのみ)というルールになります。StoreはPagesのみが意識すべきでは?ここで出てきそうなのが「StoreはPagesのみが意識すべき」という意見です。ルールとしてはわかりやすいんですけど、実際にやってみるとTemplates→Pagesにeventを$emitして、PagesからStoreにdispatchするのが冗長に思いました。Templates→Pagesのコピペ感がつらいTemplates→Pagesへの$emitが増えるほどPagesでもイベントハンドラが増えてしまうのです。(やり方はいくつかあるにせよ冗長さは避けられないと思います)そういうわけでCYDASでは「dispatchに関してはTemplatesからやってもいいのでは?」という意見もあってTemplatesまではStoreを意識して良いルールにしています。Pagesはいつdispatchする?Templatesがdispatchするなら、むしろPagesはいつdispatchするのか?という疑問も出てくると思います。基本的にOrganismsより下の層から$emitされたイベントについてはTemplatesからStoreにdispatchします。Pagesがdispatchするタイミングはmountedなどの、ページ初期化時などのタイミングくらいしか無いのかなと思っています。TemplatesにPropsは必要なのか?Templatesからdispatchができるなら、いっそのことstateもStoreから持ってこればいいのでは?という疑問も出てきます。それをやってしまうともはやPagesが必要なくなると思うのですが、あくまでデータはProps経由でもらうというルールにしています。Design(にこれも限らずですが)とStorybookを組み合わせて使うことも多いかと思います。storybook.js.orgこのStorybook上でTemplatesを表現する際に、Propsで制御できたほうがVuexのセットアップ(gettersだったりstateだったり)が必要なくなります。標準のVue.jsで、Propsにデータを差し込むだけでいろいろなデータを流し込めるので、変に手間のかかることをせずに済むと思っています。いったわけで、TemplatesはPropsでデータを受け取るようにしています。まとめこの記事で述べているやり方はあくまで1例にすぎません!大事なのは皆が好き勝手違う書き方をしてしまわないようにルール(コーディング規約)をある程度決めておくことだと思います。3日目に参加してきましたこんにちは、たじりん(@ayaka_pespes)です。多くの人の人生の大半を占める「働く時間」に幸せを届けます。人を管理することだけが目的のシステムから脱出し全ての人が「働きがい」を感じられる世の中へ。それが私たちのミッションです。それぞれがイキイキと活躍できる組織や企業をつくる人材プラットフォームを作っています。Inc.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。