3-01はじめてのJavaScript
ここまでは Web ページの構造（HTML）や装飾（CSS）を勉強してきました。今回からは Web サイトのデザインをもっとリッチに見せることが出来る技術「JavaScript」について学んでいきましょう。
JavaScript とは
JavaScript とはプログラミング言語の 1 つで、主に Web ブラウザー上で使われている技術です。最近は PC やスマホのブラウザ上だけでなく、サーバーサイドのアプリケーションや、ロボット（例えば Pepper）、Nintendo Switch などにも使われています。
JavaScript で出来るリッチな表現
JavaScript をふんだんに使った、リッチな表現のサイトをいくつか紹介します。
Google マップ
Google マップは、当時まだあまり有名ではなかった「Ajax（エイジャックス）」という技術を使って、スクロールしたりドラッグするだけで、見えない部分の地図を読み込むというデザインを実現したサービスです。Google マップの登場で、技術的にまだまだ問題が多かった JavaScript に注目が集まりました。
Cover2
JavaScript を使うと、ブラウザ上でお絵かきツールのようなものを作ったりすることができます。こちらのサイトは文字を入れたり色を指定すると、画像が作れるというものです。
Rubik’s Cube Explorer
JavaScript は 3D のゲームを作ることもできます。これは WebGL という技術を使ったルービックキューブゲームです。
Particle Love
パーティクルというのは、粒子の動きをコンピューターでシミュレーションするコンピューターグラフィックの一種です。ゲームの魔法を使うようなシーンでご覧になったことがあると思います。
JavaScript は Web サイトにおける「筋肉」
前回までの授業では、HTML と CSS を勉強してきました。HTML は土台、CSS は装飾の役割を担っていましたが、JavaScript は「動き」の役割を担っています。CSS でも少しだけアニメーションや、hover のような動きをつけることができましたが、上にあげたような本格的な「動くサイト」を作るには JavaScript の力が必要です。
JavaScript はわかりやすく例えると「筋肉」です。ユーザーがなにか命令を与えると、その命令どおりにサイトの HTML や CSS を変更したり、サーバーに情報を送ることができます。
Hello World
実は Google Chrome では、簡単に JavaScript を試しに実行してみることができます。
まずは N高のサイトを開きます（これは何のサイトでも大丈夫です）
まずアドレスバーにjavascript:と入力してください。これはコピー＆ペーストできないので、手打ちで入れましょう。
次にalert(“Hello World!");と入力します。この部分はコピー＆ペーストでも入力できます。
すると以下のようなアラートが表示されます。
さきほどのalert(“Hello World!");というのは「Hello World」という文字列をアラート表示してくださいという命令文になります。
JavaScript を Web ページで使うには？
まずはサンプルのコードをダウンロードしましょう。
フォルダの中身は以下のようになっています。
- 3-1
- index.html
- sample.js
index.html を見てみましょう。8 行目に<script type="text/javascript" src="sample.js"></script> という記述があります。これは JavaScript のファイルを外部から読み込むというものです。JavaScript は HTML の中に直接書き込むこともできますが、あまり推奨はされていません。CSS と同様、外部から読み込む形が推奨されています。
試しに sample.js に、「Hello World!」のアラートを表示する記述をしてみましょう。
alert("Hello World!");
上書き保存をして、index.html を Chrome で開きます。
ここからは sample.js に記述を追加しながら、JavaScript の基本的な文法を説明しています。
JavaScript の文法
JavaScript には HTML や CSS 以上に複雑な文法があります。最初はわかりづらいですが、書きながらしっかりと使いこなせるようにしていきましょう。
変数とは
プログラミングには「変数」と呼ばれる、いろいろなものをしまっておくことができる「箱」のような役割を果たしてくれるものがあります。
例えば「こんにちは」という文字列があったとします。この文字列を、変数「x」にしまってみましょう。
先ほどの sample.js の内容を削除して、以下の内容を記述します。
var x = "こんにちは";
var xというのは、「変数 x」という意味です。
= は、左と右の内容が同じという意味ではなく、「代入する」という意味になります。ここでは変数 x に右側に書いた内容をしまう、という意味になります。
“こんにちは"という部分はダブルクオーテーションで囲われています。ダブルクオーテーション（もしくはシングルクオーテーション）で囲むと、ここに書かれているのは「文字列」という種類の型ですよという意味になります。プログラミングには「データ型」という考え方があり、文字列以外にも「数値」「真偽値」「未定義」などがあります。データ型によって、その後の処理方法が変わります。
最後に ; という記号がありますが、これは一行の終わりですという意味になります。
それでは先ほどの変数に続いて、アラートで変数の中身を表示する記述を書いてみましょう。
var x = "こんにちは";
alert(x);
文字列をつないでみよう
次にもう 1 つの変数を用意して、文字列と文字列をつないでみましょう。
変数 y を用意して、「N高のみなさん」という文字列をしまいます。
var x = "こんにちは！";
var y = "N高のみなさん";
続いて、x と y を連結して、「こんにちは！N高のみなさん」という文字列を、変数 z にしまいます。
var x = "こんにちは！";
var y = "N高のみなさん";
var z = x + y;
最後にアラートで変数 z の中身を表示しましょう。
var x = "こんにちは！";
var y = "N高のみなさん";
var z = x + y;
alert(z);
このように文字列同士を「+」でつなぐと、文字列を連結することができます。
数値を使って、計算してみよう
ここまでは変数の中に「文字列」をしまってきました。変数の中には文字列以外にも「数値」という形式の内容をしまうことができます。
例えば先ほどの x と y に数字を入れてみたとします。x に 1、y に 2 を入れたとします。
var x = "1";
var y = "2";
var z = x + y;
alert(z);
1+2 は 3 のはずですが、「12」という結果が表示されました。これは変数にしまった 1 と 2 が文字列だったため、文字の連結を行ってしまったからです。変数の中にしまってある内容が文字列のままでは、普通の数字を使った計算は行えません。
1+2=3 という内容を JavaScript で行いたいときは以下のように記述します。
var x = 1;
var y = 2;
var z = x + y;
alert(z);
このように変数にダブルクオーテーションなしで数字を代入すると、入れた数字は文字列ではなく数値として扱われ、計算ができるようになります。
配列とは
変数の中には複数の値を管理するためのデータ構造をしまうことができます。これをプログラミングでは「配列」と呼びます。
例えば変数 x の中に「りんご」「バナナ」「みかん」をしまってみましょう。
var x = ["りんご", "バナナ", "みかん"];
x の中から「りんご」を呼び出すには、以下のように記述します。
var x = ["りんご", "バナナ", "みかん"];
alert(x[0]);
x の配列の中の、0 番目を呼び出すという内容になっています。プログラミングでは物を数えるときに 1 からではなく 0 から数えるという決まり事があります。みかんを呼び出したいときは
var x = ["りんご", "バナナ", "みかん"];
alert(x[2]);
というふうになります。
この x の配列に新しい果物「スイカ」を追加するには
var x = ["りんご", "バナナ", "みかん"];
x.push("スイカ");
alert(x[3]);
というふうになります。
連想配列とは
配列は応用するともっと複雑なデータ構造を取り扱うことができます。
例えば「りんごの値段が 100 円」というのを変数 x にしまってみましょう。
var x = { name: "りんご", price: "100" };
alert(x.name + "の値段は" + x.price + "円です");
「りんご」という名前を呼び出すのには x.name というふうに記述します。
もう少し複雑なデータ構造を試してみましょう。りんご・バナナ・みかんの値段と産地を管理する表を変数 fruits にしまってみましょう。
var fruits = [
{ name: "りんご", price: "100", area: "青森" },
{ name: "バナナ", price: "200", area: "フィリピン" },
{ name: "みかん", price: "150", area: "愛媛" }
];
alert(fruits[0].area + "産の" + fruits[0].name + "の値段は" + fruits[0].price + "円です");
この記述では変数 fruits の中の 0 番目の要素の名前・値段・産地を呼び出しています。
if 文（条件分岐）
if 文というのは条件が分岐するようなことを行いたいときに利用します。
たとえば
- 「あなたはN高生ですか？」という質問をします
- 「はい」「いいえ」で答ます
- 「はい」だったら A という内容を表示する
- 「いいえ」だったら B という内容を表示する
ということができます。
それでは「confirm」というダイアログを使って試してみましょう。confirm は「OK」と「キャンセル」ボタンを表示することができるダイアログです。
以下の記述をしてみましょう。
var result = confirm("あなたはN高生ですか？");
alert(result);
ブラウザで実行してみます。
変数 result の中には true もしくは false が入り、その結果が alert で表示されました。
変数 result には、文字列でも数値でもない「真偽値」という形式の内容が入っています。◯ だったら true、✕ だったら false と覚えておいてください。
それでは上記のサンプルに、◯ だったら「N高へようこそ！」と表示し、✕ だったら N高の入学案内ページにリンクするようにしてみましょう。
var result = confirm("あなたはN高生ですか？");
if (result == true) {
alert("N高へようこそ！");
} else {
window.location.href = "https://nnn.ed.jp/admission/";
}
ブラウザで確認してみましょう。
キャンセルをすると、別のページに自動的に飛ばされます。
for 文（繰り返し）
for 文というのは同じような処理を繰り返し行いたいときに利用します。
たとえば
- 変数「x」の中に、「りんご・バナナ・スイカ」と 3 つの果物が配列でしまわれています
- ページを開くと「りんご」というアラートが表示されます
- アラートを OK で閉じると「バナナ」のアラートが表示されます
- アラートを再び OK で閉じると「スイカ」のアラートが表示されます
という感じで「りんご」「バナナ」「スイカ」と書かれたアラートが順々に表示される、というようなことができます。
この内容を JavaScript で記述すると以下のようになります。
var fruits = ["りんご", "バナナ", "スイカ"];
for (var i = 0; i < fruits.length; i++) {
alert(fruits[i]);
}
length というのは配列の中にしまってある要素の数を取得できるプロパティです。
デバッグとコンソールログについて
プログラミングをしていて、何か間違いを探して修正を行うことを「デバッグ」と言います。Chrome にはデバッグをするのに便利な機能として DevTools というものがあります。Dev というのは Developer（開発者）の略です。
それでは JavaScript でこのデベロッパーツールに文字を表示してみたいと思います。sample.js に以下の内容を記述してください。
console.log("これはデベロッパーツールのテストです");
記述ができたら上書き保存をしてブラウザを更新します。
デベロッパーツールのConsoleというタブをクリックすると、「これはデベロッパーツールのテストです」と表示されます
この console.log は、変数の中に入っている中身を確認したり、さまざまな使い方で利用します。アラートのようにユーザーに見せることなく、開発者しか見れないように出来るのが便利な機能です。
クイズゲームを作ろう
それではここまでに出てきた「変数」「if 文」「for 文」を組み合わせて、簡単なクイズゲームを作ってみましょう。
ここでは prompt というテキストを入力できるダイアログを使います。
var count = 0; // クイズが正解した数をカウントする変数
// クイズの質問と答えを配列で格納した変数
var quiz = [
{
question: "犬は英語で何と言うでしょう？",
answer: "dog"
},
{
question: "鳥は英語で何と言うでしょう？",
answer: "bird"
},
{
question: "クジラは英語でなんと言うでしょう？",
answer: "whale"
}
];
// クイズを繰り返し表示する
for (var i = 0; i < quiz.length; i++) {
var your_answer = prompt(quiz[i].question);
if (your_answer == quiz[i].answer) {
console.log("正解！");
count++;
} else {
console.log("はずれ！");
}
}
// ゲームの結果を表示する
console.log(quiz.length + "問中、" + count + "問正解でした！");
このプログラムでは以下のような処理を順番に行っています。
- count という変数を作って、ここに何問正解したかの数値が入るようにしていきます。
- quiz という変数には、質問と答えを配列と連想配列でしまっておきます。
- quiz の question を for 文で繰り返し prompt で表示します。
- 表示された prompt に入力された内容を your_answer にしまいます。
- your_answer に入っている内容が quiz の answer と合っているか if 文で確認します。
- if 文が true だった場合は「正解！」を console で表示し、count に 1 点追加します。
- if 文が false だった場合は「はずれ！」を console で表示します。
- クイズの表示が終わったら、ゲームの結果を console で表示します
- 結果は quiz の要素数と、正解数がしまわれている count、その他のテキストを連結して、console で表示します。
count++というのは、変数 count に 1 ずつ追加するという意味になります。このような式を「インクリメント」と言います。
では実際にこの JavaScript をブラウザで動かしてみましょう。
まとめ
今回は以下の内容を勉強しました。
- JavaScript とは何か？
- JavaScript を HTML で使うには
- JavaScript の文法
- 変数
- 型（文字列・数値・真偽値）
- 配列
- 連想配列
- if 文（条件分岐）
- for 文（繰り返し）
- ゲームづくり
いかがでしたでしょうか？今日紹介した「変数」「配列」「型」「if 文」「for 文」はプログラミングの基本とも言えるもので、JavaScript 以外のプログラミング言語でも用いられます。例えば複雑なテレビゲームなどでも、条件を分岐させたり繰り返しの処理を行うことで、キャラクターを動かしています。
次回は JavaScript のライブラリ「jQuery」というものを使って、HTML や CSS を操作する方法を勉強していきましょう。