JavaScript はウェブサイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。
{{Glossary("JavaScript")}} (略して "JS") は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、ウェブサイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。
JavaScript は汎用性が高く、初心者にもやさしいものです。経験を積めば、ゲーム、 2D や 3D のアニメーション、包括的なデータベース駆動型のアプリなどが作れるようになります。
JavaScript は比較的コンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。
コアの JavaScript 言語が上記のツールとどのように違うのか、その詳細を紹介することは、 JavaScript の軽い入門者向けの書籍であるこの記事の範囲外です。詳細は MDN の JavaScript 学習エリアや、 MDN の他の部分で詳しく学ぶことができます。
以下では、コア言語のいくつかの側面について紹介します。またブラウザーの API 機能についてもいくつか説明します。楽しみましょう！
JavaScript は、最も人気のある現代のウェブ技術のひとつです。あなたの JavaScript のスキルが上がれば、あなたのウェブサイトのパワーと創造性は新たな次元に入るでしょう。
しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、"hello world!" を表示する例 (基本的なプログラミング例の標準) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。
重要: これまでこのコースに沿って進めてきていない場合は、このサンプルコードをダウンロードして作業を進めてください。
scripts という名前の新しいフォルダーを作成してください。それから、 scripts フォルダーの中に main.js という新しいファイルを作成して保存してください。index.html ファイルの </body> 閉じタグの直前に新しい行で、以下の新しい要素を追加してください。
<script src="scripts/main.js"></script>
main.js ファイルに次のコードを追加してください。
const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
index.html を読み込んでください。
注: 上記の説明で {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、ブラウザーがファイルに現れる順番でコードを読み込むからです。
JavaScript が先に読み込まれ、まだ読み込まれていない HTML に影響を与えることになると、問題が生じる可能性があります。 JavaScript を HTML ページの下部に配置することは、この依存関係に対応する一つの方法です。その他の方法については、スクリプトの読み込み戦略をご覧ください。
JavaScript を使用して、見出しの文字列が Hello world! に変更されました。最初に {{domxref("Document.querySelector", "querySelector()")}} と呼ばれる関数を使用して見出しの参照を取得し、 myHeading と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。
その後、myHeading 変数の {{domxref("Node.textContent", "textContent")}} プロパティ (見出しの内容を表す) の値を Hello world! に設定します。
注 : 上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。
どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！
重要: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 ブラウザー開発ツールを探るを参照してください。
{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 var (説明はややこしいですが、推奨しません) または let というキーワードと、その後に任意の名前を指定することで、変数を宣言します。
let myVariable;
注: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは Your Guide to Semicolons in JavaScript を参照してください。
注 : 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(変数の命名規則についてはこの記事を参照してください)。自信がない場合は、有効かどうか変数名を調べることができます。
注: JavaScript は大文字と小文字を区別します。myVariable は myvariable とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。
注: var と let のより詳しい違いは、var と let の違いを見てください。
変数を宣言したら、以下のように値を割り当てることができます。
myVariable = 'Bob';
好みに応じて、両方の操作を同一の行で行うことができます。
let myVariable = 'Bob';
変数の値は、名前で呼び出すだけで取得することができます。
myVariable;
変数に値を代入した後で、変更することもできます。
let myVariable = 'Bob'; myVariable = 'Steve';
なお、変数は様々なデータ型の値を保持することもできます。
| データ型 | 説明 | 例 |
|---|---|---|
| {{Glossary("String")}} | 文字列と呼ばれる一連のテキスト。値が文字列であることを示すには、引用符で囲む必要があります。 | let myVariable = 'Bob'; |
| {{Glossary("Number")}} | 数。数字には引用符がありません。 | let myVariable = 10; |
| {{Glossary("Boolean")}} | 論理値。 true と false は JS では特別なキーワードであり、引用符は必要ありません。 |
let myVariable = true; |
| {{Glossary("Array")}} | 単一の参照で複数の値を格納できる構造です。 | let myVariable = [1,'Bob','Steve',10];配列の各メンバーはこのように参照してください。 myVariable[0], myVariable[1], など。 |
| {{Glossary("Object")}} | 基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。 | let myVariable = document.querySelector('h1');上記の例も同様です。 |
ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。
コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。
/* 挟まれているすべてがコメントです。 */
コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :
// これはコメントです
{{Glossary("operator", "演算子")}}は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。
| 演算子 | 説明 | シンボル | 例 |
|---|---|---|---|
| 加算/連結 | 2 つの数字を加えるか、2 つの文字列を結合します。 | + |
6 + 9; |
| 減算、乗算、除算 | 基本的な数学の計算を実施します。 | -, *, / |
9 - 3; |
| 代入 | すでに出てきました。変数に値を割り当てます。 | = |
let myVariable = 'Bob'; |
| 等価 | 2 つの値と型が互いに等しいかどうかを調べ、true/false (論理値)の結果を返します。 |
=== |
let myVariable = 3; |
| 否定、非等価 | その後にあるものと論理的に反対の値を返します。たとえば true を false に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しくないかどうかをテストします。 |
!, !== |
"Not" の場合、基本式は
「等しくない」は、基本的に同じ結果を異なる構文で与えます。ここでは「
|
他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、式と演算子を参照してください。
注: データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに '35' + '25' と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 35 + 25 を入力すれば、正しい結果が得られます。
条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は if ... else 文です。例えば以下の通りです。
let iceCream = 'チョコレート';
if(iceCream === 'チョコレート') {
alert('やった、チョコレートアイス大好き！');
} else {
alert('あれれ、でもチョコレートは私のお気に入り......');
}
if( ... ) の中の式が条件です — ここでは等価演算子を使用して、変数 iceCream とチョコレートという文字列を比較し、2 つが等しいかどうかを調べています。この比較が true を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 else 文の後にある 2番目のコードブロックが代わりに実行されます。
{{Glossary("Function", "関数")}} は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。
let myVariable = document.querySelector('h1');
alert('hello!');
これらの関数、 document.querySelector と alert は、必要なときにいつでも使えるようブラウザーに組み込まれています。
もし変数名に見えるものがあったとしても、その後に括弧 () が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである{{Glossary("Argument", "引数")}}を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。
例えば、 alert() 関数はブラウザーのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。
嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。
function multiply(num1,num2) {
let result = num1 * num2;
return result;
}
上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです。
multiply(4, 7); multiply(20, 20); multiply(0.5, 3);
注 : return 文は result の値を関数内から関数の外に戻すことをブラウザーに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "スコープ")}}と呼ばれています(変数のスコープのより詳しい説明をお読みください)。
ウェブサイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザーの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は click イベントで、マウスで何かをクリックするとブラウザーによって発行されるものです。これを実行するには、コンソールに以下のように入力してから、現在のウェブページ上をクリックしてください。
document.querySelector('html').onclick = function() {
alert('痛っ! つつくのはやめて!');
}
要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、onclick ハンドラープロパティに、クリックイベントで実行したいコードを含む無名 (つまり名前がない) 関数を代入します。
なお、
document.querySelector('html').onclick = function() {};
は以下のものと同等です。
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};
短くしただけです。
さて、 JavaScript の基本のおさらいが終わったところで、例題のサイトに新しい機能を追加してみましょう。
先に進む前に、 main.js ファイルの現在の内容を削除して、空のファイルを保存してください。そうしないと、 "Hello world!" の例で使用した既存のコードが、これから追加する新しいコードと衝突してしまいます。
このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。
images フォルダーに保存してください。main.js ファイルに次の JavaScript を入力してください。
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute('src','images/firefox2.png');
} else {
myImage.setAttribute('src','images/firefox-icon.png');
}
}
index.html をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わります。{{htmlelement("img")}} 要素への参照を変数 myImage に格納します。次にこの変数の onclick イベントハンドラープロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。
src 属性の値を取得します。src の値が元の画像のパスと等しいかどうかをチェックします。
src の値を 2 番目の画像へのパスに変更し、もう一方の画像が強制的に {{htmlelement("img")}} 要素の中に読み込まれるようにします。src の値を元の画像のパスに戻して、元の状態に戻ります。次に、もう 1 つの小さなコードを追加し、ユーザーがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザーがサイトを離れて後で戻った時にも保存されるようにします。Web Storage API を使用して保存しましょう。したがって、必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意しましょう。
index.html では、 {{htmlelement("script")}} 要素の直前に次の行を追加します。
<button>ユーザーを変更</button>
main.js では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
function setUserName() {
let myName = prompt('あなたの名前を入力してください。');
localStorage.setItem('name', myName);
myHeading.textContent = 'Mozilla はすばらしいよ、' + myName;
}
この関数では prompt() 関数を使用して、alert() のようにダイアログボックスを表示しています。しかし、prompt() は alert() とは異なり、ユーザーにデータを入力するよう求め、ユーザーが OK を押した後に変数にそのデータを格納します。この場合、ユーザーに名前を入力するよう求めます。次に、localStorage と呼ばれる API を呼び出すことで、ブラウザーにデータを格納して後で受け取ることができます。 localStorage の setItem() 関数を使って、'name' と呼ばれるデータを作成し、 myName に入っているユーザーから入力されたデータを格納します。最後に、見出しの textContent に文字列と新しく格納されたユーザーの名前を設定します。if ... else ブロックを追加します。これは初期化コードと呼ぶことができ、最初の読み込みでアプリを構成します。
if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.textContent = 'Mozilla はすばらしいよ、' + storedName;
}
このブロックでは、最初に name のデータが存在しているかどうかをチェックするために否定演算子 (! で表される論理否定) を使用しています。存在しない場合は、作成するために setUserName() 関数が実行されます。存在する場合は (つまり、以前の訪問時にユーザーが設定した場合)、 getItem() を使用して格納された名前を受け取り、 setUserName() の中で行ったのと同様に、見出しの textContent に文字列とユーザーの名前を設定します。onclick イベントハンドラーをボタンに設定します。クリックすると、setUserName() 関数が実行されます。これでユーザーがボタンを押すことで、好きな時に新しい名前を設定できるようになります。
myButton.onclick = function() {
setUserName();
}
この例を実行してユーザー名を入力するダイアログボックスが出たとき、キャンセルボタンを押してみてください。結果として "Mozilla is cool, null" というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が null、つまり値がないことを示す JavaScript の特殊な値に設定されるためです。
また何も入れずに OK を押してみてください — 結果として "Mozilla is cool," というタイトルが表示され、これは理由が明白です。
この問題を避けるには、ユーザーーが null や空白の名前を入力していないかチェックするよう、setUserName() 関数を書き換えます。
function setUserName() {
let myName = prompt('Please enter your name.');
if(!myName) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.textContent = 'Mozilla is cool, ' + myName;
}
}
人間の言語では — myName に値がない場合や、nullの場合、 最初から setUserName() を実行します。値がない場合 (上記の式が真でない場合)には、localStorage に値をセットして、見出しのテキストにもセットします。
最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (こちらで作成した版を表示することもできます)。
行き詰まったら、自分の作業を Github 上の完成したサンプルコードと比べてみてください。
私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、JavaScript の学習トピックに進んでください。
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}