JavaScript ショートコーディングの１０のコツ　(ブックマークレット作成時に重宝するテクニック集)

JavaScriptプログラミングのTOPへ

数日前の

わずか1.7キロバイトのJavaScript　マリオ風のゲーム　（脱力系）
http://language-and-engineering.hatenablog.jp/entry/20081006/1223209263

という記事では，JavaScriptのショートコーディングを少し試みた。

その際に気づいた短縮技法や，他のコードを読んでわかったコツのまとめ。

これらのJavaScriptのテクニックは，ブックマークレットを実装する時にも役立つ。

文字数を文法的に短くできるから。

JavaScriptで短いコードを書くために：

（１）forループの終了判定とインクリメントを融合する

デクリメントに変えてもよい場合。

   a=[];for(i=0;i<10;i++){a[i]=i;}

　↓短縮

   a=[];for(i=11;i--;){a[i]=i;}

iが0でない間は実行継続される。ループの中でi=0であるような状況が終わると，次の実行はない。

（２）頻出プロパティ名は文字列にして，配列記法でアクセス

スタイルシート属性など。

   x.style.paddingLeft="10px";y.style.paddingLeft="25px";

　↓短縮

   p="paddingLeft";x.style[p]="10px";y.style[p]="25px";

s="style"となっていれば， x[s][p] のようにも書ける。

同様の手法を使い，HTML要素のスタイルシートはHTML中に書かず，あとから共通設定する。

innerHTMLの場合，3回目以降から効果がある。

   x.innerHTML="○";y.innerHTML="×";z.innerHTML="△";

　↓短縮

   s="innerHTML";x[s]="○";y[s]="×";z[s]="△";

何でも使いまわそうという発想が大事。

2ケタの数値は既存の変数を代入して済ます
"10px"から数値の10を取り出すにはparseIntする

など

（３）キーコードから38引いておく

キーコードは，左キーが37，右が39。
キャラクターのx位置を左右に移動させたい場合がよくある。

   <body onKeydown=k(event.keyCode)><script>function k(i){if(
   i==37){x+=10;}else if(i==39){x-=10;}}</script></body>

　↓短縮

   <body onKeydown=k(event.keyCode-38)><script>function k(i){
   x+=10*i;}</script></body>

（４）似たコードはeval文で生成する

function f(x){return document.getElementById(x);}
alert(f("y").innerHTML);alert(f("z").innerHTML);

　↓短縮

s="document.getElementById(";alert(eval(s+"'y')")
.innerHTML );alert(eval(s+"'z')").innerHTML );

この方法がfunction 〜 return よりも効果があるのは，せいぜい２回までか。

（５）関数名に１文字のエイリアスを振る

組み込み済み関数の名前について

   alert(1);alert(2);alert(3);

　↓短縮

   a=alert;a(1);a(2);a(3);

新関数を定義したのではない所がポイント。
もしあえて関数を作成しなければならない場合，エレメント間で汎用にする。（エレメントを引数に持たせる）

ほかの一般的な変数も，一文字の名を使う。その際，変数名がすぐ枯渇するので，管理のために変数名テーブルを作って手元に控えておく。
documentやbodyにも，１文字のIDを振るとよい。（DOM操作を多用する必要がある場合など）

（６）イコールを連ねる

   a=c;b=c;

　↓短縮

   a=b=c;

（７）代入文の返り値を再利用

前項とほぼ同じ。

   a=1;alert(a);

　↓短縮

   alert(a=1);

（８）三項演算子を使う

定番

   if(a){x=b;}else{x=c;}

　↓短縮

   x=a?b:c;

JavaScriptに限定されないテクニックで，定番すぎて面白くはないが，結局これが一番効果があるようにも見える。

（９）無くて済むHTMLは書かない

   <html><body><script language="JavaScript">alert("a");</script></body></html>

　↓短縮

   <script>alert("a");</script>

閉じタグも省ける場合がある。
documentを使う場合はbodyを省けない。

（１０）無駄な管理用配列を作らず，既存オブジェクトにくっつける

アルゴリズムに関して。本当はここが一番ドロドロしたところなのだと思うが

速度や位置などを表す変数は各DOMエレメントそのものに持たせる。分離して管理しようとしない。
ランダム出現するキャラクターのIDを出現順に増やしていくと管理が大変になる。かわりに，あらかじめ決めておいた配列の範囲内でローテーションを行なう

など

まとめ

forループの終了判定とインクリメントを融合する
頻出プロパティ名は文字列にして，配列記法でアクセス
キーコードから38引いておく
似たコードはeval文で生成する
関数名に１文字のエイリアスを振る
イコールを連ねる
代入文の返り値を再利用
三項演算子を使う
無くて済むHTMLは書かない
無駄な管理用配列を作らず，既存オブジェクトにくっつける

今後，自分の見識が増えたら，別記事の形で上記の情報に追加される可能性がある。

本稿はJavaScriptに関するものだったが，C言語のショートコーディングに関する情報ならば

Ozy氏のブログ http://d.hatena.ne.jp/Ozy/searchdiary?word=*[Short%20Coding]
4DM Short Coding http://www.4dm.org/ShortCoding/
Code Golf http://codegolf.com/
code golf入門 / C言語編 http://vipprog.net/wiki/code%20golf%E5%85%A5%E9%96%80/C%E8%A8%80%E8%AA%9E%E7%B7%A8.html

などが詳しい。「Short Coding 職人達の技法」の書籍も存在する。

七行プログラミングの「七行テトリス」や「七行ぷよぷよ」も参照した。

補足

書ききれなかったもの。

==0より<1のが短い http://d.hatena.ne.jp/omochist/20070511/1178867094
ローカル変数はfunctionの引数にするとvarを書かなくて済む http://language-and-engineering.hatenablog.jp/entry/20131229/p1