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

by minako-ph

Slide 1

Slide 1 text

Slide 2

Slide 2 text

目次 Agenda ● 自己紹介・会社紹介 ● 「現代のVueとTypeScript - 型安全の活用術」 ● 終わりに

Slide 3

Slide 3 text

自己紹介・会社紹介

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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月末時点）

Slide 6

Slide 6 text

6 © LayerX Inc. 「すべての経済活動を、デジタル化する。」をミッションに掲げ、法人支出管理サービス「バクラク」や企業内業務のデジタル化を支援するサービスを提供しています。事業紹介バクラク事業企業活動のインフラとなる法人支出管理（BSM）SaaSを開発・提供 Fintech事業ソフトウェアを駆使したアセットマネジメント・証券事業を合弁会社にて展開 AI・LLM事業文書処理を中心とした、LLMの活用によるプロセスのリデザイン

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

© LayerX Inc. 8 私自身もずっとReactを触ってきましたが、現代のVue.jsはあの頃のVue.jsとは違うみたいです。 2024年のVue.jsはどう進化したのでしょう？最新のVue.js事情を知らない方々に向けて、今日はVue.jsの進化をお届けします！みなさん最近Vue.js使ってますか？現代のVueとTypeScript - 型安全の活用術みなさん最近 Vue.js使ってますか？（ていうか忘れてないよね？ 🥺）

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

実用性に関する課題 *4

Slide 12

Slide 12 text

1. コードの冗長性と関心事の分離

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

2. コンポーネントのロジック再利用の困難さ

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

3. カプセル化の難しさ

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

4. 静的解析の限界

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

型安全性に関する課題 *4

Slide 28

Slide 28 text

1. コンポーネントの型推論における課題

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

2. イベント管理の型安全性の欠如

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© LayerX Inc. 34 2021年8月リリース Vue3 Script Setup イベント管理の型安全性の欠如型安全性に関する課題 Vue3のScript Setupを使用することで、emitsの型定義をTypeScriptとして直接記述できるため、より簡潔で厳密な型安全性を実現します。これにより、Composition APIと比較して、型チェックがより強力かつ一貫したものになります。