Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Kotlin/JS の仕組み / How KotlinJS works
Search
Yuku Kotani
August 24, 2019
Technology
5
3.3k
Kotlin/JS の仕組み / How KotlinJS works
Kotlin Fest 2019の発表資料
Yuku Kotani
August 24, 2019
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
AI Coding Agent Enablement in TypeScript
yukukotani
19
10k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.3k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
510
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
810
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.7k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.6k
Real World Type Puzzle and Code Generation
yukukotani
4
940
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
580
Other Decks in Technology
See All in Technology
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
300
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building an army of robots
kneath
306
45k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Code Reviewing Like a Champion
maltzj
524
40k
Speed Design
sergeychernyshev
32
1k
Transcript
Kotlin/JS の仕組み Kotlin Fest 2019
自己紹介 - 名前: 小谷 優空 (Yuku Kotani) - GitHub: @Monchi
- Twitter: @MonchiFC - 所属: Ubie, Everforth, 筑波大学情報科学類 - Kontributor 2
コンパイルの流れ
謎のコンパイラ コンパイルの流れ 4 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) 出力
コンパイルの流れ 5 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin
コード コンパイラ 出力 IR (中間表現)
コンパイルの流れ 6 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin
コード コンパイラ 出力 参照 コンパイル先に関わらず Kotlinコードとして 参照、操作できる! IR (中間表現)
コンパイルの流れ 7 CLI kotlin-gradle-plugin JVM JavaScript Native(LLVM) AST (PSI) Kotlin
コード コンパイラ 出力 IR (中間表現)
Kotlin/JS変換の工夫
Dead Code Elimination - Tree Shakingとも言う - 使われていない関数やプロパティ、クラスを削除 - KotlinのIRも参照する
- JSにしてからwebpackとか使うより精度がいい 9
結局バンドルサイズどうなの?
Dead Code Elimination - 単純なTodoMVCアプリケーションをDCE 1922KB -> 416KB - minifyすると更に
198KB に - gzipすると更に 45KB に - webpackのTree Shakingも重ねがけでもっと減らせそう 11
型変換 - KotlinからJavaScriptに型変換 String -> string Int -> number Any
-> {} クラス -> prototypeでよしなに 12
型変換 - 型付き配列 - 型に応じて [], Int8Array, Int16Array... に変換 -
Long(64bit整数) - JavaScriptは53bit整数までしか扱えない - 内部的にエミュレートするKotlin.Longクラスに変換 13
モジュール 14 - JavaScriptには様々なモジュール管理方法がある - Kotlin/JSもそれに合わせて色々吐ける - plain: そのままブラウザで動く -
commonjs, amd: webpackとかでバンドルする - umd: 上2つのハイブリッド
moduleKind = plain の場合
moduleKind = plain の場合 グローバル変数として定義
moduleKind = plain の場合 - モジュールシステムを使わない - ブラウザでそのまま動く - 依存順を意識してロードする必要がある
moduleKind = commonjs の場合
moduleKind = commonjs の場合 require()でロード
moduleKind = commonjs の場合 - Node.jsのモジュールシステム - Webpackなどでバンドルする必要がある - 最適化の余地がある
- ライブラリとして他から読み込める(JSからも!)
Kotlin/JSすげー! もっと知りてー!
Deep Dive into Kotlin/JS 22
Deep Dive into Kotlin/JS 23 激アツリポジトリ
Deep Dive into Kotlin/JS 24 https://github.com/JetBrains/kotlin/tree /master/compiler/ir/backend.js 信じられるのはソースコードだけ
25 ありがとうございました Kotlinかわいい!