読者です 読者をやめる 読者になる 読者になる

Re:Start

いまはディレクターやってます

『JavaScript Ninjaの極意』第三章までのまとめというか覚え書き

会社で本をもらったので、早速読んでみてます。
開発環境で実際に使ったときはここまで本格的なレベルは求められてませんでした。その後、『JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで』とかを読んでました。この本はちゃんと次のステップへ導いてくれる感じがするので、心強く頼もしく思えます。

まだ途中ですが、JSのメリットである関数+オブジェクト指向的な哲学に気持ちがついていけてない感じがあります。でも、よくよく読み込んで行くと、そういえば、以前APIを呼び出す時に使われてた記憶があるので、引き続き頑張りたいです。ぐぬぬ。

では、「第三章 関数が肝心」までのまとめと、特に気になるソースコードを覚え書き程度に引用していきます。
※ 実際に使われているコードは、末尾のリンク先から取得できますので!

NOTE

  • JSのことだけ勉強するのではなくて、ブラウザのことも知っておく必要がある。対象は、IE, Chrome, FireFox, Safari , Opera
  • 対象とするブラウザへの対応と、それに伴う工数を参考に、どこまで対応するか決めると良い。
  • モバイルプラットフォーム、スマホのブラウザアプリの場合は、どれもかかる工数はほとんど変わらないなので、シェアの数で決めるのもあり。BlackBerry選ぶのん?いいのん?
  • 途中から、 HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck を使って、試しながら見ました。
  • いちばんザワっとしたのは ↓ でした。bodyのほうでやってたので...

ninjaは、bodyタグにonloadさせるのではなく、window.onloadで関数を読み込む

簡単なassertメソッド

これらを別ファイルに定義しておいて、本HTML上でリンクし、JSコード内のassertで呼び出すと、簡易的なチェックページができます。

assert.js
function assert(value, desc) {
  var resultsList = document.getElementById("results");
  if (!resultsList) {
    resultsList = document.createElement('ul');
    document.getElementsByTagName('body')[0].appendChild(resultsList);
    resultsList.setAttribute('id','results');
  }
  var li = document.createElement("li");
  li.className = value ? "pass" : "fail";
  li.appendChild(document.createTextNode(desc));
  resultsList.appendChild(li);
}
assert.css
ul#results { border: 2px ridge maroon; background-color: #ffffcc; padding: 0.25em 1.5em; margin-left: 0; }
li.pass { color: #006400; }
li.fail { color: #dc143c; text-decoration: line-through; }

テストの中でコメントしよう

assertをコメント用に使う、という考えがなかったので...

assert (true, "|----- OUTERの前 -----|");
/* test code here */

洗練されたコードを書くには、関数的言語としてのJavaScriptを学ぶのが決め手となる。

callとapply

callback関数を呼び出す時に使うと便利 両方は似ているが、強いて使い分けるとすれば、以下の通り callは、引数リストで値を取得できるので直接値を並べることができる applyは引数値が既に配列に入っている場合、値を集めるのが便利な場合に向いている

juggle.apply(ninja1, [1,2,3,4]); // apply
juggle.call(ninja2, 5, 6, 7, 8); // call
assert ( true, "|----- List 3-6 -----|");

function forEach(list, callback) {
  for (var n = 0; n < list.length; n++) {
    callback.call ( list[n],n );
  }
}

var weapons = ['shuriken', 'katana', 'nunchucks'];

forEach (
  weapons,
  function (index){
    assert (this == weapons [index],
           weapons [index] + "は期待した値を得た");
  }
);

LINK

THIS BOOK

JavaScript Ninjaの極意
JavaScript Ninjaの極意