Javascriptを圧縮する方法【はてなブログOK】

こんなお悩みにお答えします。

この記事でわかること

こんにちわ、Jouji(@jouji0720)です。

サイトの高速化の記事を読んでいると、「javascriptを圧縮する」というのが見られますよね。

知識がないからとあきらめてはいませんか？

今回はjavascriptを圧縮する方法についてです。

この記事を読むとブログで自分がカスタマイズのために加えたjavascriptのコードを圧縮する方法に加え、その際の注意事項やおすすめのツールや圧縮後に何をするかまでばっちりわかっちゃいます。

この記事を書く僕はブログ歴は3年目。今ではアフィリエイトからの収益が、月に3000円くらい入ってきます。

そんな僕も、javascriptを圧縮にはあきらめを感じていました。

理由は簡単で、知識がなかったから。

でもひょんな思い付きから「こうしたらいけんじゃね？」ってやってみて、「圧縮は簡単なんだ」ということがわかりました。

そんな僕がJavascriptを圧縮する方法について、知っているすべてをお話しします。

どうぞ最後までお読みくださいね。

では行ってみましょう。

Here We Go!!

Javascriptの圧縮をあきらめるのはもったいない!!

Javascriptの圧縮って書いてあって、多いのは「知識がないのであきらめた」っていう文章をよく耳にします。

でもここであえて言っておきます。

超もったいない!!

というのも、Javascriptって結構コメントが多くて、改行部分も多いからです。

そのコメントや改行部分を減らせばデータ量も少なくて済むし、読み込み量も少なくなるから表示速度も速くなります。

読者にとってもSEO的にもいいから、いいこと尽くしです。

なのに「知識がないから」ってあきらめると、読み込み速度が遅いままだし、サイトのブラッシュアップにもなりません。

読者も離脱していく一方だし、順位も上がらなくなってしまいます。

非常にもったいないですよね。

Javascriptの圧縮前に知っておきたい注意事項

ここではJavascriptの圧縮前に知っておきたい注意事項をお話ししていきましょう。

注意事項は以下の通り。

では詳しく見ていきましょう。

注意事項①元のJavaScriptのコードをメモ帳などに張り付けてバックアップメモリを作っておくこと

Javascriptの圧縮前に知っておきたい注意事項の1つ目は、元のJavascriptのコードをメモ帳などに張り付けてバックアップを取っておくことです。

というのもJavascriptの圧縮をすると、往々にして動かないということが起こるんです。

その時にあなたに出される選択しは、以下の2つ。

• 選択肢①元のコードに戻して、動く状態にする
• 選択肢②元のコードと見比べて、あきらめずに根気強くやる

どっちにしても元のコードが必要になるために、必ず元のコードのバックアップは取っておくことにしましょう。

注意事項②ツールを過信しないこと

Javascriptの圧縮前に知っておきたい注意事項の2つ目は、ツールを過信しないことです。

ツールを使って圧縮しても、動かないことも往々にしてあります。

何かのはずみでうまくツールが作動しなかったりすることもありますから、ツールを過信するのはよくありません。

必ず自分の目で確かめるようにしましょう。

注意事項③根気強くやること

Javascriptの圧縮前に知っておきたい注意事項の3つ目は、根気強くやることです。

Javascriptの圧縮をして、うまくいかない場合には元のコードとの見比べに時間がかかります。

その時には、時間がかかることも往々にしてあります。

でもそれができると自信につながったり、読者の使い勝手がよくなったりします。

ですから根気強く腰を落ち着けて、ゆっくりとやりましょう。

Javascriptの圧縮方法

ここではJavascriptの圧縮の方法をお話ししていきましょう。

手順は以下の通り。

手順①javascriptのコードをコピーする。

手順の1つ目は、javascriptコードをコピーすることですね。

自分のサイトの圧縮したい、Javascriptのコードをコピーしましょう。

Javascriptのコードのコピーの際のポイント

Javascriptのコードのコピーの時のポイントは、<script>タグを除いた中だけをコピーすることです。

というのも<script>タグを入れてしまうと、基本的にコードが圧縮できないからです。

ですから書いた中身だけを、コピーするようにしましょう。

手順②コードをツールにコピペ。

手順の2つ目は、コードをツールにコピペすることですね。

ツールにコピペして、圧縮しましょう。

手順③ブログに貼り付け

3つ目の手順は、ブログに貼り付けですね。

ブログの元あった場所にはり付けるようにしましょう。

Javascript圧縮ツールのおすすめ3選

ここでは、Javascriptのコードを圧縮するツールのおすすめをご紹介します。

おすすめの圧縮ツールは、以下の3つ。

では詳しく見ていきましょう。

ツール①JS Minifier (JavaScriptの圧縮)

Javascript圧縮ツールの1つ目は、JS Minifierですね。

これはSyncer製のものですね。

当ブログでも、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にてお話ししたCSS Minifierの姉妹サイトだったりしますね。

使い方は、縮小前のコードの欄にコードを貼り付けて、縮小するボタンをクリックするだけ。

すると縮小後のコードの欄に、圧縮されたコードが表示されます。

ただJavascriptのコードとの相性がありものによっては、できないものもあります。

サブで使うことを、おすすめですね。

→JS Minifier (JavaScriptの圧縮)へのアクセスは、こちら

ツール②JavaScript / Css 圧縮・軽量化（Minify）

Javascript圧縮ツールの2つ目は、Javascript/CSS圧縮・軽量化(Minify)です。

こちらはブログのキーワードツールで有名なラッコキーワードの派生ツールですね。

このツールのいいところは、Javascriptのコードを選ばないところです。

使い方は、Javascriptを選び上段の欄にコピーしたコードを貼り付けて、圧縮ボタンをクリックするだ
けですね。

日本人向けに作られているので使いやすいと思います。

→JavaScript / Css 圧縮・軽量化（Minify）へのアクセスは、こちら

ツール③Coding.Tools

Javascript圧縮ツールの3つ目は、Coding.Toolsです。

このツールのいいところは、以下の通り。

ところですね。

使い方は簡単で、上段に圧縮したいJavascriptのコードを貼り付けて、Javascriptを圧縮ボタンをクリックするだけ。

下の段に圧縮されたコードが表示されます。

コードをコピーする場合には、コピー結果ボタンをクリックすると、一括コピーができますね。

→ Coding.Toolsへのアクセスは、こちら

Javascriptを圧縮した後にすること

次に、Javascriptの圧縮した後にすることをお話ししましょう。

やるべきことは、以下の通り。

では詳しく見ていきましょう。

すること①動作確認をする

することの1つ目は、動作確認をすることです。

というのもせっかく圧縮しても、うまく動かないことがあるからです。

動かなかったら困りますよね。

ですから、必ず動作確認を行いましょう。

すること②腰を落ち着けて、動かないことと向き合う

することの2つ目は、腰を落ち着けて、動かない理由を探すことです。

結構多いのがうまく動かない理由をわからずに、元に戻すということですね。

でも実際には;マークがなかったとか、()マークが閉じられていなかったとかってことがほとんどだったりします。

そのためには、元の書かれたコードと比較検証が必要です。

ですからあわてずにゆっくりと見直す必要がありますね。

まとめ｜Javascriptを圧縮して表示速度をアップしよう

お疲れさまでした。

ここまでJavascriptを圧縮する方法をお話してきました。

まとめると、以下のようになります。

まとめ

Javascriptのコードを圧縮すると、けっこう表示速度がアップします。

以下は当ブログで圧縮した証拠の写真です。

全部足すと、圧縮率が約3割くらいになるんです。

ですからやり方を覚えてやったほうがいいです。

ぜひやってみましょう。

ってことで今回はこのへんで。

また次回に。