必要条件

この記事に必要な予備知識

この記事は、JavaScriptの事前の知識を必要としません。ただし、基本的なHTMLの知識を習得しておくことをお勧めします。Webブラウザーの操作経験があることを前提としています。



必要となるほかの製品

  • Chrome、Safari、Firefox、OperaなどのWebブラウザー
  • Dreamweaverを使用しない場合は、任意のソースコードエディター

ユーザーレベル

初級

原文 作成日: 2012/10/1
Introduction to JavaScript for the total beginner

JavaScriptはシンプルながら強力な人気の高いプログラミング言語で、Webブラウザーに組み込まれています。HTMLとCSSの知識を持っているWebデザイナーにとって、JavaScriptを学習することは特に有益です。なぜなら、JavaScriptはWebページをインタラクティブ対応にするために使われるからです。ただし、JavaScriptはWebページをインタラクティブにするだけにとどまりません。JavaScriptは、Node.jsなどのフレームワークを使ったサーバー側のプログラミングにも使用できます。

このチュートリアルでは、コンピュータープログラミングの2つの基本コンセプトである計算と変数を含む、JavaScriptの基本事項を学習します。JavaScriptを使ってWebサイトをインタラクティブにしたいと考えている場合は、コンピュータープログラミングのコアとなるコンセプトを学習する必要があります。HTMLとJavaScriptを使うと、ボタンのクリックなど、ユーザーのイベントに対応して、HTML要素の内容を変更することができます。

「Hello World」を表示するシンプルなJavaScriptプログラムの作成

JavaScriptプログラムとは、記述された順番にWebブラウザーで実行される一連のステートメントまたはコマンドです。最もシンプルなJavaScriptプログラムは1行に収まりますが、大きなプログラムになると、何千行もの長さになることもあります。コンピュータープログラミングの伝統では、最初に学ぶプログラムは、「Hello World」というメッセージを出力するプログラムです。次のコードは、JavaScriptのHello Worldプログラムを、有効なWebページとしてWebブラウザー上で実行できるように、数行のHTMLではさんだものです。

<!doctype html> <title>JavaScript Test</title> <script> alert('Hello World!'); </script>

上の例では、JavaScriptのコードは<script></script>の間の1行です。この行には、引用符で囲まれたテキストを含んだメッセージボックスを表示するように、Webブラウザーに指示するJavaScriptのalertコマンドが記述されています。JavaScriptでは、メッセージ前後の引用符は一重引用符と二重引用符がありますが、同じ役割を果たす限り、どちらも使用できます。

HTMLに精通している方は、コード例になぜ<html><head>および<body>タグが記述されていないのか、不思議に思うかもしれません。実際のところ、これらのタグはHTML4とHTML5では省略可能です。このチュートリアルの例では、省略可能なタグは省略することを推奨するGoogleスタイルガイドに準拠しています。

このプログラムを実行するには、次の手順を実行します。

  1. この5行のコードをコピーして、テキストエディター(Dreamweaver、メモ帳など)に貼り付けます。
  2. ファイルをtest.htmlという名前で保存します。
  3. お気に入りのWebブラウザーを使って、このファイルを開きます。
  4. ページが読み込まれると、「Hello World!」というメッセージボックスが直ちに表示されます。
  5. test.htmlを編集して、メッセージボックスに表示されるメッセージを好みに合わせて変更し、コードを保存します。次にWebブラウザーがアクティブになっているときにF5キーを押してページを更新します。

alertステートメントがセミコロンで終了している点に注意してください。JavaScriptは、CやJavaなどのプログラム言語とは異なり、セミコロンは省略可能です。ただし、セミコロンを省略すると問題が発生することがまれにあるため、各コマンドの後にセミコロンを付けることをお勧めします。

Hello Worldプログラムを作成するもう1つの方法は、Webページに直接テキストを表示する方法です。次のコードを使うことで、これを実行することができます。

<!doctype html> <title>JavaScript Test</title> Hello USA <script> document.body.innerHTML = 'Hello World'; </script>

このWebページが読み込まれると、最初に「Hello USA」というテキストがブラウザーに表示されます。次にscriptタグ間のJavaScript行がブラウザー上で直ちに実行され、テキストが「Hello World」というフレーズに置き換えられます。この処理は非常に迅速に実行されるため、変更を目で確認することはできません。この処理が正常に動作するのは、document.body.innerHTMLがJavaScriptコードの特殊なビットで、Webページ全体の内容にアクセスするからです。document.body.innerHTML = 'Hello World'を使用すると、Webページの内容が「Hello World」に設定されます。最初は混乱するかもしれませんが、JavaScriptの基本が理解できれば、わかるようになります。

計算の実行

JavaScriptでの数値の計算は、Microsoft Excelなどの表計算アプリケーションで合計を計算する処理に似ています。例えば、*記号は、JavaScriptとExcelの両方でかけ算を意味します。しかし、違いもいくつかあります。例えばExcelでは2^4は2の4乗、つまり16になります。JavaScriptでは、^はビット単位の排他的論理和を意味しますが、これはもっと高度なチュートリアル向けのトピックです。

JavaScriptでは、演算順序やかっこ(丸かっこ)の使用に関する通常の数学的規則もすべて適用されます。したがって、例えば足し算(+)と引き算(-)の前に、かけ算(*)と割り算(/)が実行されます。次のJavaScriptのコード例では、警告ボックス内に簡単な計算結果が表示されます。

alert(32 + 9 * 1.8);

前述の計算では、ニュージーランドの現在の気温が摂氏から華氏に変換され、回答が警告ボックスに表示されます。JavaScriptでの計算について詳しくは、Code Avengersのレッスン2~5を参照してください。

通常、JavaScriptで固定値の計算をすることはめったにありません。一般的に言えば、JavaScriptの計算は、Webサイトのビジターが入力した値に基づいて実行されることが多いでしょう。次のセクションでは、これをどのように処理するかを説明します。

変数の処理

サイトのビジターから入力を取得する方法の1つは、JavaScriptのpromptコマンドを使用する方法です。例えば、次のコード行を使用できます。

prompt('What is the temperature in Celcius?');

前述のコードを実行すると、質問を表示するプロンプトボックスが表示されます。プロンプトボックスには、回答を入力するテキストフィールド、「OK」ボタンおよび「Cancel(キャンセル)」ボタンが含まれています。プロンプトボックスの外観を確認するには、前のセクションのHTMLページのscriptタグ内のコードを貼り付け、ブラウザーでこのコードを実行します。

promptコマンドとalertコマンドによって表示されるボックスの外観は地味なものです。このボックスの外観はWebブラウザーごとに異なっています。そのため、これらのボックスは一般的に、JavaScriptプログラムをテストする場合にだけ使われます。見栄えのする警告ボックスを表示するには、HTML、CSSおよびJavaScriptコードが大量に必要です。幸いなことに、多くのWeb開発者が警告ボックスを作成し、無料で使えるようにそのコードをオンラインで公開しています。例を見たい場合は、jQuery UIサイトのユーザーインターフェイスに関するページを参照してください。このツールキットを使用するには、ユーザー独自のプロジェクトにダイアログボックスを実装するため、JavaScriptの知識がごくわずか必要ですが、これは偉大なリソースです。

変数の作成

前のセクションでは、ユーザーに回答を求める方法を学習しましたが、その回答を格納して利用するにはどうすればいいでしょう。ここで変数が活躍します。変数とは、取得した情報を格納して、後からプログラム内で編集するために使われる簡易版プレースホルダーです。例えば、次のコード行を実行すると、temperatureという名前の変数が作成され、数値12が割り当てられます。

var temperature = 12;

変数を作成するコード行は、variable(変数)の略語であるvarで始まります。その後、変数の名前、=記号、格納する値の順に続きます。数学では、=は、4 * 3 = 2 * 6 = 12など、2つが同じ値であることを意味します。JavaScriptプログラミングの等号記号は、変数が割り当てられることを意味します。上記のコード行を通常の英語として読むと、「temperatureという名前の変数を作成して、その変数に数値12を割り当てる」ということになるでしょう。

ビジターがプロンプトボックスに入力した回答を格納するには、次のようなコードを使用します。

var temperature = prompt('What is the temperature in celcius?'); alert(32 + temperature * 27);

このコードを実行すると、質問とプロンプトボックスが表示されます。ビジターが回答を入力して「OK」をクリックすると、回答がtemperature変数に華氏で格納されます。次のコード行では、この変数を使って温度の換算値を計算し、その値を警告ボックスに表示します。

注意:「Cancel(キャンセル)」をクリックすると、nullという特殊な値が変数に格納されます。null値について詳しくは、Code Avengersのレッスン17を参照してください。

定数

JavaScriptは、ユーザー入力を格納する変数を使用するだけではありません。変化することがない定数値の格納にも変数が使われます。次のコード例では、定数(名前を大文字で表記します)を使用します。

var KILOS_TO_POUNDS = 2.2; var weight = prompt('What is your weight in kilos?'); alert(POUNDS_TO_KILOS * weight);

上記のコードでは、最初の行でキログラムをポンドに変換する定数が生成されます。次の行では体重の入力を求めます。入力された値はweightという名前の変数に格納されます。最後の行で体重をポンドに変換し、計算結果を警告ボックスに表示します。

キログラムをポンドに変換する定数名には、すべて大文字が使われている点に注意してください。JavaScriptコードの作成時、定数名をすべて大文字にする必要はありませんが、このように実践することをお勧めします。変数名がすべて大文字で記述されていれば、変数に格納される値が定数であり、変化しないことが一目で確認できます。

定数を使用すると、JavaScriptコードが読みやすくなります。2.2と記述することも可能で、入力回数も少なくて済みますが、定数に名前を割り当てると、コードが理解しやすくなります。例えばalert(4 + 12 * 27);というコードを目にしても、何を計算しているか推測することは困難です。しかし、次のようなコードであれば、機能が簡単にわかります。

var MONTHS_IN_YEAR = 12; var myAgeInYears = 27; var monthsSinceMyLastBirthday = 4; alert(monthsSinceBirthday + myAgeInYears * MONTHS_IN_YEAR);

上記のコード例では、生まれてからの月数を計算します。

注意:変数を使用するその他の理由については、Code Avengersのレッスン5を参照してください。

文字列変数

変数は数値を格納するように設計されているだけではありません。変数は、一連の文字を格納することもできます。コンピュータープログラミングではこれを文字列と呼びます。テキストを格納する変数を文字列変数と呼びます。JavaScriptコードでは、引用符で囲まれた一連の文字を、「文字列リテラル」と呼びます。

次のコード行では、nameという文字列変数が生成され、「Mike」というテキストが割り当てられます。

var name = 'Mike';

次のコードは、ビジターに名前を入力するように求め、入力された名前を使ってあいさつするメッセージを出力します。

var name = prompt('What is your name?'); alert('Hello ' + name + ', nice to meet you');

上記コードを実行し、自分の名前を入力すると、次のようなメッセージが表示されます。「Hello Mike, nice to meet you.」上記コードの2番目の行では、プラス(+)記号を使って、リテラル文字列と文字列変数が結合されます。JavaScriptでは、プラス(+)記号に2種類の用途があります。リテラル数値と数値変数と一緒に使用すると、数値が加算されます。2 + 46になります。しかしプラス記号(+)を文字列と一緒に使用すると、文字列が結合されます。例えば'Code' + 'Avengers''CodeAvengers'になります。

文字列を使った計算の結合

計算の答えを単に警告ボックスに表示するだけでは、あまり役に立つとは言えません。数値の意味を説明するテキストも併せて表示することで、利便性が向上します。次のコード例は、テキスト文字列の表示方法を示しています。

var KILOS_TO_POUNDS = 2.2; var weight = prompt('What is your weight in kilos?'); alert('Your weight in pounds is ' + POUNDS_TO_KILOS * weight);

このコードの最初の2行は、以前と同じです。このバージョンでは、3行目の計算の前に文字列リテラルが記述されています。このコードを実行して、自分の体重(73)を入力すると、警告ボックスが表示され、次のメッセージが表示されます。「Your weight in pounds is 160.6.」

3行目を確認する際、JavaScriptではかけ算(*)は常に足し算(+)より先に実行されるということを思い出してください。この例では、ブラウザーで最初にPOUNDS_TO_KILOS * weightが計算されます。筆者の場合、この値は160.6になります。次に、この計算結果と文字列リテラルが結合され、'Your weight in pounds is 160.6'という文が生成され、警告ボックスにテキストが表示されます。

考慮しなければならないもう1つの重要な点は、2行目のweight変数に実際に格納されるのは数値ではなく、文字列だということです。プロンプトボックスで入力されたユーザー入力は常に文字列として格納されます。この例では、いずれにしても計算が実行されます。かけ算(*)記号が文字列と数値(または別の文字列)の間で使われた場合、文字列は自動的に数値に変換されるからです。したがって、'12' * 5'12' * '5'または12 * 5はすべて数値60に変換されます。いずれかの文字列が数値に変換できない場合、計算は失敗します。'blah' * 5'Five' * 5という行を実行した場合、両方とも計算は失敗し、結果はNaNと呼ばれる特殊なJavaScript値となります。これは「数値ではない」という意味です。

足し算(+)記号の場合、事情は少し異なります。足し算(+)記号を数値と文字列に対して使用した場合、文字列が数値に変換できるかどうかにかかわらず、数値と文字列の結合が実行されます。したがって、'12' + 5'12' + '5'または'12' + 5の実行結果はすべて、'125'という文字列になります。JavaScriptを作成する場合、この動作に注意してください。

注意:文字列と数値の結合について詳しくは、Code Avengersのレッスン9を参照してください。

ユーザー入力に基づく背景色の変更

このセクションでは、プロンプトと変数を使った、Webページの背景色の変更方法を学習します。次のコード例では、2つのボタンの付いたWebページを作成します。ビジターが「Change Color(色の変更)」ボタンをクリックすると、背景色の入力を求めるプロンプトが表示されます。色を入力して「OK」をクリックすると、Webページの背景色が更新されます。「Undo Color(色の取り消し)」ボタンをクリックすると、Webページの背景色が前の色に戻ります。ブラウザーで次のコードを実行して、ボタンをテストしてみてください。

<!doctype> <script> var oldColor = 'black'; function changeColor() { oldColor = document.body.style.backgroundColor; var newColor = prompt('Enter a color:'); document.body.style.backgroundColor = newColor; } function undoColor() { var newColor = oldColor; oldColor = document.body.style.backgroundColor; document.body.style.backgroundColor = newColor; } </script> <button onclick='changeColor()'>Change color</button> <button onclick='undoColor()'>Undo color</button>

JavaScriptの初心者は、「function(関数)」という言葉になじみがないかもしれません。JavaScriptでは、「function」というキーワードは、ボタンのクリックなどのイベント発生時に実行されるコードセクションの先頭を示します。function changeColor() {という行から下のコードは、現在の背景色をoldColor変数に格納し、ビジターに新しい背景色を入力するように求めます。この値は新しい背景色の設定に使われます。document.body.style.backgroundColorというコードは、ページの現在の背景色にアクセスできます。

次のステップ

このチュートリアルのコード例は、最低限のHTMLテンプレートを使って、Webブラウザーで基本的なJavaScriptプログラムを実行する方法を示しています。また、計算の実行方法と変数の処理方法についても学習しました。質問に対するビジターの入力を格納する変数をプロンプトボックスで使用する方法と、その変数値を計算で使用する方法を学習しました。これらの概念を実践したい場合は、Code Avengersのレッスン1~10を参照してください。

またお望みであれば、Code Avengersの「レベル1 JavaScript」コースの残りのレッスンに沿って、ifステートメントとループの使用方法を学習することもできます。Code AvengersのWebサイトにアクセスして、コーディングの達人になりましょう。