2008-11-20

心配するな。日本語は死なんよ

来たか、ハッカー大好きはてなー野朗。ちょっとオマエ、ブクマを見せてみろ。ん？なんだこの大量の「あとで読む」タグは？！　で、これは読んだのか？　何？　まだだと？　あ？「だって英語で書いてあるしー」だ？　で、「その前に英語やらなくっちゃ！」と思ってやった事が、英語Tips のページにブクマして「あとで読む」タグを付けること？　おめでてーなー。オマエは本当におめでてーヤツだよ。今日も新たな教材探しか？

おい、、、図星かよ。涙目になんなよ。。

今日から、そんなオマエのヘタレな日常とサヨナラ出来るよう、またオレが教材を用意してやったぞ。喜べ。元ネタは"Eloquent JavaScript　（オレ的な超訳では「スゴいよ JavaScript」）"だ。コイツの出来の良さは関係各方面でお墨付きが出てるから安心しろ。さぁ読め！学べ！　そしてオマエも憧れのハッカーへの第一歩を踏み出してみろ！！

まずは準備運動

今回のテキストがどんなもんか？って事を軽く紹介してるカバーページについてはココに載ってるから、興味があったら確認しとけ。オレは和訳が存在してる箇所まで訳す程には暇じゃねーからな。

それじゃまずは目次だ。以下の流れで学習は進んでいくぞ。

スゴいよ JavaScript

- 頑固オヤジのプログラミング講座 -

1回目（今回）：はじめっぞ！

2回目　：　JavaScript の基本を叩き込め：値、変数、制御フロー（前半）(後半)

3回目　：　関数を知れ

4回目　：　データ構造を学べ：オブジェクトと配列 (前半)（後半）

5回目　：　エラー制御だ！

6回目　：　関数型プログラミングとか言ってみたいオマエに（前半）(後半)

7回目　：　検索の話は奥が深いぜ！（前半）（後半）

8回目　：　オブジェクト指向プログラミングとか言ってみたいオマエに

9回目　：　Modularity はオマエ、いやその、Modularity だよ

10回目　：　正規表現に溜息（正直オレはキライなんだが…）

11回目　：　Web プログラミングをザックリと

12回目　：　Document-Object Model も学んどくぞ

13回目　：　ブラウザイベントの話も見ておくか

14回目　：　HTTP リクエストでサーバと通信してみっか？

オマケ

15回目：伝え漏れてる制御構造

16回目：ヒープも知っとけ

用意はイイか？

よーし。じゃあ行くぞ。

Go！　ニコガク、Go！！（←なんかいまだに気に入っている）

はじめっぞ！

昔話から始めるとだな、パソコンが世の中に出た最初のあたりは、その殆どがシンプルなプログラミング言語（概ねBASICの派生型）を使えるようになってたんだ。コンピュータとの対話ってのは、このプログラミング言語と密接に結び付いてたもんだから、コンピュータのユーザって奴は皆、その気があろうがなかろうが、プログラミング言語をたしなんでおく必要があったってワケだな。今じゃコンピュータは種類豊富で価格も安いよな。マウスでクリックするくらいで大体は事足りてる。と言っても、技術的な方面にまでやりたい事が向いちまうと「プログラミング無しの日常を」ってのはちょっと無理がある。まだ「プログラミング言語を学ばなくても何でも出来る」って世の中にはなってねーよな。

で、今だとウェブが発展してくれたおかげで、最新のウェブブラウザをインストールしてあるコンピュータには、みんなJavaScript用のプログラミング環境も備わってるよな。ユーザに技術的に複雑なことをアレコレ見せて悩ませない、ってのが基本的な考え方にあるから、大っぴらにJavaScriptが前面に出てくるコトは無いワケだが、ウェブページを使ってブラウザをJavaScriptのプログラミング学習用プラットフォームとして利用することは現実的に可能だ。で、それこそが今回のテキストでやりたい事の中身ってことになる。

憤せずんば啓せず。俳せずんば発せず。一隅を挙げて三隅を以って反（ｶｴ）らざれば、則ち復（ﾏﾀ）せざるなり　-　孔子

【意味】

相手の気持ちが盛り上がってこなかったら、手をかしてやらない。
口元まで出かかっているのでなかったら、助け舟は出してやらない。
一つの隅を示しただけで、他の三つの隅にも鋭く類推をはたらかせるようでなかったら、
それ以上の指導はさし控える。

＃　孔子の引用なので、英語を訳すかわりに原文を持ってきた！

このテキストはJavaScriptの説明の他、プログラミングの基本原則についての導入も兼ねたものにしようと考えてる。プログラミングは難しいよな、分かるよ。殆どの場合において基本ルールってのはシンプルで明快だ。だが、その基本的なルールが積み重なって作られるプログラムってコトになると、複雑なもんになっちまう。だから、プログラミングがシンプルになったり予想通りのものになったりすることは滅多にない。ドナルド・クヌース（プログラミングの世界の第一人者）が言うように、プログラミングは一種の芸術だ。

このテキストから何物かを得ようと思うなら、ただ受身で読む以上の姿勢が必要だぞ。頭を研ぎ澄ませ。例題を解く努力をしろ。そして本当に理解したと確信した場合にだけ、先に進め。

コンピュータプログラマは、彼だけに責任のある世界の創造者だ。
実質的に無制限の複雑さを持つ宇宙は、コンピュータプログラムによって創り出される。

ジョセフ・ワイゼンバウム、コンピュータ・パワー 人工知能と人間の理性

プログラムって言ってもイロイロあるよな。プログラマによってタイプされるテキスト、コンピュータにやらせたい事を指示する力、コンピュータのメモリ上のデータで、同一メモリ上で行われる処理を制御するもの。プログラムを俺たち馴染みのものと比較しようってのは、ちと無茶があるんだが、あえて言うなら機械かな。機械式腕時計の歯車は巧妙に組み合わされてて、時計職人の腕が確かなら、その時計は長年時間を正確に示すよな。プログラムもそんな感じで要素がカッチリ組み合ってる。で、プログラマが自分で自分が何をしているかわかってるなら、プログラムはクラッシュすることなくちゃんと動くってワケだ。

コンピュータってのは、これら無形の機械のホストの役割を果たすために造られた機械だと言えるな。コンピュータ自体は、愚直に命令されたコトを実行するだけだ。ヤツらがとても役立つ理由は、信じられないほど高速に処理を実行するってとこにある。プログラムってのは、単純な行動を巧く多数組み合わせるコトで、えらい複雑なコトだって出来ちまうんだぜ。

俺たちの中には、コンピュータプログラムを記述するってことが、魅力的なゲームだって思うようなヤツもいる。プログラムってのは、思考によって組み立てられたビルみたいなもんだ。そしてこのビルは建築費無料、重さナシ、そして俺たちの手によるタイピングで簡単に成長していくってシロモノだ。俺たちが一歩間違えると、そのサイズと複雑さは制御不可能になっちまう。そして、それは作った本人にとっても例外じゃない。コイツがプログラミングにおける主問題だ。これが今、沢山のソフトウェアがクラッシュし、エラーを出し、グチャグチャになっちまう理由だ。

キチンと動くプログラムってヤツは美しい。プログラミング術ってのは、複雑さを支配する技術だ。凄いプログラムってのは地味なもんだ。複雑なものを複雑に表現せず、シンプルにしてるってコトだな。

・・・・

最近のプログラマーの多くは、この複雑さを制御する処方箋として、プログラムでよく理解されている技術の小さなセットだけを使えばイイと思ってる。プログラミングの形式に対して厳しいルールを作って、その信者ともなると、そのルールを破るプログラマを駄目プログラマとして非難したりしやがる。

プログラミングにおける「豊かさ」ってものを何だと思ってやがるんだろうな！プログラムを単純で予想可能なものに落とし込もうとしたり、美しいものだろうと異様なものだろうと全てのプログラムにタブーを持ち込もうとするような事があるなんてふざけた話もあったもんだ。プログラミングの道は深い。誰も極めちゃいない、魅力的で多様な世界だ。確かに、未熟なプログラマをオソロシイ間違いに誘い込むって意味で、ありとあらゆる罠や落とし穴があるだろうな。だが、そうだとしても注意しなきゃなんねーコトは、「常に自分で考える」ってクセを忘れるなってことダケだ。学ぶ道には常に新しい挑戦がある。探検すべき新しい領域がある。探究心を失ったプログラマは、きっと停滞し、喜びを忘れ、プログラムをしようっていう意志を失っちまうだろう。（んで、マネージャになっちゃったりしてな）

オレに言わせれば、プログラミングの"明確な基準"ってヤツがが正しいかどうかなんてこたー、どーでもイイ。効率も明快さもサイズも重要な話だと思うよ。けどな、互いのバランスをどうやってとるか？ってのは常に、各々のプログラマが自分自身で判断すべきもんだ。経験則は役に立つよ。それは認める。だけど、慣習破りを恐れちゃ駄目だ。

おっと、なんか熱く語りすぎちまったな。。そろそろ本題に入るとするか。

・・・・

コンピューティングが誕生した当初は、プログラミング言語なんてなかったからな。プログラミングっていや、こんな感じだった。

00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000

コイツは１から１０までを順に足し算して、その結果（1 + 2 + ... + 10 = 55）を表示するプログラムだ。ごくごくシンプルな構造のコンピュータを想定してる。初期のコンピュータでプログラムを組む場合、スイッチの並んだどデカい配列を必要に合わせてセットするか、レシートみたいな紙に穴をあけて、そいつをコンピュータに食わせるようなコトをしなくちゃならなかったんだぜ。こういうやり方がどんだけ退屈で、エラーを起こしやすかったか、想像つくよな？単純なプログラムを記述するのでさえ、多くのノウハウがあった。複雑なものを作るなんざ、ほとんど考えられなかったな。

まぁもちろん、ビット（上の例で見られる0と1の並びを一般にこう呼ぶ）のパターンを手入力するなんてワザが使えちまうワケだから、プログラマって言えばそりゃもう強力な魔法使いにでもなったような深い満足感みたいなものはあったと思うぜ。そんな感覚が仕事の満足感につながってた、ってのはあるだろうな。ハッカーになり損ねてきたオマエになら想像つくよな？

上で示したプログラムの各行には、それぞれ１つの指示が含まれてる。言葉に直すとこんな感じだ。

1. メモリ0番地に数字の0を格納せよ

2. メモリ1番地に数字の1を格納せよ

3. メモリ1番地にある値をメモリ2番地に格納せよ

4. 数字の11をメモリ番地2の値から減算せよ

5. メモリ番地2の値が数字の0であるならば、指示9の処理を続行せよ

6. メモリ番地1の値をメモリ番地0の値に加算せよ

7. メモリ番地1の値に数字の1を加算せよ

8. 指示3に行け

9. メモリ番地0の値を出力せよ

バイナリのスープより読みやすくはなったが、それでもまだスッキリしねーな。この状況を改善するには、指示文につけてる番号だの、メモリ番地だのの代わりに名前を使ってみるとイイかもな。

 Set 'total' to 0
 Set 'count' to 1
[loop]
 Set 'compare' to 'count'
 Subtract 11 from 'compare'
 If 'compare' is zero, continue at [end]
 Add 'count' to 'total'
 Add 1 to 'count'
 Continue at [loop]
[end]
 Output 'total'

ここまでくると、プログラムがどういう風に動くか？ってのを理解するのは、そんなに難しい話じゃなくなるだろ？最初の2行は2つのメモリ番地に対して初期値を与えてる。"total"はプログラムの結果を作るのに使われ、"count"は現在注目してる数字の経過を保持するのに使われてるってワケだ。"compare"を使っている行が、多分一番ワケワカラン部分だろうな。ここでプログラムがやりたい事ってのは、プログラムを止めちまってOKかドウかをチェックするために、"counter"が11になってるかを調べる、って処理だ。マシンが超原始的なおけげで、数がゼロであるかどうか？ってコトを調べて、その結果に応じて処理をジャンプするかドウかを決められるダケだから、話がややこしくなっちまってんだよな。っちゅーワケで"count - 11"の値を計算するのに"compare"ってラベル（名前）のつけられたメモリ番地を使ってる。んで、その値に応じて判断を下すワケだな。次にある2行は、結果に対して"count"の値を加算して、その後でプログラムが11に達していないと判断する限り1ずつ加算していく、って処理になる。

JavaScriptで書くとこんな感じになるぞ。

var total = 0, count = 1;
while (count <= 10) {
  total += count;
  count += 1;
}
print(total);

これで更に改善されたな。一番大事な改善点は、前後にとぶようなプログラムを書く必要が無い、ってコトだ。魔法の呪文"while"が処理してくれるからな。コイツは"count <= 10（つまり"count"の値が10以下）"と与えられた条件が続く限り、下に続く行に書かれてる命令を実行し続けるもんだ。見るからに分かるだろ？テンポラリの値を作って、そいつを0と比較するなんて処理をする必要はドコにも無い。まぁ、アホみたく細々した話っちゃーそうなんだが、プログラミング言語の力ってのは要するに、そういうアホみたいに細々した話をケアしてくれちゃうってトコにあるんじゃねーのかな。

んじゃ最後に、便利な演算"range" と"sum"を使った場合にはどんな感じになるか見てみるか。この演算はそれぞれ、指定された範囲にある数字を集める処理と、その集められた数字の合計値を求める処理になってるぜ。

print(sum(range(1, 10)));

ここまでの話から得られる教訓は、同じコトをするプログラムが、長くも短くもなれば、読みにくかったり読みやすかったりする、ってこったな。最後に紹介したプログラム（1から10までの間の数字の和を出力する）が殆ど英語のような表現になってるのと比べ、初期のプログラムってのは本当にワケワカランやつだった。("sum"だの"range"だの使ったように、プログラムをどうやって組み上げていくか？については、次回以降で学んでいくことになるから楽しみにしとけよ)

良いプログラミング言語ってモンは、抽象的な表現方法が使えるようになってる。プログラマにとってはそっちがイイからな。プログラマにとって興味を持ちにくい細々したトコロを隠蔽してくれ、便利な機能ブロック（さっき見たwhile構造みたいなの）を提供し、そしてほとんどの場合において、プログラマ自身で機能ブロック（sum だの rabge (←range だね。Typoスマン：09519追記)みたいなヤツな）が追加出来るようになってるもんだ。

・・・・

JavaScriptは、現在、ワールドワイドウェブ上のページでイロイロやりたい場合に一番使われてる言語だ。JavaScriptの次のバージョンでは、ウェブページ以外の場でも活躍が見込める重要な言語になるって主張してるヤツもいるぜ。まぁ、ホントにそうなるかオレは知らんが、もしオマエがプログラミングに興味があるなら、JavaScriptを学ぶってのは確かにオススメだぜ。たとえオマエが最終的にウェブプログラミングをあんまりすることにならなかったとしても、オレがこのテキストで見せる高難易度のプログラム達は、オマエの血肉となって他の言語でプログラムを書く場合に影響を与えるコトになるだろうぜ。

JavaScript を猛烈にdisったりするヤツいるよな。まぁ、そうした意見の多くは真実だと思うゼ。オレが初めてJavaScriptを使わなきゃならなかった時、直ぐにこの言語はクソだと思ったしな。オレが打ったコードは殆ど何でも受け入れてくれるんだが、意図したものと結果が全然違ったり。オレは何が悪いんだがワケが分からずイロイロ大変だったぜ。で、問題の本質もここにある。JavaScriptってのはあり得ないくらい寛大過ぎなんだよな。ちなみに、こういう設計になった背景には「初心者に易しく」ってのがあったみたいだ。実際のところは、システム側がプログラム上の問題を殆ど指摘してくれねーおかげで、それを見つけるのが難しくなっちまってるんだけどな。

だがな、言語の柔軟性ってヤツは利点でもあるぞ。厳格なプログラミング言語だと不可能な技術を使う余地があるってコトだからな。それにJavaScriptの欠点のいくつかは、言語の柔軟性によって克服出来る。キッチリ勉強し、しばらく仕事につかってみてから、オレはJavaScriptってイケてんじゃねーの？って思うようになったんだ。

・・・・

名前はJavaScriptって言っても、プログラミング言語のJavaとは殆ど無関係だ。名前が似てるのは単にマーケティング上の問題だしな。1995年に、JavaScriptがNetscapeから世に出たた際、Javaがかなり市場に出回って支持されてたから、マーケティング的に見て、こりゃ名前に取り入れるしかねーな、みたいなコトを誰かが考えたなろうな、、ってのは明白だ。今現在、おかげでオレ等はその名前に戸惑う羽目になっちまってるワケだが。。。

JavaScriptに関連性があるのはECMAScriptってヤツだ。Netscape以外のブラウザがJavaScript（あるいはそれモドキ）をサポートし始めた際、言語仕様についてのドキュメントが作られたんだが、そのドキュメント上に記述された言語が標準化の後、ECMAScriptって名前で呼ばれるようになったってワケだ。

ECMAScriptは多目的なプログラミング言語について記載してるもんであって、インターネットブラウザでこの言語を実装するコトについての言及は何も無いぞ。JavaScriptってのは、ECMAScriptにインターネットページやブラウザのウインドウを処理する為のプラスアルファを備えたもんだと思えばいいだろうな。

他にもいくつかECMAScript文書で記述されてる言語を使ったソフトウェアがあるぞ。一番重要なのは、Flashで使われてるActionScriptだな。コイツはECMAScriptがベースになってる。正確に標準準拠ってワケじゃねーけどな。ちなみに、Flashっつーのは、ウェブページを動かしたり音を出して賑やかにしたりする為のシステムだ。にたくさんの雑音を動かして、音を立てるものを加えるためのシステムだ。オマエがFlashムービーを作る方法を学んだコトあるなら、JavaScriptの学習は苦痛じゃないカモな。

このテキスト（元ネタの方）の執筆時点で、ECMAScript 4の作業が進行中だ。コイツはECMAScript言語の新しいバージョンで、いくつか新機能が加わるコトになる。が、新バージョンと比較してこのテキストが時代遅れのものになるんじゃ？なんて心配は要らないと思うゼ。そもそもECMAScript 4はその大部分が現在ある言語の拡張だからな。このテキストに書かれてる殆ど全てが使えるハズだ。加えて、全てのメジャーなブラウザが新たに加わった機能をサポートするまでには、たぶんかなりの間かかるだろうぜ。メジャーなブラウザでサポートされるようになるまでの間は、ECMAScript 4はウェブプログラミングで使えるってコトにはならねーよ。

・・・・

このテキストには大量のプログラムコードが入ってる。オレの経験から言わせてもらうと、コードの読み書きはプログラム学習において重要な部分だ。例として出ているコードは眺めるだけじゃなく、しっかり読んでちゃんと理解しろよ。そういう進め方は、最初はスローペースだと感じ、混乱しちまったりするコトもあるかも知れんが、なに、直ぐにコツを掴むさ。練習問題についても同じだ。動くコードを自分で書けるようになったのを確認しないまま、勝手に分かったと思わんようにな。

ウェブの仕組み上、他人のWebドキュメントに書かれているJavaScript プログラムを見るのは常に可能だ。これは、何がドウなってるのか学ぶのに良い方法かも知れん。が、大部分のウェブプログラマは『プロの』プログラマーでないし、面白くないとかって理由でJavaScript プログラミングをきちんと学んでないからな。ウェブ上で見かけるコードの多くは品質がかなり悪いだろうぜ。醜いコード、誤ったコードに悪影響を受けないように気をつけろよ。

・・・・

プログラムを実際に試用してみる為に、このテキストではコンソールってヤツを使うぜ。コレで例として書かれているコードも、オマエが自分で書いたコードも両方とも実行OKだ。最新のブラウザ（Internet Explorer版6以上、Firefox 1.5以上、オペラ9以上、Safari 3以上）を使ってるなら、スクリーンの底にバーが表示されるハズだ。ブラウザ画面下部の右端（Firefox なら"CONSOLE"って表示されてる）にある矢印をクリックするとコンソールが開くようになってるぞ。

訳者注：コレは元ネタのページ画面でしか実現できねーコトなんで、コードを実験的に動かすって部分についてダケは、元ネタ「Eloquent JavaScript」のページの方を併せ読みしながらチェックしてくれ。

コンソールは、3つの重要な要素から構成されてる。エラーメッセージやプログラムの実行結果を表示する出力ウインドウ、その下に表示されてる行がJavaScriptを入力するところだ。数字を入力し、それを実行するためにエンターキーを押してみろ。オマエが入力したテキストがJavaScript的に意味あるものであれば、出力ウインドウに表示されるだろう。んじゃ次に、間違った入力（例えば日本語の文字列とか）をしてエンターキーを押してみろ！出力ウインドウにエラーメッセージが表示されるハズだ。ちなみに、上矢印・下矢印キーを使って、タイプしたコマンドの履歴が辿れるぞ。

プログラムのコードが複数行のデカいもんになって、それをそのまま保持しておきたいような時には右側にあるボックス型のフィールドを使うとイイぞ。ちなみに"Run"ボタンは、このフィールドに書かれているプログラムを実行する際に使われるもんだ。同時に複数のプログラムを開くコトは可能だ。"New"と"Load"のボタンを使って新しいプログラムを追加するようにすればOKだ("New" なら空のファイル、"Load"ならウェブから取得したファイルを読み込む形になる）。プログラムが複数開かれている場合、"Run"ボタンの隣にあるメニューは、表示されるべきファイルを選択するのに使われるようになってる。そして"Close"ボタンは、オマエの予想通りプログラムを閉じる為のボタンだ。

このテキストにあるサンプルプログラムが書かれたボックスには、全て右上端に矢印が描かれた小さなボタンが用意されてる。コイツはそのプログラムを実行させる為のもんだ。（が、さっきも触れたが、本エントリ上で同じ機能を実現するのは無理なので、元ネタ「Eloquent JavaScript」の方で確認してくれ）

矢印をクリックして実行してみろ。ちなみにもう一つのボタンはプログラムをコンソールに流し込むのに使われるもんだ。遠慮なくサンプルプログラムを修正して、結果をチェックしてみろ。起こり得る最悪のケースは、エンドレスなループを作っちまうコトだな。"while"の条件で永遠に偽とならないようなものを作っちまった場合にそうなる。例えば、変数"count"に対して1の代わりに0を加えるような処理にしちまった場合とかな。そうなるとプログラムは永遠に動き続けることになっちまう。だがあんまり心配する必要はないぞ。ブラウザが動作してるプログラムを監視してくれてるからな。ラッキーだな、オマエ。処理にあまりにも時間がかかるような場合には、ブラウザの方から処理を中断するかドウか聞いてくれるようになってるぞ。

・・・・

次回以降、コードが書かれた大量のブロックから成るプログラムを扱っていくことになる予定だ。プログラムを動かす為に、ブロックに書かれたコードを全て1つずつ実行させるようなケースがしょっちゅうあるだろう。もう気付いたかも知れんが、ブロック内のコードが実行された後は、ブロック内にある矢印は紫色に変わるようになってる。テキストを読み進める際には、全てのコードを実行してみてくれ。特に何か新しいものを"define（これが何を意味するかは次回で触れる）"してるような場合にはな。

一回の勉強で1つの章を読み終えられるとは限らない、ってのは勿論あることだな。これは、途中から続きを始めるような事もあるって事だ。だが、各回にある全てのコードを最初から実行していない場合、うまく動かないプログラムもあるだろう。そういう場合は、コードの書かれたブロック上にある"Run"矢印を押している間、シフトキーを押すことで、それより以前のブロックも実行されるようになる。だから、各回の途中から始めたい場合は、先ず最初のコードを実行する際にシフトキーを押すようにしろ。そうすりゃ全てが期待通りに動くようになるからな。

・・・・

ああ、それから最後に。このテキストの文章で何か間違いとか気になるところがあった場合、それは多分訳者の問題だろう。だから、くれぐれも先走って元ネタ「Eloquent JavaScript」の作者であるMarijn Haverbeke氏に「(ﾟДﾟ)ｺﾞﾙｧ！」すんじゃねーぞ。そんなオマエにはオレが「(ﾟДﾟ)ｺﾞﾙｧ！」だ。

それじゃこれから気合入れて行くぞ！！

さぁ、声を出せ！