スポンサーリンク

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を出現順に増やしていくと管理が大変になる。かわりに,あらかじめ決めておいた配列の範囲内でローテーションを行なう

など

まとめ

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


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


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

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

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

補足

書ききれなかったもの。


関連する記事:

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