事実として、どんな人でも、気持ちのいいウェブブラウジングの操作性を好むものです。JavaScriptはそんな願望を叶えるべく、長きにわたり、開発者を支えてきました。
しかし、JavaScriptはサイトの見栄えを良くするためだけにあるわけではありません。JavaScriptは、サイトのパフォーマンスと全体的な仕上がりに直接影響を及ぼします。サイトの高速化やページの読み込み時間の短縮は、JavaScript開発の核となる2つのコンセプトであり、ユーザーエクスペリエンスを向上させるための重要な要素です。
JavaScriptのコードを圧縮する方法について動画での解説もご用意しています。
ウェブサイトのパフォーマンスを最短期間で引き上げるには、JavaScriptの圧縮を味方につけるのが得策です。つまりは、JavaScriptソースコードからの（機能そのものの変更を伴わない）不要な文字の排除です。これにより、ウェブサイトの読み込み時間や帯域幅の使用量を減らすことができます。
JavaScriptの圧縮はそこまでシンプルではありません。そこで、今回の記事では、WordPressサイト、そして、非WordPressサイトにおけるJavaScriptコードの圧縮方法をご紹介したいと思います。
JavaScriptとは
JavaScriptは、クライアント側とサーバー側の両方でインタラクティブなウェブサイトを作成することのできる、テキスト指向のスクリプト言語です。他の言語よりもシンプルで習得が簡単なため、幅広く使用されています。
HTMLとCSSがウェブサイトの構造を構築するのに対し、JavaScriptはウェブサイトにインタラクティブな側面をもたらします。つまり、複雑な機能の追加やユーザーを引き込む一工夫に使えます。例えば、JavaScriptで、スクロール対応の動画ジュークボックス、2D/3Dビデオ、インタラクティブなマップといった複雑な要素を実装できます。
注目すべきは、「ウェブブラウザがJavaScriptを理解できる」という事実です。この理由から、ウェブ開発に興味があるなら、HTMLやCSSと並んで、JavaScriptは非常に魅力的な言語と言えるでしょう。すべてのブラウザで問題なく機能する、高度にインタラクティブなサイトを作成する必要があるなら、JavaScriptは信頼に足る選択肢です。
コードの圧縮とは
コードの圧縮は、容量を節約し、ページの表示時間を短縮し、ウェブサイトの帯域幅の使用料を減らすことにつながります。ここで大事なのは、機能を変更することなくコードを圧縮することです。
コードの圧縮は、HTML、CSS、そしてこれから紹介するJavaScriptなど、あらゆるプログラミング技術で実施可能です。しかし、そのプロセスは即座に完了するものではありません。機能を維持したままコードをコンパクトにするためには、ある程度の作業が必要です。
JavaScriptにおいて、具体的にはコードの解析、圧縮、出力を行います。圧縮したコードは、肉眼ではほとんど読めません。不要な空白やコメント、改行など、もともとコードを読みやすくしていたものをすべて取り除いた状態です。
さらに、関数のインライン化、ブロック区切り文字の削除、暗黙の条件分岐の使用、ローカル変数の書き換えなど、コードを調整しなければならないことも。
圧縮したJavaScriptとそうでないJavaScriptのコード例
いくつかサンプルコードを見てみましょう。最初のブロックは、圧縮されていない通常のJavaScriptのコードです。
//文字列が回文であるかどうかを調べるプログラム
function checkPalindrome(str) {
//文字列の長さを求める
const len = string.length;
//文字列の半分をループする
for (let i = 0; i < len / 2; i++) {
//最初と最後の文字列が同じかどうかをチェックする
if (string[i] !== string[len - 1 - i]) {
return 'これは回文ではありません';
}
}
return 'これは回文です';
}
//インプットを受け付ける
const string = prompt('文字列を入力してください');
//関数を呼び出す
const value = checkPalindrome(string);
console.log(value);次に、同じコードを圧縮するとどのようになるか見てみましょう。
function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++)
if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"}
const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);ご覧のとおり、2つ目のコードは小さくコンパクトになっています。これは、読み込みとレンダリング、そして、コンテンツの表示が高速化されることを意味します。
この例では、529バイトを324バイトに減らすことで、205バイトの空き領域が手に入り、ページの読み込みにかかる時間をほぼ40%削減することができました。
529ページある本を、324ページに凝縮したようなものです。もちろん、人間が読むには苦労しますが、機械なら問題なく読み進められるでしょう。
また、複数のJavaScriptファイルを連結して1つのファイルとして圧縮すると、サーバーへのHTTPリクエストの数が減少し、サイトの帯域幅の消費も抑えることができます。さらに、コードの圧縮によってスクリプトの実行時間が短縮され、Time to First Byte （TTFB）が低下します。
JavaScriptコード圧縮の必要性
ある意味では当然のことですが、コード記述の際には、ほとんどの開発者が物事を成し遂げることに集中します。そのため、将来的に他の人がコードを読んだ時に理解できるようにと、コメントや空白、変数が多用される傾向にあります。
JavaScriptは優れたプログラミング言語ですが、ウェブページの速度を低下させてしまうことがあります。その影響を最小限に抑え、ページの読み込み速度を引き上げるには、JavaScriptのコードを圧縮する必要があります。
圧縮によりJavaScriptコードのファイルサイズを30～90%も削減可能です。その結果、JavaScriptの圧縮は、すべての開発者にとっておなじみの処理となりました。
主要なJavaScriptライブラリ（Angular、Bootstrapなど）は通常、本番環境でのデプロイ用に圧縮バージョンを用意しています。そして、その種類を明確に示すために「min.js」という拡張子が使用されています。
JavaScriptコードを圧縮するメリット
JavaScriptコードの圧縮により得られるメリットは以下の通りです。
- ページ表示時間の短縮
- ウェブサイトの帯域幅消費量の削減
- スクリプト実行時間の短縮
- サーバーへのHTTPリクエストの減少（およびサーバーへの負荷の軽減）
- 盗難防止（圧縮したバージョンは、読み取り再利用するのが困難）
JavaScriptの圧縮の種類（＋難読化）
JavaScriptコードの圧縮、難読化は非常に似通った概念です。しかし、細かな話をすると、それぞれ目的が異なります（※注釈：ここでの「圧縮」は英語で「minify」と表現されるもの）。
JavaScriptの難読化はコードを書き換えて、人間が読めないようにすることを目的としています。空白、セミコロン、コメントを削除し、さらに変数やインライン関数の名前を変更することでコードを読みにくくします。
JavaScriptにはUglifyJSというライブラリがあり、コードを自動的に難読化することができます。パフォーマンスを向上させる一方で、可読性を下げることで、コードが盗まれる可能性を下げる効果があります。
圧縮と言っても、中には、GZIPのような圧縮アルゴリズムを使って、コードをバイナリ形式に書き換え、サイズを小さくし、読み込みを素早くするものもあります（※注釈：こちらの手法は英語では「compress」と表現される）。
「minify」の圧縮は空白やコメントを減らすことで、完全な難読化は、関数名や変数名などを変更することでコードを読めない形に変換することを意味します。そして「compress」の圧縮では、バイナリでコードを書き換えファイルサイズを小さくすることができます。
圧縮は「minify」にせよ「compress」にせよ、どちらも可逆的です。つまり、コードを元の形に戻すことができます。一方で難読化したコードは元に戻せません。
JavaScriptのコードを圧縮する方法
JavaScriptのコードを圧縮するには、様々な方法があり、どれも特徴的です。
大きなJavaScriptファイルのすべてのコードを手動で圧縮することは、ほぼ不可能です。手作業でJavaScriptファイルを圧縮するのには非常に時間がかかるため、小さなファイルに対してのみ有効になります。
JavaScriptのコードを手作業で圧縮するとなると、テキストエディタでJavaScriptファイルを開き、すべてのスペースを1つずつ根気強く削除していきます。JavaScriptファイルのスペースやコメントをすべて削除するには、それなりの時間がかかるでしょう。テキストエディタの中には、正規表現をサポートしているものもあり、賢く選ぶことで、この処理にかかる時間を時間を大幅に削減できる可能性はあります。
もうひとつの方法が、圧縮ツールの使用です。これをコンピューターにインストールし、コマンドラインから実行します。圧縮したいファイルを選択し、処理を開始します。すると、ツールにより自動で圧縮が行われます。
JavaScriptを手作業で圧縮する方法（おすすめツール5選）
開発者と言えども、コードを圧縮し、パフォーマンスを向上するために、JavaScript圧縮ツールが必要になるものです。それぞれの好みにより選ぶツールは異なり、絶対的な答えはありません。JavaScriptの圧縮ツールは現にたくさんあります。それぞれに違いがありますので、自分にあったものを見つけることが重要です。
こちらでご紹介するツールは順不同です。業界でも人気の高いJavaScriptコードの圧縮に使えるものだけをリストアップしました。
それでは、ウェブパフォーマンスを向上させることができるJavaScript圧縮ツールは以下のとおりです。
1. JSMin
JSMinは、JavaScriptのコードを圧縮し、可能な限り軽量化するのに使えるコマンドラインJavaScript圧縮ツール兼ライブラリです。JSMinをグローバルスクリプトとしてインストールするだけで、コードからすべての空白と不要なコメントを非常に効率的に削除できます。その結果、JavaScriptのファイルサイズを瞬時に約50％削減可能です。
これは、ダウンロード速度の高速化に直結します。 また、クリーンで文芸的なドキュメンテーションで、より表現力の高いプログラミングスタイルが自然と促進されることになります。
しかし、JSMinを用いた圧縮には一つの弱みがあります。その単純なアルゴリズムのために、多くの改行が変更されずそのままになります。そうでもしないと、コードに新たなバグを発生させてしまう可能性があるのです。
2. Microsoft Ajax Minifier
Microsoft Ajax Minifierを使えば、JavaScriptとCSSファイルの両方のサイズを減らし、ウェブアプリケーションのパフォーマンスを引き上げることができます。コメント、不要なスペース、セミコロン、関数、括弧は削除されます。
ローカル変数、関数名、引用符/二重引用符の短縮化、隣接する変数宣言の結合、さらに、実行されないコードの削除も行われます。
生産性を分析することも、バックグラウンドでJSを圧縮することも可能です。そして、圧縮後には、生産性確認用のフォルダを開くことができます。
3. Google Closure Compiler
Google Closure Compilerもまた、優れたJavaScriptコード圧縮ツールです。JavaScriptを定式化し、高速ダウンロードとスムーズなパフォーマンスを実現します。また、構文を検証、変更を提案、使用されていないコードと型を削除し、JavaScriptコードの問題点について警告を表示してくれるのも特徴です。JavaScriptコードの評価、冗長なコードの削除、それの書き直しに効果を発揮します。
また、不正なコードや潜在的に危険な操作に対しても警告が出ます。JavaScriptコードを優れた圧縮版へと生まれ変わらせてくれる頼りになるツールです。
4. YUI Compressor
YUI compressorは、他の多くのツールよりも高い圧縮率をウリにした、コマンドライン型のJavaScript・CSS圧縮ツールです。Javaで構築されており、ソースJavaScriptファイルのトークン化にはRhinoを使用しています。
まず、ソースJavaScriptファイルの分析により、その構造が特定され、次に、トークンストリームがプリントアウトされます。そして、できるだけ多くの空白を削除しながら、すべてのローカルシンボルが1文字（または2、3文字）に置き換えられます。
YUI Compressorはオープンソースであるため、ソースコードを調べれば、どのように動作するかを知ることができます。優れた圧縮率を持つ、セキュアなJavaScript圧縮ツールです。
5. UglifyJS
UglifyJSも人気のJavaScriptコード圧縮ツールの1つです。JavaScriptのコードを解析、圧縮することができます。また、圧縮中にソースマップファイルが生成されるので、元のコードへのトラックバックが可能です。
また、同時に複数の入力ファイルを受け付けることができ、最初に入力ファイルのパースが実行され、次にオプションのパースへと進みます。
入力ファイルを順番に解析しながら、任意の圧縮オプションが適用されていきます。ファイルの解析は同じグローバルスコープ内での処理となり、あるファイルから別のファイルで宣言された変数/関数へは適切な参照関係が維持されます。
JavaScriptを自動で圧縮する方法（オンラインツール5選）
オンラインで使えるJavaScriptコード圧縮ツールは豊富にありますが、そのほとんどすべてが同様の手法を採用しています。
まず、JavaScriptのソースコードをコピー＆ペーストするか、ファイルをアップロードします。次に、圧縮ツールの設定を調整します。設定内容によって、その条件に基づいた圧縮が実行されます。
最後に、圧縮後のファイルを取得し、元のコードの代わりにウェブサイトで使用します。ただし、この際には、念のために元のソースコードファイルも保管しておくことをおすすめします。
それでは、ウェブパフォーマンス向上を助ける、オンラインJavaScriptコード圧縮ツール5選をご紹介します。特定の順序やカテゴリがあるわけではありませんが、人気があり便利なJavaScript圧縮ツールのみを厳選しています。
1. Toptal JavaScript Minifier
Toptal JavaScript Minifierは、ものの数秒でJavaScriptコードを圧縮することができる、効率的でありながら簡単なオンラインツールです。圧縮したコードは.jsファイルとして保存することができます。
2. JSCompress
JSCompressを使って、JavaScriptのサイズをおよそ80%削減することができます。シンプルなインターフェースで、コードを貼り付けるか、.jsファイルをアップロードして使用します。圧縮後の出力は、.jsファイルではなく、クリーンなコードとして表示されるので、これをコピーすることができます。注目すべき点として、このツールでの圧縮には、UglifyJSとBabel-minifyが使用されています。
3. Minifier.org
Minfier.orgは、非常にシンプルにコードを圧縮できるオンラインツールです。JavaScriptコードの圧縮方法として複数のアプローチが採用されています。圧縮前後で、JavaScriptコードのサイズが測定され、実際に圧縮したことでどれほどの違いが生まれたのかを確認することができます。
4. TutorialsPoint Online JavaScript Minifier
TutorialsPointでは、.jsファイルをアップロードするか、URLを指定するか、コードを直接貼り付けることができます。このツールには編集用のフィールドがあり、必要に応じて直接コードを調整することも可能です。また、ワンクリックでの圧縮、その後の.jsファイルとしてのダウンロードに対応しています。
5. Packer: Dean Edwards JavaScript Compressor
Dean Edwards氏が公開しているPackerもJavaScriptのコード圧縮に便利です。このツールでは、JavaScriptのトークン/アトム、およびビット/バイトパターンがサポートされています。
さらに、コード圧縮の際に、Base62エンコードとShrink変数を使用することも可能です。JSコードを圧縮するには、その中身をコピーしフィールドに貼り付け、「Pack」ボタンを押します。すると自動でコードが圧縮されます。
WordPressでJavaScriptを圧縮する方法（5つのツール/プラグイン）
WordPressでのJavaScriptコード圧縮方法は少し異なります。JavaScriptを圧縮するには、サーバー側での特別な操作か、WordPressプラグインのインストールが必要です。WordPressの圧縮プラグインは圧縮処理を実質、自動で行ってくれます。
JavaScriptの圧縮WordPressプラグインは多数あり、そのほとんどで採用されている圧縮の手法は同様です。WordPress管理画面から簡単に実行できます。
WordPressでJavaScriptコードを圧縮するのに便利なプラグインをいくつかご紹介します。
1. WP Rocket
WP Rocketは、JavaScriptとCSSを圧縮して結合し、ページのレンダリングをブロックしないように配信を最適化してくれるプラグインです。Kinstaではキャッシュ機能が自動で無効化されますが、キャッシュクリア機能は使用できるため、Kinstaとの相性が良いのも特徴です。WP Rocketのライセンス制限に影響を与えることなく、Kinstaのステージング環境で使用することができます。
2. W3 Total Cache
W3 Total Cacheでは、JavaScript、CSS、HTMLを事細かに制御しながら圧縮することができます。さらに、インライン、埋め込み、または任意のサードパーティのJavaScriptやCSSコードの圧縮にも対応しています。また、圧縮とは別に、ページ表示速度向上のためにJavaScriptとCSSの読み込みを遅延することも可能です。さらに、WordPressサイトでのJavaScriptコード圧縮方法として、いくつもの選択肢が用意されています。
3. WP-Optimize
WP-Optimizeは、WordPress最適化プラグインに分類されます。キャッシュのクリアとWordPressサイトの最適化とともに、CSS、JavaScriptの圧縮も行うことができます。さらに、CSSとJavaScriptの読み込み遅延も可能です。これにより、メインの要素の後に副次的なアセットを読み込むことで、ページのパフォーマンス向上を図ります。
4. Autoptimize
Autoptimizeは、CSSやJavaScriptを集約、圧縮、キャッシュして、ページの読み込み時間を短縮し、WordPressサイトのパフォーマンスを向上させるのに便利なプラグインです。スクリプトの圧縮とキャッシュ、JavaScriptコードのインライン化、集約されていないJavaScriptの非同期化が可能です。
WordPressサイトのパフォーマンスに焦点を当てたJavaScript圧縮プラグインをお探しなら、Autoptimizeは優れた選択肢です。
5. Fast Velocity Minify
Fast Velocity Minifyは、WordPressサイトにおける高度なJavaScript、CSS、HTMLの圧縮を後押しするプラグインです。これを利用すると、最初のキャッシュされていないリクエストが発生したタイミングで、フロントエンドでの圧縮が実行されます。分かりやすいユーザーインターフェースとシンプルな操作性が特徴です。
まとめ
ウェブページのパフォーマンスを最大化するには、細かい部分まで注意を払う必要があります。したがって、HTML、CSS、JavaScriptの圧縮は、サイトパフォーマンス向上のTo-Doリストにぜひとも追加しておきましょう。
今回の記事では、JavaScriptの圧縮を支援する数多くのツールやプラグインをご紹介しました。全てのツールやプラグインに特徴がありますが、どれを選んでも圧縮という目的を達成することができます。
ご利用の状況にあわせて、今回の一覧から好みのツールを試してみてください。JavaScriptコードの圧縮は、サイトの高速化に貢献します。
ここでは紹介されていない、おすすめのJavaScript圧縮ツールまたはWordPress圧縮プラグインをご存知ですか？コメント欄でぜひお聞かせください。
コメントを残す