【JavaScript入門】コードの圧縮と元に戻すオススメサービスを紹介

こんにちは!エンジニアの中沢です。

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」

コードの難読化

コードの圧縮はページの表示を早くするために行うものですが、コードを読みにくくするための難読化というものもあります。

コードの難読化についてはこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】JavaScriptコードの「難読化」とは
更新日 : 2018年7月16日

まとめ

いかがでしたか?

今回はコードを圧縮する方法を解説しました。

コードを圧縮すればサイズが軽くなりページの表示速度が改善できるので、ぜひ活用してくださいね。

もし、コードの圧縮方法を忘れてしまったらこの記事を確認してください!

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら