フロントエンドカンファレンス関西2025
採択
LT（5分）
ツール JavaScript（TypeScript）

ソースマップはどのように元コードへの参照を保持するか

Selria1 yuta-ike Selria1

私たちの開発体験を高めるものとして、ソースマップは必要不可欠ともいえる存在です。しかし、ソースマップをじっくり眺めたことがある方は少ないと思います。

かく言う私も、「元のコードへの参照を保持してくれるJSONのやつ」という程度の認識でした。しかし改めて中身を見てみると、"mappings"というフィールドには「AAOI;AAPJ,SAASA,kBAAkB...」といった4~6文字程度のアルファベット列がたくさん詰め込まれいています。

これはVLQというアルゴリズムによって生成される文字列なのですが、今回のセッションではこのロジックなどを中心に、ソースマップがどのように生成され、元のコードへの参照をどのように保持しているか説明します。