第133回 JavaScriptだけ学んでいても動的なページを作れるようになれない DOMが必要だ

私は動的なページを作ってみたいと思いJavaScriptを学び始めた。

今までこうとしか書けないと思っていたモノが、
他の言語では別の方法で書け、
その表現のおかけでパワフルなプログラミングができるといった話がかなり好きなので、
始めはJavaScriptの文法ばかりを勉強していた。

とくに、他の言語の経験者が面白い！　ためになる！　と思うのはこの本である。

まるごとJavaScript & Ajax ! Vol.1

JavaScriptのこの書き方ってそういう意味だったのか！！
といったことや、最近の動向がぎゅぎゅっとまとまっている。

そこで私は、やはりもっとみっちりと学びたいと思い

初めてのJavaScript

を購入。最近の流行の書き方などを踏まえての解説がありかなりためになった。
HTMLのタグを扱う方法もきっちり説明されている。

だが、どうも思ったようにタグをいじれない。
思ったとおり取得できなかったり、思ったところに要素を挿入できなかったりする......
実は要素の取得・挿入といったことはDOMという仕様で定められており、
getElementById()などはその仕様に乗っ取って要素を操作するためのインタフェースに過ぎない。
多くの解説ページではこのJavaScriptとDOMの区別をあまり重用視しているようには感じられず、一緒くたにJavaScriptとして扱っているように思える。

そこで、私はJavaScriptよりもDOM関連・要素を動かす事に重心を置いている書籍はないものかと探してみた。

DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~ (Web Designing BOOKS)

この本は実にわかりやすく、すばらしかった。
DOMを操作するときの注意点や、誰もが一度ははまるbodyタグの前にJavaScriptを書いてしまったがために存在しない要素にアクセスしようとしてバグってしまうことの説明とその解決方法がしめされていた。

この次に読むと面白いのが、

標準DOMスクリプティング JavaScript＋DOMによるWebアプリデザインの基礎

この本であろう。DOMの仕様がどのように決まっていき、
inputタグが持つメソッドはどのようなものであると決まっているか　などの説明が載っており。
もう　ワクテカが止まりません　と言った状態である。

最後に、JavaScriptの文法で他言語出身者がはまりやすい部分などをついた

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

この本もすばらしかった。
ブロックレベルのスコープがないことを知らずにJavaScriptを書き出すといらぬところで
ハマってしまうので、ぜひ押さえておきたいところである。

thisはどのような場面で、なにが代入されているのかの説明もまとめられており、大変ためになりました。

第132回 わかりやすい・感動した を集めてみました

ラジオだと番組へのお便り的なものがありますが、そんな感じで

皆様からいただいた温かくありがたいコメントを紹介させていただきます。

1. はてなブックマーク - 第5回 リファレンスと無名配列 - bingo_nakanishiの他言語出身者のためのPerl入門
2. 2009-01-11
3. はてなブックマーク - 第54回 ガベージコレクションについて - bingo_nakanishiの他言語出身者のためのPerl入門
4. はてなブックマーク - 第56回 クロージャの実践的使いどころ - bingo_nakanishiの他言語出身者のためのPerl入門
5. はてなブックマーク - 第87回 なかなか理解できないfindコマンドのmanを理解してみた - bingo_nakanishiの他言語出身者のためのPerl入門
6. はてなブックマーク - 第96回 ペイントでドット絵を書く人はこうやってグリッドを出していたのか！ - bingo_nakanishiの他言語出身者のためのPerl入門
7. はてなブックマーク - 第97回 これだけは押さえておきたいエクセルの知識 前編 - bingo_nakanishiの他言語出身者のためのPerl入門
8. はてなブックマーク - 第98回 これだけは押さえておきたいエクセルの知識 後編 - bingo_nakanishiの他言語出身者のためのPerl入門
9. 2009-05-24 - 燈明日記
10. livedoor クリップ
11. livedoor クリップ
12. Chrome Web Store
13. http://archive.mag2.com/0000109251/20090308191632000.html

第131回 Perlを軸にプログラムを覚えていきたい人向け書籍

小さいながらもソースが書けるようになる

初めてのPerl

確かに他の言語でプログラム経験があるならいいのだけれども、
いきなりこれからプログラムに入るのは正直つらいところがある。
（だが、まずはここを通らずして次はないと言える）

プログラマとして大切なことをPerlを通して理解していきたいのなら、
ぜひ読みたい書籍である。

まずはプログラムを知る

新版 明解C言語 入門編

では、どうやってプログラムを覚えていけばいいのだろうか？
やはりC言語を押さえておくのは重要だろう。
この本でプログラムの基礎を押さえておきたいところ。

（本当はC言語は静的型付けであり、Perlは動的型付けであるので、
発想が全然違うということを理解できるのは、たぶん3年ぐらいは先の話）

この本の内容が理解でき、C言語が書けるようになってくると、
「初めてのPerl」は理解できるようになっていると思える。

プログラム言語だけやってても作れるようになれない

プログラムが動く環境も知っておかないと正直作るのはつらい。

図解でわかるLinuxのすべて―コマンド操作&パッケージ管理

Linuxの基本的なことが、詳しい説明とともに載っており、
こうすればこうなるというHow to本とは違った理解ができる。

Windowsも知りたくなる

Linuxについて学んでいくとWindowsについても知りたくなるのがさがと言うものだ。

Windowsはなぜ動くのか

このシリーズはどれも良く。大変ためになる。
初学者には分量も多く内容が濃いかもしれないが、ぜひ読んでおきたいシリーズだ。

大きめのソースを書きたい

続・初めてのPerl 改訂版

ソースファイルを2つ以上のファイルにわけたりするような
大きめのソースが書きたくなると「続・初めてのPerl」は読まなければならなくなるだろう。
しかし、またこれが初学者には難しい。
かなりアクロバティックなこれってプログラマ上級向けなんじゃ.... と思えることが多く書かれている。
何回も読み返して理解したいところ。
「初めてのPerl」と「続・初めてPerl」の間くらいのレベルとして本ブログを書き始めてみました。

このあたりから、Perlの「すごさ」「真価」がわかってくる。

CPAN

PerlにCPANは欠かせない。
CPANに行けば、サンプルソースも載っており、モジュールの使い方もわかる。
でも、なんでこんな書き方してるんだろう？この書き方の意味ってなんだろう？

そういう場面に出くわす事が多いかもしれない。
そんなときはベストプラクティスだ。

Perlベストプラクティス

先人たちの知恵。こうすればうまくいく。それがベストプラクティス。
あの書き方ってこういうことだったのか！　これは便利！
が満載。

もっとやさしく詳しく知りたい

すぐわかる オブジェクト指向 Perl

これだけの分量で、これだけサクッと読める本があるだろうか。
ダントツのわかりやすさで疑問が氷解していくだろう。
「続・初めてのPerl」より上のレベルの本でつまづいているなら、
この本を読んで理解し、次のステップへ行きたいところ。

エフェクティブ

Effective Perl (ASCII Addison Wesley Programming Series)

Effectiveシリーズは、他の言語でも良書として知られており、
Perlでもぜひ押さえておきたいところ。
「Effective Perl」は「Perlベストプラクティス」と同じような方面で書かれており、
この2冊は合わせて読みたいところである。

プログラミングPerl

プログラミングPerl〈VOLUME1〉

プログラミングPerl〈VOLUME2〉

「初めてのPerl」同様、プログラマとして大切なことが書かれている。
JavaScriptが再注目され、「無名関数」「クロージャ」といったことに関心が高まっているが、
実は、この何年にも前に書かれている本にすでに、それらは登場している事を読み返してびっくりした。

第130回 Javaを始めるにあたって読んだ本

私はJavaは得意ではない。
だが、世の中にはやらなければならないということがあるのだ。

Javaの「仕組み」・「文法」

Java 謎+落とし穴 徹底解明 (標準プログラマーズライブラリ)

Javaにポインターはないと誰がいったのだろう。
確かにポインターはないかもしれないが、
もう全部「参照」と言ってもいいくらいなのがJava。
というか「参照」がわかっていないとなにもできないということに気づかせてくれる本。

詳解 Javaプログラミング第2版〈VOLUME1〉

Sun SJC-P認定ガイド 310-055対応

この2冊でJavaの仕組みや文法を学んだ。
ただ、分量が多いので、
正直Java初学者には読むのに時間がかかりすぎた感も否めない。

徹底攻略 Javaアソシエイツ問題集[310-019]対応 (ITプロ/ITエンジニアのための徹底攻略)

徹底攻略 Java2 プログラマ問題集 Platform5.0 対応 (ITプロ/ITエンジニアのための徹底攻略)

本当にJavaの文法を理解したのだろうか？
そして知識の定着ぶりはどうだろうか？
それを黒本で試した。

Javaの用語

超図解 Java入門 GUI編 (超図解シリーズ)

Javaをやっていると、「この単語って何を意味しているんだ....」
という場面によく出くわす。特に私がわからなかったのが
「コンテナ」という単語。
「入れ物」という意味合いはわかっていたが、
Java的にはなにが「入れ物」なのだろうか？
GUIプログラムを少し覗いてみると理解できるかもしれない。

Eclipse

Eclipse 実践開発入門 -Java・オープンソース開発・Eclipse3.2

Eclipseを使わないJava開発は今や考えられないのではないだろうか。
Eclipseの機能は「どんだけあんねん！　てか、その設定ってどこからできんねん！」
と言いたくなるほどいっぱいある。この本で、ざっと機能を掴める。

Javaのオブジェクト指向

豆蔵セミナーライブオンテキスト(1) わかるオブジェクト指向

すいすい習得 UMLモデリング (豆蔵セミナーライブオンテキスト (2))

Java・オブジェクト指向の壁を突破する 抽象化プログラミング入門 (豆蔵セミナーライブオンテキスト 3)

Javaというとオブジェクト指向。
Perlでもオブジェクト指向。
Rubyもオブジェクト指向。
JavaScriptだってオブジェクト指向。

その中で、
オブジェクト指向って「こういうモノ！」と強く主張しているのがJava界隈のように感じる。
そんなJava界隈で通じるオブジェクト指向をこの3冊で学べる。
シーケンス図はこの本で理解できました。
クラスを作って、インスタンスを生成するJavaの世界にさあ行こう。

小話系

15歳からはじめるJAVAわくわくゲームプログラミング教室―Windows98/2000/Me/XP対応

何気なく買ってみたのだけど、
System.out　の outが参照しているオブジェクトなどの小話が随所にあり面白かった。

コレクションフレームワーク

Javaコレクションフレームワーク

コレクションフレームワークを使わないと、
Javaの開発は困難を極めるかもしれない。
あと普通に開発でコレクションフレームワークは使われているので
わかってないと置いてきぼりをくらう。
しかし、Perlの配列とハッシュだけあればいいのではないか？
MapとPerlのハッシュってなにが違うんだ....などの思考が理解を邪魔し、
コレクションフレームワークは先輩の方や友人にもかなり教えていただきました。

JavaでのWEBアプリ

一番やさしいJSP & サーブレット入門塾 第2版 (DB Magazine SELECTION)

APサーバという単語を学生時代には聞いた事がなく
どういうモノをさすのだろうかと思い買ったもの。
JavaでWEBアプリを作るときのサーバ構成の基本はこのように構成する
といったようなことが学べた。

Webコンポーネントディベロッパ(SJC-WC) (SUN教科書)

WEBコンポーネントについての本。
Javaではこの仕様に基づき作っていく事になる。

徹底攻略Webコンポーネントディベロッパ問題集―310-081対応 (ITプロ/ITエンジニアのための徹底攻略)

やはり知識の定着具合を確かめるため黒本を用いた。

第129回 クロージャは作られたときの状態を保持するわけではなく参照する

第55回 クロージャ - bingo_nakanishiの他言語出身者のためのPerl入門
第56回 クロージャの実践的使いどころ - bingo_nakanishiの他言語出身者のためのPerl入門
第58回 クロージャをもっとていねいに - bingo_nakanishiの他言語出身者のためのPerl入門

私は今まで、「クロージャは作られたときの状態を保持する」という言い方をしてきたが、
これは厳密には間違いだったようだ。

状態を保持しているように見える例

use strict;

sub h{
  my $c = shift;
  sub { $c++ };
};

my $h = h(5);
print $h->(), "\n";
print $h->(), "\n";
print $h->(), "\n";

結果：

5
6
7

この例だと、確かに作られたときの状態を持っており、その状態に変化を加えているように見える。

厳密に言うと「作られたときの変数を参照している」

しかし、次の例を見てみると、

use strict;

sub h{
  my $c   = shift;
  my $fun = sub { $c++ };  # ここで作った

  $c = 10;                 # $cを変更

  return $fun;             # 作った関数を返すのはココ
}

my $h = h(5);
print $h->(), "\n";
print $h->(), "\n";
print $h->(), "\n";

結果：

10
11
12

このように、$cは作られたときではなく、$c = 10;が実行されたものを見ている。
つまりこれは、関数が作れたときの状態を保持するのではなく、作られたところの外側の変数をただ参照していることを示している。

同じ変数をクロージャとして持つ関数を2つ返してみる

use strict;

sub h{
  my $c   = shift;
  [
   sub{ $c++; print $c, "\n" },
   sub{ $c++; print $c, "\n" }
  ];
}

my($fun1, $fun2) = @{h(5)};

$fun1->();
$fun1->();
$fun2->();
$fun1->();

結果：

6
7
8
9

このようにお互いに同じ変数をクロージャとして持つ場合は、
参照であるので、お互いの関数は同じ$cを更新している。

Rubyでも念のために見てみる

class Hoge
  def foo
    c = 1
    [1,2,3].each do |i|
                     c=c+1    # cを更新
                     puts c
                 end
    puts
    puts c                    # cが更新されているのがわかる
  end
end

Hoge.new.foo

結果：

2
3
4

4

確かに外側のcが更新されている。

ただクロージャをよく使う場面を考えると

クロージャをよく使う場面を考えると、
「参照」という言葉よりも、
「作られたときの状態を保持する」
という表現の方がしっくりくる気がする。

第128回 Rubyを使っている人は無意識のうちにクロージャを使っているかもしれない

eachなどに与えるブロックは高階関数と考えてよい

class Hoge
  def foo
    c = 10;
    [1,2,3].each{|i| puts c}
  end
end

Hoge.new.foo

結果：

10
10
10

each{ }の中にいるcは外側のcを見れている。

参考

まつもとゆきひろ コードの世界?スーパー・プログラマになる14の思考法

クロージャ

クロージャについては、
第55回 クロージャ - bingo_nakanishiの他言語出身者のためのPerl入門
第56回 クロージャの実践的使いどころ - bingo_nakanishiの他言語出身者のためのPerl入門
第57回 コールバックをもっとていねいに - bingo_nakanishiの他言語出身者のためのPerl入門
第58回 クロージャをもっとていねいに - bingo_nakanishiの他言語出身者のためのPerl入門
このあたりで書きました。

第127回 Ruby vs Java ダックタイピングとインタフェースで見る多態性

前回は、Perlで書いたのだけど、
Rubyでも書いてみたので載せます。

動的型付け言語と静的型付け言語における多態性

オブジェクト指向では、多態性（ポリモーフィズム）という発想がでてくる。
この多態性を実現する方法を今回は2つ紹介する。

Rubyは動的型付け言語であり、ダックタイピングという手法で、多態性を実現できる。
対して、静的型付け言語であるJavaでは上位の型を作ることで多態性を実現できる（今回はインタフェースを用いてみた）。

ダックタイピング

Rubyでのタックタイピングを見てみよう。

human = Human.new
dog   = Dog.new
duck  = Duck.new

human.touch(dog)
human.touch(duck)

いま、このようにhumanがtouchすると、おのおのの動物が鳴くソースを書いてみる。
duck（アヒル）はhuman（人間）に触られると「ガーガー」と鳴き、
dog （犬）はhuman（人間）に触れると「ワンワン」と鳴くとする。

全体のソース:

class Dog
  def say
    puts 'ワンワン'
  end
end
class Duck
  def say
    puts 'ガーガー'
  end
end
class Human
  def touch(o)
    o.say
  end
end

human = Human.new
dog   = Dog.new
duck  = Duck.new

human.touch(dog)
human.touch(duck)

結果：

ガーガー
ワンワン

これは何がすごいかというと、

class Human
  def touch(o)
    o.say
  end
end

の o.sayのoがduckならDuckのsayが呼ばれ、　oがdogならばDogのsayが呼ばれているところである。

Javaは型を書かないといけない

Javaでは引数に受け取る型を書かないといけないので、DuckとDogを受け取ることができない。
Humanクラスのtouchメソッドに注目してほしい。

public class Human {

	public Human() {
		// ただのコンストラクタ
	}
	
	public void touch(Dog dog){ //型を決めないといけない
		dog.say();
	}

}

public class Duck {

	public Duck() {	
		// ただのコンストラクタ
	}
	
	public void say() {
		System.out.println("ガーガー");
	}
}

public class Dog {

	public Dog() {
		// ただのコンストラクタ
	}

	public void say() {
		System.out.println("ワンワン");
	}
}

public class Main {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		Human human = new Human();
		Duck  duck  = new Duck();
		Dog   dog   = new Dog();
		
		human.touch(duck);
		human.touch(dog);
	}

}

結果：

コンパイルエラー

インタフェース

そこで、JavaではDuckとDog以外にさらに上位の概念であるAnimalという型を作ってやる。今回はこれをインタフェースで実現する。

public interface Animal {
	public void say();
}

DuckとDogはこのAnimalを実装し、
Humanのtouchメソッドは、Animal型を受け取るように書き換える。

public class Human {

	public Human() {
		// ただのコンストラクタ
	}
	
	public void touch(Animal o){ //型を決めないといけない
		o.say();
	}

}

public class Duck implements Animal{

	public Duck() {	
		// ただのコンストラクタ
	}
	
	public void say() {
		System.out.println("ガーガー");
	}
}

public class Dog implements Animal{

	public Dog() {
		// ただのコンストラクタ
	}

	public void say() {
		System.out.println("ワンワン");
	}
}

public class Main {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		Human human = new Human();
		Duck  duck  = new Duck();
		Dog   dog   = new Dog();
		
		human.touch(duck);
		human.touch(dog);
	}

}

結果：

ガーガー
ワンワン

このように、明示的に型を書かないといけない言語では、
さらに上位の型を作らなければ、柔軟なことをしにくい。