【TsKaigi】「サービス開発におけるVue3とTypeScriptの親和性について」を聞きました

サービス開発におけるVue3とTypeScriptの親和性について

tskaigi.org

からころ 様(@karan_corons) 株式会社LIXIL Marketing DevOps. System Dev. & Ope. Digital / アプリケーションエキスパート

スライド

内容メモ

はじめに

tsとの親和性とは

型付け × 論理構成

vue.jsの概要

Webユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク

親→子

definePropsで定義した欲しいデータを親コンポーネントから渡してもらうようにする。

子→親

defineEmitsを用いて、排出したいデータを定義しておくと、親がわで受け取ることができる。

これらのことが、型付きで行うことができる。

ツールチェーンについて

Nuxt, Vite, Vitest, Pinia(vue用の状態管理ツール),Volar.js などなど、さまざまなツールチェーンがある。

Vue.jsのtypeScript対応の経緯について

vue2の頃

  • Vueコンポーネントのロジックのみを外部ファイルに分割しずらい
  • 状態管理ツールなどから型が渡ってこない
  • thisやテンプレートに型が反映されない

これらの課題を解決できるような銀の弾丸はなかった。

対応までの流れとして

  1. composition API の登場 Vueコンポーネントを構成するための関数ベースのAPIセットの相性(ref, computed, onMounted, inject, などの実装)
  2. コンポーネントランタイムの型付けが改善する
  3. volar.jsとvuejs/language-toolsの功績

※ composition APIがあるからといって、options apiの開発が非推奨な訳ではない。

具体的にはどうなったの?

  • Composableとしてロジックを外部に切り出すことができるようになった
  • readonlyによって関数によるカプセル化が堅牢になった
  • 状態を複数コンポーネント間で跨ぐこともできる -> しかし、SSR時に不具合を起こしたりするので、piniaを用いることで改善できる

Pinia

Vueから推奨されているtsフレンドリーな状態管理ツール

型を利用してデータフローを可視化しよう

サンプルコード

感想

お仕事とかでvueをたまに書いているけど、当たり前のようにtypescriptで使えるようになっているためにはいろいろな功績があってのことなんだなということを知れた。

result型を用いてエラーハンドリングを行っている。他のセッションでも話されているので一般的な考え方なんだなということを知った。いつもtry-catchでエラーハンドリングしていて辛いと思っていたので調べてみようと思った。

optional APIはてっきり非推奨なものなのだと思っていたがそうでないことを知れてよかった