2020/08/25に開催されたv-tokyo#11の参加レポートです。
とても良い勉強会だったので見逃した方は是非スライドだけでも!!
まちにまった Vue.js 3 @kazupon
📁スライド： https://speakerdeck.com/kazupon/matinimatuta-vue-dot-js-3
📝 内容メモ：
- SFCの改善PRについて
- Viteの紹介
- vuedxの紹介
SFCの改善PR の内容を知ることができて良かったです。setupのDXの改善やリアクティブなCSS変数の作成は便利だと思いました。SFCの改善自体はv3.1xでのリリース予定とのことですが、とても楽しみですね。あと、@vuedxは全く初耳でした。templateの型検査などpluginとして切り出して使えるようであれば是非使いたいです。今後の開発を追っていきたいです。あと個人的に、発表資料のその他の章で以前自分がremote.vueで発表した資料が紹介されていて嬉しすぎました。紹介ありがとうございます🙏
発表で言及していたkazuponさんの過去スライドにも目を通しておくとVue3への備えは万全かと思います!
Vue.js コアチーム座談会（@kazupon, @ktsn, @ota-meshi, @kiaking）
@kiakingさんのファシリテーションが上手すぎて、まるでベテランのラジオパーソナリティのようでしたw 深夜ラジオのようでずっと聞いていたい気持ちにも☺️
全体的にコアメンバー、Vueコミュニティの良い雰囲気を感じられました。今回話を聞いてVueがますます好きになった気がします。
以下座談会のメモです（間違いあるかもなので参考程度で）。
Vue3について期待していることは？
- どんどん書きやすくなっているので良い
- SFCの改善PRに対する eslint-plugin-vueの開発は大変
- Vue3でもClassコンポーネントはサポートする
- Composition APIの課題をClassでサポートしていきたい
- vue-i18nには大きな影響はない
- 今後開発者にどう受け入れられていくのかが楽しみ
コアチームの体制はどうなっているの？
- サイトにコアチームとして紹介されている以外にも多くのメンバーがいる
- Discordで普段はやりとりしている
- React, Angularと違い、企業が絡まないので良い意味で気楽にできる
- 良い意味でゆるく、居心地が良い。皆優しい
- Evan氏がVueが好き
- 他のOSSだと最初に作った人がもういないとかがある。Vueは作者がずっとやっているのが良い。方向性がはっきりしている
- 皆好きなことをやっているのでモチベーションが続く
コアチームメンバーは何をやっている
- 隔週でDiscordを使いミーティングしている
- 英語が喋れなくてもやっていける
どうやってコアチームになるの？
- コアメンバーが気になった人をdiscordに入れている
- 目覚ましい成果をあげるか長期間の貢献があった人
- 開発で課題にあがったものをissueで報告してたりPRを作ったりするのが大事
座談会の内容はこちらの参加レポートも参考にさせて頂きました。
Vue.js v-tokyo オンライン Meetup #11で聞いたことのメモ
動画の再生速度を変更するコンポーネントを作ろうとして諦めた話 @FruitRiin
📁スライド https://speakerdeck.com/fruitriin/talk-about-give-up-to-create-video-with-playback-rate-controller
📝内容メモ
- VueコンポーネントでVideoタグの動画速度変更は可能
- ネイティブのコントローラーとの同期はかなり大変..
- 本当に解決したいのは要求!!
Vueで動画の再生速度を変更するコンポーネントを作ることになり、どのように対応したのかのお話。現場感のあるリアルな内容でとても面白かったです。わかりみが深すぎて終始頷きっぱなしでした。Vueで管理されていない生DOMをMutationObserverで制御するテクニック、プロダクトで使えそうです（生DOM避けたいけど、どうしてもね..）。あと最後に言及されていた「本当に解決したいのは要求」という言葉は心に刻もうと思いました。
provide/inject @kahirokunn
📁スライド： https://slides.com/kahirokunn/deck-ceb739
📝内容メモ：
- provide/injectの話
- 手軽なstate管理の手法として有力
provide/injectがVue2系だとアプリケーションコードで推奨しないと説明されてたことをまず知らなかったです（ドキュメント読もう..）。今回のサンプルみたいなprovide/injectの使い方は実際にプロダクト開発で行っていたので便利さを実感しています。同名のkeyでprovideがネストされている場合の挙動は知らなかったので勉強になりましした。また、CodeSandboxの実装コードが、factoryを作成したり関数が分割されていて見通しが良いなーと思いました。とても参考になりました。
viteではじめるVue 3 @yuneco
📁スライド： https://docs.google.com/presentation/d/1ua_U8BPdyrKDxGux7N2rykBbKxzJ1T72wa2DPHaL-6g/edit#slide=id.gcb9a0b074_1_0
📝内容メモ：
- viteの起動は超早い
- ESModuleビルドで変更がほぼノータイムで反映される
- まだviteは個人開発・勉強したい層向け。今後に期待
viteとvue cliとの起動速度の比較動画がとてもわかりやすかったです。感覚的に早いなーとは思ってましたが、しっかり数字で比べると違いが明確ですね。viteのビルドの仕組みや、viteを今使うべきかの説明もとても良かったです。スライド・イラストが全体的に綺麗でスッと頭に入るプレゼンでした。また、サンプルで紹介されていたvite-kingyoのリポジトリをcloneして実際に動かしてみました。Viteの起動速度ももちろんですが、金魚を動かすアプリとして面白いし、実装コードも勉強になりました。viteに興味ある方は、実際にcloneして動かしてみることオススメです。
Vue.js と TSX が出会うことによってできること @potato4d
📁スライド： https://speakerdeck.com/potato4d/vue-dot-js-with-tsx-from-vue-2-dot-x-to-vue-3-number-v-tokyo11
📝 内容メモ：
- Vue3ではTSXがネイティブサポートされてる
- TSXはコンポーネントの粒度を小さく保ちやすい（同ファイルに別コンポーネントなど）
- Vue2系で使う場合はかなり注意
TSXを使う利点をあまり分かってなかったのでとても参考になりました。SFCとTSXの比較のスライドなどめちゃくちゃ分かりやすくてTSXを導入する際の検討資料としてそのまま使えそうです。Vue2系だと色々考慮点があって利用は難しそうな印象でしたが、Vue3ではTSXも全然ありだなと思いました。まず個人開発からTSXを使ってみて感触を確かめていきたいです。
終わりに
以上「Vue.js v-tokyo オンライン Meetup #11 参加レポート」でした。
茨城在住のため今回初参加のv-tokyoだったのですが、どの発表もとても濃い内容で本当に勉強になりました。また懇親会でもコアメンバーの方とお話して気になっていたことが聞けたのでよかったです（vue-apollo v4の開発状況、class componentとcomposition APIの共存 etc）。Vueコアメンバーの方、Vueコミュニティにとても魅力を感じたのでいつかそこに自分も入っていけたら良いなと思いました。
運営、登壇者の皆様、本当に良い勉強会をありがとうございました!!