はじめに
こんにちは！
ねぎなす(@neginasu_grid)です。
まずはVueFesJapan2024お疲れ様でした！
私はボランティアスタッフとして参加し、たくさんの方とお話しして刺激をたくさん受けることができ、とても充実したカンファレンスでした🥰
さて、この興奮が冷めないままVue Fes Japan 2024 After Talkに参加してきました👀
各セッションについて
共有してくださっているスライドと感想をまとめていきます！
『ts-morphで簡単に始めるAST操作』
株式会社ヤプリ Aose Yuuさん
前回行われたVue Fes Japan × TSKaigi 合同イベント「次世代フロントエンドツールチェイン」で登壇された、「UnJSで簡単に始めるCLIツール開発」に続く初心者シリーズ第二弾！
正規表現や文字列置換で頑張るのではなく、ts-morphで簡単にAST操作をしよう！という内容でした。
個人的にts-morphという名前だけは知っていたのですが、ts-morphを使うことでどんな恩恵を受けることができるかということは今回のLTで初めて知りました。
AST操作でも、TypeScript Compiler APIを使用した例とそのラッパーライブラリのts-morphを使用した例を比較することで、ts-morphでいかに簡単に書けるのかということもスライドで提示されており、ts-morphすごい！！！ となりました☺️
ts-morphを使った例で紹介があったので気になって調べたところ、vuexからpiniaへの移行については、10月17日にヤプリさんで開催された 「Yappli Tech Conference 2024~Invitation to Empathy~」 のVuex to Pinia 大規模な状態管理ライブラリの移行戦略で詳しく説明されているそうです！
『Unlocking the potential of Nuxt Server Components』
STORES 株式会社 wattanxさん
VueFesJapan2024で登壇されたDeep dive into Nuxt Server Componentsに続いて、今回はNuxt Server Componentsの機能について知ろうという内容でした。
Server Componentsという概念については少し知っていましたが、今回のLTを通じて、Nuxt Server Componentsが具体的にどのような機能を提供していて、何ができるのかを知ることができました！
Nuxt Server ComponentsはNuxt3から導入された機能で、まだexperimentalではあるものの、サーバーサイドだけでレンダリングされるコンポーネントを作成できるため、クライアントバンドルを削減できるとのこと。
さらに、Server ComponentとClient Componentを入れ子にしたり、一部のコンポーネントだけをHydrationしたりすることが可能だそうです。
また、サーバーサイドのみで構成されたページも作れるそうなので、どのコンポーネントをサーバーサイドコンポーネントにするかを適切に設計することで、素敵なコンポーネントライフが送れそうだなと感じました🥰
個人的には「ファイルの拡張子を .server.vue にすることでNuxt Server Componentsを使用できる」というところで、どのコンポーネントがサーバーサイドのコンポーネントなのかファイルの拡張子から明示的にわかるようになっているのも良いところだなと思いました😌
『RadixとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか』
株式会社ヤプリ こんさん
VueFesJapan2024で登壇された普通のエンジニアが頑張って30万行のNuxt3バージョンアップした話でお話しされていたプロダクトと関連している別のプロダクトで、Radix UIを使用して実装とデザインの差を埋める活動をしているそうです。
ここから「Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか」を考えるという内容でした。
普段shadcn/uiを使用して開発をしているので、ヘッドレスUIは個人的にかなり馴染みのあるものでした。
今回のLTを通じてヘッドレスUIでどのようなことができるか、その可能性を考えることができました！
Radix UIとArk UIのどちらもドキュメントのサンプルコードをコピペで⼤体実装可能で、必要ならカスタマイズをすることができること。
Tailwindで⾒た⽬の実装、コンポーネントのinterfaceの共通化が可能だそうです。
また、Radix UIとArk UIの二つを使用して、VueとReactファイルでそれぞれ同じコンポーネントを実装する例を実際に見ることによって、ヘッドレスUIの利便性や、今まで感じていたライブラリ間の壁が薄くなったように感じました🙌
おわりに
今回のVue Fes Japan 2024 After Talkでも、その他のVue関連のイベントでも、知らなかったことをLTや懇親会で沢山吸収でき、モチベーションがとても上がりました！
また、Vue関連のイベントに参加されている方とお話しする中で、「Vue、Nuxtを業務で使っている」という方ばかりではなく、「Vue.jsのコミュニティがとても好きで、参加している」だったり、「いつかVue、Nuxtを使って開発したいな」という方もいらっしゃって、とても温かいコミュニティだなと改めて思いました。
私もVue.jsのコミュニティがとても好きで、何かできないかなという気持ちで今回記事を書かせていただきました！
今後も何かしらの形でVue.jsコミュニティに関わっていきたいなと思っています。
ここまで読んでいただきありがとうございました！
皆さんも、Vue.jsコミュニティのイベントに参加して 「Vueはいいぞ‼︎」 を共有しましょう🥳
Discussion