現代のVueとTypeScript - 型安全の活用術

フロントエンドカンファレンス2024 発表資料

▼ プロポーザル
現代のVueとTypeScript - 型安全の活用術

近年、VueとTypeScriptの組み合わせがフロントエンド開発において注目されていますが、かつてはこの組み合わせに対して懐疑的な見方も存在しました。このセッションでは、初期の課題を乗り越え、現在VueでTypeScriptを効果的に活用する方法とそのメリットを深堀りします。特に、型安全性、開発効率、そしてプロジェクトのメンテナンス性の向上に焦点を当て、具体的な実装例と共にこれらの利点を発表したいと思います。

https://fortee.jp/frontend-conf-hokkaido-2024/proposal/cbaa0602-8825-4142-9109-04072487c47b

Transcript

1. © LayerX Inc. 現代のVueとTypeScript - 型安全の活用術 minako-ph @フロントエンドカンファレンス北海道2024
2. 目次 Agenda • 自己紹介・会社紹介 • 「現代のVueとTypeScript - 型安全の活用術」 • 終わりに
3. 自己紹介・会社紹介
4. © LayerX Inc. 4 • 株式会社LayerX ◦ バクラク申請・経費精算 ソフトウェアエンジニア • 型・静的解析・電子工作が好き • 「型しか勝たん」 • ex - ◦ 株式会社メディカルフォース - リードエンジニア ◦ 株式会社BE - CTO ◦ DMM.comグループ 株式会社終活ねっと - FE 山本美奈子（minako-ph） 自己紹介
5. 5 © LayerX Inc. すべての経済活動を、デジタル化する。 会社概要 会社名 株式会社LayerX（レイヤーエックス） 代表取締役 代表取締役CEO　福島 良典 代表取締役CTO　松本 勇気 創業 2018年 8月1日 資本金 約132.6億円 拠点 東京本社　〒104-0045 東京都中央区築地1-13-1 銀座松竹スクエア 5階 関西支社　〒530-0003 大阪市北区堂島1-1-5 関電不動産梅田新道ビル B2F WORKING SWITCH ELK 内 中部支社　〒453-6111　愛知県名古屋市中村区平池町4-60-12 グローバルゲート 11F WeWork グローバルゲート名古屋 内 九州支社　〒810-0801 福岡県福岡市博多区中洲3-7-24 WeWorkゲイツ福岡 11F 内 従業員数 325名 （2024年5月末時点）
6. 6 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、 法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。 事業紹介 バクラク事業 企業活動のインフラとなる法人支出 管理（BSM）SaaSを開発・提供 Fintech事業 ソフトウェアを駆使したアセットマネジメ ント・証券事業を合弁会社にて展開 AI・LLM事業 文書処理を中心とした、LLMの活用による プロセスのリデザイン
7. 現代のVueとTypeScript - 型安全の活用術
8. © LayerX Inc. 8 私自身もずっとReactを触ってきましたが、現代のVue.jsはあの頃のVue.jsとは違うみたいです。 2024年のVue.jsはどう進化したのでしょう？ 最新のVue.js事情を知らない方々に向けて、今日はVue.jsの進化をお届けします！ みなさん最近Vue.js使ってますか？ 現代のVueとTypeScript - 型安全の活用術 みなさん最近 Vue.js使ってますか？ （ていうか忘れてないよね？ 🥺）
9. © LayerX Inc. 9 2020年夏（Vue3の登場）までのVue.jsは型安全性や実用性に関する課題がありました。 ※ Vue2 ＝ Vue3の機能がバックポートされる前のVue2.6までの機能を指すこととします Vue2時代の課題 現代のVueとTypeScript - 型安全の活用術
10. © LayerX Inc. 10 Vue2時代の課題がどのように改善されたか紹介していきます。 注意: LTなのでさらっと紹介していきます。気になった方はぜひ公開された資料をご覧ください！ Vue3時代のアップデートによりどのように改善されたか 現代のVueとTypeScript - 型安全の活用術
11. 実用性に関する課題 *4
12. 1. コードの冗長性と関心事の分離
13. © LayerX Inc. 13 Vue2のOptions APIでは、ロジックが異なるセクションに分散され、関心ごとが分離してしまうため、コー ドの冗長性が増し、メンテナンスが困難になっていました。 コードの冗長性と関心事の分離 実用性に関する課題 2020年夏までのVue2 Options API
14. © LayerX Inc. 14 実用性に関する課題 2020年9月リリース Vue3 Composition API コードの冗長性と関心事の分離 Vue3のComposition APIでは、関連するロジックを一箇所に集約することで、コードの効率性が向上し、 メンテナンスが容易になりました。
15. © LayerX Inc. 15 実用性に関する課題 コードの冗長性と関心事の分離 Vue3のScript Setupでは、returnによる明示的なエクスポートが不要になり、スクリプトとテンプレート が同じスコープで扱われるようになりました。これにより、より自然なスクリプト記述が可能となりました。 2021年8月リリース Vue3 ScriptSetup
16. 2. コンポーネントのロジック再利用の困難さ
17. © LayerX Inc. 17 Vue2のMixinsは、名前衝突やロジックの不透明性を引き起こし、コードの再利用を難しくしていました。 コンポーネントのロジック再利用の困難さ 実用性に関する課題 Vue2 Mixins Vue2 Component using mixins
18. © LayerX Inc. 18 2021年8月リリース Vue3 Script Setup 実用性に関する課題 コンポーネントのロジック再利用の困難さ Vue3のComposition APIやScript Setupを使用すると、Composableでロジックを明確にし、再利 用が容易になります。これにより、Mixinsの持つ課題が解決されました。
19. 3. カプセル化の難しさ
20. © LayerX Inc. 20 Vue2のOptions APIでは、データとメソッドが自動的に外部に公開されるため、カプセル化が難しく、意図 しないアクセスが発生しやすくなっていました。 カプセル化の難しさ 2020年夏までのVue2 Options API 実用性に関する課題
21. © LayerX Inc. 21 2020年9月リリース Vue3 Composition API カプセル化の難しさ 実用性に関する課題 Vue3のComposition APIでは、returnで公開するデータやメソッドを制御可能ですが、refを介して外 部からアクセス可能な状態になるため、完全なカプセル化には改善の余地がありました。
22. © LayerX Inc. 22 2021年8月リリース Vue3 Script Setup カプセル化の難しさ 実用性に関する課題 Vue3のScript Setupでは、defineExposeを使用して、公開するデータとメソッドを明確に制御するこ とで、カプセル化の問題が解消されました。
23. 4. 静的解析の限界
24. © LayerX Inc. 24 2020年夏までのVue2 Options API 静的解析の限界 実用性に関する課題 Vue2のOptions APIでは、未使用のデータやメソッドを効果的に検出できず、デッドコードに気づけずコー ドが肥大化し複雑化しやすい問題がありました。
25. © LayerX Inc. 25 2020年9月リリース Vue3 Composition API 静的解析の限界 実用性に関する課題 Vue3のComposition APIでは、未使用のデータやメソッドを容易に検出できるため、コードの保守性が大 幅に向上しました。ただし、returnされたコードはデッドコードとして残る可能性があり、この点には依然とし て注意が必要でした。
26. © LayerX Inc. 26 2021年8月リリース Vue3 Script Setup 静的解析の限界 実用性に関する課題 Vue3のScript Setupでは、コードをトップレベルに直接記述できるようになったため、未使用コードの検 出が容易になり、コードの効率性と安全性が向上しました。
27. 型安全性に関する課題 *4
28. 1. コンポーネントの型推論における課題
29. © LayerX Inc. 29 Vue2のOptions APIでは、thisを介した型推論が不十分で、型注釈が必要な場合が多く、型安全性に課題 がありました。 コンポーネントの型推論における課題 型安全性に関する課題 2020年夏までのVue2 Options API
30. © LayerX Inc. 30 2020年9月リリース Vue3 Composition API コンポーネントの型推論における課題 型安全性に関する課題 Vue3のComposition APIでは、refを使用することでTypeScriptの型推論が強化され、コードの型安 全性が大幅に向上しました。
31. 2. イベント管理の型安全性の欠如
32. © LayerX Inc. 32 Vue2ではemitsオプションがないため、どんな引数を渡すべきかが不明確で、イベントの発火を理解するに は子コンポーネントのコードを確認する必要があり、これが開発効率に悪影響を与えていました。 イベント管理の型安全性の欠如 2020年夏までのVue2 Options API 型安全性に関する課題
33. © LayerX Inc. 33 2020年9月リリース Vue3 Composition API イベント管理の型安全性の欠如 型安全性に関する課題 Vue3のComposition APIにemitsオプションが導入され、コンパイル時にイベントの型チェックが可能と なり、{渡すべき|呼び出せる}イベントが補完できるようになる、型安全性が大幅に改善されました。
34. © LayerX Inc. 34 2021年8月リリース Vue3 Script Setup イベント管理の型安全性の欠如 型安全性に関する課題 Vue3のScript Setupを使用することで、emitsの型定義をTypeScriptとして直接記述できるため、よ り簡潔で厳密な型安全性を実現します。これにより、Composition APIと比較して、型チェックがより強力 かつ一貫したものになります。
35. 3. ジェネリック型のサポート不足
36. © LayerX Inc. 36 Vue3では、script setup内でジェネリック型を使用できるようになり、柔軟なコンポーネント設計が可能に なりました。 ジェネリック型のサポート不足 2023年4月リリース Vue 3.3 Script Setup genericプロパティ 型安全性に関する課題
37. 4. スロットとスコープの型推論の課題
38. © LayerX Inc. 38 Vueのスロットは、親コンポーネントから子コンポーネントにコンテンツを動的に渡すための仕組みなのです が、Vue2のOptions APIでは、スロットに渡されるプロパティの型推論が不十分でした。 スロットとスコープの型推論の課題 2020年夏までのVue2 Options API 型安全性に関する課題
39. © LayerX Inc. 39 2021年8月リリース Vue3 Script Setup スロットとスコープの型推論の課題 型安全性に関する課題 Vue3のScript Setupでは、スロットに渡されるプロパティの型推論が強化され、より厳密な型チェックが 可能となり、型安全性が向上しました。
40. 終わりに
41. © LayerX Inc. 41 ご覧いただいたように、Vue.jsは型安全性と開発効率の両面で大きく進化しました。 フロントエンド界隈のみなさんVue.jsのことも忘れないで下さいね？🥹🥹 おわりに 終わりに
42. © LayerX Inc. 42 LayerX Open Door アカウント登録が一切不要なカジュアル面談を公開しています。 ・私と雑談してみたい ・質問したいことがある ・選考に進むか悩んでいる などなど、お気軽にお申し込みください。 9/6(金)@東京 9/18(水)@東京&オンライン配信