UIT INSIDE UIT INSIDE
2021/04/09 に公開 2961 views

このエピソードについて

新規プロジェクトでVue 3とTSXを導入した感想について、@spring_raining が @changhee.kim と @daisuke.yamamoto に聞きました。

Vue 3にTSXを導入した経緯

  • TSXとは？
  • templateに対するTypeScriptの型補完に不満を感じていた
  • UIデザインに対するフロントエンドエンジニアの裁量が大きく、templateを利用するメリットが少なかった
  • もしかしてただ使ってみたかっただけ？

Vue 3+TSXの開発体験/Vue 2やtemplateとの比較

  • 型補完がちゃんと効く！
    • scriptとtemplateの結合も、エンジニアにとってはむしろメリット
  • propsはもちろん、directiveやslotsなどtemplate特有の機能も (記述は若干冗長ながら) 使える
  • Render functionは動作がシンプルではあるが、Vueが気を効かせてくれていた動作がなくなる点に注意
    • @vue/shared にあるユーティリティ関数を使用
  • React hooksとの比較
    • setupは必ず1回だけ実行されることが保証されているので、パフォーマンスの観点での失敗は起きにくそう
    • refs/reactiveの導入によってdeps arrayを列挙する必要性がない
    • 「Componentを返す関数」のように高階関数を活用しだすと、何階の関数を返されているのかが分からなくなる

問題点とワークアラウンド

より良い解決策が分かる方はお知らせください…！

  • class と React JSX における className との差異
    • tsconfig.jsonでpathsを上書きして回避
  • onClick など、emits系の型補完がTSX内で効かない
    • propsのspreading syntaxで記述して回避
  • Vue test utilsが .tsx の読み込み時に型を補完してくれない
    • .vue ファイル内に lang="tsx" のscriptを置いて回避

今後の動向

  • エンジニアのメリットが大きいので、今後もtemplateと併用して使われていきそう
  • TSXの導入により、Reactを書くエンジニアがVueのプロジェクトにjoinすることも容易になる

Refs