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.1k
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
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
590
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.3k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.3k
Real World Type Puzzle and Code Generation
yukukotani
4
870
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
520
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
730
先を見据えたMVPのフロントエンド開発
yukukotani
0
300
Other Decks in Technology
See All in Technology
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
190
Skip Skip Run Run Run ♫
temoki
0
350
あなたはJVMの気持ちを理解できるか?
skrb
5
1.9k
財務データを題材に、 ETLとは何であるかを考える
shoe116
5
1.9k
レイクハウスとはなんだったのか?
akuwano
15
1.8k
Windows Server 2025 へのアップグレードではまった話
tamaiyutaro
2
250
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
3.5k
“自分”を大切に、フラットに。キャリアチェンジしてからの一年 三ヶ月で見えたもの。
maimyyym
0
230
LambdaとSQLiteでシステム構築
ogadra
1
150
プロダクト開発、インフラ、コーポレート、そしてAIとの共通言語としての Terraform / Terraform as a Common Language for Product Development, Infrastructure, Corporate Engineering, and AI
yuyatakeyama
6
1.5k
AWSエンジニアに捧ぐLangChainの歩き方
tsukuboshi
0
130
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
7
1.1k
Featured
See All Featured
Facilitating Awesome Meetings
lara
51
6.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Code Reviewing Like a Champion
maltzj
521
39k
Building Your Own Lightsaber
phodgson
104
6.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Statistics for Hackers
jakevdp
797
220k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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かわいい!