こんにちは！エンジニアの中沢です。
JavaScriptにはコードを圧縮するための便利なサービスがあります。
コードを圧縮して読み込みを早くすることができるので、上手く活用してください。
この記事では、
・JavaScriptの圧縮とは
・オススメの圧縮ツール
という基本的な内容から、
・圧縮されたJavaScriptを元に戻す方法
などの応用的な使い方に関しても解説していきます。
今回はこれらの方法を覚えるために、コードの圧縮のさまざまな使い方をわかりやすく解説します！
JavaScriptのコードの圧縮とは
JavaScriptのコードには、読みやすくするために空白や改行が含まれています。
これらの空白や改行を削除することで、サイズを小さくし、ページの表示を早くすることができます。
圧縮されたコードはそのままでは読みにくいので、元に戻すためのツールも用意されています。
この記事では、これらの圧縮を行うためのサービスを紹介します。
オススメの圧縮ツール
JS Minifier
ここでは、圧縮ツールの「JS Minifier」を紹介します。
「JS Minifier」は圧縮したいJavaScriptのコードを貼りつけて「縮小する」ボタンをクリックするだけでコードを圧縮することができます。
JavaScriptだけではなく、CSSの圧縮もできるのでぜひ活用してください。
リンクはこちらです。
「JS Minifier」
YUI Compressor
ここでは、圧縮ツールの「YUI Compressor」を紹介します。
「YUI Compressor」は、JavaScriptとCSSの両方の圧縮に対応しています。
「YUI Compressor」は、エディタの「Sublime Text」にインストールして使うことができるのが特徴です。
エディタにインストールして使うことで、素早く圧縮することができるので大変便利に使うことができます。
リンクはこちらです。
「YUI Compressor」
「Sublime Text」についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。
圧縮されたJavaScriptのコードを元に戻す方法
ここでは、圧縮されたJavaScriptのコードを元に戻す「Pretty Diff」を紹介します。
圧縮されたJavaScriptのコードを元に戻すには、「Pretty Diff」というサービスを使います。
「Pretty Diff」は圧縮されたコードをもとに戻す（展開）することのほかにも、圧縮や比較をすることもできます。
リンクはこちらです。
「Pretty Diff」
コードの難読化
コードの圧縮はページの表示を早くするために行うものですが、コードを読みにくくするための難読化というものもあります。
コードの難読化についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。
まとめ
いかがでしたか？
今回はコードを圧縮する方法を解説しました。
コードを圧縮すればサイズが軽くなりページの表示速度が改善できるので、ぜひ活用してくださいね。
もし、コードの圧縮方法を忘れてしまったらこの記事を確認してください！
