TeamWorking

JavaScript 基本編

JavaScript とは

JavaScript は、ウェブブラウザー上で動作するプログラミング言語で、主にウェブページの挙動をカスタマイズするために使用される。

なお、Java というプログラミング言語があるが、これとはまったく異なる言語であり、Java と JavaScript は文法と名前が似ているだけで、それ以外は互いに何の関係もない。❝Java と JavaScript との関係は Ham 🍖 と Hamster 🐹 との関係のようなものだ❞ と言われる。

JavaScript の使用法

HTML に埋め込むとき JavaScript のプログラムは <script> ～ </script> というタグの間に書く。

<script>
  // ここに JavaScript のプログラムを書く。
</script>

あるいは、src という属性を使って、

<script src="nantoka.js"></script>

で、別ファイル（nantoka.js）の JavaScript ソースを読み込める。この例でわかるように JavaScript ソースファイルの拡張子は通常 .js である。

この script タグは HTML 文書の <head> 〜 </head> の間、 <body> 〜 </body> の間のどちらにも書くことができる。しかし、他の HTML タグとの順番によって結果が変わることがあるので、この資料では、自分で作成した JavaScript のコード用の script タグは、以下の場所に書くことを推奨する。

<!DOCTYPE html>
<html> 
<head>
  ⋮
  <script src="yourscript.js" defer="true"></script>
  ⋮
</head>
<body>
  ⋮
  <script>
    // Your JavaScript code here
  </script>
  <!-- ここには何もおかない -->
</body>
</html>   

つまり、script タグの置き場所は次のいずれかとすることを推奨する。

</body> の直前に書く。
JavaScript を HTML と別ファイルにして src 属性を使う場合は <head> ～ </head>の中に書いてもよい。この場合 defer="true" を付ける。

JavaScript の基本

JavaScript の基本的な文法は C 言語あるいは Java 言語に似ている。以下で基本的な部分を順に説明する。

変数

変数は値をいれることができる入れ物であり、値を保存できる場所に名前をつけたものである。let というキーワードで変数を宣言する。このとき次のように=の右側に初期値を指定することができる。そして ; で終わる。

let x = 10; 

次のように、複数の変数をコンマ,で区切って宣言することも可能である。

let i = 10, j = 20, k;

let の代わりに var というキーワードも使うこともあるが意味が微妙に異なる。この資料では let のほうだけ使って説明する。

また、後で値を変更しない（代入しない）変数は const というキーワードを使って宣言することができる。

const pi = 3.14159;

変数名の規則

JavaScript の変数名の中に使える文字は、大文字と小文字のアルファベット（a〜z, A〜Z）、数字（0〜9）、アンダースコア_である。このうち、数字は先頭の文字としては使えない。他にもユニコードの中で使える文字はあるが、以上の文字だけを使うことを推奨する。

アルファベットの大文字と小文字は区別するので abc と Abc は異なる変数である。

定数

JavaScript の定数は、39 や 3.14159 などの数値や文字列などである。文字列定数は、0 個以上の文字を二重引用符"または一重引用符'で囲む。（例えば、"Hello, world!" 'Takamatsu, Kagawa' などが文字列の定数である。）

バッククォート ` で囲むと、テンプレートリテラルと呼ばれる複数行にわたる文字列を作成できる。また、テンプレートリテラルでは、${ と } の間に式を埋め込むことができる。埋め込まれた式は計算され、その結果が文字列に挿入される。

let r = 2;
let message = `面積は ${r * r * 3.14}!`; 

この例では、message 変数には 面積は 12.56! という文字列が代入される。

コメントは、プログラム中に挿入する人間に対するメッセージ・覚え書きで、プログラムの実行には影響を及ぼさない。

JavaScript のコメントは/*から*/までの間と、//からその行の終わりまでである。前者の形式のコメントは複数行にまたがることができる。

関数呼び出し

関数は、前もって定義されているプログラムの部品である。関数名のあとに丸括弧の対( 〜)を書き、その中に関数に渡すデータの式（引数・ひきすう）をコンマ,で区切って書くと関数呼び出しの式になり、前もって用意されたコードを利用することができる。

例えば、alertは警告ダイアログを開いてメッセージを表示する関数である。次のように書くと、“Hello, world!” と表示するダイアログを開く。

alert("Hello, world!");

コンソール画面にメッセージを出力するためには console.log というメソッド（関数）を使う。引数の数は決まっておらず、与えられた引数を順に出力する。コンソール画面は、ほとんどのブラウザーでは普段隠されていて F12 キーを押すと開くことができる。

console.log("Hello, world!", 10, 24);

式と文

上の関数呼び出しの例でもそうなっているが、式のあとにセミコロン;をつけると文になる。文を 2 つ以上並べると、上（同じ行の場合は左）から順次実行される。

オブジェクトとドット `.` 演算子

JavaScript のオブジェクトは、いくつかの構成要素からなる複合的なデータで、名前に関連付けられたデータ（プロパティー）や関数（メソッド）の集まりである。ドット.は、オブジェクトからその構成要素（プロパティーやメソッド）を名前で取り出すための演算子である。上の console.log も正確に表現すると、console という変数に入っているオブジェクトの log という名前に関連付けられている関数（メソッド）である。

メソッドは、いわばオブジェクトに“属している”関数である。一般的にはオブジェクトの種類が異なれば、同じ名前のメソッドでも異なる動作をする。つまり xxx.do_something(1, "abc") と yyy.do_something(1, "abc") のように、同じ名前のメソッドであっても、オブジェクト xxx と yyy の種類が異なれば、異なる動作をする。

代入

変数やオブジェクトのプロパティーの値を変更することを代入という。JavaScript では代入には=演算子を用いる。変数 = 式（あるいは obj.prop = 式）という式で=の左辺の変数やプロパティーの値が右辺の式を計算した結果になる。

算術演算子

+、-、*、/、%などの演算子は、それぞれ、足し算、引き算、掛け算、割り算、割り算の余り、を計算する。C や Java と異なり、/は整数同士の割り算でも結果は小数になりうる。つまり 1 / 2 は 0.5 である。

また、+演算子は文字列の連接にも使用できる。この例は 2 * 3 is 6. と出力する。

console.log("2 * 3 is " + (2 * 3) + ".");

複合代入演算子

また、+=、-=のような演算子は算術演算と代入を同時に行う演算子で、例えば x += y は x = x + y を表す。

JavaScript では ++、--のような演算子もよく使われる。++は変数に 1 だけ加算（インクリメント）する演算子、--は変数から 1 だけ減算（デクリメント）する演算子である。 x++ は x = x + 1 と、 y-- は y = y - 1 と（ほとんど）同じ意味である。

配列

配列は（通常は同じ種類の）データを集めて、番号（添字、そえじ）でアクセスできるようにしたものである。次の例で示すように、各要素をコンマ,で区切り、周りを角括弧（[〜]）で囲む。

let colors = ["red", "green", "yellow", "cyan"];

配列の各要素は 配列名[式] でアクセスする。[と]の式を添字 (index) という。JavaScript の配列の添字は 0 から始まる。つまり、上の例では colors[0] は "red"、colors[1] は "green" である。

配列のプロパティー length は配列の要素数を表す。つまり、上の例では colors.length は 4 である。

多次元配列

配列の配列は多次元配列とも呼ばれる。例えば次のように二次元配列を定義することができる。

  const board = [["blue", "lightgray", "red"],
                 ["black", "yellow", "red"],
                 ["orange", "ivory", "green"]];

この場合、board[0][0] は "blue"、board[1][2] は "red" である。

JavaScript の制御構造

if 文

条件判断には次のようなカタチ（if 文）を用いる。

if (条件式) {
  // 条件式が成り立つときに実行される文の並び
} else {
  // 条件式が成り立たないときに実行される文の並び
}

あるいは else 以下がないカタチもある。このときは、条件式が成り立たなければ何もしない。

if (条件式) {  
  // 条件式が成り立つときに実行される文の並び
} 

if 文の振る舞いは次の図のように説明できる。青が条件が成り立つ場合、赤が条件が成り立たない場合の流れを表す。

else 付の if 文	else 無の if 文

次のように else if (...) 　がいくつか続くときもある。これは else の対象が別の if 文になっているだけである。（“文の並び” の文が一つだけのときは文法上は波括弧 { ～ }　を付けなくても良くて、特に else if の場合は波括弧を付けないほうが普通である。）

// 条件式が 3 個の例
if (条件式1) {
  // 条件式1が成り立つときに実行される文の並び
} else if (条件式2) {
  // （条件式1が成り立たず）条件式2が成り立つときに実行される文の並び
} else if (条件式3) {
  // （条件式1, 2が成り立たず）条件式3が成り立つときに実行される文の並び
} else {
  // 条件式1,2,3が成り立たないときに実行される文の並び
}

等価演算子・関係演算子

条件式には ==、!=、<、<=、>、>= などの演算子を使うことが多い。これらはそれぞれ等しい、等しくない、小さい、小さいか等しい、大きい、大きいか等しいを表す。

=< とか => とか =! などの演算子はないので注意する。

論理演算子

論理演算子は以下のような演算子である。

&& は論理積（AND）を表す。つまり、両方の条件が成り立つときに真になる。それ以外は偽となる
|| は論理和（OR）を表す。つまり、どちらか一方の条件が成り立つときに真になる。それ以外は偽となる。

問

以下のプログラムの断片は、それぞれどのように出力するか?
(ヒント: % は割り算の余りを計算する演算子である。)

// if 文のプログラム例 1
let x = 30;
if (x % 2 == 0) {
  console.log("A");
} else if (x % 3 == 0) {
  console.log("B");
} else if (x % 5 == 0) {
  console.log("C");
}

// if 文のプログラム例 2
let x = 30;
if (x % 2 == 0) {
  console.log("A");
}
if (x % 3 == 0) {
  console.log("B");
}
if (x % 5 == 0) {
  console.log("C");
}

for 文

繰り返しには次のようなカタチ（for 文）を用いる。

for (式1; 式2; 式3) {
  // 繰り返し実行される文の並び
}

式1は、for 文を実行する最初に一度だけ実行される初期化のための式である。式2は、繰り返しの条件式で、真の間は繰り返しが続く。式3は、各繰り返しの最後に実行される更新のための式である。つまり、最初に式1を一度だけ実行した後、式2 → 文の並び → 式3 を式2 が成り立つあいだ繰り返す。

for 文の振る舞いは次の図のように説明できる。やはり、青が条件が成り立つ場合、赤が条件が成り立たない場合の流れを表す。

for 文の図

特に次のような形が良く使われる。

for (let i = 0; i < n; i++) {
    // n 回繰り返す。
    // i は 0 から n - 1 まで増えていく。
}

for (let i = n - 1; i >= 0; i--) {
    // n 回繰り返す。
    // i は n - 1 から 0 まで減っていく。
}

for (let i = 0; i < 100; i += 10) {
    // 0 から 90 まで 10 ずつ増えていく。
    // つまり i は 0, 10, 20, ..., 90 の値をとる。
}

for (let i = 100; i > 0; i -= 10) {
    // 100 から 10 まで 10 ずつ減っていく。
    // つまり i は 100, 90, 80, ..., 10 の値をとる。
}

問

以下のプログラムの断片は、それぞれどのように出力するか?

// for 文のプログラム例 1
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// for 文のプログラム例 2
for (let n = 5; n > 0; n--) {
  console.log(n);
}

// for 文のプログラム例 3
for (let k = 0; k < 10; k += 2) {
  console.log(k);
}

for ～ of 文

配列のようなデータの何らかの集まりを表すデータ型に対して、要素を順に取り出して繰り返すための文が for ～ of 文である。

for (let 変数 of 集まり) {
  // 繰り返される文の並び
}

上の例では、集まりが配列などで、集まりの各要素が順に 変数 に代入され、文の並びが実行される。

まとめ

ここまでで JavaScript の基本的なデータ型と構文について説明した。

ここでいったん JavaScript 自体の言語としての説明は終わりにして、続けてグラフィックス関係のライブラリーやHTML を操作する方法について説明する。