JavaScript Maniax

■ミニゲームをつくる

ソースの縮小化に挑戦しましょう。

前回までがちょっと内容が濃かったのでちょっと息抜きにミニゲームでも作ってみましょう。
さて、JavaScriptの特徴として、ソースが誰にでも見れてしまうという点があります。

ちょっと下記のソースを見てください。

function g(){d?0:[e=c=0,d=1,t=-1,h=document.f.b.value*100,m()]}function m(){t++;v();t-4?0:[c++,t=0,i=(""+c).indexOf("3"),j=document.f.r.value,(c%3)*!(i+1)?c%5|j-1?c%8|j-2?l=0:l=2:l=2:c%5|j-1?c%8|j-2?l=1:l=3:l=3,e-l?d=2:0,e=0];t?t-1?t-2?t-3?s="":s="＼":s="―":s="／":s="｜";document.all.u.innerText=s;c<41?document.all.o.innerText=c:d=3;d-1?0:window.setTimeout("m()",h);d>1?[d==2?n="over":n="clear",alert(n),d=0]:0}function v(){e-1?e-2?e-3?s="普通":s="アホ＋犬":s="犬":s="アホ";document.all.a.innerText=s}function p(){d-1|e?0:k=event.keyCode,k-90?k-88?k-67?e=0:e=3:e=2:e=1;v()}d=e=k=0;document.onkeydown=p

ソースが見れるといっても、これではなにがなんだかわかりません。
後半にみられる文字列からある芸人を連想されたかと思いますが、そう、あの芸をミニゲーム化したものが上記ソースです。
JavaScriptというのは基本的に「行」という概念が在りませんので、上記の様に一行にしてしまうことでソース部分を小さく纏めることが出来ます。
ただし非常に見づらいためメンテナンスは困難です。
プログラムが完成してから纏めるのが定石です。

その際に最も威力を発揮するテクニックが、条件分岐の記述変更です。
上記ソースをみてみると一つもif文が無いことにお気づきでしょうか？
かわりに目立っているのが「?」の文字です。
if文やswitch文は「?」と「:」を使って短く記述することができます。

if(a>b){
    document.write("a")
}else{
    document.write("b")
}

は、一列に纏めると

//if(条件){結果１}else{結果２}
if(a>b){document.write("a")}else{document.write("b")}

となりますが、これをif文を使わないで記述すると

//条件?結果１:結果２
a>b?document.write("a"):document.write("b")

と書けるわけです。

switch文に関しては、一度if文に変換してから纏めます。
そう考えると面倒な気がしますが、実はswitch文というのは見やすい反面、それぞれにbreak文をつけなければいけない為、if文より長くなっていることが殆どです。

たとえばこのswitch文をif文に直してみましょう。

switch(a){
case 0:
    document.write("a");
    break;
case 1:
    document.write("b");
    break;
case 2:
    document.write("c");
    break;
default:
    document.write("d");
    break;
}
↓
if(a==0){
    document.write("a");
}else if(a==1){
    document.write("b");
}else if(a==2){
    document.write("c");
}else{
    document.write("d");
}

一列に纏めてみるとその差は歴然です。

switch(a){case 0:document.write("a");break;case 1:document.write("b");break;case 2:document.write("c");break;default:document.write("d")}
if(a==0){document.write("a")}else if(a==1){document.write("b")}else if(a==2){document.write("c")}else{document.write("d")}

最終的にソースを纏めたい場合は、switch文は使わないよう心がけましょう。
上記if文は、「?」を使って記述すると下記の通りになります。

a==0?document.write("a"):a==1?document.write("b"):a==2?document.write("c"):document.write("d")

これはさらに下記の様に短く書くことが出来ます。

a?a-1?a-2?document.write("d"):document.write("c"):document.write("b"):document.write("a")

条件文に0が入るとfalse、それ以外ならtrueを返すことを利用しています。これをあえてif文にもどしてみるとその仕組みが良くわかります。

if(a){
    if(a-1){
        if(a-2){
            document.write("d");
        }else{
            document.write("c");
        }
    }else{
        document.write("b");
    }
}else{
    document.write("a");
}

他にソースを短くする手段としては、変数や関数、フォーム部品などの名称をすべて1文字にする等の方法があります。

あえて短く見づらいソースにする意味がわからないという方もいるかもしれませんが、決まったプログラムをどれだけ短いソースで組めるか挑戦してみると面白いです。
逆に世間で公開されている、短く記載されたプログラムを見やすく書き直したりするのは良い勉強になります。
暇があったら下記sampleを長く書き直してみてください。今回は息抜きということで短めに。

[sample] [DL]

[top] [index]