Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SWC Transformerから見るTypeScript関数記述ベストプラクティス

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Kaito Fujimura Kaito Fujimura
May 11, 2024
Technology
1
540

SWC Transformerから見るTypeScript関数記述ベストプラクティス

Avatar for Kaito Fujimura

Kaito Fujimura

May 11, 2024
Tweet

More Decks by Kaito Fujimura

See All by Kaito Fujimura
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
Avatar for Kaito Fujimura fujiyamaorange
0
1k

Other Decks in Technology

See All in Technology
Kaggleの経験が実務にどう活きているか / kaggle_findy
Avatar for Sansan R&D sansan_randd
6
1.1k
「Blue Team Labs Online」入門 - みんなで挑むログ解析バトル
Avatar for Noriaki Hayashi v_avenger
0
100
Yahoo!ショッピングのレコメンデーション・システムにおけるML実践の一例 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
110
Claude Codeの進化と各機能の活かし方
Avatar for Oikon oikon48
18
8.6k
Evolution of Claude Code & How to use features
Avatar for Oikon oikon48
1
510
組織のSREを推進するためのPlatform EngineeringとEKS / Platform Engineering and EKS to drive SRE in your organization
Avatar for mekka chmikata
0
190
モブプログラミング再入門 ー 基本から見直す、AI時代のチーム開発の選択肢 ー / A Re-introduction of Mob Programming
Avatar for TAKAKING22 takaking22
3
550
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.1k
Databricksアシスタントが自分で考えて動く時代に! エージェントモード体験もくもく会
Avatar for Takaaki Yayoi taka_aki
0
350
ブラックボックス観測に基づくAI支援のプロトコルのリバースエンジニアリングと再現 ~AIを用いたリバースエンジニアリング~ @ SECCON 14 電脳会議 / Reverse Engineering and Reproduction of an AI-Assisted Protocol Based on Black-Box Observation @ SECCON 14 DENNO-KAIGI
Avatar for chibiegg chibiegg
0
150
メタデータ同期に潜んでいた問題 〜 Cache Stampede 時の Cycle Wait を⾒つけた話
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
150
OpenClawで回す組織運営
Avatar for Kazuto Kusama jacopen
3
630

Featured

See All Featured
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
120
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
170
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
470
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
280
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
710
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
130
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
140
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

Transcript

  1. SWC Transformer TypeScript TSKaigi 2024 @fujiyamaorange

  2. Pay / Biome Utility Types Pick Pay for Business fujiyamaorange

  3. TypeScript SWC Transform emit

  4. None
  5. None

  6. Function Expression Arrow Function Function Declaration

  7. None

  8. SWC Transformer

  9. TypeScript SWC Transform emit

  10. SWC ~Speedy Web Compiler~ Next.js 12 Rust Babel 17 Rust

    SWC (TypeScript Babel )

  11. SWC Transformer

  12. React 3 ※React =JSX alt data-testid

  13. Before After

  14. Before After alt

  15. Before After data-testid

  16. None

  17. TypeScript SWC Transform emit

  18. 20.93s 22.78s 22.59s Transform 12000 React cargo test --example --

    --test-threads=1 Transform

  19. SWC Transformer

  20. I/O

  21. 20.93s 22.78s 22.59s 17.70s 19.56s 19.31s (Transform) 3.23s 3.22s 3.28s

    Transform

  22. Transform ( )

  23. Transform

  24. Transform SWC fork SWC create

  25. Transform SWC fork SWC create

  26. ( ) parse 919.22ms 959.42ms 929.58ms 931.66ms transform 56.26ms 61.25ms

    58.77ms 15.72ms emit 8.75s 9.70s 9.56s 7.22s all 20.93s 22.78s 22.59s 17.70s ※

  27. TypeScript SWC Transform emit

  28. emit e.#mtd_name(self) mtd_name SWC AST Node SWC 200 AST Node

    ( : →FnDecl)

  29. FnDecl AST emit!

  30. emit AST Node AST emit

  31. None

  32. TypeScript SWC Transform emit

  33. None

  34. TypeScript (function) (function expression) (Arrow function expressions) SWC SWC Next.js

    Compiler Trait swc_ecma_visit::VisitMut TSKaigi Canva ~Gray Purple Isometric Elements & Mockups 5G Technology Technology Presentation~ carbon