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.2k
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 - エージェントを自走させよう
yukukotani
14
6.2k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
410
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
730
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3.1k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.5k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.5k
Real World Type Puzzle and Code Generation
yukukotani
4
910
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
550
GraphQLスキーマ設計の勘所
yukukotani
42
18k
Other Decks in Technology
See All in Technology
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
6.4k
Рекомендации с нуля: как мы в Lamoda превратили главную страницу в ключевую точку входа для персонализированного шоппинга. Данил Комаров, Data Scientist, Lamoda Tech
lamodatech
0
770
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
710
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
290
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
280
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
420
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
14
4.9k
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
130
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
170
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
180
C++26アップデート 2025-03
faithandbrave
0
900
Dynamic Reteaming And Self Organization
miholovesq
3
600
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
What's in a price? How to price your products and services
michaelherold
245
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Embracing the Ebb and Flow
colly
85
4.6k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
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かわいい!