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

/ Tsukuha Kawakami TSKaigi 2024 株式会社LIXIL Marketing Dev Ops. System Dev. & Ope. Digital E-Application Exp

自己紹介

アジェンダ

  1. はじめに
  2. Vue.jsの概要
  3. Vue.jsコミュニティ発の...")
    5. 状態管理と型 6. 型を利用してデータフローを可視化しよう 7. おわりに

聞いてほしい方・話さないこと
聞いてほしい方

Vue.jsを使ったことがある人
どのくらいいますか？󰢨
")

はじめに
話したいこと

親和性とは？
")

親和性とは？
Logic Compositon（論理構成）
Type Inference...")

Vue.jsの概要 1
Web ユーザーインタフェース
構築のための、親しみやすく、
パ...")
index.vue 右図のようにVue SFCを作成 できます。

Vue.jsの概要 2
親コンポーネントから
子コンポーネントへのデータの
受け渡しは...")

Vue.jsの概要 2
親コンポーネントから
子コンポーネントへのデータの
受け渡しは...")

Vue.jsの概要 3
propsのバケツリレー（Props Drilling）
re...")

Vue.jsの概要 4
逆に子コンポーネントから、
親コンポーネントへのデータ
の受け...")
components/Child.vue

Vue.jsの概要 4
逆に子コンポーネントから、
親コンポーネントへのデータ
の受け...")
components/Child.vue

Vue.jsの概要 4
Emitされたイベントは、
親コンポーネント側で、
ハンドルす...")

Vue.jsの概要 4
Emitされたイベントは、
親コンポーネント側で、
ハンドルす...")

Vue.jsの概要 おまけ 1
defineSlots()を使う
コンポーネントの中に
...")

Vue.jsの概要 おまけ 2 index.vue
defineSlots()を使う
コ...")

Vue.jsの概要 おまけ 3
defineSlots()を使う
コンポーネントを呼び出...")

Vue.jsコミュニティ発のツールチェインについて 1
主要なツール・フレームワーク
...")
Vite（https://ja.vitejs.dev/）発音記号: /vit/ - 次世代フロントエンドツール（高速に起動する開発サーバ, 高速なHMR, Rollup互換のプラグインシステム. etc） - Vitest（https://vitest.dev/）発音記号: /vitést/ - フロントエンドのテストフレームワーク - Pinia（https://pinia.vuejs.org/）発音記号: /piːnjʌ/ - TypeScriptフレンドリーな、Vue用の状態管理ツール Vuex正式な後継にあたる

Vue.jsコミュニティ発のツールチェインについて 2
その他ツール

Vue.jsコミュニティ発のツールチェインについて 3
その他ツール

Vue.jsのTypeScript対応の経緯について 1
Vue2（Options A...")
状態管理ツールなどから型が渡ってこない => Storeを利用した時点で型の恩恵を受けづらくなる... - thisやテンプレートに型の反映がされない（Props, Emits .etc） => コンポーネント間のデータのやりとりなどが追いづらい... .etc まるっと解決できる 魔法の機能がほしい！！

銀の弾丸はない
")

Vue.jsのTypeScript対応の経緯について 2
Vue.jsのTypeScr...")
3. Volar.jsとvuejs/language-toolsによりエディタへの型反映の 問題が改善する

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

  1. Composition...")
    Vueコンポーネントを構成するための 関数ベースのAPIセットの総称 [1] - Reactivity API（ref, computed） - Lifecycle Hooks（onMounted, onUnmounted） - Dependency Injection: 依存性注入（inject, provide） - Vueコンポーネントのロジックのみを外部ファイルに分割しづらい => Composables として切り出すことが可能になり型付けも改善 された [2] [1] https://ja.vuejs.org/guide/extras/composition-api-faq#what-is-composition-api, [2] https://ja.vuejs.org/guide/reusability/composables,

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

  1. Composition...")
    https://ja.vuejs.org/guide/extras/composition-api-faq#better-type-inference, [2] https://ja.vuejs.org/guide/typescript/composition-api.html#typing-provide-inject, => Options API 実装当初は型推論の考慮がされておらず、 コンポーネントランタイム と 今まで this で記述していた Reactivity API が紐づいていて柔軟な型付けが困難な状態だった => コンポーネントランタイム から関数ベースのReactivity API が 切り離されることで、カプセル化やモジュール化をしやすくなり TypeScriptフレンドリーに [1] => Provide/Injectなどの状態管理で利用する機能も型の恩恵を受ける ことが可能に [2]

Vue.jsのTypeScript対応の経緯について 5
2. コンポーネントランタイ...")
が 新たに実装されTypeScriptフレンドリーに [1] => Emitsにも型付けが可能に [2] Propsもユーティリティ型の PropTypeで型付け可能に [3] [1] https://ja.vuejs.org/api/general#definecomponent [2] https://ja.vuejs.org/api/utility-types#proptype-t [3] https://ja.vuejs.org/guide/typescript/composition-api.html#typing-component-emits,

Vue.jsのTypeScript対応の経緯について 5
2. コンポーネントランタイ...")
me-core/src/apiDefineComponent.ts#L44

Vue.jsのTypeScript対応の経緯について 5
2. コンポーネントランタイ...")

  1. Volar.jsとvuejs/language-toolsの功績
  1. Volar.jsとvuejs/language-toolsの功績の詳細
  1. Volar.jsとvuejs/language-toolsの功績の詳細

Options API は今後も利用して問題ない

ref: Vue Fes Japan 2023, Evan You キーノート
htt...")
Vue.jsのTypeScript対応の経緯について 追記 Vue.jsは Vue2 からVue3 への 大きな変更による影響を反省し、 今後のマイグレーションを慎重に行っていく

具体的にはどうなったの？
")

状態管理と型 1
Composablesとして、
Vueコンポーネントから
ロジックと...")

状態管理と型 1
Composablesとして、
Vueコンポーネントから
ロジックと...")

状態管理と型 1
Composablesとして、
Vueコンポーネントから
ロジックと...")

状態管理と型 2 composables/useCounter.ts
readonly...")

状態管理と型 3
状態を複数コンポーネント間で
またぐこともできます。
composa...")

Piniaを利用しよう
")

Piniaを利用しよう
defineStore()でキーと
Composition AP...")
stores/useCounter.ts

Piniaを利用しよう
defineStore()でキーと
Composition AP...")
stores/useCounter.ts

Piniaを利用しよう
利用したい先で、
useCounterStore()
を呼び出...")
ようになっています。 状態管理と型 4 a pages/index.vue

Piniaを利用しよう
利用したい先で、
useCounterStore()
を呼び出...")
ようになっています。 状態管理と型 4 a pages/index.vue

状態管理と型 5
Provide/Injectを利用した発展的な状態管理
Piniaは...")

状態管理と型 6
TypeScriptフレンドリーに実現する場合

  1. Symbolを...")
    （スコープの指定が可能） 3. データが必要なコンポーネント内でInjectionKeyを利用しデータを 取得する

Provide/Injectと型の利用

  1. app.vue（Root）などの
    scr...")
    する 状態管理と型 7 useProviderCounter.ts

Provide/Injectと型の利用

  1. app.vue（Root）などの
    scr...")
    する 状態管理と型 7 useProviderCounter.ts pages/index.vue

Provide/Injectと型の利用

  1. app.vue（Root）などの
    scr...")
    する 状態管理と型 7 useProviderCounter.ts pages/index.vue

型を利用してデータフローを可視化しよう 1
ユーザーデータの取得例で考える

  1. ID...")
    取得したデータは複数のページコンポーネントで利用したいので グローバルステートとして保持する必要があります。 4. 一連のデータフローを型で表現します。

型を利用してデータフローを可視化しよう 2
ファイル構成
GitHub:
https:...")

型を利用してデータフローを可視化しよう 3
シーケンス図
")

型を利用してデータフローを可視化しよう 4
まずAPIから作成する
IOの部分から型付...")
api/user.ts

型を利用してデータフローを可視化しよう 5
Storeを用意する
APIで定義したレス...")
何のStoreかも明確に。 store/user.ts

型を利用してデータフローを可視化しよう 6
Storeを用意する
APIで定義したレス...")
何のStoreかも明確に。 store/user.ts

コンポーネントで利用する
コンポーネントのロジックで
必要なStoreを呼び出す
こと...")

コンポーネントで利用する
コンポーネントのロジックで
必要なStoreを呼び出す
こと...")

コンポーネントで利用する
テンプレートにもAPI、
Storeと渡ってきた
型が反映さ...")
pages/index.vue

コンポーネントで利用する
テンプレートにもAPI、
Storeと渡ってきた
型が反映さ...")
pages/index.vue

Vue.jsはすでに
　TypeScriptフレンドリーです！！
")

Vue.jsのその他資料
Vueコンポーネントのライフサイクルについて