SFCで挑戦するFunctional Component （@FruitRiin)

スライド: https://speakerdeck.com/fruitriin/functional-component-challenge-at-sfc
動画開始位置： https://youtu.be/hUcQXgUxQVc?t=563
内容メモ：
・ Vue Functional Componentの紹介
・通常のComponentとFunctional Componentのパフォーマンス比較のライブデモ
・ Functional Componentの使用上の注意

Vueいいぞおねいさん果物リンさんの発表。ちょうど当日Functional Componentを使ったコンポーネントのコードレビューをして「何もわからんw」ってなってたところだったので個人的にめちゃくちゃ勉強になりました。特に、Functional Componentと通常のコンポーネントのパフォーマンス比較のライブデモが秀逸で、明確にパフォーマンス差が出ているので驚きました。Atomic DesignのAtomのような小さいコンポーネントを、大量にレンダリングする際にはとても有効そうですね。
あと、全然関係ないんですが登壇中の落ち着きがすごくて「これがLT熟練者か..!!」と終始尊敬の眼差しでした。

Fat ComponentにしないためのWebフロントエンド設計（@Philomagi）

スライド: https://speakerdeck.com/tooppoo/web-front-end-design-to-avoid-being-a-fat-component
動画開始位置： https://youtu.be/hUcQXgUxQVc?t=1925
内容メモ：
・実際にあったFat Componentの紹介（2500行のComponent!!!）
・ Fat Componentを作らないための設計指針
・ OOUIの話

とても実用的な話。とりあえず最初の「2500行」のFat Componentの例に度肝を抜かれ、これは絶対防がなくてはならないと強く思いました。確かに、コンポーネントの分割だけでは<script>部分の振る舞いの分割にはならず、コンポーネントは分割されても<script>部分は肥大化するというのはありがちですね。
今回のサンプルアプリケーションのようにView, Interaction, Modelに分けて設計し、知識・情報・振る舞いをコンポーネントから独立したものとして定義する例はFat Componentを防ぐ一つの解だと思います。Vueの設計への深い示唆を得ることが出来るプレゼンで何度もハッとするポイントがありました。私は設計が大の苦手なので、あと一時間くらい講義して欲しい気持ちでしたね。また折をみてスライド見返したいです。

Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究（@KawamataRyo)

スライド: https://speakerdeck.com/kawamataryo/ref-vs-reactive-vue-composition-api-deep-in
動画開始位置： https://youtu.be/hUcQXgUxQVc?t=3806
内容メモ：
・ Vue3 Composition API, リアクティブの説明
・ refとreactiveの使い分けの指針。内部実装はどうなているのか。リアクティブの消失はどう防ぐのか。
・他のリアクティブ関数の紹介。

はい。私ですw。自分で自分のレポート書くのも恥ずかしいのですが簡単に。Vue Composition APIのリアクティブ関数refとreactiveに着目して使い分けの話をしました。ref, reactiveの内部実装や、reactive関数で誰もが詰まるリアクティブの消失などなど。Vue Composition APIを使い始めてreactiveとrefの使い分けに迷ってる人などに参考になる内容かと思います。
..で後はただの感想なのですが、配信アーカイブを見返したら自分だけ緊張してとても早口になっているのが個人的にアレでした😇。ちゃんと発表内容伝わっていたのかな？？次回の発表では改善していきたいです。

今回話した内容のリアクティブの諸々を自分で試したいと思ったら、「さくっとVue3をWebブラウザで試したい時に使えるTips」で紹介した方法でChrome devtoolsのconsoleからサクッと試せるので是非やってみてください。その他、今回発表出来ずおまけとして掲載した他のリアクティブ関数については「Vue Composition APIで使えるリアクティブ関連のAPI一覧にまとめています。

おわりに

以上「Functional Componentから、Fat Componentを防ぐ設計、Vue3のリアクティブまで!! Remote.vue 参加（登壇）レポート」でした。
雑感として、LAPRASの@nasumさんがいつ話をふられても、きれいに答えを返すので本当にすごいと思いました。あと、弊社のテックリードのツイートが取り上げられたのですが、私の方で上手く問題を説明できず最後の方しどろもどろに。。色々理解不足が露見したのでコード見返したいです。他、Vuexの話題でかなり盛り上がり、やはり皆色々な意味でVuex大好きなんだなぁと思いました。

運営のnagasakoさん、@nasumさん、他の登壇者の方含めとても良い雰囲気で終始ざっくばらんに話せたので面白かったです。これは登壇しないと出来ない経験なので本当に参加して良かったなと思いました。

次回の開催も期待!!!また登壇挑戦したいです。

Functional Componentから、Fat Componentを防ぐ設計、Vue3のリアクティブまで!! Remote.vue#2 参加（登壇）レポート

SFCで挑戦するFunctional Component （@FruitRiin)

Fat ComponentにしないためのWebフロントエンド設計（@Philomagi）

Ref vs Reactive Vue3 Composition APIのリアクティブ関数の探究（@KawamataRyo)

おわりに