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

Vue 3にTSXを導入した経緯

• TSXとは？
  • TypeScript + JSX
    • Vue 3では特に追加のプラグイン無くTSXが利用できる
  • Composition APIのsetupで、TSXで書いたRender functionを返す
  • 参考: ep.39 Vue 3 Study 『Render function で React の世界を覗いてみる』
• 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

• LINE 新卒採用 2022
  • https://linecorp.com/ja/career/newgrads/engineering/
• キャリア採用はこちらから
  • https://linecorp.com/ja/career/position/475
• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic

---

採用について

• LINEヤフー新卒採用
• LINEヤフー中途採用

使用素材・クレジット

• BGM&SE
  • 魔王魂
  • 騒音のない世界
  • OtoLogic