JavaScript ショートコーディングの10のコツ (ブックマークレット作成時に重宝するテクニック集)
数日前の
わずか1.7キロバイトのJavaScript マリオ風のゲーム (脱力系)
http://language-and-engineering.hatenablog.jp/entry/20081006/1223209263
という記事では,JavaScriptのショートコーディングを少し試みた。
その際に気づいた短縮技法や,他のコードを読んでわかったコツのまとめ。
これらのJavaScriptのテクニックは,ブックマークレットを実装する時にも役立つ。
文字数を文法的に短くできるから。
JavaScriptで短いコードを書くために:
(1)forループの終了判定とインクリメントを融合する
デクリメントに変えてもよい場合。
a=[];for(i=0;i<10;i++){a[i]=i;}
↓短縮
a=[];for(i=11;i--;){a[i]=i;}
iが0でない間は実行継続される。ループの中でi=0であるような状況が終わると,次の実行はない。
(2)頻出プロパティ名は文字列にして,配列記法でアクセス
スタイルシート属性など。
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する
など
(3)キーコードから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>
(4)似たコードは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 よりも効果があるのは,せいぜい2回までか。
(5)関数名に1文字のエイリアスを振る
組み込み済み関数の名前について
alert(1);alert(2);alert(3);
↓短縮
a=alert;a(1);a(2);a(3);
新関数を定義したのではない所がポイント。
もしあえて関数を作成しなければならない場合,エレメント間で汎用にする。(エレメントを引数に持たせる)
ほかの一般的な変数も,一文字の名を使う。その際,変数名がすぐ枯渇するので,管理のために変数名テーブルを作って手元に控えておく。
documentやbodyにも,1文字のIDを振るとよい。(DOM操作を多用する必要がある場合など)
(6)イコールを連ねる
a=c;b=c;
↓短縮
a=b=c;
(7)代入文の返り値を再利用
前項とほぼ同じ。
a=1;alert(a);
↓短縮
alert(a=1);
(8)三項演算子を使う
定番
if(a){x=b;}else{x=c;}
↓短縮
x=a?b:c;
JavaScriptに限定されないテクニックで,定番すぎて面白くはないが,結局これが一番効果があるようにも見える。
(9)無くて済むHTMLは書かない
<html><body><script language="JavaScript">alert("a");</script></body></html>
↓短縮
<script>alert("a");</script>
閉じタグも省ける場合がある。
documentを使う場合はbodyを省けない。
(10)無駄な管理用配列を作らず,既存オブジェクトにくっつける
アルゴリズムに関して。本当はここが一番ドロドロしたところなのだと思うが
- 速度や位置などを表す変数は各DOMエレメントそのものに持たせる。分離して管理しようとしない。
- ランダム出現するキャラクターのIDを出現順に増やしていくと管理が大変になる。かわりに,あらかじめ決めておいた配列の範囲内でローテーションを行なう
など
まとめ
- forループの終了判定とインクリメントを融合する
- 頻出プロパティ名は文字列にして,配列記法でアクセス
- キーコードから38引いておく
- 似たコードはeval文で生成する
- 関数名に1文字のエイリアスを振る
- イコールを連ねる
- 代入文の返り値を再利用
- 三項演算子を使う
- 無くて済む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
関連する記事:
alert() と書くために,わざわざ行頭に戻らなくてもすむ方法
http://language-and-engineering.hatenablog.jp/entry/20100829/p1
たった50行のソースコードで,「関数電卓」のAndroidアプリを作成する方法
http://language-and-engineering.hatenablog.jp/entry/20110731/p1
わずか1.7キロバイトのJavaScript マリオ風のゲーム (脱力系)
http://language-and-engineering.hatenablog.jp/entry/20081006/1223209263
はてブのマイページから,情報を一括して整形・抽出するブックマークレット
http://language-and-engineering.hatenablog.jp/entry/20131229/p1