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
520
Rustからwasmを生成してみた話
rchaser53
1
750
sourcemap規格概要
rchaser53
1
1.2k
TypeScript+React入門
rchaser53
1
860
Other Decks in Programming
See All in Programming
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
450
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
430
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
660
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
160
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
株式会社 Sun terras カンパニーデック
sunterras
0
180
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
660
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
560
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Language of Interfaces
destraynor
162
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Fireside Chat
paigeccino
40
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Context Engineering - Making Every Token Count
addyosmani
4
160
Navigating Team Friction
lara
189
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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対応図が非常にわかりやすい
ご静聴ありがとうございました