第11章: ウェブプログラミング：集中講座

¶ あなたは今、おそらくウェブブラウザでこれを読んでいるでしょうから、ワールドワイドウェブについて少なくとも少しはご存知でしょう。この章では、ウェブを機能させているさまざまな要素と、それらがJavaScriptとどのように関連しているかについて、簡単かつ表面的な紹介をします。次の3つの章はより実践的で、JavaScriptを使ってウェブページを検査したり変更したりする方法をいくつか示します。

¶ インターネットは、基本的に、世界の大部分にまたがるコンピュータネットワークです。コンピュータネットワークによって、コンピュータ同士がメッセージを送り合うことが可能になります。ネットワークの基礎となる技術は興味深いテーマですが、本書のテーマではありません。知っておくべきことは、通常、サーバーと呼ばれる1台のコンピュータが、他のコンピュータからの通信開始を待っているということです。別のコンピュータであるクライアントがこのサーバーとの通信を開始すると、特定の言語であるプロトコルを使用して、交換が必要なものを交換します。

¶ インターネットは、多くの異なるプロトコルのメッセージを伝達するために使用されます。チャット用のプロトコル、ファイル共有用のプロトコル、悪意のあるソフトウェアがインストールした間抜けなユーザーのコンピュータを制御するために使用するプロトコルなどがあります。私たちにとって関心のあるプロトコルは、ワールドワイドウェブで使用されるものです。これはHTTP（Hyper Text Transfer Protocolの略）と呼ばれ、ウェブページとそれに関連するファイルを取得するために使用されます。

¶ HTTP通信では、サーバーはウェブページが保存されているコンピュータです。クライアントは、あなたのようなコンピュータで、ページをサーバーに要求して表示できるようにします。このようなページのリクエストは「HTTPリクエスト」と呼ばれます。

¶ インターネット経由でアクセス可能なウェブページやその他のファイルは、Universal Resource Locatorの略であるURLによって識別されます。URLは次のようになります

http://acc6.its.brooklyn.cuny.edu/~phalsall/texts/taote-v3.html

¶ URLは3つの部分で構成されています。先頭の http:// は、このURLがHTTPプロトコルを使用していることを示します。FTP（File Transfer Protocol）など、URLを利用する他のプロトコルもいくつかあります。次の部分である acc6.its.brooklyn.cuny.edu は、このページが存在するサーバーの名前を示します。URLの末尾である /~phalsal/texts/taote-v3.html は、このサーバー上の特定のファイルの名前を示します。

¶ ほとんどの場合、ワールドワイドウェブへのアクセスはブラウザを使って行われます。URLを入力するか、リンクをクリックすると、ブラウザは適切なサーバーに適切なHTTPリクエストを行います。すべてがうまくいけば、サーバーはファイルをブラウザに送り返し、ブラウザはそれを何らかの方法でユーザーに表示します。

¶ 例のように、取得したファイルがHTMLドキュメントの場合、ウェブページとして表示されます。第6章でHTMLについて簡単に説明しましたが、そこではHTMLが画像ファイルを参照できることを確認しました。第9章では、HTMLページにJavaScriptコードのファイルをロードするための<script>タグを含めることもできることがわかりました。HTMLドキュメントを表示するとき、ブラウザはこれらの追加ファイルをすべてサーバーからフェッチして、ドキュメントに追加できるようにします。

¶ URLはファイルを指すように意図されていますが、ウェブサーバーは単にファイルを探してクライアントに送信するよりも複雑なことをすることができます。― まずこのファイルを何らかの方法で処理したり、ファイルがまったく存在せず、URLが与えられたときに、それに関連するドキュメントを生成する方法があるプログラムだけが存在する可能性もあります。

¶ サーバー上のドキュメントを変換または生成するプログラムは、ウェブページを静的ではなくする方法として普及しています。ファイルが単なるファイルの場合、常に同じものですが、要求されるたびにそれを構築するプログラムがある場合、この人がログインしているか、特定の好みを指定しているかなどに基づいて、人によって見た目を変えることができます。また、これにより、ウェブページのコンテンツの管理がはるかに簡単になります。― ウェブサイトに新しいものが追加されるたびに新しいHTMLファイルを追加する代わりに、新しいドキュメントを中央ストレージに追加し、プログラムがその場所とクライアントへの表示方法を把握します。

¶ この種のウェブプログラミングはサーバーサイドプログラミングと呼ばれています。これはユーザーに送信される前にドキュメントに影響を与えます。場合によっては、ページが送信された後、ユーザーが見ているときに実行されるプログラムを用意することも実用的です。これは、プログラムがクライアントコンピュータで実行されるため、クライアントサイドプログラミングと呼ばれます。クライアントサイドのウェブプログラミングは、JavaScriptが発明された目的です。

¶ クライアント側でプログラムを実行することには、固有の問題があります。訪問しているページが実行するプログラムの種類を事前に知ることはできません。コンピュータから他の人に情報を送信したり、何かを損傷したり、システムに侵入したりできる場合、ウェブの閲覧はかなり危険な行為になります。

¶ このジレンマを解決するために、ブラウザはJavaScriptプログラムが実行できることを厳しく制限しています。JavaScriptプログラムは、自分のファイルを見たり、付属のウェブページに関係のないものを変更したりすることは許可されていません。このようなプログラミング環境を隔離することをサンドボックス化と呼びます。プログラムが有用になるのに十分なスペースを確保し、同時に害を及ぼさないように制限することは容易ではありません。数ヶ月ごとに、一部のJavaScriptプログラマーが制限を回避して有害またはプライバシーを侵害する新しい方法を思いつきます。ブラウザの責任者は、このトリックを不可能にするためにプログラムを変更することで対応し、次の問題が発見されるまで、すべてが再びうまくいきます。

¶ 広く使われるようになった最初のJavaScriptトリックの1つは、windowオブジェクトのopenメソッドです。URLを引数として受け取り、そのURLを表示する新しいウィンドウを開きます。

var perry = window.open("http://www.pbfcomics.com");

¶ 第6章でポップアップブロックをオフにしない限り、この新しいウィンドウがブロックされる可能性があります。ポップアップブロッカーが存在するのには十分な理由があります。ウェブプログラマー、特に人々に広告に注意を向けさせようとしている人々は、貧弱なwindow.openメソッドを非常に多く乱用したため、現在、ほとんどのユーザーはそれを強く嫌っています。ただし、それには適切な場所があり、本書では、いくつかのサンプルページを表示するためにそれを使用します。原則として、ユーザーが要求しない限り、スクリプトは新しいウィンドウを開かないようにする必要があります。

¶ open（setTimeoutや同様のメソッドと同様）はwindowオブジェクトのメソッドであるため、window.の部分は省略できることに注意してください。関数が「通常」に呼び出される場合、トップレベルオブジェクトのメソッドとして呼び出されます。これはwindowです。個人的には、openは少し一般的すぎると思うので、通常はwindow.openと入力します。これにより、ウィンドウが開かれていることが明確になります。

¶ window.openによって返される値は、新しいウィンドウです。これは、そのウィンドウで実行されているスクリプトのグローバルオブジェクトであり、ObjectコンストラクターやMathオブジェクトなど、すべての標準的なものが含まれています。しかし、それらを見ようとすると、ほとんどのブラウザは（おそらく）許可しません...

show(perry.Math);

¶ これは、前述したサンドボックス化の一部です。ブラウザで開いたページには、たとえばログインしたサイトなど、あなただけを対象とした情報が表示される場合があるため、ランダムなスクリプトがそれらを読みに行くことができると問題になります。この規則の例外は、同じドメインで開かれたページです。eloquentjavascript.netのページで実行されているスクリプトが同じドメインの別のページを開くと、このページで必要なことはすべて実行できます。

¶ 開いたウィンドウは、closeメソッドで閉じることができます。自分でまだ閉じていない場合は...

perry.close();

¶ フレーム（ドキュメント内のドキュメント）などの他の種類のサブドキュメントも、JavaScriptプログラムの観点からはウィンドウであり、独自のJavaScript環境を持っています。実際、コンソールでアクセスできる環境は、このページのどこかに隠されている小さな不可視フレームに属しています。― これにより、ページ全体を誤って混乱させるのが少し難しくなります。

¶ すべてのwindowオブジェクトには、そのウィンドウに表示されているドキュメントを表すオブジェクトを含むdocumentプロパティがあります。このオブジェクトには、たとえば、ドキュメントのURLに関する情報を含むプロパティlocationが含まれています。

show(document.location.href);

¶ document.location.hrefを新しいURLに設定すると、ブラウザに別のドキュメントをロードさせることができます。documentオブジェクトの別のアプリケーションは、そのwriteメソッドです。このメソッドは、文字列引数が指定された場合、ドキュメントにHTMLを書き込みます。完全にロードされたドキュメントで使用すると、ドキュメント全体が指定されたHTMLに置き換えられます。これは通常、望ましいことではありません。この考え方は、ドキュメントがロードされている間にスクリプトがそれを呼び出すようにすることであり、この場合、書き込まれたHTMLはそれをトリガーしたscriptタグの場所にドキュメントに挿入されます。これは、動的な要素をページに追加する簡単な方法です。たとえば、現在の時刻を表示する非常に簡単なドキュメントを次に示します。

print(timeWriter);
var time = viewHTML(timeWriter);

time.close();

¶ 多くの場合、第12章で示す手法は、ドキュメントを変更するためのよりクリーンで汎用性の高い方法を提供しますが、場合によっては、document.writeが何かを行うための最も簡単で最も簡単な方法です。

¶ ウェブページでのJavaScriptの別の一般的なアプリケーションは、フォームを中心としています。「フォーム」の役割をあまり理解していない場合は、簡単にまとめさせてください。

¶ 基本的なHTTPリクエストは、ファイルの単純なリクエストです。このファイルが実際には受動的なファイルではなく、サーバー側のプログラムである場合、リクエストにファイル名以外の情報を含めることが役立つ場合があります。この目的のために、HTTPリクエストには追加の「パラメーター」を含めることができます。次に例を示します

http://www.google.com/search?q=aztec%20empire

¶ ファイル名 (/search) の後、URL はクエスチョンマークで始まり、その後にパラメータが続きます。このリクエストには、q (おそらく 'query' の略) という名前のパラメータが 1 つあり、その値は aztec empire です。%20 の部分はスペースに対応します。スペース、アンパサンド、クエスチョンマークなど、これらの値に使用できない文字が多数あります。これらは、% の後に数値が続く形で「エスケープ」されます1。これは、文字列や正規表現で使用されるバックスラッシュと同じ目的を果たしますが、さらに読みにくくなります。

¶ JavaScript には、これらのコードを文字列に追加したり、再度削除したりするための関数 encodeURIComponent と decodeURIComponent が用意されています。

var encoded = encodeURIComponent("aztec empire");
show(encoded);
show(decodeURIComponent(encoded));

¶ リクエストに複数のパラメータが含まれる場合、それらはアンパサンドで区切られます。例を挙げると...

http://www.google.com/search?q=aztec%20empire&lang=nl

¶ 基本的にフォームは、ブラウザのユーザーがこのようなパラメータ化された URL を簡単に作成できるようにするためのものです。テキスト用の入力ボックス、チェックのオン/オフが可能なチェックボックス、または指定された値のセットから選択できるものなど、多数のフィールドが含まれています。通常、送信ボタンと、ユーザーには見えない、送信先の「アクション」URL も含まれています。送信ボタンがクリックされるか、Enter キーが押されると、フィールドに入力された情報がパラメータとしてこのアクション URL に追加され、ブラウザはこの URL をリクエストします。

¶ 以下は、簡単なフォームの HTML です。

<form name="userinfo" method="get" action="info.html">
  <p>Please give us your information, so that we can send
  you spam.</p>
  <p>Name: <input type="text" name="name"/></p>
  <p>E-Mail: <input type="text" name="email"/></p>
  <p>Sex: <select name="sex">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select></p>
  <p><input name="send" type="submit" value="Send!"/></p>
</form>

¶ フォームの名前は、後で説明するように、JavaScript でアクセスするために使用できます。フィールドの名前は、その値を格納するために使用される HTTP パラメータの名前を決定します。このフォームを送信すると、次のような URL が生成される可能性があります。

http://planetspam.com/info.html?name=Ted&email=ted@zork.com&sex=Male

¶ フォームで使用できるタグとプロパティは他にもたくさんありますが、この本では JavaScript に集中できるように、シンプルなものを使用します。

¶ 上記の例のフォームの method="get" プロパティは、このフォームが与えられた値を前に示したように URL パラメータとしてエンコードする必要があることを示しています。パラメータを送信する別の方法として、post と呼ばれる方法があります。post メソッドを使用する HTTP リクエストには、URL に加えて、データブロックが含まれています。post メソッドを使用するフォームは、パラメータの値を URL ではなくこのデータブロックに格納します。

¶ 大量のデータを送信する場合、get メソッドでは URL が非常に長くなってしまうため、通常は post の方が便利です。しかし、2 つのメソッドの違いは単に利便性の問題だけではありません。従来、get リクエストはサーバーにドキュメントを要求するためだけに使用され、post リクエストはサーバー上で何かを変更するアクションを実行するために使用されます。たとえば、インターネットフォーラムの最近のメッセージのリストを取得することは get リクエストとなり、新しいメッセージを追加することは post リクエストとなります。ほとんどのページがこの区別に従うのには正当な理由があります。検索エンジンで使用されるような、自動的にウェブを探索するプログラムは、一般的に get リクエストのみを行います。サイトへの変更が get リクエストによって行える場合、これらの善意の「クローラー」はあらゆる種類の損害を与える可能性があります。

¶ ブラウザがフォームを含むページを表示しているとき、JavaScript プログラムはフォームのフィールドに入力された値を検査および変更できます。これにより、サーバーに送信する前に値をチェックしたり、特定のフィールドを自動的に入力したりするなど、あらゆる種類のトリックが可能になります。

¶ 上記のフォームはファイル example_getinfo.html にあります。開いてください。

var form = window.open("example_getinfo.html");

¶ URL にサーバー名が含まれていない場合、相対 URL と呼ばれます。相対 URL は、ブラウザによって、現在のドキュメントと同じサーバー上のファイルを参照するように解釈されます。スラッシュで始まらない限り、現在のドキュメントのパス (またはディレクトリ) も保持され、指定されたパスがそれに追加されます。

¶ フォームに妥当性チェックを追加し、名前フィールドが空欄でなく、メールフィールドに有効なメールアドレスのように見えるものが含まれている場合にのみ送信されるようにします。「送信！」ボタンが押されたときにフォームがすぐに送信されないように、その type プロパティを "submit" から "button" に変更し、効果のない通常のボタンにします。― 13 章では、この方法よりもはるかに優れた方法を紹介しますが、今のところは単純な方法を使用します。

¶ 新しく開いたウィンドウを操作できるように（閉じた場合は再度開いてください）、次のようにコンソールを「アタッチ」します。

attach(form);

¶ これを行った後、コンソールから実行されるコードは、指定されたウィンドウで実行されます。正しいウィンドウで作業していることを確認するために、ドキュメントの location および title プロパティを確認できます。

print(document.location.href);
print(document.title);

¶ 新しい環境に入ったため、以前に定義された変数 (form など) は存在しなくなりました。

show(form);

¶ 開始時の環境に戻るには、detach 関数（引数なし）を使用できます。しかし、まず、その検証システムをフォームに追加する必要があります。

¶ ドキュメントに表示されるすべての HTML タグには、それに関連付けられた JavaScript オブジェクトがあります。これらのオブジェクトを使用して、ドキュメントのほぼすべての側面を検査および操作できます。この章では、フォームとフォームフィールドのオブジェクトを操作します。12 章では、これらのオブジェクトについてさらに詳しく説明します。

¶ document オブジェクトには、名前でドキュメント内のすべてのフォームへのリンクを含む forms という名前のプロパティがあります。私たちのフォームには name="userinfo" というプロパティがあるため、userinfo プロパティの下にあります。

var userForm = document.forms.userinfo;
print(userForm.method);
print(userForm.action);

¶ この場合、HTML form タグに指定された method および action プロパティは、JavaScript オブジェクトのプロパティとしても存在します。これは多くの場合に当てはまりますが、必ずしもそうではありません。一部の HTML プロパティは JavaScript では異なるスペルになり、存在しないものもあります。12 章では、すべてのプロパティにアクセスする方法を示します。

¶ form タグのオブジェクトには、フォームのフィールドを名前で含むオブジェクトを参照する elements プロパティがあります。

var nameField = userForm.elements.name;
nameField.value = "Eugène";

¶ テキスト入力オブジェクトには value プロパティがあり、これを使用して内容を読み取り、変更できます。上記のコードを実行した後、フォームウィンドウを見ると、名前が入力されていることがわかります。

¶ 今すべきことは、「送信！」ボタンをクリックしたときに何が起こるかを決定することだけです。今のところ、何も起こりません。これは、その onclick プロパティを設定することで修正できます。

userForm.elements.send.onclick = function() {
  alert("Click.");
};

¶ setInterval および setTimeout に与えられたアクション(8 章)と同様に、onclick (または同様の) プロパティに格納された値は、関数または JavaScript コードの文字列のいずれかになります。この場合、警告ウィンドウを開く関数を与えます。クリックしてみてください。

¶ フォーム入力だけでなく、ボタンやリンクなど、選択できるその他のものに関連する別のトリックは、focus メソッドです。ユーザーがページに入った直後に特定のテキストフィールドに入力を開始することを確信している場合は、カーソルをそこに配置することでスクリプトを開始し、ユーザーがクリックしたり、他の方法で選択したりする必要がないようにすることができます。

userForm.elements.name.focus();

¶ フォームが別のウィンドウにあるため、使用しているブラウザによっては、何かが選択されたことがわかりにくい場合があります。一部のページでは、たとえば郵便番号を入力したときなど、1 つのフィールドへの入力が完了したように見えると、カーソルが自動的に次のフィールドに移動することもあります。これはやりすぎないようにする必要があります。ユーザーが予期しない方法でページが動作するためです。ユーザーがカーソルを手動で移動するために Tab キーを押すことに慣れている場合や、最後の文字をタイプミスして削除したい場合、このような魔法のカーソルジャンプは非常に煩わしいものです。

detach();

¶ バリデーターをテストします。有効な情報を入力してボタンをクリックすると、フォームが送信されるはずです。コンソールがまだアタッチされている場合は、ページがリロードされ、JavaScript 環境が新しいものに置き換えられるため、自動的にデタッチされます。

¶ フォームウィンドウをまだ閉じていない場合は、これで閉じられます。

form.close();

¶ 上記は簡単に見えるかもしれませんが、クライアント側のウェブプログラミングは決して簡単ではないことを保証します。非常に苦痛な試練になることもあります。なぜでしょうか？クライアントコンピュータ上で実行されるプログラムは、一般的に、すべての人気のあるブラウザで動作する必要があるためです。これらの各ブラウザは、わずかに異なる動作をする傾向があります。さらに悪いことに、それぞれに固有の問題のセットが含まれています。多額の資金を持つ企業が作成したからといって、プログラムにバグがないと想定しないでください。したがって、ウェブプログラマーである私たちは、プログラムを厳密にテストし、問題点を把握し、回避策を見つける必要があります。

¶ 中には、「ブラウザメーカーに問題やバグを報告すれば、すぐに修正してくれるだろう」と考える人もいるかもしれません。これらの人々は、大きな失望を味わうことでしょう。ウェブサーファーの約 70% が依然として使用しているブラウザ (そしてすべてのウェブ開発者が不満を漏らしている) である Internet Explorer の最新バージョンには、5 年以上前から知られているバグがまだ含まれています。重大なバグも含まれています。

¶ しかし、それでがっかりしないでください。適切な強迫観念的な考え方があれば、そのような問題は素晴らしい挑戦となります。そして、時間を無駄にしたくない私たちにとって、注意深く行動し、ブラウザの機能の曖昧な隅っこを避けることで、一般的にはあまりトラブルに巻き込まれることはないでしょう。

¶ バグはさておき、ブラウザ間のインターフェースの設計上の違いは、依然として興味深い課題です。現状は次のようになっています。一方には、「小さな」ブラウザ、つまり、Firefox、Safari、Operaが最も重要ですが、他にもあります。これらのブラウザはすべて、W3C（Webをより分かりやすくするために、このようなものに対する標準インターフェースを定義しようとしている組織）によって開発された、または開発中の標準のセットを遵守するために、相応の努力を払っています。他方には、MicrosoftのブラウザであるInternet Explorerがあります。これは、これらの標準の多くがまだ存在していなかった時代に支配的な地位を築き、他の人々がやっていることに合わせて調整する努力をあまりしていません。

¶ HTMLドキュメントのコンテンツをJavaScriptから扱う方法（第12章）など、いくつかの分野では、標準はInternet Explorerが考案した方法に基づいており、すべてのブラウザで多かれ少なかれ同じように動作します。イベント（マウスクリック、キー押下など）の処理方法（第13章）など、他の分野では、Internet Explorerは他のブラウザとは根本的に異なる動作をします。

¶ 長い間、JavaScript開発者の無知さ、そしてInternet Explorerバージョン4や5や旧バージョンのNetscapeのようなブラウザがまだ一般的だった頃にはブラウザの非互換性がはるかに悪かったという事実もあって、そのような違いに対処する一般的な方法は、ユーザーが実行しているブラウザを検出し、各ブラウザに対する代替ソリューションでコードを埋め尽くすことでした。つまり、これがInternet Explorerならこれを行い、これがNetscapeならそれを行い、そして私たちが考えていなかった他のブラウザなら、うまくいけばいいな、と考えるのです。そのようなプログラムがどれほど醜く、混乱し、長かったか想像できるでしょう。

¶ 多くのサイトはまた、「サポートされていない」ブラウザで開くと読み込みを拒否していました。このため、いくつかのマイナーブラウザはプライドを捨て、そのようなページを読み込めるように、Internet Explorerであると偽装しました。 navigator オブジェクトのプロパティには、ページが読み込まれたブラウザに関する情報が含まれていますが、そのような嘘のため、この情報は特に信頼できるものではありません。ご自分のものが何を言っているか確認してください2

forEachIn(navigator, function(name, value) {
  print(name, " = ", value);
});

¶ より良いアプローチは、ブラウザの違いからプログラムを「隔離」しようとすることです。たとえば、送信ボタンのonclickプロパティを設定することで処理したクリックなど、イベントについて詳しく知る必要がある場合は、Internet Explorerではeventというトップレベルのオブジェクトを参照する必要がありますが、他のブラウザではイベント処理関数に渡される最初の引数を使用する必要があります。これと、イベントに関連する他の多くの違いを処理するために、イベントをオブジェクトにアタッチするためのヘルパー関数を作成できます。この関数は、すべての配管作業を行い、イベント処理関数自体がすべてのブラウザで同じになるようにします。 第13章では、そのような関数を作成します。

¶ （注：以下の章で言及されているブラウザの癖は、2007年初頭の状況を指しており、一部の点ではもはや正確ではない可能性があります。）

¶ これらの章では、ブラウザインターフェースの主題についてのやや表面的な紹介のみを行います。それらは本書の主な主題ではなく、それらだけで厚い本を埋めるのに十分なほど複雑です。これらのインターフェースの基本を理解し（HTMLについて何か理解していれば）、特定の情報をオンラインで検索することはそれほど難しくありません。FirefoxとInternet Explorerブラウザのインターフェースドキュメントは、始めるのに良い場所です。

¶ 次の章の情報は、「前の世代」のブラウザの癖には対応していません。それらは、Internet Explorer 6、Firefox 1.5、Opera 9、Safari 3、または同じブラウザのより新しいバージョンを扱います。そのほとんどは、Konquerorなどの最新であるが一般的ではないブラウザにも関連する可能性がありますが、これは広範囲にチェックされていません。幸いなことに、これらの前の世代のブラウザはほぼ消滅しており、もはやほとんど使用されていません。

¶ しかし、JavaScriptを使用しないブラウザを使用しているWebユーザーのグループがまだいます。このグループの大部分は、通常のグラフィカルブラウザを使用しているが、セキュリティ上の理由からJavaScriptを無効にしている人々で構成されています。次に、テキストブラウザや、目の不自由な人向けのブラウザを使用している人々がいます。「真剣な」サイトを構築する場合、多くの場合、動作するプレーンなHTMLシステムから開始し、JavaScriptを使用して非必須のトリックや便利な機能を追加するのが良い考えです。