JavaScriptの勉強：入門編

Webページのイベントハンドラとしてちょっとしたスクリプトは書いていますが、きちんと勉強してきたわけではないので、少し勉強してみようかと。以前からそうは思っていて、ブックマークみるとJS関連のページが多数記録されています。どれもこれも「そのうちに」読もうと思っていたものばかりです。

でもブックマークってマークしただけで、読み返すものはほんの少ししかありません。先日evenote導入したのですが、これって、WEBページの読書メモを取るのに最高です。で、evernoteでメモを取りながら昔のブックマークをたどっていってみようと思いつきました。

JavaScriptがズバリ分かる：ITpro　2005/03, 2006/03

Part1は本当に前振りで、JSを使った事が無い人向けのイントロですね。で、本体はPart2の方。こちらはJSのオブジェクトシステム（プロトタイプベース）の解説になっています。これは意外と他のところでは見かけない内容なのでありがたいです。

無料のスクリプトで始めるWebプログラミング 2007/07

JSがメインではなく、JS（等のスクリプト）を使ってWEBページに対して何ができるか、を示すことが目的のようです。実際JSだけで済むわけではなく、DOMとの組み合わせで使われるわけですから、こういうのも必要なのでしょう。単なるJS解説よりも興味を持ちやすいのは確かです。ですが、基本WEBページへの組込ですから、JS自体の勉強という意味では足りないところもあります。

意外と最初に読むガイドとしてはいいかもしれません。スクリプティングに興味持つでしょうし、どう実装されているかの解説付きですからね。

ただ、サンプル優先なのか、ブラウザ依存コードが入っているのはいやなところですね。文字のフェードアウト、Chromeでは動作しません。ブラウザ判定コードが入っていますが、IEでなければMozilla決め打ちにになっています。Chromeの無かった頃のコードですから動かないのも当然なのですが。当時のシェア的には充分なコードだったのでしょうが（でもOperaもネグられています）、時代の経過と共に動かなくなるWEBページっていうのもどうかと思います。DOMの仕様自体年とともに変わってきているわけですから、このあたり気持ち悪いですね。これがDOM仕様（まあバージョンはありますが）に基づいて書かれていればすっきりするのですが、この当時ですとDOM仕様に基づくとIEで全く動かなくなったりした頃でしょう。最近ではどのブラウザも準拠性が上がってきているので、きちんとDOM仕様に基づいたものを読みたいですね。

ちなみに、MozOpacity → opacity で chromeでも動作可能になります。

今時ですと、このようなブラウザ間の差異を吸収するために個別コードを書くのは流行らなくなっていますね。この手のデコレーション系のコードはだいたいがライブラリ化されていて、そのなかでブラウザの差異を吸収するようなコードになっているかと思います。そうなると、この手の連載自体古くなって存在意義が薄れているのかも知れません。むしろ最近のUIライブラリあたりの解説やサンプルを見る方がいいのかも知れませんね。

ブラウザを実行環境としてJSでプログラムを書いてみよう、というコンセプトは悪くない（どころか良い）と思います。が、問題はブラウザ間の差異ですね。DOM+JSでは残念ながらブラウザ差異の影響をもろに受けてしまいます。吸収するためにUIライブラリを導入するのもひとつの手ではありますが、JSの勉強用としてはどうか、という感じになりますし（この場合はUIライブラリの勉強がメインになってしまいます）。このあたり、今ひとつすっきりしません。

後半、ビジュアルフィルタ、XML処理のところはIEで専用（しかも古いバージョン）になっています。このあたりは今となっては見る価値はもう無いでしょう。

PS.　ただこのページ（というかITProのサイト全般）、フラッシュの広告が埋めこまれていて動きっぱなしなんですよね。ページ開いているだけでCPU働き詰めになるので、（過熱しやすいPCのユーザとしては）ひどく迷惑です。そういえばどなたか、こういうページはECOに反している、とかいっていましたね。フラッシュ広告止めるだけで、電力消費が相当に減るのではないかと。

初心者のためのJavaScript入門　2009/11-2010/11

JSの勉強用に、と思ったのですが、ちょっと本格的な初心者向けみたいです。いわゆるプログラム書いたことが無い人向けのレベルですね、これは。あまりじっくり読むレベルのものではなさそうです。

第1回 ようこそJavaScriptの世界へ

まずは document.write。実際にコーディングして覚えていく場合には最初はこれですね。JSでいやなのは勝手に変換がかかって、コード上はそのデータをどのように扱うかを明示的に指定できない点ですが。
こういうプログラムに慣れた人間に数値の４と数字の４の違いを説明するのって、結構面倒なんですがね。逆に違いが判っている人間に、システムによる自動変換を説明する方が楽。ただし、それを間違いなく利用出来るかというと、これが大変な仕事になるわけですが。

３ページ目、個人的にスクリプト言語（厳密には型指定の無い）の一番嫌いなところです。勝手にデータ型変換するなといいたい。強い型指定言語なら実行前にエラーになるのに、勝手に訳の判らない処理を実行してしまいますからね。なんで人間の側がスクリプトの勝手な処理を想定しながら工夫しなければいけないのでしょう。大規模コードで型付言語が主流になっているのは、一々人間がそんなことに目を配っていられないから、機械にやらせているわけです。スクリプト言語のこのあたりのいいかげんさは、本来の進歩への逆行です。

どのような高機能言語を使っても、プログラムはどんどん肥大化していきます。肥大化したプログラムを安全に作成するために必要になるのは、モジュール化の機能と機械による事前チェックです。一般の高給言語はどれもこういう方向に進化してきています。しかし、スクリプト言語は、言語の機能の高さによって、少ない行数でプログラムが書けることを売りにしている（実際サイズ縮小の効果は高い）ため、機械による事前チェックを捨てているものが多いです。スクリプト言語でも対象のプログラムが大規模化してくればプログラムサイズもいつかは巨大化してきます。そのような場合に、いまのようなスクリプト言語が耐えられるでしょうか？私は、今広く使われているスクリプト言語（LL）に、この点について強い不信感をいだいています。

第2回 イベントで「右クリック禁止」を禁止してみよう

イベントハンドリング入門編。そういえば、<input />自体は JS側で規定されるものなのか、HTML側で規定されるものなのか、微妙ですね。あまり気にした事が無かったのですが、厳密にはどういう規定になっているのでしょう？

引用符の話ですが、エスケープありましたかね？あ、通常のHTMLの文字の数値表現を使えばいいのでしたっけ。Double Quote (") は&#34;、Single Quote(')は&#39;、でしたね。

と、それほど単純ではないようで。エスケープの解除のタイミングの問題がありました。HTML評価時にアンエスケープされるのか、JS実行時にアンエスケープされるのか、という問題です。上のエスケープはHTMLレベルのものなので、HTML解釈時（読み込まれた時）にアンエスケープされます。結果、"なり'なりがJSに渡されることになるので、JS側のクオートについてはエスケープされません。

JS側のエスケープはCも文字列と同じで\（本来はバックスラッシュ）でエスケープするようですね。ですが、\"、\'、と書くとHTMLレベルではエスケープにならないためHTMLレベルで誤動作してしまいます。
従ってHTML上のalert文字列は「文字列は\&#34;または\&#39;でエスケープします。」という形で書くことになります。かなり面倒です。

第3回 変数とfunctionで、はてなボックス出現！

プログラム言語としては基本。JS的には入力を拾うためにテキストフィールドが出てきたぐらいでしょう。厳密にはFORMの仕様であって、JSの仕様ではないのでしょうが。

第4回 プログラミングのキホン、if文を使ってみよう！

あ、JSにも明示的な変換関数あったのですね。きちんと勉強していないことがばればれです。が、エラー発生時にはどういうアクションになるのでしょう？他の言語なら exception 発生といったところでしょうが。
Number関数で試してみたら、NaN(Not a Number)になりました。こうきますか。parseIntも同じです。

ここで紹介されている新機能はDOMアクセスで、id（名前）で特定される要素の中身を変更するメソッドです。
document.getElementById("name").innerHTML = "内容"

第5回 JavaScriptで繰り返し処理をしてみよう！

繰り返しの構文はCと同じ。break,continue もCと同じですね。

第6回 配列とオブジェクトでデータをまとめる

関数でオブジェクトを作るっていうのがなんとも気持ち悪いです。というかこの連載、細かいところをきちんと説明しない（まあ、あえてそうしているのでしょうが）ところがあります。JSスタイルの関数≒オブジェクトっていうのはそういうものなのでしょうが、このあたりの方式、考え方をきっちり解説したJSの解説書も欲しいところです。

以下連載中、次回で最終回（DOM）だそうです。使える気分になれるし、ある程度の機能は実際に使えるわけですが、個人的にはどうにも気持ちの落ち着かない連載でした。

とりあえずのまとめ

どうしてこう、JSの解説って、取りあえず使えるようにといった大雑把なものか、へい、こんなこともできるんだぜぃ、といった変に凝ったコードを見せつけるようなものかの、両極端に走るのでしょうかね。そういえば、スクリプト系言語全般にそういった傾向があるように思えます。ただ最近のスクリプト言語は、開発元でそれなりに整ったチュートリアルが用意されているので、それ以外は偏っていてもそれほどには困らないのですがね。JSの場合、チュートリアルはどこにあるのでしょう？ W3C には仕様書はあってもチュートリアルは無いですしね（それとも見逃しているかな）。

で、勢いで検索かけてみました。そうしたら、「チュートリアル集」と銘打ったページが出てきます。この段階でチュートリアルそのものが出てこないところがJSの不幸なところかもしれません。で、頭の方の「チュートリアル集」を見てみましたが、ありましたね、モジラのJSのチュートリアル。というわけで次はこちらのドキュメントを読むことにします。いきなりリンク切れ、というか変にリダイレクトされてしまいました。jaページに行かせてくれません。諸般の都合で preferred 言語 en に設定している所為でしょうが、明示的にパス指定しても勝手にリダイレクトっていうのは勘弁して欲しいですね。

MDNサイト自体にはja対応ページが無いようです。ですが、MDNトップページから JavaScript ページに移ってそこで言語選択すると日本語ページに移動できます。どうにも中途半端なI18Nです。

でMDNのJavaScriptページ。ガイドとリファレンスはありますが、チュートリアルはないですね。ガイドがまだチュートリアルに近いのでしょうか。

動的ページ作成の基本はDOM+JSなのですが、これらを生で使うのは、もはや実用的では無くなっているのかも知れません。動的ページ作成については、JSライブラリを使うのが現在の主流のように思えます。勉強の流れとしては各種のJSライブラリも想定すべきですね。そちらについても追々調べていくこととしましょう。