Base64 VLQ概要 - Speaker Deck

Base64 VLQ概要

by rchaser53

Slide 1

Slide 1 text

Base64 VLQ概要 @rChaser53

Slide 2

Slide 2 text

概要・sourcemapのmappingsで用いられている・相対的に位置や情報を示すことで情報を圧縮している・少ない文字数で-2 ~ 2 -1の値まで表現できる 32 32

Slide 3

Slide 3 text

使用箇所 TypeScript出力のsourcemap 可読性のため改行している

Slide 4

Slide 4 text

使用箇所

Slide 5

Slide 5 text

AAGA,OAAO,CAAC...

Slide 6

Slide 6 text

AAGA,OAAO,CAAC... 正直これだけではよく分からないまずは数字に変換する必要がある

Slide 7

Slide 7 text

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789+/ 使用する文字はBase64で使用する文字「A」=0、「/」=63とし「/」に向かい1ずつ数字が大きくなる Gなら6、aなら26になる

Slide 8

Slide 8 text

011011 b = 27 これを6bitの2進数に変換する

Slide 9

Slide 9 text

011011 Continuous Bit Value Bit Sign Bit b = 27 bitには役割が存在する

Slide 10

Slide 10 text

1の場合、次の文字のValue Bitを左に5bitシフトしこの文字列のValue Bitとの和を取る(後述) 011011 Continuous Bit Value Bit Sign Bit b = 27

Slide 11

Slide 11 text

この4桁の数値で基本となる数値の値を算出する 011011 Continuous Bit Value Bit Sign Bit b = 27

Slide 12

Slide 12 text

1の場合、マイナスになる 0の場合、プラスになる 011011 Continuous Bit Value Bit Sign Bit b = 27

Slide 13

Slide 13 text

011011 Continuous Bit: 0 => 演算不要! Value Bit: 1101 => 13 Sign Bit: 1 => -1 b = 27 結果 -13

Slide 14

Slide 14 text

i = 34 =100010 次 iG G = 6 =000110

Slide 15

Slide 15 text

100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0 i = 34 000110 G = 6 Value Bit: 0011

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

100010 Continuous Bit: 1 Value Bit: 0001 Sign Bit: 0 i = 34 Sign Bitは0のため符号は「+」のまま従ってiG = 97 G = 6 Value Bit: 0011 000110

Slide 19

Slide 19 text

つまり先ほどの文字列は AAGA,OAAO,CAAC...

Slide 20

Slide 20 text

こうなる AAGA,OAAO,CAAC... 0030,7007,1001...

Slide 21

Slide 21 text

・カンマ区切りでセクションを構成する・1文字１文字に意味がある・初期位置は列、行、index全て0 ・以降は相対的な情報を示す・；は改行を意味する・必要となる情報によって　セクションのサイズは変動する(1 or 4, 5) (AAGA,OAAO,CAAC…) 0030,7007,1001...

Slide 22

Slide 22 text

5文字のケースを元に説明する各文字は以下の情報を示している 1.変換後の列番号 2.変換前のファイル名のindex (sourcemapのsectionsのindex) 3.変換前のファイルの行番号 4.変換前のファイルの列番号 5.変換後の単語のindex (sourcemapのnamesのindex) 使用箇所 1文字の場合はここまで 4文字の場合はここまで

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ちなみに何を変換したか? sources: ["../src/sourcemapTest.ts"] names: [], mappings: "AACA,IAAM,SAAS,...” var tempValue = 123; type TempType = number; const tempValue: TempType = 123; JavaScript TypeScript sourcemap

Slide 27

Slide 27 text

Base64 VLQ参考リンク・MS社の人の独自研究　規則性が知りたければここ　フォーマットの変遷の考察が本当に面白い・BASE64のcoder/decoder 　圧縮や難読化がされてないのでソースが楽に読める　説明がわからんコードを見せろという方はここ・変換前後のsourcemap対応図が非常にわかりやすい

Slide 28

Slide 28 text

ご静聴ありがとうございました