Zenn
✌️

Vue.js v-tokyo Meetup #21で学んだこと・所感

2024/07/28に公開
Nuxt
TypeScript
Vue.js
oxc
tech

7月26日（金）に開催されたVue.jsの勉強会に参加してきたのでメモした内容を振り返りながらまとめていく記事になっております。

oxc

全然知らないワードが初手から来た　笑

oxcは爆速なコンパイラーらしい。
パフォーマンス問題についてもバグ扱いすることがoxcの開発ポリシーの１つとしてある。

最近気に入って使ってるBiomeの内部でもoxcが動作している？みたい。
今後、Nuxt.jsについてゴリゴリに学んでいく予定なのでその中で触れることがあったら詳しく調べてみよう。

VueUse

ここでお馴染みの内容が来てホッとした。

VueUseマジで便利ですよね~、大好き。
ちなみに僕の推しは、useClipboardです　笑

登壇者の方の推しは、useAxios。
使ったことなかったコレクションでしたがその場で調べた感じすごい良さそうでした。

export interface UseAxiosReturn<T, R = AxiosResponse<T>, _D = any> {
  response: ShallowRef<R | undefined>
  data: Ref<T | undefined>
  isFinished: Ref<boolean>
  isLoading: Ref<boolean>
  isAborted: Ref<boolean> // Nice!!
  error: ShallowRef<unknown | undefined>
  abort: (message?: string | undefined) => void // Nice!!
  cancel: (message?: string | undefined) => void
  isCanceled: Ref<boolean>
}

特に、abortとisAbortedはかゆい所に手が届いていて良いですね！！
自作可能ではありますが記述量がモリモリになるのでこれはとても助かります。

NuxtだとuseFetchなどのコンポーザブル関数がデフォルトであるので、
次にViteでSPAを作る時からはuseAxiosを活用したいですね。

UnJS

TSでいい感じにCLI作ってみたって内容の発表がありました。
アナログな方法で僕も実装したことがありましたが普段目にするイケイケ感は皆無でモヤっていたのでタイトルに心を惹かれました。

にしても、UnJSリポジトリ多すぎ　笑

その中で、爆イケCLI作成のための4つのパッケージが紹介されました。

  • citty（爆イケCLIのミソ）
  • consola（詳細な設定ができるコンソール）
  • giget（zipファイルとかを展開してくれる）
  • jiti(TSをビルドなしで実行できる)

かゆい所に手が届きますなぁ（２回目）

クローラーの開発がたまにあるので進捗をターミナルから爆イケCLIが見られると捗りそうですね〜^^b
使うのがとても楽しみ。

consolaは普段使いでも重宝しそう。

Nuxt4 移行

結論からするとマジで問題なさそう。

vue2→3を経験した者からするとかなり易しい。
（あまり思い出したくない記憶...）

nuxt.config.tsから簡単に移行を試せるし個別で変更もオフにできる。
至れり尽くせりじゃん。

その他

勉強会の後の懇談会にて、、、
useFetchが純正で型補完してくれるのを教えていただいた。

tRPC使わないと再現できないと思い込んでいた。
だって、URLのパスから型参照しにいくとか想像できないじゃん。
TypeScriptの可能性を再認識した。マジですごい。

tRPCもバックエンドとレポジトリを分けるならありなのは変わりない。
この辺はプロジェクトの規模感とメンバーの技術レベルで使うか分かれそう。

tRPC採用しようと思っていたけどuseFetchの型補完を知って採用はなしにすると思う。
なんだかんだでこれを知れたのがデカかった。

まとめ

初めてのカンファレンス参加で若干不安がありましたが良い学習の機械になりました！
大好きなVueでモチベーションの高いコミュニティのメンバーと話せたのは今後の開発に繋がっていきそうです。
みなさんありがとうございました！！

次回はLTしよっかな〜？

Discussion