JavaScript は Web サイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。
そもそも JavaScript とは何か
JavaScript (略して "JS") は成熟した動的プログラミング言語であり、HTML 文書に適用すると、 Web サイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。
JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対するレスポンスなどから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。
JavaScript はとてもコンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。
- ブラウザのアプリケーションプログラミングインターフェイス(API)。 Web ブラウザに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザの Web カメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、 Web ブラウザに組み込まれた API。
- 開発者が Twitter や Facebook のような他のコンテンツプロバイダのサイトから機能を組み込むことを可能にする、サードパーティの API。
- すばやくサイトやアプリケーションを構築することができ、HTML に組み込み可能なサードパーティのフレームワークやライブラリ。
この記事は JavaScript の簡単な紹介に留めるべきだと思いますので、現段階では、JavaScript 言語のコアと上記の様々なツールの違いを詳しく話して混乱させることは避けるようにします。それらは、この後に続く詳細、JavaScript 学習エリア、およびMDN の他の部分で詳しく学ぶことができます。
以下では、コア言語のいくつかの側面について紹介します。またブラウザの API 機能についてもいくつか説明します。楽しみましょう!
"Hello world" の例
上記の章は実にエキサイティングに聞こえるかもしれませんが、それもそのはずです — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、 Web サイトは力と創造性の新しい次元に入るでしょう。
しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、"hello world!" を表示する例 (基本的なプログラミング例の標準) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。
重要: これまでこのコースに沿って進めてきていない場合は、このサンプルコードをダウンロードして作業を進めてください。
- 最初に、あなたのテストサイトに行って、「
scripts
」という名前(かぎ括弧は除く)の新しいフォルダを作成してください。それから、作成した scripts フォルダの中でmain.js
という新しいファイルを作成してください。それをscripts
フォルダに保存してください。 - 次に、
index.html
ファイルの</body>
閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。<script src="scripts/main.js"></script>
- これは CSS の
<link>
要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。 main.js
ファイルに次のコードを追加してください。const myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';
- 最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザで
index.html
を読み込んでください。
注: <script>
要素を HTML ファイルの末尾付近に置いたのは、ブラウザが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を配置することは多くの場合、最良の方法です。
何が起きたか
JavaScript を使用して、見出しの文字列が "Hello world!" に変更されました。最初に
と呼ばれる関数を使用して見出しの参照を取得し、 querySelector()
myHeading
と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。
その後、myHeading
変数の
プロパティ(見出しの内容を表す)の値を "Hello world!" に設定します。textContent
注 : 上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。
言語の短期集中コース
どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります!
重要: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 ブラウザ開発ツールを探るを参照してください。
変数
変数 は、値を格納できる入れ物です。まず、 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';
なお、変数は様々なデータ型の値を保持することもできます。
データ型 | 説明 | 例 |
---|---|---|
String | 文字列と呼ばれる一連のテキスト。値が文字列であることを示すには、引用符で囲む必要があります。 | let myVariable = 'Bob'; |
Number | 数。数字には引用符がありません。 | let myVariable = 10; |
Boolean | 真偽値。 true と false は JS では特別なキーワードであり、引用符は必要ない。 |
let myVariable = true; |
Array | 単一の参照で複数の値を格納できる構造です。 | let myVariable = [1,'Bob','Steve',10]; 配列の各メンバーはこのように参照してください。 myVariable[0] , myVariable[1] , など。 |
Object | 基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。 | let myVariable = document.querySelector('h1'); 上記の例も同様です。 |
ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。
コメント
コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。
/*
挟まれているすべてがコメントです。
*/
コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :
// これはコメントです
演算子
演算子は、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番目のコードブロックが代わりに実行されます。
関数
関数 は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。
-
let myVariable = document.querySelector('h1');
-
alert('hello!');
これらの関数、document.querySelector
と alert
は、必要なときにいつでも使えるようブラウザに組み込まれています。
もし変数名に見えるものがあったとしても、その後に括弧 ()
が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである引数を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。
例えば、alert()
関数はブラウザのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。
嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。
function multiply(num1,num2) {
let result = num1 * num2;
return result;
}
上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです :
multiply(4,7);
multiply(20,20);
multiply(0.5,3);
注 : return
文は result
の値を関数内から関数の外に戻すことをブラウザに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の<code>スコープ</code>と呼ばれています(変数のスコープのより詳しい説明をお読みください)。
イベント
Web サイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は click イベントで、マウスで何かをクリックするとブラウザによって発火されるものです。これを実行するには、コンソールに以下のように入力してから、現在の Web ページ上をクリックしてください。
document.querySelector('html').onclick = function() {
alert('痛っ! つつくのはやめて!');
}
要素にイベントを割り当てる方法はたくさんあります。ここでは <html>
要素を選択し、onclick
ハンドラのプロパティに、クリックイベントで実行したいコードを含む匿名 (つまり名前がない) 関数を代入します。
なお、
document.querySelector('html').onclick = function() {};
は以下のものと同等です。
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};
短くしただけです。
Web サイトの例を膨らませる
ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。
画像の切り替えの追加
このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。
- まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。
- この画像を
images
フォルダに保存してください。 - この画像の名前を 'firefox2.png' (引用符なし) に変更してください。
main.js
ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の 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
をブラウザに読み込みます。画像をクリックすると、もう一方の画像に変わります。
<img>
要素への参照を変数 myImage
に格納します。次にこの変数の onclick
イベントハンドラプロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。
- 画像の
src
属性の値を取得します。 - 条件文を使って、
src
の値が元の画像のパスと等しいかどうかをチェックします。- そうであれば、
src
の値を 2番目の画像へのパスに変更し、もう一方の画像が強制的に<img>
要素の中に読み込まれるようにします。 - そうでない(すでに変更されている)場合、
src
の値を元の画像のパスに戻して、元の状態に戻ります。
- そうであれば、
パーソナライズされた挨拶メッセージの追加
次に、もう 1 つの小さなコードを追加し、ユーザがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザがサイトを離れて後で戻った時にも保存されるようにします。Web Storage API を使用して保存しましょう。したがって、必要な時にいつでもユーザと挨拶メッセージを変更できるオプションも用意しましょう。
index.html
では、<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()
はユーザにデータを入力するよう求め、ユーザが 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(); }
サイトにアクセスしてみると、ページがユーザ名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は localStorage
内に格納されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。
A user name of null?
この例を実行してユーザー名を入力するダイアログボックスが出たとき、キャンセルボタンを押してみてください。結果として"Mozilla is cool, null"というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が null
、つまり値がないことに言及する JavaScript の特殊な値にセットされているためです。
また何も入れずに OK を押してみてください — 結果として"Mozilla is cool,"というタイトルが表示され、これは理由が明白です。
この問題を避けるには、ユーザーが null
や空白の名前を入力していないかチェックするよう、setUserName()
関数を書き換えます:
function setUserName() {
let myName = prompt('Please enter your name.');
if(!myName || myName === null) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}
}
人間の言語では — myName
に値がない場合や、null
の場合、 最初から setUserName()
を実行します。値がない場合 (上記の式が真でない場合)には、localStorage
に値をセットして、見出しのテキストにもセットします。
まとめ
最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (こちらで作成した版を表示することもできます)。
行き詰まったら、自分の作業を Github 上の完成したサンプルコードと比べてみてください。
私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、JavaScript の学習トピックに進んでください。