「JavaScript 言語入門」の第 1 回では、JavaScript 言語の絶対的な基礎として、script タグの作成からコメントの使用、HTML 文書に JavaScript ファイルを含める方法、変数の定義、演算子の使用、配列の定義、条件文の使用、関数の定義、ループの使用に至るまで、数多くの話題を取り上げました。今回の記事では第 1 回の続きとして、駆け出しの開発者がこの言語の基礎を理解できるように、前回説明しなかった他の基本的な JavaScript 言語の概念を説明します。この記事で説明する基礎知識によって、使用するライブラリーの理解を深め、そもそもライブラリーを使用する必要があるかどうかを決定できるようになるはずです。さらには、自分でライブラリーを作成してみようという気になるかもしれません。この記事には、全体にわたって、それぞれの概念の使用方法を示すサンプル・コードが満載されています。

イベント

イベントは、JavaScript 言語であらゆるタイプの対話性を Web ページに追加するための触媒となります。すべての HTML 要素には、JavaScript コードをトリガーするために使用できるイベントが関連付けられています。そのうち入力フィールドに関連するイベントは数多くあり、ユーザーが入力フィールドをクリックするか、タブ操作で移動した時点で、JavaScript コードがトリガーされるように focus イベントを関連付けることや、フォーカスが置かれた入力フィールドの外をクリックするか、タブ操作で入力フィールドから移動した時点で、JavaScript コードがトリガーされるように blur イベントを関連付けることもできます。イベントを関連付ければ、それによって実行できるアクションには限りがありません。例えば、blur イベントによって JavaScript コードをトリガーし、このコードで入力フィールドに有効なデータがあるかどうかをチェックして、有効なデータがない場合には自動フィードバックとしてメッセージをインラインで表示するという方法も採れます。以下のサンプル・コードで、focus イベントと blur イベントを使用して、入力フィールドにデフォルトのテキストを表示する方法を説明します。

<input type="text" name="email" value="Enter your email address" 
   onfocus="this.value = '';" onblur="if(this.value == '') 
   this.value = 'Enter your email address';" />

上記の入力フィールドにはデフォルト値が設定されているため、この入力フィールドがWeb ブラウザーに表示されると、フィールドには「Enter your email address (E メール・アドレスを入力してください)」というテキストが示されます。ユーザーがこの入力フィールドをクリックするか、またはタブ操作でこのフィールドに移動したときに、デフォルトのテキストを非表示にするには、focus イベントを使用してフィールドの値を空のストリングに設定します。ユーザーが入力フィールドの外をクリックするか、タブ操作で入力フィールドから離れたら、blur イベントを使用してデフォルト・テキストを再び表示します。ユーザーによってテキストが入力された場合には、そのテキストをそのまま残して表示します。

すべての HTML 要素には、その要素に関連付けられたイベントがあります。表 1 に、最もよく使用される HTML 要素とそれぞれに関連付けられているイベントの一例を記載します。

上に戻る

try...catch と throw

try...catch 文は、エラーをブラウザーに送信したり、カスタム・エラーを表示したりすることなく、コードのエラーをテストする手段となります。JavaScript のエラーが try...catch 文の try ブロック内に含まれていなければ、それに続く catch ブロック内の JavaScript コードは一切実行されず、エラーの処理および表示はブラウザー固有の方法に委ねられることになります。try...catch 文では、try ブロックで JavaScript コードを実行し、エラーが発生した場合は、catch ブロックでそのエラーを処理します。この構文を使用するのは、例えば特定のブラウザーでは機能しない可能性のあるコードを実行する場合です。そのようなコードが try...catch 文の try ブロックに含まれていて、エラーが返された場合、コードは実行されずに catch ブロックでエラーが処理されます。このエラー処理では、実際のエラー・メッセージを表示することもできれば、ユーザーがエラーの発生を知る必要があるかどうかによっては処理を省略することもできます。

try...catch を使用してエラーを処理する

try...catch 文の catch ブロックには、エラー・オブジェクトのデフォルト・パラメーターも組み込まれます。エラー・オブジェクトは、try ブロックで発生したエラーに関する適切な情報を返します。このエラー・オブジェクトには、message と line という 2 つのプロパティーがあります。message は、発生したエラーを正確に伝えるテキストを提供し、line はエラーが発生したコード行を正確に提供します。リスト 1 に、エラー・オブジェクトを使ってエラー・メッセージとエラーが発生した行をアラートする try...catch 文の例を記載します。もちろん、この情報が役立つのはデバッグの際だけですが、これらのプロパティーは、発生したエラーをブラウザーが処理するのに任せることなく、エラーに関するフィードバックをユーザーに提供しようとしている場合に役立つことがあります。

try
{
   // Attempt to execute code that produces an error here
}
catch(err)
{
   var txt = err.message +'\n';
   txt += err.line;
   alert(txt);
}

throw 文を使用して例外を発生させる

try...catch 構成体だけでも素晴らしいエラー処理機能を提供しますが、throw 文を使用することで、さらに高度な機能を提供することができます。throw 文では特定の条件に基づいて例外を発生させることができます。これは、正確でわかりやすい表現でユーザー・フレンドリーなエラー・メッセージを作成するには絶好の手段です。リスト 2 に、throw 文を使用して、try...catch 文の try ブロックに含まれる条件を基準に例外を発生させる単純な例を記載します。

<script type="text/javascript">
var x=prompt("What type of music is Led Zeppelin?","");
try
{ 
   if(x != 'rock and roll')
   {
   throw "Err1";
   }
}
catch(er)
{
   if(er=="Err1")
   {
   alert("Sorry, you're wrong.");
   }
}
</script>

try、catch、throw はいずれも小文字で表記されることに注意してください。大文字を使用すると、JavaScript エラーが発生します。

上に戻る

ポップアップ・ボックスの作成

JavaScript では、いくつかのタイプのポップアップ・ボックスを作成できるようになっています。そのうち最もよく使用されるタイプ (そして、このセクションで説明するタイプ) は、アラート・ボックス、確認ボックス、そしてプロンプト・ボックスです。

アラート・ボックス

本来の目的で使用されることはあまりありませんが、アラート・ボックスは、素早く簡単にページのエラーや警告などの重要なメッセージを表示する手段です。最近では、アラート・ボックスは JavaScript コードのデバッグ手段として最もよく使われており、未だに有効に利用されていると言えますが、アラート・ボックスを本来意図された目的で使用するのはベスト・プラクティスではありません。また、Mozilla Firefox、Apple Safari、または Google Chrome を使用している場合、デバッグには console.log ファイルをそのまま使用することができます。要するに、他のあらゆる手段が失敗した場合には、アラート・ボックスを有望な代替手段として使用できるということです。アラート・ボックスを作成するのは極めて簡単です。alert 関数を 1 行のコードとして入力して引数を渡すだけで、ウィンドウが開き、その渡された値がそこに表示されます。値としては、例えば単純なストリングを入力することができます。あるいは、alert 関数をデバッグに使用する好例として、変数の値を引数として渡し、アラート・ボックスにその値を表示することもできます。以下に、alert 関数を使用してアラート・ボックスを生成する基本的な方法を示します。

alert("This can be a variable or a simple text string");

確認ボックス

確認ボックスは、ユーザーが Web サイトで行った選択を確認するために使用します。Web アプリケーションの開発者であれば、ユーザーが自分のユーザー・アカウントを削除する選択をした場合、その選択について確認してから、ユーザーがリクエストの送信操作に進めるようにするのが賢明でしょう。

通常、confirm 関数は条件文に組み込まれ、ユーザーがその選択内容で処理を進める意思があるかどうかを確認してから、その答えに応じて JavaScript コードを実行するかどうかを決定します。以下は、条件文のなかで confirm 関数を使用して、JavaScript コードを実行するかどうかを決定する例です。

if(confirm("Click for a response"))
{
    alert('You clicked OK');
}
else
{
    alert('You clicked Cancel');
}

プロンプト・ボックス

ユーザーに質問を出して、回答させる簡単な方法を探しているとしたら、まさにプロンプト・ボックスがその必要を満たします。一般に、最近の Web 開発者はインライン・ポップアップ・ウィンドウをカスタムで作成するほうを選びますが、そうは言っても、特にデバッグの際にはプロンプト・ボックスが今でも現役で活躍しています。プロンプト・ボックスを生成するために使用する prompt 関数は、2 つの引数を取ります。1 つはカスタム・テキスト・ストリングで、通常このストリングには質問を指定するか、ユーザーに何らかの応答を促す文を指定します。もう 1 つの引数は、プロンプト・ボックスに表示するテキスト入力のデフォルト値として使用されるテキスト・ストリングです。このデフォルト値はオプションなので、実行時に変更することができます。以下に、prompt 関数を使用してユーザーに質問を出し、prompt 関数から返された値を使って、アラート・ボックスにユーザーの応答を表示する例を記載します。

var response=prompt("What is your favorite band?","Led Zeppelin");
if (response!=null && response!="")
{
   alert("response: "+ response);
}

上に戻る

cookie を使用する

cookie は、JavaScript コードが後でデータを取得して再利用できるように、データをクライアント・サイドに保存するためにあります。幅広く使用されるデータをユーザーのコンピューターに保存することには、多くの利点があります。例えばユーザーのエクスペリエンスをカスタマイズしたり、その前に実行されたアクションに応じて情報の表示方法を決定したりするなど、cookie はさまざまな目的で使用することができます。その一例は、後で Web サイトでの表示に使えるように、cookie を使用してサイトの訪問者の名前やその他の関連情報を保存するというものです。cookie は訪問者の Web ブラウザーに、名前と値のペア、失効日、そして送信先サーバーのドメインとパスが含まれるテキスト・ファイルとして保存されます。

cookie を作成する

cookie を作成するのは簡単です。保存する情報、保存期間、そして後で参照するための名前を決定するだけで、cookie を作成することができます。ただし、作成するのは簡単ですが、その構文には少し注意が必要です。cookie を適切に機能させるには、正しい構文にしなければなりません。以下のサンプル・コードに、cookie を作成してその中にデータを保存する方法の例を示します。

document.cookie =
  'cookiename=cookievalue; expires=Sat, 3 Nov 2001 12:30:10 UTC; path=/'

cookie に保存されるストリングの最初の部分、cookiename=cookievalue は、名前と値のペアです。このペアと 2 番目の部分は、セミコロン (;) で区切られます。ストリングの 2 番目の部分は正しいフォーマットで記述した失効日で、これに続くセミコロンで区切られた 3 番目かつ最後の部分はパスです。

cookie からデータを取得する

cookie にデータを保存するには多少厄介な構文が必要ですが、後日、cookie の名前によって簡単にそこに保存されている値を取得することができます。以下に、名前を基準に cookie の値を取得する方法を示します。

alert(document.cookie);

上記のコードは、現行ドメインの cookie を取得しますが、ドメインには複数の cookie を保存することができます。その場合、document.cookie は配列となります。したがって、特定の cookie の値を取得するには、ターゲットを正しく指定しなければなりません。運のいいことに、リスト 3 のカスタム関数を使えば、cookie の名前をパラメーターとして渡すだけで、cookie の値を受け取ることができます。

function getCookie(c_name)
{
var i,x,y;
var cookieArray = document.cookie.split(";");
for (i=0;i<cookieArray.length;i++)
{
  x = cookieArray[i].substr(0,cookieArray[i].indexOf("="));
  y = cookieArray[i].substr(cookieArray[i].indexOf("=")+1);
  x = x.replace(/^\s+|\s+$/g,"");
  if(x == c_name)
  {
	  return unescape(y);
	  }
	}
}
alert(getCookie('cookiename'));

ご覧のように、強力な関数を提供する cookie によって、サイトの訪問者のためにカスタム・エクスペリエンスを作成することも、あるいは単に、後日使用できるデータを保存することも可能になります。

上に戻る

タイミング

JavScript には、特定のアクションを実行するタイミングを制御および設定するための関数が用意されています。そのうち、最もよく使用されている関数には以下のものがあります。

• setInterval
• clearInterval
• setTimeout
• clearTimeout

setInterval 関数

場合によっては、ユーザーが操作をせずに JavaScript コードを繰り返し実行しなければならないことがあります。そのような場合に簡単に対処できるのが、setInterval 関数です。setInterval は 2 つの必須引数と、1 つのオプション引数を取ります。2 つの必須引数のうちの 1 つは、繰り返し実行する必要があるコードで、もう 1 つは、JavaScript コードを実行する間隔を定義するミリ秒です。3 つ目の引数はオプションで、code パラメーターによって実行される関数呼び出しに渡すために使用することができます。間隔に設定する期間をミリ秒で定義するのは、始めは少し慣れないかもしれません。つまり、1 秒ごとに実行する場合には 1000 ミリ秒を設定し、2 秒ごとに実行する場合には 2000 ミリ秒を設定します。表 2 に、setInterval 関数の各パラメーターとその役割を記載します。

以下に示すのは、setInterval 関数を使用して 10 秒ごとに別の関数を実行し、その関数に引数を渡す方法のサンプル・コードです。引数の値は、実行される関数内で使用されます。この引数は、変数、オブジェクト、またはこのサンプル・コードでのように単純なテキスト・ストリングにすることができます。

setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
}

コードの繰り返しを終了するための関数もあります。

clearInterval 関数

コードの繰り返しを終了するために必要なのは、clearInterval 関数です。ただし、当初設定した間隔に変数名を割り当てることで、後から clearInterval で参照できるようにする必要があります。以下のサンプル・コードに、あらかじめ元の setInterval に対して設定された変数を clearInterval 関数で参照する方法を示します。

var myInterval = setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
   clearInterval(myInterval);
}

ご覧のように、変数を元の setInterval 関数に割り当て、myInterval という名前を設定しています。これで、後から myInterval を使用して setInterval 関数を参照し、設定されている変数の値を変更するか、または元の間隔を clearInterval 関数によって停止することができます。上記の関数は、最初の関数呼び出しで clearInterval 関数が実行されるため、1 度だけ呼び出されることになります。

setTimeout 関数

setTimeout 関数は、特定の時間制約に応じてコードや別の関数を実行できるという点で setInterval 関数に似ています。パラメーターまで setInterval と同じですが (表 2 を参照)、この 2 つの関数には大きな違いがあります。それは、setTimeout 関数はコードを繰り返し実行するのではなく、一度だけ実行するという点です。以下のサンプル・コードに、setTimeout 関数を使用して 10 秒後に関数を実行する方法を示します。

setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
}

setTimeout は、特定のコードを実行する必要がある一方、すぐにはそのコードを実行したくない場合に役立ちます。この関数は、コードの実行を遅らせるには不可欠です。

clearTimeout 関数

何らかの理由で気が変わり、setTimeout で設定した期間を取り消さなければならない場合には、clearTimeout 関数がその役目を果たします。この場合、clearInterval 関数と同じく、setTimeout 関数に変数名を割り当て、後でそれを clearTimeout によって参照して実行中のタイマーを停止します。以下に記載するサンプル・コードに、clearTimeout を使用して setTimeout 呼び出しによって実行中のタイマーを停止する方法を示します。

var myTimeout = setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
   clearTimeout(myTimeout);
}

上記では、元の setTimeout 関数に変数名を割り当て、myTimeout という名前を設定しています。これで、myTimeout を使用して setTimeout 関数を参照し、この関数によって実行中のタイマーを clearTimeout 関数を使用して停止することができます。

上に戻る

まとめ

JavaScript は、最もよく使用されているプログラミング言語の 1 つと言えます。その理由は、この記事を読んで明らかになったはずです。この単純ながらも充実したスクリプト言語には、実にさまざまな可能性があります。Web サイトの訪問者が Web ページをロードした後、そのページを操作できるようにするツールを提供しているという事実は強力です。この記事では、JavaScript 言語の基礎を理解する上でのベースを提供しました。次のステップとして、記事で説明した概念を実践に移し、JavaScript オブジェクトについてさらに詳しく調べてください。

参考文献

学ぶために

• Dev Guru は、JavaScript 言語の包括的なガイドとなります。
  
  
• Web development ゾーンでは、多種多様な Web ベースのソリューションを話題にした記事を揃えています。
  
  
• さまざまな IBM 製品および IT 業界についての話題に絞った developerWorks の Technical events and webcasts で時代の流れをキャッチしてください。
  
  
• Twitter で developerWorks をフォローしてください。
  
  

製品や技術を入手するために

• JavaScript 言語の基礎を理解するに至ったら、jQuery ライブラリーを利用して開発を迅速化してください。
  
  
• オープンソースのモジュール式 JavaScript ライブラリー、Dojo Toolkit は、特定のプラットフォームに依存しない JavaScript/Ajax ベースのアプリケーションおよび Web サイトを素早く開発するのに役立ちます。
  
  
• IBM のソフトウェアを無料で試してみてください。試用版をダウンロードすることも、オンライン評価版にログインすることも、Sandbox 環境で製品を操作することも、クラウドを介して IBM 製品にアクセスすることもできます。100 を超える IBM 製品の評価版のなかから選ぶことができます。
  
  

議論するために

• 今すぐ developerWorks で自分のプロフィールを作って、JavaScript に関するウォッチ・リストをセットアップしてください。developerWorks コミュニティーとずっとつながっていられます。
  
  
• Web 開発に興味を持つ他の developerWorks メンバーを見つけてください。
  
  
• Web のトピックを専門とする developerWorks グループに参加して、知識を共有してください。
  
  
• Roland Barcia が彼のブログで Web 2.0 とミドルウェアについて語っています。
  
  
• developerWorks のメンバーが共有する Web 関連のブックマークをフォローしてください。
  
  
• Web 2.0 Apps フォーラムで、素早く回答を得てください。
  
  
• Ajax フォーラムで、素早く回答を得てください。
  
  

著者について

Kris Hadlock は、1996年から契約 Web 開発者および設計者として、SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software、Fire Mountain Gems などの企業のプロジェクトを手掛けてきました。著書には『Ajax for Web Application Developers』(Sams)、『The ActionScript Migration Guide』(New Riders) があります。また、コラムニストおよびライターとしても、Peachpit.com、InformIT.com、Practical Web Design magazine などの数々の Web サイトや設計関連の雑誌で活躍しています。彼は、フォームと関数の融合を専門とする Web 設計およびソフトウェア開発会社、www.studiosedition.com の創始者でもあります。

この記事を評価する

コメント

上に戻る

目次

• イベント
• try...catch と throw
• ポップアップ・ボックスの作成
• cookie を使用する
• タイミング
• まとめ
• 参考文献
• 著者について
• コメント