圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場

2012年3月23日

JavaScriptをデプロイする際には、できるだけ小さくするために余計なスペースや改行を取り除き、さらに関数名なども変換して圧縮することがあります。しかし圧縮後のJavaScriptにバグが見つかるとそのままではデバッグしにくいため、いちいち元のソースコードに戻してデバッグしなければなりません。

Introduction to JavaScript Source Maps - HTML5 Rocks

Webサイト「HTML5 Rocks」の記事「INTRODUCTION TO JAVASCRIPT SOURCE MAPS」で紹介されたWebブラウザの新技術「Source Maps」は、圧縮状態のコードを実行していても元のソースコードを参照しながらデバッグできるだけでなく、CoffeeScriptのようなJavaScriptへ変換する言語であっても、変換後のJavaScriptから元のCoffeeScriptのコードが参照できると説明されています。

ChromやFirefoxで実装の見通し

Source Mapsのデモページも用意されており、圧縮済みのjQueryのソースコードを右クリックすると、圧縮前のオリジナルのコードの位置と内容を見ることができます。

fig 画面下の「Source Code」が圧縮されたコードで、これを右クリックで「Get Original Location」を選択すると、中央の「Output」の欄にオリジナルコードの位置が表示される

この技術はJavaScriptの圧縮前後の関連づけに使うだけでなく、CoffeeScriptのようにJavaScriptをターゲットにコンパイルする言語であっても使えるため、ブラウザ上でCoffeeScriptをオンザフライでコンパイルして実行し、エラーが発見されたらCoffeeScriptレベルでデバッグするといったことも技術的には可能です。

JavaScriptだけでなくCSSにも応用できるため、SASSやLESSのようなCSS拡張言語に用いることも可能。

Source Mapsはブラウザベンダ独自の技術ではないようで、FirefoxやChromeのテストビルドでの実装が進んでいるようで、将来のブラウザのバージョンや開発ツールなどに搭載されることになりそうです。

Tags: JavaScript Web技術 Chrome Firefox Webブラウザ

このエントリーをはてなブックマークに追加
ツイート
follow us in feedly





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本