<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="http://blog.xole.net/rss/style.css" type="text/css"?>
<rdf:RDF xmlns="http://purl.org/rss/1.0/"
         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:content="http://purl.org/rss/1.0/modules/content/"
         xmlns:dc="http://purl.org/dc/elements/1.1/"
         xml:lang="ja">
<channel rdf:about="http://blog.xole.net/rss/1.0.php?id=736">
<title>ハタさんのブログ(復刻版)</title>
<link>http://blog.xole.net/index.php</link>
<dc:date>2009-12-27T23:32:30+09:00</dc:date>
<description>
ハタさんのブログ(復刻版) - RSS (RDF Site Summary).
</description>
<items>
<rdf:Seq>
<rdf:li rdf:resource="http://blog.xole.net/article.php?id=736" />
</rdf:Seq>
</items>
</channel>
<item>
<title>JavaScriptプログラマが理解しておくべき8つのこと。の個人的補足</title>
<link>http://blog.xole.net/article.php?id=736</link>
<dc:date>2009-12-27T23:32:30+09:00</dc:date>
<description>もう今年はブログを書かないんだろうなーと思っていたけど、ちょっと気になるエントリを見てしまったので、書いておくよ！
ref - JavaScriptプログラマが理解しておくべき8つのこと - ++iskwn - キューイチ世代

いくか...</description>
<content:encoded>
<![CDATA[
<p>もう今年はブログを書かないんだろうなーと思っていたけど、ちょっと気になるエントリを見てしまったので、書いておくよ！<br />
ref - <a href="http://generation1991.g.hatena.ne.jp/iskwn/20091225/1261766114">JavaScriptプログラマが理解しておくべき8つのこと - ++iskwn - キューイチ世代</a>
<br />
いくか(8つ?)あるから、それぞれ勝手に全レスするよ！<br />
（先に断りを入れておくと、僕は専門家でもなんでもないから、指摘があったら指摘してください）</p>

<p>たぶん、僕の書いた記事「<a href="http://blog.xole.net/article.php?id=640">javascriptを初めて学ぶ人についてのおさらい。その１</a>」と「<a href="http://blog.xole.net/article.php?id=645">javascriptを初めて学ぶ人についてのおさらい。その２</a>」を読めば全部理解するはず！（嘘偽有り）</p>

<h3>JavaScriptは完全なオブジェクト指向ではない</h3>
<p>これは書かれていることそのままでいいかな。ツッコミどころはそこじゃないけど。<br />
ただ、一つ、「プロトタイプベース」「インスタンスベース」という言葉の指摘をするのであれば「オブジェクト指向プログラミング言語ではない」のが正しいのかな。どうでもいいけど</p>

<h3>functionの定義には2つある。違いもある</h3>
<p>これは完結してた</p>
<p>ただ、文と式、みたいなところにもスポットライト当ててください。。</p>

<h3>いわゆるクロージャは単純な概念である</h3>
<p>本文には</p>
<blockquote cite="http://generation1991.g.hatena.ne.jp/iskwn/20091225/1261766114">
<p>感覚的には単純だが、論理的には複雑で言葉で説明しづらい。体で覚えたほうが楽なタイプの概念。どんどん拾ったコードを試そう。試せばわかるよ。難しく解説してる人とか無視してOK。</p>
</blockquote>

<p>これは本質を捉えている気もするけど、なんとなくアウト。<br />
難しく解説するには、それなりの理由があるかも。特にスコープを理解しないと間違った用法が出回ると後々困るんじゃ。。？<br />
javascriptの変数宣言には、<code>let</code>や<code>val</code>みたいな宣言はなくて、<code>var</code>と宣言なしの
グローバル宣言しかない。特にこのグローバル宣言でクロージャを体得されると、後々余計なバグを作っちゃうかも</p>

<p>以下はグローバル宣言を使ったクロージャ的サンプル</p>

<pre class="javascript">
<span class="keyword" >var</span> createCounter = <span class="keyword" >function</span> (){
    counter = 0;
    <span class="keyword" >return</span> <span class="keyword" >function</span> (){
        <span class="keyword" >return</span> counter++;
    };
};

<span class="keyword" >var</span> hoge = createCounter();
print(hoge()); <span class="comment" >// 0</span>
print(hoge()); <span class="comment" >// 1</span>
print(hoge()); <span class="comment" >// 2</span>
</pre>

<p>これもクロージャだよね？と新人に聞かれたら、思わずスコープのお話をしてしまうに違いない！<br />
なので、他のスコープから触れないように定義する。そうすると難しくなっていく。。。</p>

<pre class="javascript">
<span class="keyword" >var</span> createCounter = <span class="keyword" >function</span> (){
    <span class="keyword" >var</span> counter = 0;
    <span class="keyword" >return</span> <span class="keyword" >function</span> (){
        <span class="keyword" >return</span> counter++;
    };
};

<span class="keyword" >var</span> hoge = createCounter();
print(hoge()); <span class="comment" >// 0</span>
print(hoge()); <span class="comment" >// 1</span>
print(hoge()); <span class="comment" >// 2</span>
</pre>

<h3>IE8はDOMアクセスがクソ速い</h3>
<p>これは正しい。もちろん、Firefox3.5もOpera10も早い<br />
でも、DOMをガリガリ書くよりも、CSSSelectorを使うようになっているトレンドも忘れないであげてください。。。</p>

<h3>XmlHttpを使いたいだけならライブラリ使うな</h3>
<p>そして再利用可能なコードなのに、似て非なるものが増えていく。。。</p>

<h3>prototype継承とか言っちゃってる奴は目を覚ませ</h3>
<p>元エントリによると</p>
<blockquote cite="http://generation1991.g.hatena.ne.jp/iskwn/20091225/1261766114">
<p>「prototypeを使ってプロパティの継承を行うメリットとは何か」<br />
これに答えられないなら勉強しなおしたほうが良い。答えられた奴はprototype継承って言うのやめとこな？<br />
そもそもprototypeは継承の仕組みではない。あと「プロトタイプベース」と「インスタンスベース」はまったく違う。</p>
</blockquote>

<p>まず、ここまで書くならメリットを教えてあげてもいいじゃん。。。<br />
「プロトタイプベース」「インスタンスベース」と上げる前に、prototypeのメリット的なのを僕から。</p>

<p>javascriptには、prototypeっていうプロパティがあって、そこに値を入れておくと、同じ値を共有（共有には御幣があるかも）できるよ。って仕組みがあります。まずはコード</p>

<pre class="javascript">
<span class="keyword" >var</span> Hoge = <span class="keyword" >function</span> (){};
Hoge.prototype.hello = <span class="keyword" >function</span> (){
    <span class="keyword" >return</span> <span class="string" >'hello world'</span>;
};

<span class="keyword" >var</span> a = <span class="keyword" >new</span> Hoge;
print(a.hello()); <span class="comment" >// hello world</span>
</pre>

<p>んで、このprototypeのおかげで、元となるprototypeに新しいプロパティを増やすと、そのprototypeのインスタンスにもそれがついてくるよ！ってのがメリットでしょうか（あまり使わないかも。。。）</p>

<pre class="javascript">
<span class="keyword" >var</span> Hoge = <span class="keyword" >function</span> (){};
Hoge.prototype.hello = <span class="keyword" >function</span> (){
    <span class="keyword" >return</span> <span class="string" >'hello world'</span>;
};

<span class="keyword" >var</span> a = <span class="keyword" >new</span> Hoge;
print(a.hello()); <span class="comment" >// hello world</span>

Hoge.prototype.hello2 = <span class="keyword" >function</span> (){
    <span class="keyword" >return</span> <span class="string" >'hello hello hello'</span>;
};

print(a.hello2()); <span class="comment" >// hello hello hello</span>
</pre>

<h4>インスタンスベース</h4>
<p>説明が難しいところだけど、これはインスタンスベースでもできるじゃんか。ということなので、できる。上のコードをインスタンスベースにしてみると</p>

<pre class="javascript">
<span class="keyword" >var</span> Hoge = {
    hello: <span class="keyword" >function</span> (){
        <span class="keyword" >return</span> <span class="string" >'hello world'</span>;
    }
};

<span class="keyword" >var</span> a = Hoge;
print(a.hello()); <span class="comment" >// hello world</span>

Hoge.hello2 = <span class="keyword" >function</span> (){
    <span class="keyword" >return</span> <span class="string" >'hello hello hello'</span>;
};

print(a.hello2()); <span class="comment" >// hello hello hello</span>
</pre>

<p>でもこれだと、インスタンス中の値がずっと同じ参照（※例1）になるから、javascriptでは、新しい参照を作るときに <code>clone</code> ではなく <code>new</code> という仕組みでクラスベースな考えになっている（※例2）。と</p>

<p>※例1</p>
<pre class="javascript">
<span class="keyword" >var</span> Hoge = {
    counter: 0,
    increment: <span class="keyword" >function</span> (){
        <span class="keyword" >return</span> <span class="keyword" >this</span>.counter++;
    }
};

<span class="keyword" >var</span> a = Hoge;
print(a.increment()); <span class="comment" >// 0</span>
print(a.increment()); <span class="comment" >// 1</span>
print(a.increment()); <span class="comment" >// 2</span>

<span class="keyword" >var</span> b = Hoge;
print(b.increment()); <span class="comment" >// 3</span>
</pre>

<p>※例2</p>
<pre class="javascript">
<span class="keyword" >var</span> Hoge = <span class="keyword" >function</span> (){
    <span class="keyword" >this</span>.counter = 0;
};
Hoge.prototype.increment = <span class="keyword" >function</span> (){
    <span class="keyword" >return</span> <span class="keyword" >this</span>.counter++;
};

<span class="keyword" >var</span> a = <span class="keyword" >new</span> Hoge;
print(a.increment()); <span class="comment" >// 0</span>
print(a.increment()); <span class="comment" >// 1</span>
print(a.increment()); <span class="comment" >// 2</span>

<span class="keyword" >var</span> b = <span class="keyword" >new</span> Hoge;
print(b.increment()); <span class="comment" >// 0</span>
print(b.increment()); <span class="comment" >// 1</span>
</pre>

<p>うーん。あまりいい例が思い浮かばない。。。<br />
とりあえず、javascriptにはconstructorもあるから、インスタンスベースではなく、クラスベースと捉えた方がわかりやすそう。</p>

<h3>function.applyには正しい使い方がある</h3>
<p>正しいかどうかは、別として、javascriptの<code>this</code>という動的レシーバはとても便利だったりする。</p>

<pre class="javascript">
<span class="keyword" >var</span> hello = <span class="keyword" >function</span> (arg1, arg2){
    <span class="keyword" >return</span> <span class="keyword" >this</span>.calc(arg1, arg2);
};
<span class="keyword" >var</span> Add = {
    calc: <span class="keyword" >function</span> (arg1, arg2){
        <span class="keyword" >return</span> arg1 + arg2;
    }
};
<span class="keyword" >var</span> Mul = {
    calc: <span class="keyword" >function</span> (arg1, arg2){
        <span class="keyword" >return</span> arg1 * arg2;
    }
};

print(hello.apply(Add, [1, 2])); <span class="comment" >// 3</span>
print(hello.apply(Mul, [1, 2])); <span class="comment" >// 2</span>
</pre>

<p>Javaで匿名クラスをゴリゴリとか、containerに入れてほげほげ。とか面倒なのが色々あるけど、javascriptなら標準装備！<br />
なんて、うたい文句はあまりないけど、delegateとかproxyとかその辺がめっちゃ楽になるのはホント</p>

<p>（ってか「正しい使い方」を教えてください。。。）</p>

<h3>Canvasは必ず覚えるべき</h3>
<p>SVGもあると便利かと。</p>

<h2>おわり</h2>
<p>jsの話題で今年書くことになるとは思わなかった。。<br />
とにかく、元エントリに何か物申すつもりはなく、補足も書いてあると良い事言ってるのになーと思ったんで個人的補足でした。</p>

<p>「インスタンスベース」でプロトタイプを学ぶなら、IoLanguageを触るのが一番簡単だと思う。きっとjsで、モヤモヤしていることはすべてスッキリ！になる。はず。<br />
ちゃんとプロトタイプしたいなら<a href="http://selflanguage.org/">Self</a>も<a href="http://slate.tunes.org/">Slate</a>も勉強になるはず。<br />
「クラスベース」なプロトタイプはjavascriptじゃないかな。といっても、<code>clone</code>と<code>proto</code>(__proto__はあるけど)がないと落ち着かない人はIoの世界へようこそ</p>
]]>
</content:encoded>
</item>

</rdf:RDF>