HTML5プロフェッショナル認定試験
レベル2 ポイント解説無料セミナー

2016年7月2日

株式会社富士通ラーニングメディア
抜山雄一

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

富士通ラーニングメディアのご紹介
１．会社概要設立

1977年6月30日

資本金3億円（全額 富士通株式会社）

売上高

81億円（2014年度）

従業員

427名（2016年3月末現在）

事業内容

人材育成・研修サービス(公開コース1,400コース、年間86,000名受講）
個人のお客様向けパソコン教室（富士通オープンカレッジ）

関係会社

株式会社富士通ラーニングメディア沖縄（研修サービス・研修サービスサポート）株式会社富士通ラーニングメディア・スタッフ（人材派遣）

出資会社

株式会社アクト・ブレーン・ベトナム（ソフトウェア開発など）

事業所
関連施設

東京・名古屋・大阪・沖縄に5拠点（約40教室、900名以上の定員数）

品川本社

品川LC

名古屋事業所/LC 関西事業所/LC 沖縄事業所/LC

２．富士通ラーニングメディアが目指すこと

ICT人材を支える人材育成のパートナーでありつづける 最高水準の『知』のサービスを提供することにより、お客様の真のパートナーを目指します。
 お客様の「成長のスパイラル」をサポートします。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

HTML5プロフェッショナル認定資格 レベル2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

JavaScriptとは動的なコンテンツ作成のためのプログラミング言語
Ecma InternationalおよびW3Cによる標準化
JavaScriptの基本文法はEcma Internationalによって標準化されている（ECMA-262）。
DOM APIやWeb APIはW3Cが標準化を担当。そのため、ブラウザ間の互換性がある程度保たれている。



動的型付けのスクリプト言語
スクリプト言語であるため、コンパイルは不要。サーバサイド言語のPHPと同様に動的型付けである。



クライアントサイドでもサーバサイドでも実行可能
JavaScript はWebページを閲覧しているブラウザ上（クライアントサイド）で実行される。Node.jsなどの実行エンジンを使用すれば、Web サーバ上（サーバサイド）でも実行可能。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

JavaScriptのバージョン

ECMAScript 3
1999年12月公開。try-catchによる例外処理や正規表現などを追加。



ECMAScript 5
2009年12月公開（2011年には改訂版の5.1が公開）。strictモードやJSONオブジェクトの追加。



ECMAScript 6（2015）
2015年6月公開。クラスやモジュール、アロー演算子などの追加。本バージョン以降、バージョン名には公開時の西暦を採用し、1年ごとに新バージョンを公開する予定。
試験範囲はECMAScript 5.1で追加された文法までだよ!!
ECMAScript2015を使う時は、ブラウザの対応状況に注意してね。
2.2以降のAPIはW3Cが標準化を推進しているよ!!
ECMAScript 2016も勧告されて開発スピードも上昇中!!
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】最新技術を使うために 1「Can I use」<<http://caniuse.com/>>
ブラウザごとの対応状況を公開しているサイト
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】最新技術を使うために 2「Mozilla Developer Network」<<https://developer.mozilla.org/ja/>>
Web標準技術に関する情報が充実している。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】最新技術を使うために 3「TypeScript」<<http://www.typescriptlang.org/>>
JavaScriptのシンタックスシュガー。ECMAScript2015で記述したソースコードを
ECMAScript 5などにコンパイルできる。そのほか、静的型付けなどの機能を提供してくれる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

開発ツール（エディタ編）

Atom

Brackets

Visual Studio Code<<https://atom.io/>><<http://brackets.io/>><<https://code.visualstudio.com/>>

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

開発ツール（ブラウザ編）

各種ブラウザで「F12」キーを押すと、開発ツールが開くよ。
JavaScriptのデバッグに役立つよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.1.1 JavaScript文法

2.1.1 JavaScript文法
重要度★★★★★★★★★★ 10

出題種別• 知識問題• コードリーディング問題• 記述問題説明（望まれるスキル）

•
•
•
•
•
•
•
•

JavaScriptの概要
演算子
配列
制御文
関数
型・オブジェクト
プロパティ
スコープ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

型
分類
プリミティブオブジェクト

1.
2.

型

値例

string'LPI', "FLM"

number10, 20booleantrue, false

objectnew String("")

var str1 = "FLM";
var str2 = new String("LPI");// プリミティブ型// オブジェクト型

代入した値によって、動的に型が決まるよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

プリミティブとオブジェクト

1.
2.
3.
4.
5.
6.
7.

var str1 = "FLM";
var str2 = new String("LPI");// プリミティブ型// オブジェクト型

console.log(str1);
console.log(str2);
console.log(str1.substring(0, 1));
console.log(str2.substring(0, 1));

プリミティブ型からオブジェクト型に暗黙的に変換されるから、
プリミティブ型の変数でもメソッドを呼び出せるよ!

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

演算子
 関係演算子
演算子
<
<=
>
>=
==
!=
===
!==

1.
2.
3.
4.
5.

説明
左辺は右辺より小さい
左辺は右辺以下である
左辺は右辺より大きい
左辺は右辺以上である
左辺と右辺の値は等しい
左辺と右辺の値は等しくない
左辺と右辺はデータ型と値が等しい
左辺と右辺はデータ型または値が等しくない

var num1 = 10;
var num2 = "10";console.log(num1 == num2);
console.log(num1 === num2);// true// false

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 1
 以下の変数、str1とstr2が宣言されています。選択肢のソースコー
ドの実行結果として、trueと表示されるものをすべて選びなさい。
1.
2.

var str1 = "FLM";
var str2 = new String("FLM");A) console.log(str1 == str2);B) console.log(str1 === str2);C) console.log(typeof str1 == typeof str2);D) console.log(str1 instanceof String);E) console.log(str2 instanceof String);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 1 以下の変数、str1とstr2が宣言されています。選択肢のソースコー
ドの実行結果として、trueと表示されるものをすべて選びなさい。
1.
2.

var str1 = "FLM";
var str2 = new String("FLM");A) console.log(str1 == str2);B) console.log(str1 === str2);C) console.log(typeof str1 == typeof str2);D) console.log(str1 instanceof String);E) console.log(str2 instanceof String);
typeof演算子は変数の型を返すよ。str1はstring、str2はobjectだよ。
instanceof演算子はオブジェクトの型をbooleanで判定するよ。
str1はネイティブなのでfalseが返されるんだ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

特殊数値
値

説明
number型。無限を表す。-Infinityもあり。
Infinity
number型。非数（Not-A-Number）を表す。
NaN
プリミティブ型。空を表す。
null
undefined プリミティブ型。未定義を表す。

1. var nan = NaN;
2. console.log(typeof nan);// number
3. console.log(nan + 10);// NaN
4. console.log(nan.hoge);// undefined
5. console.log(parseInt("a")); // NaN
NaNやInfinityでtypeofを使うとnumberが返ってくるよ!
見分けるにはisNaN関数などを使うしかないので注意だよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 2
 以下のソースコードの実行結果として、表示されるものをすべて選
びなさい。
1.try {
2. console.log(5 / 0);3.} catch (e) {4. console.log("catch");5.} finally {6. console.log("finally");
7.}A) エラーが発生して何も表示されない
B) NaNC) InfinityD) catchE) finally
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 2 以下のソースコードの実行結果として、表示されるものをすべて選
びなさい。
1.try {
2. console.log(5 / 0);3.} catch (e) {4. console.log("catch");5.} finally {6. console.log("finally");
7.}A) エラーが発生して何も表示されない
B) NaNC) Infinity

ゼロ除算をしてもエラーにならずにInfinityが返るよ。
特殊数値はisNaNやisInfinite関数で確認できる!!

D) catchE) finally
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

プロトタイプベースのオブジェクト

LPI-Japan
インスタンス生成

Stringオブジェクト（プロトタイプ）

new

FLM

クラスではなく、オブジェクトからインスタンス生成するんだ。
クラスと違ってオブジェクトは拡張可能だよ。
インスタンスはオブジェクト（プロトタイプ）のプロパティ（データ）とメソッド（処理）を引き継ぐよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

オブジェクトの動的な拡張

1.
2.
3.
4.
5.

Date.prototype.getJaFullYear = function () {return this.getFullYear() + "年";}
var now = new Date();console.log(now.getJaFullYear());

ビルトインオブジェクトでも拡張可能だよ。でも、仕様が分かりにくくなるからビルトインオブジェクトを直接拡張することはお勧めしないよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

prototypeプロパティ

インスタンスのプロトタイプに
greetを追加している。

Yuichi
インスタンス生成

Person
オブジェクト（プロトタイプ）new

Nukiyama

greetを使用する場合、プロトタイプに問い合わせる。

プロトタイプに追加しないと、インスタンスごとにgreetがコピーされちゃうよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

オブジェクト1. function Person(x, y) {2.
this.name = x;3.
this.age = y
4. }5. Person.prototype.greet = function() {6.
console.log("I'm " + this.name + this.age + " years old");
7. }8.
9. var me = new Person("Yuichi", 10);10. me.greet();

コンストラクタは関数として定義するよ。
普通の関数と見分けるために大文字を使うことが多いよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】ECMAScript2015のclassで作成

1. class Person2 {2. constructor(x, y) {3.
this.name = x;4.
this.age = y;
5. }6. greet() {7.
console.log("I'm " + this.name + this.age + " years old.");
8. }
9.}

コードの意味としては、functionオブジェクトを使用した
オブジェクト定義と同じだよ。でも、OO言語経験者にはこっちの方が分かりやすい!!

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 3
 以下のソースコードを実行した際に、eオブジェクト自体に定義されているプロパティやメソッドをすべて選択しなさい。
1.function Employee() {2. this.name = "foge";
3. this.dept = "Development";
4. this.work = function() {5.
console.log("do test");6. }7.}
8.Employee.prototype.manage = function() {9. console.log("manage");10.}11.var e = new Employee();A) nameC) workB) deptD) manage
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 3 以下のソースコードを実行した際に、eオブジェクト自体に定義されているプロパティやメソッドをすべて選択しなさい。
1.function Employee() {2. this.name = "foge";
3. this.dept = "Development";
4. this.work = function() {5.
console.log("do test");6. }7.}
8.Employee.prototype.manage = function() {manageはeオブジェクトの
9. console.log("manage");
プロトタイプに定義されているよ。
10.}
Object.getOwnPropertyNames()
11.var e = new Employee();
で確認もできる。
A) deptC) workB) nameD) manage
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

for/in1. var nums = [10, 20, 30];
2. for (var num in nums) {3.
console.log(num);// 0、1、2と出力
4. }for/inを配列で使用すると、配列の要素に対して処理を繰り返すよ。
上述の例では配列の要素番号が出力されてるんだ!!
挙動がわかりにくいので、使用しない方がいいよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 4
 以下のソースコードを実行した結果、表示されるものとして正しいものを選びなさい。
1.var nums = [10, 20, 30];
2.nums.foge = "hogehoge";
3.for (var num in nums) {4. console.log(num);5.}A) 10 20 30
B) 10 20 30 fogefogeC) 0 1 2

D) 0 1 2 foge

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 4 以下のソースコードを実行した結果、表示されるものとして正しいものを選びなさい。
1.var nums = [10, 20, 30];
2.nums.foge = "hogehoge";
3.for (var num in nums) {4. console.log(num);5.}A) 10 20 30
B) 10 20 30 fogefoge

自作のプロパティが実行されるよ。
ECMAScript2015で追加された、for/ofを使うと選択肢Aと同じ結果になるよ。

C) 0 1 2

D) 0 1 2 foge

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.2.1 イベント

2.2.1 イベント
重要度★★★★★★★★ 8

出題種別• 知識問題• コードリーディング問題• 記述問題説明（望まれるスキル）• JavaScriptのページ読み込みや、ユーザ操作によって発生するイベントの発生タイミングを理解しており、イベント処理を行うコードを記述する事ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

イベントとは①マウスオーバーでパネルを表示②マウスアウトでパネルを非表示

ユーザーの動作（イベント）に合わせて処理を実行できるよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

イベント処理の登録

1. <button id="btn" onclick="alert('FLM')"></button>
2.
3. var btn = document.getElementById("btn");
4. btn.onclick = function(){};
5. btn.addEventListener("click", function(){}, false);
JavaScriptのイベント登録の方法は3つ。
一般的には、addEventListenerが使われるよ。なぜなら、 イベントに 1 つ以上のハンドラを追加できる!
 キャプチャリング と バブリングを制御できる!
ちなみに、IE6-8は対応していなかったので
MS独自拡張のattachEventも使われていたよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

イベントの発生タイミング
window
document
キャプチャー
html
フェーズ
：
body
table
：
tbody
tr
th
td
tr

th

document
バブリング
フェーズ

html
～
body

ターゲット
フェーズ

table

イベント発生

tbody

td
：
：
：

tr
th

tr
td

th

td

DOM ツリーThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 5
 以下のソースコードがあるWebページ上で、「click me」ボタンをクリックした際に表示される文字列として正しいものを1つ選びなさい。なお、「→」は表示順を表します。
1. <div onclick="alert('div click')">2.
<button id="btn">click me</button>
3. </div>
4. <script>
5.
var btn = document.getElementById("btn");6.
btn.addEventListener("click", function(){7.
alert("button click");8. });
9. </script>A) button click → div clickB) div click → button clickC) button clickD) div click
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 5 以下のソースコードがあるWebページ上で、「click me」ボタンをクリックした際に表示される文字列として正しいものを1つ選びなさい。なお、「→」は表示順を表します。
1. <div onclick="alert('div click')">2.
<button id="btn">click me</button>
3. </div>
4. <script>
5.
var btn = document.getElementById("btn");6.
btn.addEventListener("click", function(){7.
alert("button click");8. });
9. </script>A) button click → div clickB) div click → button click

button要素のクリックイベントが伝播して、バブリングフェーズでdiv要
素のclickイベントが発生するよ。

C) button clickD) div click
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.2.2 ドキュメントオブジェクト／DOM
2.2.2 ドキュメントオブジェクト／DOM
重要度★★★★★★ 6

出題種別• 知識問題• コードリーディング問題

説明（望まれるスキル）• イベント発生時などにD
OMを利用して、HTMLの内容を読み込む、書き換える処理を行うコードの記述方法について理解している。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

DOM（Document Object Model）とはdocument

/
要素

属性

html

lang

要素

要素

head

body

要素

属性

要素

meta

charset

title

要素

属性

section

id

テキスト

要素

属性

要素

DOMツリーh1

idp

HTML要素はツリー構造のDOMとして解析されるよ。

テキスト

テキスト

DOMツリーとはHTML文書をツリー構造としてメモリ上に展開したオブ
ジェクトの集合体です。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

DOMの操作
1.
2.
3.
4.
5.
6.

<div id="message"></div><script>
var mess = document.getElementById("message");mess.innerHTML = "<p>Fujitsu Learning Media.</p>";</script>

DOM (Document Object Model) でHTMLを操作できる!!
業務ではjQueryなどのライブラリで操作する方が一般的だよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 6
 JavaScriptを使用して、「実行前」のHTMLを「実行後」のように書き換えたい。正しく変更できるものを1つ選びなさい。なお、「target」にはdiv要
素が、「yesButton」にはbutton要素が参照されているものとする。
実行前



1.
2.
3.

<div id="target"><button id="yes">yes</button></div>

実行後



1.
2.
3.

<div id="target"><button id="yes">yes</button><button>no</button></div>

A)

target.innerHTML = "<button>no</button>";B)

var noButton = document.createElement("button");noButton.innerHTML = "no";target.insertBefore(noButton, yesButton);C)target.hasAttribute("<button>no</button>");D)

var noButton = document.createElement("button");noButton.innerHTML = "no";target.appendChild(noButton);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 6
 JavaScriptを使用して、「実行前」のHTMLを「実行後」のように書き換えたい。正しく変更できるものを1つ選びなさい。なお、「target」にはdiv要
素が、「yesButton」にはbutton要素が参照されているものとする。
実行前



1.
2.
3.

<div id="target"><button id="yes">yes</button></div>

実行後



1.
2.
3.

<div id="target"><button id="yes">yes</button><button>no</button></div>

A)

target.innerHTML = "<button>no</button>";B)

var noButton = document.createElement("button");noButton.innerHTML = "no";target.insertBefore(noButton, yesButton);C)target.hasAttribute("<button>no</button>");D)

var noButton = document.createElement("button");noButton.innerHTML = "no";target.appendChild(noButton);

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.8.1 Web Storage

2.8.1 Web Storage
重要度★★★★ 4

出題種別• 知識問題• コードリーディング問題

説明（望まれるスキル）• Web Storageの特徴や仕様を理解し、読み込み・書き込みを行うコードを理解することができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Web Storageの特徴
 ブラウザへのデータの保存や取得ができる

ブラウザにデータを保存するための機能です。ブラウザを閉じるまで、またはブラウザを閉じた後もデータを残せます。

 Key-Value配列の形式で複数のデータを保存できる

データはKey-Value配列で保存されます。そのため、キーを指定して値を格納できます。

 サイズの大きなテキストデータを保存できる

データの保存容量がオリジンごとに5MB程度あるため、データ件数が多い
JSON など、大きいサイズのテキストデータでも格納できます。ただし、ブラ
ウザごとに保存容量は異なります。

 クロスオリジンのアクセスが制限されている同一オリジンのWebページが保存したデータのみ取得できます。そのため、誤って異なるオリジンのWebページが保存したデータを変更したり、参照された
りする危険が低いです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

データ保存系APIの比較
CookieWeb Storage

Indexed Database

保存容量

4KB

5MB-10MB

5MB-10MB

5MB-10MB

保存期間

有期限

無期限/セッション

無期限

無期限

送受信

リクエスト
ごと

JSで操作時のみJSで操作時のみJSで操作時のみ

データ形式

文字列

文字列

ネイティブ/
オブジェクトネイティブ/
オブジェクト

非同期

×

×

○

○

特徴

設定によっ
ては、
HTTP通信でも送受信される。

シンプルなAPIで、 複雑なデータを扱え
SQL文ライクの大容量データを保る。APIが複雑なため、文法でデータを存できる。
実装が少々難しい。
操作できる。

備考

最も実装が進んでいる。

DBとは操作方法が異なるので注意。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

WebSQL

仕様策定が中止されている。

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Web Storageを使用したデータ保存

1. sessionStorage.setItem("Item", "Book");
2. // sessionStorage.Iem = "Book"; でも同じ動作
3. var storage = sessionStorage.getItem("Item");
4. console.log(storage);
5. sessionStorage.removeItem("Item");sessionStorageとlocalStorageの違いは保存期間だけ!!
sessionStorageはセッションが終了すると削除、
localStorageは永続保存させるよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 7
 Web Storageの説明として正しいものを1つ選びなさい。
A) key-value形式でデータを保存できる。
B) stringやBlobを格納できる。
C) 非同期で動作するため、パフォーマンスが優れている。
D) cookieよりも容量が小さい。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 7
 Web Storageの説明として正しいものを1つ選びなさい。
A) key-value形式でデータを保存できる。
B) stringやBlobを格納できる。
C) 非同期で動作するため、パフォーマンスが優れている。
D) cookieよりも容量が小さい。

Web StorageはシンプルなAPIで使いやすいけど、同期処理でパフォーマンスはよくないよ。また、文字列しか格納できない仕様になっているんだ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.9.1 WebSocket

2.9.1 WebSocket
重要度

★★ 2

出題種別

• 知識問題説明（望まれるスキル）• WebSocketの特徴を理解し、通信を行うにあたって必要な知識について理解している。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

WebSocketの特徴


双方向通信を実装できる



WebSocketサーバを使用する

クライアントとWebSocketサーバ間で接続を維持した双方向通信を実装できます。
XMLHttpRequestやServer-Sent Eventsなど、一回の通信ごとにリクエストとレスポンスを行う HTTP ベースの通信と比較して、常時接続して双方向通信を行うWebSocket
は、送受信処理の効率が高いです。

通信方式として HTTP ではなくWebSocket Protocolを使用します。そのため、サーバ
側はWebSocket Protocolに対応したWebSocketサーバを使用する必要があり、WebSocketに対応していない従来のWeb サーバは使用できません。
WebSocket による双方向通信
サーバサイドのプログラム
ビジネスロジック

WebSocket

ブラウザ

データ受信時に
イベント処理でデータ取得

データアクセスDB

プレゼンテーション

WebSocket サーバ/Web サーバ
WebSocket サーバ、またはWebSocket に対応した Web サーバ

クライアントサイド

サーバサイドThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

通信系APIの比較

Server-Sent Events

WebSocket

XMLHttpRequest

プロトコル

HTTP

WebSocket Protocol

HTTP

非同期通信

○

○

○

双方向通信

×

○

○

プッシュ通知

○

○

×

通信効率

△

WebSocket サーバ△

特徴

Webサーバからの一方向 双方向のリアルタイム
通信に特化。
通信。

ロングポーリングによってリアルタイム通信
を実現。

備考

IE/Edgeが未実装。

チャットなどで広く使用されている。

ブラウザ実装状況が最も良い。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

WebSocketを使用した通信処理

1. var socket = new WebSocket("ws://localhost:8888/");
2. socket.send("Hello, World");
3. socket.onmessage = function (e) {4.
console.log(e.data);
5. }WebSocketプロトコルを使用するので、URLのスキーマはwsかwssになるよ。
サーバに情報を送信するにはsendを、受信するにはmessageイベントを使うよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 8
 WebSocketの説明として正しいものを1つ選びなさい。
A) リアルタイム通信を実現する場合、1ラウンドトリップが終了するごとに再接続が必要になる。
B) サーバからクライアントに対して、情報送信をできるが、クライアン
トからサーバにデータ送信はできない。

C) サーバを介さずにクライアント同士のP2P（Peer to Peer）通信を実現する。
D) クライアントとサーバを常時接続し、効率的なデータの送受信を実現する。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

51

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 8
 WebSocketの説明として正しいものを1つ選びなさい。
A) リアルタイム通信を実現する場合、1ラウンドトリップが終了するごとに再接続が必要になる。
B) サーバからクライアントに対して、情報送信をできるが、クライアン
トからサーバにデータ送信はできない。

C) サーバを介さずにクライアント同士のP2P（Peer to Peer）通信を実現する。
D) クライアントとサーバを常時接続し、効率的なデータの送受信を実現する。
A)はXMLHttpRequest、B)はServer-Sent
Events、C)はWebRTCの説明だよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

52

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.10.1 Geolocation APIの基本と位置情報の取得

2.10.1 Geolocation APIの基本と位置情報の取得
重要度

★★ 2

出題種別

• 知識問題説明（望まれるスキル）• Geolocation APIの概要と利用時の注意点について理解している。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

53

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Geolocation APIの特徴
GPS を使用した位置情報取得



ユーザーによる使用可否の設定



地図サービスとの連携

モバイル端末などに搭載されている GPS 受信機にブラウザ経由でアクセスし、正確な位置情報を取得できます。GPS 受信機が使用できない場合でも、ネットワーク装置と連携し、大まかな位置情報を取得できます。

位置情報はユーザーのプライバシーにかかわる情報です。そのため、ユーザーが位置情報の使用可否を設定できます。つまり、必ずしも位置情報を取得できるわけではありません。

既存の地図サービスの中には、Geolocation APIを使用したサービス連携が可能なものもあります。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

54

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Geolocation APIを使用した位置情報取得
1. navigator.geolocation.getCurrentPosition(
2. function (position) {3.
//Positionオブジェクトによる取得
4.
var latitude = position.coords.latitude; //緯度
5.
var longitude = position.coords.longitude; //経度
6.
var accuracy = position.coords.accuracy; //誤差
7.
var altitude = position.coords.altitude; //高度
8. },9. function (err) {10.
console.error(err.message);11.});
getCurrentPositionメソッドの替わりにwatchPositionメソッドを使うと位置情報が変更するたびに処理を呼び出せるよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

55

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 9
 Geolocation APIの説明として正しいものを1つ選びなさい。
A) GPS受信機が存在しない端末でWebページを閲覧した場合、位置情報を取得することができない。
B) ユーザーが情報提供を拒否した場合でも、特権設定をしておけば位置情報を取得できる。

C) タイムアウトなどのエラーが発生した場合、getCurrentPositionメソッドの第1引数に指定した関数が実行される。
D) 取得できる位置情報として、緯度や経度、高度などがある。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

56

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 9
 Geolocation APIの説明として正しいものを1つ選びなさい。
A) GPS受信機が存在しない端末でWebページを閲覧した場合、位置情報を取得することができない。
B) ユーザーが情報提供を拒否した場合でも、特権設定をしておけば位置情報を取得できる。

C) タイムアウトなどのエラーが発生した場合、getCurrentPositionメソッドの第1引数に指定した関数が実行される。
D) 取得できる位置情報として、緯度や経度、高度などがある。

Geolocation APIでは、特権設定など、
セキュリティリスクになる設定は使用できないよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

57

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

2.11.1 並列処理の記述
2.11.1 並列処理の記述
重要度★★★★ 4

出題種別• 知識問題• コードリーディング問題

説明（望まれるスキル）• Web Workersの特徴を理解し、並列処理やエラーの検出を行うコードを
読みどのように動作するか理解する事ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

58

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Web Workers
JavaScriptの処理をバックグラウンドで実行する

Webページ上の処理にワーカーからアクセスできない
Webページ
HTML
2.
CSS

分離した
JavaScriptの処理

JavaScript

Webページの描画処理

ワーカー

メインスレッド

ワーカーのスレッド

ブラウザの実行プロセス
クライアントThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

59

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Web Workersの特徴


ワーカーを分離することで、JavaScript の処理を並列に処理できる

ワーカーの処理をJSファイルに記述する

JavaScriptの処理単位であるワーカーは、メインスレッドの Web ページの処理から分離されます。複数のワーカーを実行することで JavaScript の同時実行制御が行えます。

並列処理するプログラムは、呼び出し元とは別のJSファイルに記述する必要があります。
Web Workersが書かれたファイルは、インスタンス生成したタイミングで読み込まれます。

メッセージを使用してワーカー間のデータを交換する
メインスレッドとワーカー間は別スレッドのため、データを共有していません。そのため、DOMへのアクセスやwindowオブジェクト（XHRなどの一部オブジェクトはアクセ
ス可能）に直接アクセスできません。データを送受信するためには、postMessageメソッドを使用します。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

60

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Web Workers
 index.html
1.
2.
3.
4.
5.

var work = new Worker("worker.js");work.postMessage(100);
work.onmessage = function(e) {console.log(e.data);}

 worker.js
1. self.onmessage = function(e) {2. var data =e.data;
3. for (var i = 0; i < 10000; i++) {4.
data += i;
5. }6. self.postMessage(data);
7.}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

61

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

サンプル問題 10 以下のソースコードを実行して、エラーになる行を1つ選びなさい。


1.
2.
3.
4.
5.


index.html

var work = new Worker("worker.js");work.postMessage(100);
work.onmessage = function(e) {console.log(e.data);}
worker.js

I. self.onmessage = function(e) {II.
var data =e.data;
III. document.getElementById("message").innerHTML = data;
IV. postMessage(true);
V. }A) 1行目B) 2行目C) Ⅲ行目D) Ⅳ行目The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

62

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

解答 10 以下のソースコードを実行して、エラーになる行を1つ選びなさい。


1.
2.
3.
4.
5.


index.html

var work = new Worker("worker.js");work.postMessage(100);
work.onmessage = function(e) {console.log(e.data);}
worker.js

I. self.onmessage = function(e) {II.
var data =e.data;
III. document.getElementById("message").innerHTML = data;
IV. postMessage(true);
V. }A) 1行目B) 2行目C) Ⅲ行目Web Workersからdocumentオブジェクトにはアクセスできないよ。postMessageメソッドはグローバル関数だから、selfがなくても大丈夫!

D) Ⅳ行目The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

63

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】ECMAScript2015の非同期処理（1/2）
1.var data = 10;
2.var p1 = new Promise(function (resolve, reject) {3.
for (var i = 0; i < 10000; i++) {4.
data += i;
5.
}6.
if(data >= 0){7.
resolve(data);
8.
}9.
reject(Error("data is negative."))10. });
PromiseはECMAScript2016で追加された非同期処理だよ!!
成功時に呼び出す値をresolveに、失敗時に呼び出す値はrejectに登録するんだ。Battery Status APIのような比較的新し目のAPIはPromiseを採用しているから、文法を知っておくとAPIも覚えやすくなるよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

64

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】ECMAScript2015の非同期処理（2/2）

1.p1.then(function (data) {2. alert(data);
3.})
4. .catch(function (err) {5. alert(err.message);6. });

Promiseの処理が成功するとthenメソッドが実行されるよ。
失敗するとcatchメソッドの方が実行されるよ。
非同期処理の失敗/成功時の処理を分かりやすく書けるんだ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

65

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

【参考】ECMAScript2015のアロー関数

1. var p1 = new Promise((resolve, reject) => { });2. p1.then(data => { })3. .catch(err => { });アロー関数を使うと、関数定義を「(引数) => {}」の書式で書けるよ。
引数が1つの場合は、「( )」も省略できるんだ。
JavaScriptはたくさん関数を書くから、ちょっとだけ書きやすくなるよ。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

66

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

67

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.

68

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© Fujitsu Learning Media Ltd. 2016. All rights reserved.