JavaScript 言語の基礎知識を身につけたいですか?この記事では、初心者向けに JavaScript の基本となる概念を紹介し、それらの概念をサンプル・コードで具体的に説明します。

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris 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 の創始者でもあります。



2011年 4月 05日

JavaScript 言語は、ますます盛んに使われるようになっており、今やインターネットで使われる言語として最も知れ渡った言語の 1 つと言えるほどになっています。さまざまなプラットフォームとブラウザーで使用できる JavaScript 言語は、バックエンドの言語を選り好みしません。また、開発を支援する多種多様なライブラリー (非常に優れたライブラリーもあります) が揃っているため、開発時間などの短縮につながります。その一方で問題となるのは、これらのライブラリーは本来の JavaScript 言語から逸脱している場合があるため、駆け出しの開発者が言語の基礎を理解できないことです。この記事では、初心者が基本知識を身につけられるように、JavaScript 言語の基本となる概念を取り上げて、この言語の基礎を説明します。さらに、それぞれの概念を実際に使用したサンプル・コードもこの記事には満載されています。

JavaScript 言語の概要

JavaScript 言語は、HTML (HyperText Markup Language) ページに双方向性を追加できるようにする、無料のクライアント・サイド・スクリプト言語です。クライアント・サイドであるということは、JavaScript 言語はブラウザーで実行され、サーバー・サイドでは使用されないことを意味します。クライアント・サイド・スクリプトは、サーバーから提供された Web ページがブラウザーによってロードされた後、その Web ページをユーザーが操作できるようにします。例えば Google マップでは、JavaScript 言語を使用して、ユーザーが地図を上下左右に動かしたり、ズームイン/ズームアウトしたりするなどの操作をできるようにしています。JavaScript 言語を使用しないとすると、ユーザーが操作をするたびに、いちいち Web ページをリフレッシュしなければなりません。もちろん、Web ページが Adobe Flash や Microsoft® Silverlight などのプラグインを使用している場合はその限りではありませんが、JavaScript 言語を使用する場合、プラグインは必要ありません。

JavaScript 言語を使用すると、Web ページのロード後にユーザーがその Web ページを操作できるようになるため、開発者は一般に以下の目的で JavaScript 言語を使用します。

  • HTML 要素とその値を動的に追加、編集、削除する
  • Web フォームを送信する前に検証する
  • 今後のアクセスに備え、cookie を作成してユーザーのコンピューターにデータを保存したり、保存したデータを取得したりする

本題に入る前に、以下の基本だけを押さえておいてください。

  • JavaScript コードを HTML ファイルに含めるには、コードを script タグで囲み、その script タグに type 属性 text/javascript を指定します (リスト 1 を参照)。
  • JavaScript の文は必ずセミコロンで終わります。
  • 大/小文字の区別があります。
  • すべての変数名は、文字またはアンダーバーで始めなければなりません。
  • コメントを使用して、スクリプトの特定の行を識別することができます。コメントを書くには、二重スラッシュ (//) の後にコメントを続けます。
  • コメントは、スクリプトをコメント・アウトして実行されないようにすることもできます。スクリプトの複数の行をコメント・アウトするのに役立つ方法は、/* と */ を使用することです。/* と */ で囲まれたスクリプトは実行されません。
リスト 1. JavaScript コードを HTML ファイルに含めるために必要な script タグと type 属性
<script type="text/javascript"></script>

JavaScript をサポートしないブラウザー、またはユーザーが JavaScript を無効にしているブラウザーに対して JavaScript コードを隠すには、単に JavaScript の文の前後でコメント・タグを使用します (リスト 2 を参照)。

リスト 2. JavaScript をサポートしないブラウザーに対しては、コメントを使用して JavaScript コードを隠す
<script type="text/javascript">
<!--
Example statement here
//-->
</script>

JavaScript コードを Web ページに含める際に最もよく使われる方法は、script タグ内に src 属性を追加し、この属性を使用して外部 JavaScript ファイルからコードをロードするという方法です (リスト 3)。

リスト 3. HTML ファイルの中で外部 JavaScript ファイルを読み込む
<script type="text/javascript" src="path/to/javascript.js"></script>

外部 JavaScript ファイルは、以下に挙げる実用的な理由から、JavaScript コードを含める手段として最も一般的に使用されています。

  • HTML ページに含まれるコードが少なければ少ないほど、検索エンジンが Web サイトをクロールして索引を付ける時間が短縮されます。
  • JavaScript コードを HTML から分離しておけば、コードが簡潔になり、管理も極めて容易になります。
  • HTML コードの中では、複数の JavaScript ファイルを読み込むことができます。そのため、JavaScript ファイルを画像と同じように Web サーバー上の別のフォルダー構造内に分離しておけば、コードを管理しやすくなります。簡潔で整理されたコードは常に、Web サイトを容易に管理する鍵となります。

変数

変数には、後で取得したり、新しいデータで更新したりすることができるデータが格納されます。変数に格納するデータは、値または式にすることができます。JavaScript 言語の式には、3 つのタイプがあります。表 1 では、これらの式について説明します。

表 1. JavaScript の式
説明
演算数値に評価します。
文字列文字列に評価します。
論理ブール値 (true または false) に評価します。

変数には、ローカル変数とグローバル変数の 2 つのタイプがあります。ローカル変数を宣言するには var キーワードを使用します。var キーワードを使用しなければ、変数はグローバル変数になります。var キーワードを使用した場合、その変数には宣言をした場所のスコープの外部からはアクセスできないため、ローカル変数であると考えられます。例えば、関数内でローカル変数を宣言すると (関数については、記事の終わりのほうで説明します)、関数の外部からはその変数にアクセスすることができず、変数はその関数のローカル変数となりますが、同じ変数を var キーワードを使用しないで宣言すると、その変数には関数の中からだけでなく、スクリプト全体からアクセスできるようになります。

リスト 4 に一例として、値 10 が代入される num というローカル変数を記載します。

リスト 4. ローカル変数を宣言する
var num = 10;

スクリプト内の別の箇所で num 変数の値にアクセスするには、変数をその名前で参照します (リスト 5 を参照)。

リスト 5. 変数の値にアクセスする
document.write("The value of num is: "+ num);

上記の文を実行すると、「The value of num is: 10」が出力されます。document.write はデータを Web ページに書き込む関数です。記事ではこれ以降、この関数を使用して Web ページにサンプル・コードの実行結果を書き込みます。

変数に演算式を格納するには、単に演算結果の値に変数を割り当てます (リスト 6 を参照)。この場合、変数に格納されるのは、演算そのものではなく、演算の結果です。したがって、以下の文の結果も同じく「The value of num is: 10」となります。

リスト 6. 演算式を格納する
var num = (5 + 5);
document.write("The value of num is: "+ num);

変数の値を変更するには、変数に割り当てられた名前で変数を参照し、等号を使用して新しい値を代入します (リスト 7 を参照)。この場合、var キーワードを使用する必要はありません。変数はすでに宣言されているためです。

リスト 7. 既存の変数の値を変更する
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num = 15;
document.write("The new value of num is: "+ num);

このスクリプトを実行すると、「The value of num is: 10」に続けて「The new value of num is: 15」が出力されます。

このセクションでは変数について説明するなかで、次に扱うトピックである演算子も取り入れました。値を変数に代入するために使用した等号 (=) は、代入演算子です。また、5 + 5 の加算で使用したプラス記号 (+) は算術演算子です。次のセクションでは、JavaScript 言語で使用できるすべての演算子を取り上げ、それぞれの使用方法を説明します。


演算子

JavaScript 言語で演算を行うには、必ず演算子が必要です。演算子には、加算、減算、比較などがあります。JavaScript 言語での演算子には、以下の 4 つのタイプがあります。

  • 算術
  • 代入
  • 比較
  • 論理

算術演算子

算術演算子は、加算、減算、乗算、除算などの基本的な数学演算を行います。表 2 に、JavaScript 言語で使用できるすべての算術演算子とそれぞれの説明を記載します。

表 2. 算術演算子
演算子説明
+加算
-減算
*乗算
/除算
%モジュロ演算 (除算の余り)
++インクリメント
--デクリメント

代入演算子

算術演算子が基本的な数学演算を行う一方、代入演算子は値を JavaScript 変数に代入します。前のセクションで値を変数に代入するときに使用したのが、最も一般的な代入演算子です。表 3 に、JavaScript 言語で使用できるすべての代入演算子とそれぞれの説明を記載します。

表 3. 代入演算子
演算子説明
=値を代入します。
+=値を加算して変数に代入します。
-=値を減算して変数に代入します。
*=値を乗算して変数に代入します。
/=値を除算して変数に代入します。
%=値をモジュロ演算して変数に代入します。

等号を使用して値および式を変数に代入する例はすでに記載しましたが、ここではそれよりも少しわかりにくい代入演算子の使用例を紹介します。値を加算して変数に代入するという概念は、初めは奇異に感じるかもしれませんが、実際にはごく単純な概念です (リスト 8 を参照)。

リスト 8. 値を加算して変数に代入する
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num += 5;
document.write("The new value of num is: "+ num);

上記のスクリプトを実行すると、「The value of num is: 10」に続けて「The new value of num is: 15」が出力されます。このように、スクリプトで使用している演算子が、値を追加してから変数に代入していることがわかります。この演算子は、リスト 9 に記載するスクリプトを簡潔に表現する手段にもなります。

リスト 9. 値を加算して変数に代入する (コードが長くなる方法)
var num = 10;
document.write("The value of num is: "+ num);

// Update the value of num to 15
num = (num + 5);
document.write("The new value of num is: "+ num);

比較演算子

比較演算子は、2 つの変数 (またはその値) の間にある関係を判断します。比較演算子の使用例としては、条件文の中で比較演算子を使用して変数またはその値を比較するロジックを作成し、その文が true または false のどちらであるかを評価します。表 4 に、JavaScript 言語で使用できるすべての比較演算子とそれぞれの説明を記載します。

表 4. 比較演算子
演算子説明
==等しい
===値およびオブジェクトの型が等しい
!=等しくない
>より大きい
<より小さい
>=以上
<=以下

変数および値の比較は、あらゆるロジックを作成する際の基本です。リスト 10 に、等しいかどうかを評価する比較演算子 (==) を使用して、10 が 1 と等しいかどうかを判断する場合の例を記載します。

リスト 10. 比較演算子を使用する
document.write(10 == 1);

論理演算子

論理演算子は一般に、条件文の中で比較演算子と組み合わせて使用されます。表 5 に、JavaScript 言語で使用できるすべての論理演算子とそれぞれの説明を記載します。

表 5. 論理演算子
演算子説明
&&論理積
||論理和
!論理否定

変数と演算子を習得したところで、次は単純な変数よりも多くの内容を格納する配列の作成方法を説明します。


配列

配列は変数と似ていますが、1 つの名前の下に複数の値および式を保持することができるという点で異なります。配列を強力なものにしているのは、複数の値を 1 つの変数に格納できるところです。JavaScript の配列に格納できるデータには、量の制約も、型の制約もありません。さらに、配列をスクリプトで宣言した後は、宣言したスコープ内にある限り、配列に含まれるすべての要素のあらゆる値に随時アクセスすることができます。配列には、JavaScript 言語で使用できる任意のデータ型、さらには他の配列も格納することができますが、最も一般的な使用方法は、同様のデータを 1 つの配列に格納し、配列にはそこに含まれる要素に関連する名前を割り当てることです。リスト 11 に、2 つの別個の配列を使用して、それぞれに同様のデータを格納する例を記載します。

リスト 11. 同様の値を配列に格納する
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");

上記の項目はすべて 1 つの配列に格納することも可能ですが、そうすると論理的ではなくなり、あとで例えば配列内のデータを識別する際などに問題が生じる可能性があります。

配列に含まれる値にアクセスするのは簡単ですが、そこには 1 つの罠があります。それは、配列では常に ID は 1 ではなく 0 から始まることです。最初のうちは混乱しがちですが、ID は 0 から始まって、例えば 1、2、3 のようにインクリメントされていきます。配列の要素にアクセスするには要素の ID を指定し、それによって配列内での項目の位置を参照する必要があります (リスト 12 を参照)。

リスト 12. 同様の値を配列に保存する
var colors = new Array("orange", "blue", "red", "brown"); 
document.write("Orange: "+ colors[0]);
document.write("Blue: "+ colors[1]);
document.write("Red: "+ colors[2]);
document.write("Brown: "+ colors[3]);

配列の任意の要素に値を代入することも、要素の値を更新することも可能です。それには、前に配列の要素にアクセスしたときと同じように行います (リスト 13)。

リスト 13. 配列の特定の要素に値を代入する
var colors = new Array();
colors[0] = "orange";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "brown";
document.write("Blue: "+ colors[1]);

// Update blue to purple
colors[1] = "purple";
document.write("Purple: "+ colors[1]);

以上で、変数、演算子、配列については十分に理解できたはずです。次は、今までに学んだ知識を実践に移し、ロジックを作成する作業に取り掛かります。


条件文

条件文は、スクリプトやプログラミング言語であらゆるタイプのロジックを作成する上での骨格となります。それは、JavaScript 言語の場合にも例外ではありません。条件文は、作成されたスクリプトの条件に基づいて、実行するアクションを判断します。JavaScript 言語で条件文を作成するには、表 6 に記載する 4 つの方法があります。

表 6. 条件文
説明
if特定の条件が true であれば、スクリプトを実行します。
if...else特定の条件が true であれば、ある特定のスクリプトを実行し、false であれば別のスクリプトを実行します。
if...else if...else複数の条件のうちの 1 つが true であれば、その条件に応じたスクリプトを実行し、すべての条件が false であれば、また別のスクリプトを実行します。
switch複数のスクリプトのうちの 1 つを実行します。

ある特定の条件が true の場合にだけスクリプトを実行するには、if 文を使用します。リスト 14 に、if 文を比較演算子と一緒に使用して、条件が true の場合にスクリプトが実行されるようにする方法を説明します。

リスト 14. if 文を使用する
var num = 10;
if(num == 5)
{
   document.write("num is equal to 5");
}

条件が true であれば一方のスクリプトを実行し、false であればもう一方のスクリプトを実行する場合に if...else 文を使用します (リスト 15 を参照)。

リスト 15. if...else 文を使用する
var num = 10;
if(num == 5)
{
   document.write("num is equal to 5");
}
else
{
   document.write("num is NOT equal to 5, num is: "+ num);
}

それぞれの条件に応じて、異なるスクリプトを実行しなければならない場合には、if...else if...else 文を使用します (リスト 16 を参照)。

リスト 16. if...else if...else 文を使用する
var num = 10;
if(num == 5)
{
     document.write("num is equal to 5");
}
else if(num == 10)
{
   document.write("num is equal to 10");
}
else
{
  document.write("num is: "+ num);
}

switch 文は、変数の値が別の変数の値よりも大きいか、小さいかを判断するためには使用できないという点で、if 文とは異なります。リスト 17 に、switch 文を使って実行対象のスクリプトを判断するのが適切な例を示します。

リスト 17. switch 文を使用する
var num = 10;
switch(num)
{
   case 5:
      document.write("num is equal to 5");
      break;
   case 10:
      document.write("num is equal to 10");
      break;
   default:
      document.write("num is: "+ num);
}

リスト 17 では case 節、break 文、そして default 節が使用されていることにお気づきかと思います。switch 文には、これらの節と文が欠かせません。case 節は、switch の値が case 節で使用されているデータの値と等しいかどうかを判断します。break 文は、switch 文の実行を取り止めて、残りの文が実行されないようにします。default 節には、case 文のいずれも実行されない場合、または実行された case 文に break 文がない場合にデフォルトで実行されるスクリプトが記述されます。例えばリスト 18 では、実行された case 文に break 文が使用されていなければ、複数の case 文と default 文を実行することができます。

リスト 18. break を排除して複数のコード行を実行する
var num = 10;
switch(num)
{
   case 5:
      document.write("num is equal to 5");
      break;
   case 10:
      document.write("num is equal to 10");
   default:
      document.write("num is: "+ num);
}

このスクリプトを実行すると、「num is equal to 10」に続けて「num is: 10」が出力されます。これは、switch 文のフォールスルーと呼ばれることもあります。

このセクションの冒頭で説明したように、条件文は、あらゆるスクリプトまたはプログラミング言語でのすべてのロジックの骨格ですが、関数を使用しなければ、複雑に込み入ったコードになってしまいます。


関数

関数が役立つ理由はさまざまにあります。関数はスクリプトのコンテナーであり、イベントが発生した場合、あるいはその関数が呼び出された場合にだけ、そのスクリプトが実行されます。したがって、ブラウザーが Web ページに組み込まれたスクリプトを最初にロードして実行するときには、関数は実行されません。関数の目的は、あるタスクを行うスクリプトを内部に含めることによって、ユーザーが随時、そのタスクを行うためにスクリプトを実行できるようにすることです。

関数を作成するのは簡単で、function の後に、半角スペース、そして関数の名前を続ければよいのです。関数の名前は自由に選べます。ただし、重要な点として、その関数が実行するタスクに関連した名前にしてください。リスト 19 は、既存の変数の値を変更する関数の例です。

リスト 19. 単純な関数を作成する
var num = 10;
function changeVariableValue()
{
   num = 11;
}
changeVariableValue();
document.write("num is: "+ num);

リスト 19 の例は、関数を作成する方法を示しているだけでなく、関数を呼び出して変数の値を変更する方法も示しています。この例で変数の値を変更できる理由は、関数と同じく、変数がメイン・スクリプトのスコープ内で宣言されているからです。そのため、関数は変数を認識します。一方、変数を関数内で宣言すると、その関数の外部では変数にアクセスすることができなくなります。

関数は、関数パラメーターを使ってデータを受け入れることも可能です。関数はパラメーターを 1 つ以上、持つことができます。そして関数パラメーターの数に応じて、関数呼び出しには 1 つ以上の引数を指定することができます。パラメーターと引数を混同してしまうことはよくありますが、パラメーターは関数定義の一部であり、引数は関数を呼び出すときに使用する表現です。リスト 20 に、パラメーターを持つ関数と、引数を指定した関数コールの例を記載します。

リスト 20. 関数のパラメーターを使用する
var num = 10;
function increase(_num)
{
   _num++;
}
increase(num);
document.write("num is: "+ num);

上記の関数は、この関数に渡された引数の値をインクリメントします。この例での引数は、すでに宣言してある変数です。変数を引数として関数に渡すことによって、変数の値を 11 に増やしています。

return 文も関数の中でよく使われます。これは、関数内のスクリプトが実行された後、その結果の値を返す文です。この文を使用すれば、例えば関数によって返された値を変数に代入することができます。リスト 21 に例として、スクリプトを実行した後に、関数から値を返す方法を示します。

リスト 21. 関数内で return 文を使用する
function add(_num1, _num2)
{
   return _num1+_num2;
}
var num = add(10, 10);
document.write("num is: "+ num);

上記のスクリプトを実行すると、「num is: 20」と出力されます。この関数の利点は、リスト 20 のように同じ変数の値をその都度変更しなくても、関数に任意の 2 つの数値を渡せば、関数がその値を合計して任意の変数に代入できる値を返すようにできることです。


ループ

前のセクションで説明したように、配列は再利用可能なデータを大量に格納する優れた方法ですが、それは手始めに過ぎません。for ループと while ループによって、これらの配列を繰り返し処理し、それぞれの値にアクセスして、その値を使ってスクリプトを実行することができます。

JavaScript 言語で最もよく使用されるタイプのループは、for ループです。for ループは通常、数値が代入される 1 つの変数からなります。その変数を比較演算子と併せて使用し、別の値と比較することによって、最終的に数値がインクリメント/デクリメントされるという仕組みです。通常、forループ内での比較では、初期変数の数値が別の数値よりも小さいか、大きいかが判断されます。この条件が true である間はループが実行されて、変数がインクリメント/デクリメントされます。これは、条件が false に評価されるまで続きます。リスト 22 に一例として、数値が配列の長さよりも小さい間は実行される for ループの作成方法を示します。

リスト 22. for ループを作成して配列を繰り返し処理する
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i<colors.length; i++)
{
   document.write("The color is: "+ colors[i] +"<br/>");
}

配列の length プロパティーは、配列の要素の数と等しい値になります。ここでも注意しなければならないのは、配列では ID が 0 から始まることです。したがって、配列に要素が 4 つあるとしたら、length プロパティーは 4 になりますが、配列内の ID は 0、1、2、3 となり、4 という ID はありません。

ループのタイプには、while ループもあります。while ループは for ループよりも処理速度に優れていますが、配列を繰り返し処理するのには適していません。while ループが適しているのは、特定の条件が true である限りスクリプトを実行するといったような場合です。リスト 23 に、数値の変数が 10 より小さい間は実行される while ループの作成方法を示します。

リスト 23. while ループを作成する
var i = 0;
while(i<10)
{
   document.write(i +"<br/>");
   i++;
}

while ループ内のスクリプトには、while ループの条件が false になるまで数値の変数を繰り返し処理する行が含まれていることに注意してください。この行がなければ、無限ループに陥ることになります。


まとめ

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

参考文献

学ぶために

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

  • JavaScript 言語の基礎を理解するに至ったら、jQuery ライブラリーを利用して開発を迅速化してください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=651198
ArticleTitle=JavaScript 言語入門
publish-date=04052011