Vue.jsアーキテクチャリング勉強会でVue のアーキテクチャ のLTをした話
10月30日にクラウドワークスで「Vue × Vuex のアーキテクチャ完全に理解した」というタイトルで登壇させていただきました
本日の #VueArchit にて発表した「Vue × Vuex のアーキテクチャ完全に理解した」の資料です！https://t.co/QOZf89Iiyz
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) October 30, 2019
登壇のきっかけ
今回、サービスでVue.js Nuxtの環境で開発を行ったので、その知見をまとめたいと思っていた際にみーたさんのTweetを見て、これでLT駆動開発だっ！と思い申し込みました。
vueを使った大規模アーキテクチャの勉強会とかやったら皆来てくれますかね？
— みーた＠ﾃｹﾃｹ↑🦉💀🍬🐺 (@earlgrayMK) August 29, 2019
私達が知りたいから他社さんお声掛けしたいって感じなんですけど、場所とかは提供しますので...✨
興味ある方はいいねください:)#vuejs
登壇前の準備
実際に今回開発を行ったメンバーは僕だけじゃないので、登壇前に社内で内容を話あって決めました。
最後の方にめちゃくちゃ追加しましたが...😇😇😇
開発の内容を振り返りしてまとめた感じなので、完璧な資料とはいかないですが、開発に臨む前に見るには良い内容になったかなとは思います。
当日
めちゃくちゃ緊張しながらいきました！
何回かLTは実施していましたが、20分ものLTはあまりやったことがなかったので...
様子をツイートと共に振り返りたいと思います。
#VueArchit
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) October 30, 2019
みんな落ち着いて発表を聞きたいが為に1番目の発表をとりあうじゃんけんが開催されるなどした。
一番最初が一番楽
「Atomic Designは実際の開発に即していない」
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) October 30, 2019
わかりみ #VueArchit
わかりみ
BASEさんではデザインではAtomic Designを採用しつつも、実装はAtomic Designに乗っ取っていないらしい...
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) October 30, 2019
#VueArchit
なるほどと思いながら聞いてました。
完全理解ですって！？ #VueArchit
— mgr=['カービィ','ちょろ太','まぐろ','もぐら','みゅー'] (@biccur_gama) October 30, 2019
完全に理解した()
element uiいいぞ！！ #vuearchit
— resessh (@resessh7) October 30, 2019
element uiはいいぞ〜
storeにActionsとGetterで接続するのはPagesという構成、うちも同じだ #VueArchit
— えんぴつ@子育て中フロントエンジニア (@empitsu88) October 30, 2019
state直接参照するのは別によくない…？#VueArchit
— ぶた気温@転職の季節 (@butaosuinu) October 30, 2019
弊社も同様の理由でgetterを経由しないstore参照は処刑モノですね。#VueArchit
— 笹木 信吾 (@HousouP) October 30, 2019
「Stateを直接参照すると、Vuexに保存されているデータを何も介さず見ることになる。Getterなどで表示内容を変更して参照している場合があるため、情報の一意性が保てなくなる。」
— mgr=['カービィ','ちょろ太','まぐろ','もぐら','みゅー'] (@biccur_gama) October 30, 2019
「Mutationを呼ぶことでvueファイルから、Stateの内容を直接書き換えることができる...」
#VueArchit
この辺の議論は面白かったのでアンケートとった(後ほど)
TS安定して使うためにvue3使いたい感はある#VueArchit
— 笹木 信吾 (@HousouP) October 30, 2019
型安全で開発したい(切実)
うちの会社の場合、SPAじゃないしストアがそのページだけでしか使わない軽めのものばかりなので、Vuex より Vue.observable の方を(自分が)推奨していってる #VueArchit
— mascii (@mascii_k) October 30, 2019
もちろんこういう使い方もあるので、あくまで大規模の時はって話である
VuexへのTypeScriptの導入は名著「実践TypeScript」を参考にしたらステキな感じに型定義ができました #VueArchit
— えんぴつ@子育て中フロントエンジニア (@empitsu88) October 30, 2019
今度見る！
propsでfunction渡そうぜっていうのはどこかで見たな
— mgr=['カービィ','ちょろ太','まぐろ','もぐら','みゅー'] (@biccur_gama) October 30, 2019
#VueArchit
これどっちが良いのよ
どこを太らせるように寄せていくか？という話 #VueArchit
— おおやまみちのく (@yamanoku) October 30, 2019
これが言いたかった
この資料、概要がまとまっていてとてもありがたいです。
— fumiyasac@UI実装であると嬉しいレシピブックVol.1&2著者 (@fumiyasac) October 30, 2019
（実は僕もNuxt.jsはじめたばかりです） https://t.co/Mmf4D3Y3NZ
うれぴい
ちなみに本日私が実施した乾杯は @jollyjoester に #love_swift #love_kotlin で学んだものです🤗🤗
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) October 30, 2019
こちらの勉強会、初心者にもやさしい勉強会なので良かったら参加ください😎
#VueArchit
宣伝をした
#VueArchit
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) October 30, 2019
Vuex において、Storeへのアクセスはどのコンポーネントまで許容していますか？？？
Organismsの割合が思ったより多かった。確かにPagesだけだとemit地獄になったりしてつらみが深いし、propsで渡すのもめんどくさいけどね。
登壇後
なんとはてブのTOPにでてた...
ちょっといやかなり恐縮である。。。
SpeakerDockに乗せた資料も5kを超えていたので、はわわわわわってなりました。
.@entaku19890818 さんのスライドが、はてブ[テクノロジー]タブのTOPに!!
— ウホーイ (@the_uhooi) October 31, 2019
自分のことのように嬉しい笑 pic.twitter.com/F1S0esBZhh
わいの資料5k達成してんじゃん pic.twitter.com/wHnY7qrcgF
— entaku | CBcloudで物流系サービスなど作る (@entaku19890818) November 2, 2019
次の目標
資料内でも言及していますが、型が欲しいっ... と思いながら開発していたので、型導入したときにまたどこかで話をしたいなと思ってはいます。
また、資料は完全ではないので、何か質問や議論やこう思います見たいな話がありましたら、是非是非TwitterのDMなどで連絡いただけるとありがたいですー！！！🤗🤗🤗
