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
Base64 VLQ概要
Search
rchaser53
June 15, 2017
Programming
2
1.5k
Base64 VLQ概要
rchaser53
June 15, 2017
Tweet
Share
More Decks by rchaser53
See All by rchaser53
LLVM IR入門
rchaser53
4
2.7k
pitch loaderについて
rchaser53
1
530
Rustからwasmを生成してみた話
rchaser53
1
750
sourcemap規格概要
rchaser53
1
1.2k
TypeScript+React入門
rchaser53
1
860
Other Decks in Programming
See All in Programming
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
理論と実務のギャップを超える
eycjur
0
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
460
One Enishi After Another
snoozer05
PRO
0
110
What's new in Spring Modulith?
olivergierke
1
160
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.1k
Go言語はstack overflowの夢を見るか?
logica0419
0
370
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
600
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
550
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Code Reviewing Like a Champion
maltzj
526
40k
Balancing Empowerment & Direction
lara
5
690
Gamification - CAS2011
davidbonilla
81
5.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Thoughts on Productivity
jonyablonski
70
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Context Engineering - Making Every Token Count
addyosmani
7
260
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
Base64 VLQ概要 @rChaser53
概要 ・sourcemapのmappingsで用いられている ・相対的に位置や情報を示すことで情報を圧縮している ・少ない文字数で-2 ~ 2 -1の値まで表現できる 32 32
使用箇所 TypeScript出力のsourcemap 可読性のため改行している
使用箇所
AAGA,OAAO,CAAC...
AAGA,OAAO,CAAC... 正直これだけではよく分からない まずは数字に変換する必要がある
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789+/ 使用する文字はBase64で使用する文字 「A」=0、 「/」=63とし 「/」に向かい1ずつ数字が大きくなる Gなら6、aなら26になる
011011 b = 27 これを6bitの2進数に変換する
011011 Continuous Bit Value Bit Sign Bit b = 27
bitには役割が存在する
1の場合、次の文字のValue Bitを左に5bitシフトし この文字列のValue Bitとの和を取る(後述) 011011 Continuous Bit Value Bit Sign
Bit b = 27
この4桁の数値で基本となる数値の値を算出する 011011 Continuous Bit Value Bit Sign Bit b =
27
1の場合、マイナスになる 0の場合、プラスになる 011011 Continuous Bit Value Bit Sign Bit b
= 27
011011 Continuous Bit: 0 => 演算不要! Value Bit: 1101 =>
13 Sign Bit: 1 => -1 b = 27 結果 -13
i = 34 =100010 次 iG G = 6 =000110
100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0
i = 34 000110 G = 6 Value Bit: 0011
100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0
i = 34 次の文字のValue Bit(0011)を左に5bitシフトし 000110 G = 6 Value Bit: 0011 0011 << 5 => 1100000
100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0
i = 34 この文字列のValue Bit(0001)との和を取る 1100000 + 0001 = 1100001 => 97 G = 6 Value Bit: 0011 000110
100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0
i = 34 Sign Bitは0のため符号は「+」のまま 従ってiG = 97 G = 6 Value Bit: 0011 000110
つまり先ほどの文字列は AAGA,OAAO,CAAC...
こうなる AAGA,OAAO,CAAC... 0030,7007,1001...
・カンマ区切りでセクションを構成する ・1文字1文字に意味がある ・初期位置は列、行、index全て0 ・以降は相対的な情報を示す ・;は改行を意味する ・必要となる情報によって セクションのサイズは変動する(1 or 4, 5)
(AAGA,OAAO,CAAC…) 0030,7007,1001...
5文字のケースを元に説明する 各文字は以下の情報を示している 1.変換後の列番号 2.変換前のファイル名のindex (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 4.変換前のファイルの列番号 5.変換後の単語のindex (sourcemapのnamesのindex) 使用箇所
1文字の場合は ここまで 4文字の場合は ここまで
sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” 1.変換後の列番号 0 => 0
2.変換前のファイル名のindex 0 => 0 (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 0 => 1 4.変換前のファイルの列番号 0 => 0 5.変換後の単語のindex 0 => 0 (sourcemapのnamesのindex) 例えば以下のようなsourcemapの構成だったら… AACA = 0010
sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” 1.変換後の列番号 0 => 4
2.変換前のファイル名のindex 0 => 0 (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 1 => 1 4.変換前のファイルの列番号 0 => 6 5.変換後の単語のindex 0 => 0 (sourcemapのnamesのindex) 例えば以下のようなsourcemapの構成だったら… IAAM = 4006
sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” 1.変換後の列番号 4 => 13
2.変換前のファイル名のindex 0 => 0 (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 1 => 1 4.変換前のファイルの列番号 6 => 15 5.変換後の単語のindex 0 => 0 (sourcemapのnamesのindex) 例えば以下のようなsourcemapの構成だったら… SAAS = 9009
ちなみに何を変換したか? sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” var tempValue =
123; type TempType = number; const tempValue: TempType = 123; JavaScript TypeScript sourcemap
Base64 VLQ参考リンク ・MS社の人の独自研究 規則性が知りたければここ フォーマットの変遷の考察が本当に面白い ・BASE64のcoder/decoder 圧縮や難読化がされてないのでソースが楽に読める 説明がわからんコードを見せろという方はここ ・変換前後のsourcemap対応図が非常にわかりやすい
ご静聴ありがとうございました