1. 第十回ネットワーク
チーム講座資料
JavaScript

2. 概要
• Canvas要素
• JavaScriptの基本知識
• JavaScriptコンソール

3. canvas要素
JPEGやGIF、PNGといった画像フォーマットを使わずにJavaScriptで
図形を描画したり、逆にそれらの画像フォーマットをcanvasに読み
込んで、JavaScriptを使って合成やトリミングなどの編集を行ったり
することが出来る。
※canvasで表現するのはラスタ画像という、小さなビットの集まりからなる画像で
ある。canvas登場以前にHTML上で図形を描画するためには、ベクタ画像という
データを基にその場で計算し描画を行う画像形式を使うしかなく、複雑な画像描画
が出来なかった。

4. 前回作ったhtmlファイルに
赤枠内を全て追記
（video要素にclass属性、
button要素、canvas要素
script要素）
その後、jsフォルダ内に
「canvas.js」を作成
書き足してみよう

5. 書いてみよう
canvas.jsに記述 ※大文字小文字の区別はJSにおいて非常に重要です。

6. 結果
Push

7. 余談
canvas要素に対してはCSSでwidth/heightの指定を行ってはいけない。
canvas要素のデフォルトサイズは高さ150px幅300pxで設定されており、
CSSでwidth/heightの値を指定するとデフォルトサイズを拡大・縮小し
て表示するので、意図した状態と違う形で表示されるためである。

8. 余談
1. 属性値で指定した場合 2. CSSで指定した場合

9. 解説
変数の宣言
値の代入
オブジェクト
メソッド（関数）
関数
documentはHTML文書全体を表すオブジェクトである。

10. 関数の宣言
「関数」とは、予め指定された一定の処理
を行い、結果を返す命令群。
引数とは、関数が処理を行うために参照する値であり、必要ない場
合省略できる。逆に、カンマで区切って複数指定することも出来る。
function 関数名(引数) {
処理;
return 返り値;
｝
var 関数名 = function(引数) {
処理;
return 返り値;
｝;

11. 変数の宣言
「変数」とは、プログラム内で処理に使う何ら
かの値（数値、文字列など）を保持するものである。
変数の宣言は、以下の通り記述して行う。
var 変数名;
var 変数１, 変数２;
var 変数名 = 値;

12. データ型
数値や文字列など、プログラム内で扱うデータの種類のこと。
データ型は、以下のもの等が存在する。
データ型名 対応する値
数値型 数値（実数、8進数、16
進数、浮動小数点数）
文字列型 文字列（「”」、「’」で
囲んだ値）
論理型 true/false
データ型名 対応する値
配列型 複数の値を入れた変数
オブジェクト型 キーと値を対応付けた連
想配列
null 何もないことを表す値
undefined 未定義の値

13. 配列（Array）
格納した順番に応じて、値に「添え字」と呼ばれる数値を対応させ
て保持する変数。一つの変数に対して複数の値を格納できる。
値を呼び出す場合は「変数名[添え字]」のように記述する。N個の値
を格納した場合、添え字は「0」から始まり「N-１」までである。
以下のように宣言する。
この場合は値を呼び出す際「変数[0]」と指定すると値1、「変数[3]」
と指定すると値4である。
var 変数 = [値1, 値2, 値3, 値4];

14. 連想配列（オブジェクト/Object）
配列における添え字の代わりに「キー（key）」と呼ばれるものと対
応付けて値を保持する変数。添え字は数値のみであるが、キーは文
字列も指定することが出来る。
以下のように宣言する。値1を呼び出す場合、「変数.キー1」と記述
する。
var 変数 = ｛
キー1 : 値1,
キー2 : 値2
};

15. 変数の型
JavaScriptの変数には、「型」は存在しない。
よって、宣言した変数には数値でも文字列でも配列でも、なんでも
入れることが出来る。
しかし、データそのものには「型」が存在するため、その変数の中
に入っている値のデータ型について、注意が必要である。
（後述する四則演算や条件式を書く際に重要となる）

16. 条件式
それぞれ以下の場合に論理値のtrueを返す。
1. 「a == b」 ･･･ aとbの値が等しい場合
2. 「a != b」 ･･･ aとbの値が異なる場合
3. 「a === b」 ･･･ aとbの値とデータ型が共に等しい場合
4. 「a !== b」 ･･･ aとbの値とデータ型が共に異なる場合
基本的に条件式は「a === b」「a !== b」を使う。

17. 関数の呼び出し
呼び出す際は、以下の通り記述する。
※先ほどの”drawVideo()”のように、引数や返り値（結果）が無い関
数もある。
引数が無い場合、引数は何も入力せず、括弧内はカラでよい。
関数名(引数);

18. メソッド
呼び出し方が違い、オブジェクトに対して作用する関数である。
呼び出す際は、以下のように記述する。
オブジェクト.メソッド名（引数）;

19. getElementsBy-メソッド
document（HTMLファイル上）から、引数に指定した検索条件を満
たす要素を（主に配列として）取得するメソッド。
• .getElementsByClassName(クラス名);
• .getElementsByName(name属性値);
• .getElementsByTagName(要素名) ;
• .getElementById(ID名); ･･･このメソッドのみ、配列ではなく一意の
オブジェクトとして要素を取得する。

20. getElementsBy-メソッド
getElementsByClassNameメソッドで要素を取得したvideos変数は配
列となっているが、getElementByIdメソッドで要素を取得したcanvas
変数は単なるオブジェクトである。

21. .addEventListenerメソッド
ターゲットに対して特定のイベント（操作）があったとき、指定し
た関数を実行するというメソッド。
以下のように記述する。
ターゲット.メソッド名（“イベントタイプ”, 関数名）;

22. 正規表現
検索などを行う際に使用する特殊な文字列。
以下のように記述する。
var re = /.+/;

23. .testメソッド
以下のように記述し、引数内に正規表現で指定した文字列が含まれ
ているか検索するメソッド。含まれていた場合、trueを返す。
/正規表現/.test(文字列）;

24. その他
• 実は行末のセミコロン（；）は省略しても動くが、必ず挿入しよ
う。自動セミコロン挿入処理が極めて難解で、ミスを誘発するた
めである。
• コメントアウトの方法は、以下の通り。
//一行コメント
/*
複数行コメント
*/

25. JavaScriptコンソール
JavaScriptについて学ぶにあたって、Google Chromeに付属する
「JavaScriptコンソール」を使用する。
表示中の Web ページで任意の JavaScript コー
ドを実行することができるツールである。
こんなの→

26. 準備
クロームでvideo.htmlを開いた後F12ボタンを押して「Developer
Tools」を呼び出し、上のツールバーから「Console」を選択

27. 試してみよう（関数の呼び出し）
動画を再生しながら、「drawVideo();」とJavaScriptコンソールに記
述してEnterキーを押す。

28. 結果

29. 試してみよう（変数）
以下のように入力して、返り値が同じであることを確かめる。

30. 試してみよう（配列）
配列arrayの添え字は０～２までなので、
それ以外の数値を指定すると未定義
（undefined）となる。

31. 試してみよう（連想配列）

32. 試してみよう（四則演算）
あるデータ同士で足し算を行う場合、
• 数値同士の場合、普通に和を求める
• 一方が文字列である場合、文字列の結合を
行う
というルールがある。

33. 試してみよう（四則演算）
足し算以外の四則演算を文字列に
対して行った場合、
• 文字列化した数値である場合、
数値として計算を行う
• 通常の文字列である場合、
「NaN(Not a Number)」と表示

34. 試してみよう（条件式）
aとarray[0]は数値型の１、
array[1]は文字列型の”1”であるため、
値のみを比べる「==」では共にtrueである。
しかし、データ型も比較する「===」では、
array[1]はfalseを返す。
※「!=」と「!==」にした場合、結果は全て反対になる。

35. 試してみよう（関数の宣言）

36. 正規表現において、特殊な意味を持つ記号がある。
正規表現の特殊記号
記号 意味
. 任意の一文字
+ 直前の文字を1回以上繰り返す
* 直前の文字を0回以上繰り返す
? 直前の文字が0～1回
( ) 括弧内の文字をまとめて扱う
記号 意味
[ ] 括弧内のいずれかの文字を含
む
[^ ] 括弧内のいずれの文字も含ま
ない
- 直前の文字から直後の文字ま
での連続する文字（[ ] 内で使
用する）

37. 正規表現の特殊記号
記号 意味
{a} 直前の文字をa回繰り返す
（aは整数値）
{a,b} 直前の文字をa回以上b回未満
繰り返す（a,bは整数値）
| 直前の条件か直後の条件を満
たす
¥ エスケープ文字(直後の特殊文
字を普通の文字として扱う)
記号 意味
^ 直後の文字列が行頭にある
$ 直前の文字列が行末にある
¥s 空白文字（スペース）を表す
¥d 数字１文字
¥S 空白文字以外の任意の文字
¥D 数字以外の任意の文字

38. 試してみよう（正規表現）
JavaScriptコンソール上に
→の通り打ち込んで、
同じように表示されること
を確認する。

39. おしまい
次回はJavaScriptその２です