Webの基本からクラウド、HTML5まで易しく解説するWeb絵本 Googleが公開

　Googleは6月2日、Webを利用する際に知っておきたい基本的な知識について解説する絵本の日本語版「ブラウザやウェブについて知っておきたい20のこと」を公開した。

　「IPアドレスとDNS」や「クラウドコンピューティング」「HTML5」やセキュリティなど、インターネットの基本から最新の動向まで20項目について解説している。

　Chromeブラウザを開発するチームがHTML5を活用して制作。オフラインでも利用でき、ページをめくったりする感覚をブラウザ上で実現している。ソースコードは公開しており、同様のWebブックを制作することが可能だ。

IE開発者ツールでJavaScriptコードを整形して表示するには？

　Webブラウジング中にショートカット・キー［F12］を押すと起動できる「開発者ツール」が、バージョン8以降のInternet Explorer（以下、IE）には搭載されている。開発者ツールは、現在
開いているWebページのHTMLコード内の各要素をツリー形式でビジュアルに表示したり、Webページ上の要素をクリックして、それに該当するコードを表示したり、HTMLコードやCSSプロパティなどをその場で試しに書き換えてリアルタイムにWebページの表示を変更したりできるなど、Web制作に役立つ機能がそろっている。そういったWeb開発用機能の1つとして、JavaScriptコードのデバッグ機能がある。

　IE9では、この開発者ツールが強化され、JavaScriptコードの書式を整形して、見やすく表示する機能が追加された。本TIPSでは、この機能の使い方を説明する。

■開発者ツール（IE9以降）のJavaScriptコード書式整形機能

　特に昨今のJavaScriptコードでは、通信量を極力減らして実行速度を高めるなどの目的で、コードの圧縮が行われている。そのため、生のJavaScriptコードは大変読みにくく、実際に稼働中のサイトのJavaScriptコードをデバッグしてみると、JavaScriptコードの解読に時間がかかってしまう場合がある。

　圧縮されているJavaScriptコードを解読したい場合には、IE9以降に実装されているJavaScriptコードの書式整形機能が役立つ。

　具体的には、開発者ツールの［スクリプト］タブのツールバー上にある［構成］ボタンをクリックして（ショートカット・キーは［Alt］＋［Ctrl］＋［O］キー）、表示されるメニューから［JavaScript の書式設定］をクリックする。

　これにより、JavaScriptコードの書式が整形され、読みやすくなる

　こうやって整形された状態でも、もちろんJavaScriptコードをデバッグできる。