ウェブデザイン技能検定3級学科解説その11

ウェブデザイン技能検定3級学科出題範囲

3.ウェブデザイン技術

3-3.スクリプト

1.エクマスクリプト(Ecma Script)のコーディングおよびシステムについて一般的な知識を有すること。

 

エクマスクリプトとは

ECMAScript(エクマスクリプト)は、JavaScriptの標準であり、

Ecma Internationalのもとで標準化手続きなどが行われている。

 

JavaScript(ジャバスクリプト)とは

JavaScript(ジャバスクリプト)とは、プログラミング言語のひとつである。

Javaと名前が似ているが、全く異なるプログラミング言語である

JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、

クラスなどのクラスベースに見られる機能も取り込んでいる。

ウェブブラウザ上で動作し動的なウェブサイト構築や

リッチインターネットアプリケーションの開発に用いられる。

また、2010年以降はnode.jsなどのサーバサイドJavaScript実行環境や各種ライブラリの充実により、

MEANに代表されるように、Web開発の全ての領域で活用されるようになってきている。

 

エクマスクリプト(Ecma Script)のコーディングおよびシステムについて

JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、

クラスなどのクラスベースに見られる機能も取り込んでいる。

ウェブブラウザ上で動作し動的なウェブサイト構築や

リッチインターネットアプリケーションの開発に用いられる。

また、2010年以降はnode.jsなどのサーバサイドJavaScript実行環境や各種ライブラリの充実により、

MEANに代表されるように、Web開発の全ての領JavaScriptという言葉は

狭義にはMozillaが仕様を策定し実装しているスクリプト言語を指す。

このスクリプト言語はEcmaインターナショナルでECMAScript (ECMA-262) として標準化されており、

多くのウェブブラウザ等はこの標準化されたECMAScriptを実装している。

たとえば、マイクロソフトによる実装はJScriptと呼ぶ。

一般的にJavaScriptという言葉が使われるときは

このようなさまざまなECMAScriptの実装も含んだ幅広い意味で使われるので、

どちらの意味でJavaScriptという言葉が使われているかは文脈で判断する必要がある。

ECMAScriptは仕様自体に独自の拡張を条件付きで認める記述があり、

現在主要なブラウザが実装しているスクリプト言語はすべてECMAScriptに準拠していることになる。

広義の意味でこれをJavaScriptと呼ぶ場合、

主要なブラウザが実装しているスクリプト言語はマイクロソフトやGoogle、

アップルの実装も含めてJavaScriptである。

なお、ウェブブラウザでよく実装されているAPIであるDOM (Document Object Model) は

ECMAScriptの仕様の一部ではないので、DOMの準拠の有無はECMAScriptの準拠の有無とは関係ない。

 

基本的な文法

JavaScriptの変数は var, letおよびconstキーワードを使用して宣言できる。

var x; // 変数xの宣言。値が未指定のため、特殊な値である undefined が入った状態となる。
var y = 2; // 変数yの宣言。同時に 2 が代入される。

上記例のスラッシュ2文字以降はコメントである。

JavaScriptは言語仕様にI/Oが組み込まれておらず、それらは実行環境により提供される。

ECMAScript 5.1の仕様では以下のように言及されている。

この仕様の中では外部データの入力または計算結果の出力は供給しない。
(… indeed, there are no provisions in this specification for input of external data or output of computed results.)

しかし、ほとんどの実行環境はConsole Standardsで規定されている

console オブジェクトを持っており、そこにコンソール出力を行える。

以下に最小のHello worldプログラムを示す。

console.log(“Hello World!”);

再帰関数は以下のように書ける。

function factorial(n) {
if (n == 0) {
return 1;
}
return n * factorial(n – 1);
}
無名関数(またはラムダ式)の構文とクロージャの例は以下である。

// ECMAScript 5以前の記法
var displayClosure = function() {
let count = 0;
// ECMAScript 2015以降で可能な記法
return ()=> {
return ++count;
};
}
var inc = displayClosure();
inc(); // 1 が返る
inc(); // 2 が返る
inc(); // 3 が返る

可変長引数は以下のように記述する。

var sum = function(…args) {
let x = 0;
for (const v of args) {
x += v;
}
return x;
}
sum(1, 2, 3); // 6 が返る

即時実行関数式(英語版) (IIFE) の例。

関数を用いることで変数をクロージャに閉じ込めることができる。

var v;
v = 1;
var getValue = (function(v) {
return function() {return v;};
})(v);

v = 2;

getValue(); // 1 が返る

複雑な例

以下のサンプルコードは、様々なJavaScriptの機能を示したものである。

“use strict”; // strictモードの宣言
/* 2つの数値の最小公倍数を求める */
function LCMCalculator(x, y) { // コンストラクタ関数
const checkInt = (x)=> { // 入れ子の関数
if (x % 1 !== 0) {
throw new TypeError(x + ” is not an integer”); // 例外のスロー
}
return x;
};
// 行末のセミコロンは省略可能な場合があるが、省略は推奨されない。
this.a = checkInt(x)
this.b = checkInt(y);
}
// オブジェクトのプロトタイプはコンストラクタ関数の prototype プロパティに格納する
LCMCalculator.prototype = { // オブジェクトリテラル
constructor: LCMCalculator, // このようにプロトタイプを上書きする場合は、
// constructorプロパティにコンストラクタ関数名を再指定する
gcd: function () { // 最大公約数を計算するメソッド
// 「ユークリッドの互除法」アルゴリズムで計算
let a = Math.abs(this.a), b = Math.abs(this.b);
if (a < b) {
// 変数の入れ替え
const t = b;
b = a;
a = t;
}
while (b !== 0) {
const t = b;
b = a % b;
a = t;
}
// 最大公約数の計算は一度でよいため、自分自身を計算済みの結果を返すメソッドで再定義(上書き)する。
// (これにより LCMCalculator.prototype.gcd の代わりに this.gcd が呼ばれるようになる。
// ただし、計算後にプロパティ a や b が変更されてしまうと、結果は誤りとなる。)
// なお ‘gcd’ === “gcd”, this[‘gcd’] === this.gcd である。
this[‘gcd’] = function () {
return a;
};
return a;
},
lcm : function () { // 最小公倍数を計算するメソッド
// 変数名は、オブジェクトのプロパティと衝突しない。例)lcm は this.lcm とは異なる。
// 以下では、浮動小数の精度の問題を避けるために this.a * this.b としていない。
const lcm = this.a/this.gcd()*this.b;
// 最小公倍数の計算も一度でよいため、自分自身を計算済みの結果を返すメソッドで再定義(上書き)する。
this.lcm = function () {
return lcm;
};
return lcm;
},
toString: function () { // toStringはオブジェクトを文字列に変換するときに呼ばれるメソッド。
// テンプレート文字列により文字列中に値を埋め込むことができる。
return `LCMCalculator: a = ${this.a}, b = ${this.b}`;
}
};

// 汎用の出力関数の定義。この実装はWebブラウザ上でのみ動作する。
function output(x) {
document.body.appendChild(document.createTextNode(x));
document.body.appendChild(document.createElement(‘br’));
}

// 無名関数はさまざまな書き方が可能
[[25, 55], [21, 56], [22, 58], [28, 56]].map(([a, b])=> new LCMCalculator(a, b)) // 配列リテラル + マッピング関数
.sort((a, b)=> a.lcm() – b.lcm()) // 指定した比較関数を用いたソート
.forEach(obj=> {
output(obj + “, gcd = ” + obj.gcd() + “, lcm = ” + obj.lcm());
});
上記コードをウェブブラウザ上で実行すると、以下の結果が表示される。

LCMCalculator: a = 28, b = 56, gcd = 28, lcm = 56
LCMCalculator: a = 21, b = 56, gcd = 7, lcm = 168
LCMCalculator: a = 25, b = 55, gcd = 5, lcm = 275
LCMCalculator: a = 22, b = 58, gcd = 2, lcm = 638

 

JavaScriptの利用について

Webページでの利用

JavaScriptの最も歴史の長い使用法はHTMLページにクライアント側のふるまいを持たせることである。

これは当初はダイナミックHTML (DHTML) として知られていた。

JavaScriptはHTMLに直接埋め込まれまたは別のファイルからインクルードされ、

ウェブブラウザ上のJavaScript実行環境で動作する。

ウェブブラウザは通常、Document Object Model (DOM) を扱うためのホストオブジェクトを提供する。

 

JavaScriptの使用例としては、以下のようなものがある。

・ページの再読み込みなしで新しいコンテンツを読み込むまたはサーバーに投稿する(Ajax。例えば、SNSでページを離れることなく新しい投稿を表示することができる)。

・ゲームなどの動的なコンテンツを提供する。

・データをサーバーに送信せずにフォーム入力値の検証(英語版)を行う。

・Web解析(英語版)や広告追跡(英語版)、パーソナライゼーションなどのために

ユーザーの閲覧情報を収集する。

 

JavaScriptはユーザーのブラウザ上で動作できることから、

ユーザーの操作に対して素早く反応することができ、

アプリケーションをよりレスポンシブにすることができる。

さらにJavaScriptはHTML単独では対応できない操作、例えばキー入力などにも応答することができる。

Gmailのようなアプリケーションでは、JavaScriptでUIロジックを実装し、

さらにJavaScriptでサーバーから情報(例えばeメールのメッセージ)を取得することで、

こうしたメリットを享受している。このような利点からAjaxは大きなトレンドとなった。

JavaScriptは主要ウェブブラウザの大半でサポートされている唯一の言語であることから、

意図されたことではなかったが、様々な言語や

フレームワークのコンパイル先の出力言語となっている。

動的な言語であることからパフォーマンスが制限されるにも関わらず、

JavaScriptエンジンの性能向上によりこうした言語は予想外の発展を見せている。

 

まとめ

過去問に下記のような問題がある。

 

Ajax の説明として適切でないものを、以下より 1 つ選択しなさい。

1. ページを再読み込みすることなく、サーバに非同期でリクエストを送る。

2. サーバと XML などのデータをやり取りし、それらを解析して扱う。

3. 開発元から無償公開されているコンポーネントをダウンロードして使う。

4. HTML や XML 文書は DOM で操作する。

 

Ajax(アジャックス)とは

Ajax(アジャックス)とは、ウェブブラウザ内で非同期通信を行いながら

インターフェイスの構築を行うプログラミング手法である。

XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、

通信結果に応じてダイナミックHTML (DHTML) で

動的にページの一部を書き換えるというアプローチを取る。

 

DOMとは

DOMとは、Document Object Model (DOM) の略で、

HTML文書やXML文書を各種プログラムから利用するための仕組みである。

WHATWGがLiving Standardとして定義している。

APIと言われることが多いが、一応APIではない。

 

以上の情報を参考にすると、適切でないものは3であることがわかる。

 

もうひとつ過去問

JavaScript に関する説明のうち適切なものを、以下より 1 つ選択しなさい。

1. DOM アクセスのためにのみ使用される。

2. 要素内のコンテンツの変更はできない。

3. 一般的に HTML の先頭に記述することで、すべての要素に確実にアクセスできる。

4. サーバから動的にデータを取得することができる。

 

 

正解は4である。

 

出題範囲の内容としてはエクマスクリプトについてとなっているが、

出題されている問題は、ジャバスクリプトについてや、DOMについて、

Ajaxについてなどがメインとなるため、

Javascript、DOM、Ajaxという言葉の意味を理解しておく必要がありそうだ。

 


 

 

このエントリーをはてなブックマークに追加

マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です