JavaScriptのminify（最小化・圧縮）の解説をいくつかまとめてみた

JavaScriptを手で書いたあと、Webで公開する際にはminifyすることが定番、のはず。
けれども、minifyしたあとのJavaScriptは元と全く同じ動作をするが、文法すら全く異なるように最小化されることが多い。

JavaScript初心者のわたしとしては🤔🤔？？？となることが多かったので、言語仕様を勉強するためにもいくつかまとめてみた。

例1：ローカル変数の置き換え

minify前

(function (position) {
	const SOURCE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
	return SOURCE[position];
})(3);

minify後

(function(a){const b="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";return b[a]})(3);

解説

JavaScriptのスコープには、「グローバルスコープ」と「ローカルスコープ（関数スコープとブロックスコープ）」があり、グローバルスコープを汚さないために即時関数を利用することがある。
当然、即時関数内の変数名は自由に設定できるので、aとかbとか1文字で適当に置き換える。

例2：trueとfalseの置き換え

minify前

let a = true;
let b = false;
if(c===true){
    //（略）

minify後

let a=!0,b=!1;if(!0===c){//（略）

解説

a = trueとするよりも!0（0の反対、論理否定演算子）としたほうが短い。trueは4文字だけど!0は2文字で済む。

なお、JavaScriptにおいて、trueと!falseと!0は完全に厳密に同値です。同様に、falseと!trueと!1も。
（なぜこうなるか理由がわからなかったので詳しい方コメント下さい…）

console.log(true===!false);//true
console.log(!false===!0);//true
console.log(!0===true);//true
console.log(false===!true);//true
console.log(!true===!1);//true
console.log(!1===false);//true

ちなみにJavaScriptでfalseと評価されるのはfalse、''（空文字）、NaN、0、-0、undefined、nullの7つらしい

ちなみに

↑のスクリプトでminifyされたあと、!0===cとヨーダ記法（==などの比較演算子の左側にリテラルを書くこと）になっているが理由は謎。

例3：論理演算子&&と||の活用

minify前

var root;
if (typeof self == 'object' && self.self === self) {
    root = self;
} else if (typeof global == 'object' && global.global === global) {
    root = global;
} else {
    root = this;
}

ちょっとminify後

var root = typeof self == 'object' && self.self === self && self ||
            typeof global == 'object' && global.global === global && global ||
            this;

参考より引っ張ってきました。

JavaScriptの仕様として、引用元

OR "||" 演算子は次のように動きます:
1.左から右にオペランドを評価します。
2.それぞれのオペランドで、それを Boolean に変換します。もしも結果が true であれば、停止しオペランドの本来の値を返します。
3.もしもすべての他のオペランドが評価された場合(i.e. すべて 偽 のとき), 最後のオペランドを返します。

AND "&&" 演算子は次のように動きます:
1.左から右にオペランドを評価します。
2.それぞれのオペランドで、それを Boolean に変換します。もしも結果が false の場合、ストップしそのオペランドの本来の値を返します。
3.もしもすべての他のオペランドが評価された場合(i.e. すべて 真 のとき), 最後のオペランドを返します。

というのがあります。

個人的にこう理解した

OR

要するに、||は左から順にみていって最初にtrueになるものを返すということです。
◯ || △ || □のようなとき、||は1つでもtrueになれば全体としてtrueになりますね。
なので、左から順にみていって、1つでもtrueなものが見つかればそいつを返します。

AND

一方、&&は左から順にみていって最初にfalseになるものを返す、ということです。
◯ && △ && □のようなとき、&&は1つでもfalseになれば全体としてfalseになりますね。
なので、左から順にみていって、1つでもfalseなものが見つかればそいつを返します。

ANDとORの優先順位

また、&&演算子の方が||より優先順位が高いです。
これを思いっきり利用したのが↑のスクリプトです。

例

&&の方が優先順位が高いので、例えば

'ぴえん🥺' && 'ぱおん🥺' || 0 && 1 && 2

は"ぱおん🥺"が返ります。

まず'ぴえん🥺' && 'ぱおん🥺'を評価して"ぱおん🥺"が返り、次に0 && 1 && 2を評価して0が返り、最後に"ぱおん🥺" || 0を評価して"ぱおん🥺"が返るイメージです。

例4：カンマ演算子

minify前

let a=function(event){
    event.preventDefault();
    event.hogehoge();
    return event.result;
}

minify後

let a=function(e){return e.preventDefault(),e.hogehoge(),e.result};

いい例が見つからんかった…

JavaScriptの,は演算子で、それぞれの中身を左から右に順番に評価し、最後の式の値を返します。

minifyされたJSファイルのいたるところで,は使われますが、結局のところ左から右に順番に評価し、最後の式の値を返すを理解していれば解読できます。

最後に

magnify（大きくする）という英単語があるんだから、minifyは当然「小さくする」って意味だろう

と思って非プログラマーの英語の先生にminifyと言ってみたら、「何いってんだお前」と言われました。

minifyは英語の辞書には載ってません。プログラマーにのみ通じる単語です🙄

大きくするって単語はmagnifyとかenlargeって単語があるのに、小さくするのはmake ◯◯ smallerしかないのなんで？

最後に2

わたしJavaScript初心者なので間違いあったらごめんなさい🥺