素振り重要 - yarbの日記

いろいろとJavaScriptを勉強している。面白いような、「うげぇ、まじか、これはひどいんじゃないか」とウンザリするような感覚がなかなかいい。

素振りを始めた。以下のようなHTMLを、上から一気に手打ちする。

<!DOCTYPE html>
<html>
  <head>
    <title>grid demo</title>
    <script type="application/javascript">
      function draw_grid () {
        var ctx = document.getElementById("target").getContext("2d");
        ctx.strokeStyle = "rgb(255, 128, 0)";
        ctx.strokeRect(10, 10, 10, 10);
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body>
    <h1>grid demo</h1>
    <canvas width="640" height="480" id="target"></canvas>
    <input type="button" onclick="draw_grid()" value="draw" />
  </body>
</html>

なんでもないコードだけど、1つも間違えずに一発で動かすのは、思ったよりも難しい。例えば、ここに加えてjQueryを読み込もうとしたら、scriptタグの綴じ忘れがあったり、inputタグでvalueを忘れて変なボタンが表示されたりもする。というか、JavaScriptのコードを別ファイルに分けたら動かなくて一瞬悩んだ。そうだった、jQueryがDOMのreadinessの面倒を見てくれていたのだったと思ってググると、実はクロスブラウザでDOM構築完了のイベントを確実に抑えるってのは相当に面倒なことだと今さら思い出したりする（単にjQuery脳？）

CanvasのstrokeRectだって、ググらないと分からない。というか、矩形のパラメータって、ふつうは左上と右下の絶対座標を指定するだろうと思っていた。strokeなので、そうじゃなくて移動の差分だ。strokeのスタイル指定なんて知るかそんなもん覚えてるわけないだろと言いたくなるような感じだけど、何度も打っていると、それなりに合理性や整合性もあるし、だんだん親近感が湧いてくる。

DOCTYPE宣言だって、よく考えたら、めったに手打ちなんてしていないから、いざ打とうと思って「あれ、なんだっけ？」となってしまった。確かこれってcase sensitiveじゃないよなーと思いながらも、そのことに確信がない。なぜ確信がないかと言えば知識として知ってるだけで、実際に何度も打ったという経験に乏しいからではないかと思った。我ながらもっともウンザリしたのは、いつも書いていると思っていたCSS(SASSだけど)の宣言や書式が、すっと出て来なかったこと。borderとかは最近スラスラ書けるけど、肝心のCSS セレクタが分からなくて自分でもびっくりした。これはSASSの悪影響かもしれない。HAMLや、もしかしたらCoffeeScriptとかjQueryも同じかもしれないけど、上にかぶせて楽させてくれる系のツールを使うのはいいにしても、その下にあるものをスラスラ書けるようになるぐらい手打ちする経験って重要なんじゃないだろうかと思いつつある。

何度目かの素振りの時には、document.getElementByIdというところのdocumentを付け忘れた。heightのタイプミスも大量に発生した。何よりも、application/javascriptのs、c、r、i、p、tあたりで一文字欠ける事態が続発して、真っ白な画面が何度も何度も何度も何度も表示された。javascriptを打ち間違えるとか字面が変なことに気付かないっていうのは、つまりズブの素人ってことで、これは素振りにより改善されるのが分かった。

あー、そうそう、こういうときは、グローバルオブジェクトの汚染を最低限に抑えるために、無名関数の即時呼び出しやるんでしょ、知ってる知ってる！と思って書いたコードが例えば以下。

    var ctx = (function () {
	var canvas = document.getElementById("target"),
            ctx;

	if (canvas.getContext) {
	    ctx = canvas.getContext("2d");
	} else {
	    alert("canvas not supported");
	}
	ctx.strokeStyle = "rgb(255, 127, 0)";
	return ctx;
    };

最後のところ、ブレースを閉じて安心して全然おかしなことになってるし……。で、そうだったと思ってパーレンの閉じ括弧を入れて、あらら、ctxに関数オブジェクトを入れてしまいましたよ、みたいな。正しくは、「(function () {})();」なのだった。いや、概念は知ってたはずなのに。そうなのだ、概念を知ってるだけで、打ったことがない状態だったのだってことだ。やっぱり実践重要、素振り重要。

似たような例を次々とスクラッチバッファ上で作って手打ちをしていると、今までいい加減だった知識や記憶が、どんどんクリアになっていくし、打つのも速く、正確になっていく感じがあった。で、後から考えてみると、やっぱりdocumentオブジェクトをすっ飛ばしてgetElementByIdと書いてしまうというのは、うっかりミスというよりも、ブラウザのオブジェクトモデルが体得できてないってことじゃないかと思うようになった。

素振りをやってみて、確かにプログラミングにはスポーツ的な側面があると思った。あれこれ本を読んで勉強してるし、最近ひとのコードを読むのも楽しくなってきたけど、やっぱりもっとゴリゴリと書かないとダメだと思った。ぼくはどうもコードを書く量が少なすぎる。