recursal/MDN huggingface dataset:
Void element （空要素）
==================

**空要素 (void element)** とは HTML における要素のうち、子ノード（すなわち子要素およびテキストノード）を**持つことができない**ものを指します。空要素には開始タグしかありません。空要素では終了タグを指定することができません。

また HTML においては、空要素に終了タグを置くことはできません。例えば、 `<input type="text"></input>` は不正な HTML です。一方、 SVG や MathML の要素で子ノードを保有することができないものは、開始タグ内で XML 自己完結型タグ構文を置く代わりに終了タグを使用することができます。

HTML、SVG、MathML の各仕様書は、それぞれの要素が何を含むことができるかを詳細に定義しています。従って、一部のタグの組み合わせは意味が失われます。

空要素が何らかの子を持つようにマークアップする方法はありませんが、 JavaScript でプログラム的に子ノードを DOM 内の要素に追加することができます。しかし、それは良い方法とは言えません。なぜなら、その結果は信頼できるものではないからです。

HTML には以下の空要素が存在します。

* `<area>`
* `<base>`
* `<br>`
* `<col>`
* `<embed>`
* `<hr>`
* `<img>`
* `<input>`
* `<link>`
* `<meta>`
* `<param>`
* `<source>`
* `<track>`
* `<wbr>`
自己完結型タグ
-------

*自己完結型タグ(`<tag />`)は HTML には存在しません。*\

HTML 要素の開始タグの末尾に `/` （スラッシュ）文字がある場合、 HTML パーサーはそのスラッシュ文字を無視します。 `<script>` や `<ul>` のような要素で終了タグが必要となる場合において、このことを忘れないようにして下さい。このような場合、開始タグの末尾にスラッシュを追加しても、要素は閉じられません。

しかし、コードフォーマッターの中には、 XHTML と互換性を持たせたり、読み取りやすくしたりするために、空の要素の開始タグに末尾のスラッシュ文字を追加するものがあります。例えば、 コードフォーマッターによっては、`<input type="text">` を `<input type="text" />` に変換するものがあります。

XML 、 XHTML や SVG の空要素では自己完結型タグが必要です (例、`<circle cx="50" cy="50" r="50" />`) 。

子ノードを保有できない SVG と MathML 要素の開始タグは、自己完結型であることをマークすることが許されています。このような場合、要素の開始タグが自己完結型とマークされていれば、その要素は終了タグを持つべきではありません。

**メモ:** 開始タグの末尾にある `/` (スラッシュ) 文字の前に、引用されていない属性値が直接ある場合（間に空白がない場合）、スラッシュはパーサーによって破棄されるのではなく、属性値の一部となります。例えば、`<img src=http://www.example.com/logo.svg/>` というマークアップは `src` 属性の値が `http://www.example.com/logo.svg/` であることを意味します - これは URL が間違っていることを意味します。

関連情報
----

* 置換要素
Local scope (ローカルスコープ)
======================

ローカルスコープは 変数 をローカルにする変数の特性です（つまり、変数名は グローバルスコープ ではないスコープ内の 値 にのみ結び付けられます）。

関連項目
----

### 一般知識

* Wikipedia の スコープ
OpenGL
======

**OpenGL** (**Open Graphics Library**)は言語横断的な、2D と 3D ベクターグラフィックス用のマルチプラットフォーム i のアプリケーションプログラミングインターフェイス (API) です。この API は、ハードウェアで加速したレンダリングを得るため、画像プロセッサー (GPU) と相互作用させて使うことが典型的です。

さらに詳しく
------

### 一般知識

* Wikipedia でのOpenGL
CSS Object Model (CSSOM)
========================

**CSS Object Model (CSSOM)** とは、すべての CSS セレクターとそれぞれのセレクターに関連するプロパティを、ルートノード、兄弟、子孫、子、その他の関係からなるツリーの形に変換したものです。CSSOM は、Document Object Model (DOM) とよく似ています。それらの両方は、ウェブサイトを適切にレンダリングするために必ず発生する一連のステップである、クリティカルレンダリングパスの一部です。

CSSOM は、DOM とともに、レンダリングツリーを構築し、さらにブラウザーによってウェブページをレイアウトし描画するために使用されます。

### CSSOM API

CSS Object Model は JavaScript に CSS の操作を許可する API のセットでもあります。それは HTML よりもむしろ CSS のための DOM のようなものです。それによってユーザーは CSS のスタイルを動的に読み取ったり変更したりできます。

関連情報
----

* ページの生成：ブラウザーはどのように動作するか
HTTP
====

**HTTP** (HyperText Transfer Protocol、ハイパーテキスト転送プロトコル) は、Web上のハイパーメディア文書の転送を可能にする、基盤となるネットワークプロトコルです。一般にブラウザーとサーバーの間で用いられ、人間が読むことができます。現行の HTTP 仕様のバージョンは HTTP/2 と呼ばれています。

URIの一部として「`http://example.com/`」の中の「http」は「スキーマ」と呼ばれ、これを使ったリソースは、通常 HTTP プロトコルを用いた非暗号化コネクションで転送されます。(「`https://developer.mozilla.org`」にあるような)「https」スキーマでは、リソースは HTTP プロトコルで転送されますが、安全な TLSチャンネルを経由します。

HTTP はテクスチュアルであり(すべての通信はプレーンテキストで行われます)、ステートレスです(前の通信を気にせずに通信されます)。この特性は人間がワールドワイドウェブ上の文書(ウェブサイト)を読むのに理想的です。しかし HTTP は、サーバーからサーバーへのRESTウェブサービスや、ウェブサイトをより動的にするためにその内部で用いられるAJAXリクエストの基礎としても使用できます。

関連項目
----

* MDN 上の HTTP
* Wikipedia 上の HTTP
Simple response header
======================

CORS セーフリストレスポンスヘッダーの古い用語です。
Locale (ロケール)
=============

**ロケール**は、ユーザーインターフェイス用の言語別または国別の基本設定のセットです。

プログラムは、ロケール設定をホストシステムの言語から引き出します。とりわけ、ロケールは、指定された地域のプロトコルに従って、用紙サイズ、通貨、日付書式、および数値を表します。

関連情報
----

* Wikipedia 上の Locale（英語）
Parser (パーサー)
=============

**パーサー**は、ソースコードファイルを解析するコンパイラまたはインタプリタのモジュールです。

より一般的に言えば、テキストを解析して内容を別の表現に変換するソフトウェアです。

より詳しく知る
-------

### 一般知識

* Wikipedia 上の Parser（英語）
* Wikipedia 上の 構文解析器
XLink
=====

XLink は W3C の標準規格で、 XML と、 XML または他の文書との間のリンクを記述するために使用されます。その動作の一部は、どのように処理するかが実装に委ねられています。

単純な XLinks は Firefox で（少なくとも SVG と MathML では）「対応」されていますが、プレーンな XML 文書を XLinks で読み込んで、XML ツリーの関連ポイントをクリックしようとしても、リンクとしては機能しません。

XLink 1.0 で通常のリンクとしては面倒だと感じていた人のために、 XLink 1.1 では、単純なリンクには `xlink:type="simple"` を指定する必要がなくなりました。

XLink は SVG、MathML、その他の重要な標準で使用されています。

### 仕様書

* XLink 1.0
* XLink 1.1 (現在進行中の草案)
### 関連情報

* XML
* Code snippets:getAttributeNS - この DOM メソッドに対応していないブラウザーに対応するためのラッパー
Serializable object （シリアライズ可能オブジェクト）
====================================

**シリアライズ可能オブジェクト**は、どのような JavaScript 環境 ("realm") でもシリアライズし、後でデシリアライズすることができるオブジェクトです。
 これは例えば、ディスクに格納し後から復元したり、`structuredClone()` で複製したり、`DedicatedWorkerGlobalScope.postMessage()` を使用してワーカー間で共有したりすることができます。

 シリアライズは、元のオブジェクトのすべてのプロパティや、その他の一部を含まないことがあります。
 例えば、`DOMException` のシリアライズには `name` および `message` プロパティは必ず含まれますが、他のプロパティが含まれるかどうかは実装に依存します。
 結果的に、デシリアライズされたオブジェクトは元オブジェクトと同一のクローン/複製とは限りません。
 しかし、デシリアライズされた新しいオブジェクトはディープコピーになるので、元のオブジェクトからシリアライズされ、新しいオブジェクトにデシリアライズされたプロパティは、元のオブジェクトと参照することはありません。

 オブジェクトをシリアライズしたりデシリアライズしたりするときに、コピーを作成するよりもリソースを移譲したほうが理にかなっている場合があります。
 移譲可能なオブジェクトは移譲可能オブジェクトと呼ばれます。

対応しているオブジェクト
------------

 すべてのプリミティブ値は、シリアライズ可能です。
 すべてのオブジェクトが、シリアライズ可能なオブジェクトとは限りません。
 シリアライズ可能なオブジェクトについては、構造化複製アルゴリズム > 対応済みの型に一覧があります。

**メモ:** シリアライズ可能なオブジェクトは、Web IDL ファイル に `[Serializable]` 属性で示されています。
Function (関数)
=============

**関数** は、他のコードや自分自身、関数を参照する 変数 から呼ばれるコード断片です。関数が呼ばれると、引数 が関数への入力として渡され、次に関数は任意で値を戻します。JavaScript における関数は、オブジェクト でもあります。

関数名は、関数宣言の一部または関数式に含まれる 識別子 です。関数名の スコープ は、関数名が宣言か式かによって決まります。

### さまざまな関数の種類

**無名関数** とは、関数名のない関数です。無名にできるのは関数式のみで、関数宣言には名前が必要です。


```js
// 関数式
(function () {});
// アロー関数
() => {};
```


下記の用語は、ECMAScript 言語仕様で使用されているものではなく、関数の様々な種類を表すための俗称です。

**名前付き関数** とは、関数名のある関数です。


```js
// 関数宣言
function foo() {}
// 名前付き関数式
(function bar() {});
// アロー関数
const foo = () => {};
```


**内部関数** は、ほかの関数内に書かれた関数です (この例では `square`)。**外部関数** は、関数を含む関数です (この例では `addSquares`):


```js
function addSquares(a, b) {
  function square(x) {
    return x \* x;
  }
  return square(a) + square(b);
}
// アロー関数を使う
const addSquares = (a, b) => {
  const square = (x) => x \* x;
  return square(a) + square(b);
};
```


**再帰関数** は自身を呼び出す関数です。再帰 を参照してください。


```js
function loop(x) {
  if (x >= 10) return;
  loop(x + 1);
}
// アロー関数を使う
const loop = (x) => {
  if (x >= 10) return;
  loop(x + 1);
};
```


**即時実行関数式** (IIFE) は、関数がブラウザーのコンパイラーに読み込まれた直後に呼び出される関数です。IIFE を見分けるには、関数定義の末尾に追加の左括弧と右括弧があるかどうかで判断できます。


```js
// 関数宣言は、この方法で即時実行できません。
// (https://en.wikipedia.org/wiki/Immediately-invoked\_function\_expression)
/\*
function foo() {
 console.log('Hello Foo');
}();
\*/

// 名前付きまたは無名の関数式は即時実行できます。
(function foo() {
  console.log("Hello Foo");
})();

(function food() {
  console.log("Hello Food");
})();

(() => console.log("hello world"))();
```


IIFE の詳細を知りたい方は、次の Wikipedia のページを確認してください: Immediately Invoked Function Expression

関連項目
----

### 技術リファレンス

* 関数
* アロー関数
DSL
===

**DSL** という用語は、文脈によって意味が異なることがあります。以下の可能性があります。


DSL (デジタル加入者線)
**DSL (デジタル加入者線)** は、ブロードバンドインターネット接続の一種で、電話回線を使って有線データ通信を行うものです。
DSL (ドメイン固有言語)
**DSL（ドメイン固有言語）** とは、あるアプリケーションドメイン内の特定の問題に対処するために設計された、範囲が限定されたコンピューター言語の一種です。

関連情報
----

* Wikipedia 上の DSL
Property (プロパティ)
================

**プロパティ**という用語はコンテキストに応じて幾つかの意味を持ちます。以下を参照してください：

Property (プロパティ) (CSS)
**CSS のプロパティ**は、関連付けられた値によりブラウザーがどのように要素を表示するかを定義する特性です。
Property (プロパティ) (JavaScript)
**JavaScript プロパティ**は、多くの場合データ構造と関連付けられた属性を記述する、オブジェクトの特性です。
Strict mode (厳格モード)
===================

JavaScript の**厳格モード**は、 JavaScript の制限された変化形を*利用する*方法であり、それによって暗黙的に "sloppy mode" をやめることができます。厳格モードは単なるサブセットではありません。通常のコードとは*意図的に*異なる意味を持っています。

スクリプト全体を厳格モードにする場合は、他の文の前に `"use strict";` 文を含めることで呼び出すことができます。

1. 厳格モード
2. 厳格モードへの移行
3. 用語集
    1. Sloppy mode
Validator (バリデーター)
==================

バリデーターはコードの構文エラーを確認するプログラムです。バリデーターはあらゆる書式や言語のために作成することができますが、ここでは特に HTML、CSS、そして XML を確認するツールのことを指します。

詳細情報
----

### 一般知識

* Wikipedia の Validator (英語)
* バリデーターの例
Composite operation (合成演算)
==========================

CSS では、 CSS ルールのプロパティの値がそのプロパティの基盤値であり、キーフレームの同じプロパティの値がそのプロパティの効果値です。

合成演算 (*composite operation*) は、効果値と基盤値とを結合して、最終的なキーフレームの効果値を生成するために使用する固有の演算です。合成演算には 3 種類があります。

* **置換**: 効果値が基盤値を置き換えます。この場合の最終的な効果値は、元の効果値そのものです。
* **追加**: 効果値は基盤値に追加されます。
* **累積**: 効果値は基礎値に結合されます。

**メモ:** CSSの合成演算はアニメーションにのみ適用されます。

関連情報
----

* `animation-composition`
* `KeyframeEffect.composite` (en-US)
NaN (非数)
========

非数(英語：Not a Number)とは未定義な値か、特に浮動小数点数の計算の結果で、表すことができない数値(データ型)のことを言います。

例えば、無限、０で割り算された結果、未定義、負数の平方根 (浮動小数点数は実数ですが、これは虚数です) などは非数と言います。

かんたんに言うと、JavaScript プログラムで、2 つの変数で割り算を行うと、結果が NaN (JavaScript では "undefined" と定義されています)になる可能性があるとします。この場合、この割り算はプログラムを壊す可能性があります。ここで、この計算が大きなアルゴリズムの小さな一部分である場合、実際どこに問題があったかを理解するのはとても苦痛です。幸いにも、計算結果が NaN となり、除数が 0 を取りえることがわかるため、最初にそうした計算を防ぐためのテスト条件を設けることや、起こったあとに通知することができます。

もっと学ぶ
-----

### 一般的な知識

* Wikipedia によるNaN
### 技術情報

* JavaScript での非数
Baseline
========

**ベースライン**という用語は文脈によっていくつかの意味を持つことがあります。

Baseline (typography)
**ベースライン**とは、ヨーロッパおよび西アジアの書体で使用される用語で、フォントの文字がその上に載る概念上の線を意味します。
Baseline (互換性)
**Baseline** （ベースライン）は、ブラウザー間で動作するウェブプラットフォームの機能を確認します。Baseline は、サイトの訪問者に互換性の問題を引き起こす可能性が低くなった時期を示すことで、その機能を使用するタイミングを決定するのに役立ちます。
関連情報
----

* Baseline (Wikipedia)
CDN
===

**CDN** （Content Delivery Network、コンテンツ配信ネットワーク）は、様々な地域に分散されたサーバーの集まりです。これらのサーバーは同じ内容のデータのコピーを保有し、各ユーザーに最も近いサーバーからデータへの要求に応えることが可能になっています。 CDN は通信量の影響を受けにくい高速なサービスを実現します。

CDN は、 Bootstrap や jQuery など、スタイルシートや JavaScript ファイル（静的ファイル）からなるライブラリを配信するために広く用いられています。これらのサードパーティライブラリの配信に CDN を用いることが有効な理由はいくつかあります。

* ライブラリのような静的なファイルを CDN から配信することで、サーバーへの要求負荷を軽減します。
* ほとんどの CDN は世界中にサーバーを配置しています。そのため、自分のサーバーよりも CDN のサーバーの方が地理的にユーザーの近くに位置しているかもしれません。地理的な距離は応答時間に比例的に影響します。
* CDN には適切なキャッシュ設定が適用されています。 CDN を使用すると、自分のサーバーに静的ファイルを配置するための設定を行う手間を省くことができます。
Shallow copy (シャローコピー)
======================

オブジェクトの**シャローコピー**とは、コピーがコピー元のオブジェクトとプロパティにおいて同じ参照を共有する（同じ基礎値を指す）コピーのことを指します。その結果、コピー元とコピー先のどちらかを変更すると、もう一方のオブジェクトも変更される可能性があります。そのため、意図せずにコピー元やコピー先に予期しない変更が発生してしまう可能性があります。この挙動は、ソースとコピーが完全に独立しているディープコピーの挙動とは対照的です。

シャローコピーでは、オブジェクトの既存の要素にある共有プロパティの値を選択的に変更することは、既存の要素に完全に新しい値を割り当てることとは異なるということを理解することが重要です。

例えば、配列オブジェクトの `copy` という名前のシャローコピーにおいて、 `copy[0]` 要素の値が `{"list":["butter","flour"]}` であるとき、 `copy[0].list = ["oil","flour"]` を実行すると、元のオブジェクト内の対応する要素も変化します。これは、元のオブジェクトとシャローコピーの両方で共有しているオブジェクトのプロパティを選択的に変更したためです。

しかし、代わりに `copy[0] = {"list":["oil","flour"]}` とすると、元のオブジェクト内の対応する要素は**変化しません**。それはこの場合、シャローコピーが元のオブジェクトと共有している既存の配列要素のプロパティを選択的に変更するのではなく、シャローコピー側にだけ、 `copy[0]` の配列要素に全く新しい値を割り当てていることになるからです。

JavaScript では、すべての標準組込みオブジェクトのコピー操作（スプレッド構文, `Array.prototype.concat()`, `Array.prototype.slice()`, `Array.from()`, `Object.assign()`, `Object.create()`）において、ディープコピーではなくシャローコピーを生成します。

例
-

次の例では、配列オブジェクト `ingredients_list` を作成し、その `ingredients_list` オブジェクトをコピーして `ingredients_list_copy` オブジェクトを作成する場合を考えてみましょう。


```js
let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];

let ingredients_list_copy = Array.from(ingredients_list);
console.log(JSON.stringify(ingredients_list_copy));
// ["noodles",{"list":["eggs","flour","water"]}]
```


`ingredients_list_copy` の `list` プロパティの値を変更すると、 `ingredients_list` 元のオブジェクト内の `list` プロパティも変更されます。


```js
ingredients_list_copy[1].list = ["rice flour", "water"];
console.log(ingredients_list[1].list);
// Array [ "rice flour", "water" ]
console.log(JSON.stringify(ingredients_list));
// ["noodles",{"list":["rice flour","water"]}]
```


`ingredients_list_copy` の最初の要素に完全に新しい値を代入しても、 `ingredients_list` ソースオブジェクト内の最初の要素には何の変更も発生しません。


```js
ingredients_list_copy[0] = "rice noodles";
console.log(ingredients_list[0]);
// noodles
console.log(JSON.stringify(ingredients_list_copy));
// ["rice noodles",{"list":["rice flour","water"]}]
console.log(JSON.stringify(ingredients_list));
// ["noodles",{"list":["rice flour","water"]}]
```

関連情報
----

* ディープコピー
MIME type (MIMEタイプ)
===================

**MIME タイプ** (現在は正しくは「メディアタイプ」と呼ばれますが、「コンテンツタイプ」と呼ばれることもあります) は、ファイルの種類を示し、ファイルと共に送信される文字列です (例えば、音声ファイルは `audio/ogg`、画像ファイルは `image/png` というようにラベル付けして、コンテンツ形式を記述します)。

Windows 上で従来行われていたファイル拡張子と同じ目的を果たします。この名前は、もともと電子メールで使用されていた MIME 規格に由来しています。

詳細情報
----

### 一般知識

* Wikipedia 上の メディアタイプ
### 技術リファレンス

* MIME タイプのリスト (英語)
* サーバー MIME タイプの適切な設定 (en-US)
* ウェブコンテキストでの MIME タイプの使用法に関する詳細情報。
* MIME タイプの不完全なリスト
* Mozilla がどのように MIME タイプを決定しているか
* MediaRecorder.mimeType
Flexbox (フレックスボックス)
===================

Flexbox は、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである CSS Flexible Box Layout Module に対する一般的な通称です。

この仕様書では、Flexbox はユーザーインターフェイスの設計のためのレイアウトモデルとして説明されています。Flexbox の重要な特徴として、フレックスレイアウト内のアイテムが伸縮することができるという点が挙げられます。余白はアイテム自体に割り当てることも、アイテム間やアイテム周りに配分することも出来ます。

また、Flexbox はでは主軸や交差軸にそった位置合わせをすることもでき、アイテムグループのサイズと配置に対する高レベルな制御を提供します。

理解を深める
------

### プロパティリファレンス

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
### 関連情報

* *CSS Flexible Box Layout Module Level 1 Specification*
* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスボックスと他のレイアウト方法の関係*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS フレックスボックスガイド: *フレックスアイテムの順序*
* CSS フレックスボックスガイド: *主軸方向のフレックスアイテムの比率の制御*
* CSS フレックスボックスガイド: *フレックスアイテムの折り返しのマスター*
* CSS フレックスボックスガイド: *フレックスボックスの典型的な用途*

1. MDN Web Docs 用語集
    1. 交差軸
    2. Flex
    3. フレックスコンテナー
    4. フレックスアイテム
    5. グリッド
2. 関連する CSS プロパティ
    1. `align-content`
    2. `align-items`
    3. `align-self`
    4. `flex`
    5. `flex-basis`
    6. `flex-direction`
    7. `flex-flow`
    8. `flex-grow`
    9. `flex-shrink`
    10. `flex-wrap`
    11. `justify-content`
    12. `order`
Protocol (プロトコル)
================

**プロトコル**は、コンピューター内またはコンピューター間でデータを交換する方法を定義したルールの体系です。機器間の通信では、交換されるデータの形式に機器が対応している必要があります。形式を定義する一連のルールがプロトコルと呼ばれています。

理解を深める
------

### 基礎知識

* ウィキペディアの通信プロトコルの記事
* RFC 公式インターネットプロトコル標準
関連情報
----

* TCP
* HTTP 概要
* Packet
Value (値)
=========

データ、またはデータ周りのオブジェクト **ラッパー** のコンテキストでは、値はオブジェクトラッパーに含まれる **プリミティブ値** です。 **変数** や **プロパティ** のコンテキストでは、値はプリミティブ、もしくは **オブジェクト参照** のいずれかになります。

詳細情報
----

### 基礎知識

* Wikipedia 上の記事「プリミティブラッパークラス」
Truthy (真値)
===========

JavaScript において、**真値** (truthy) は論理値のコンテキストに現れた時に `true` とみなされる値のことです。偽値 (falsy) として定義された値 (つまり、`false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, `NaN`) を除くすべての値は真値です。

JavaScript は、論理値のコンテキストでは型変換を用います。

JavaScript で *truthy* な値の例です (論理値のコンテキストではこれらの値を `true` と評価し、`if` ブロックを実行します)。


```js
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)
```

関連情報
----

* 偽値
* 型変換
* Boolean
Quaternion (四元数)
================

**四元数**は、2 つの 3D ベクトルの商であり、3D グラフィックや加速度計ベースのセンサーで、方位や回転のデータを表現するために使用されます。

数学的な四元数はこれよりも複雑ですが、例えば WebGL や WebXR を使用して回転を表現するための**単位四元数** (または**回転四元数**) は、3D ポイントと同じ構文を使用して表されます。そのため、`DOMPoint` (または `DOMPointReadOnly`) という型を使って四元数を格納します。

関連情報
----

* Quaternions and spatial rotation (Wikipedia, 英語)
* 四元数 (ウィキペディア)
* `XRRigidTransform.orientation` (WebXR Device API リファレンス)
Repo (リポジトリ)
============

Git、SVNのようなバージョン管理システムでは、リポジトリ(repo)とはアプリケーションのソースコードと、さまざまなメタデータが一緒にホスティングされる場所です。

関連項目
----

* Wikipedia のリポジトリ
Internationalization (i18n) （国際化対応）
===================================

**国際化対応** (Internationalization) は "i18n" と略されることもあり、さまざまな地域、言語、文化が異なるターゲットオーディエンスに簡単に適応できるようにシステムを設計することです。

システムを特定のターゲット層に適合させる補完的なプロセスをローカライズと呼びます。

特に国際化とは、国際的な文化や習慣に関する次のような違いに適応することです。

* 書記体系
* 測定単位（通貨、°C/°F, km/マイル、など）
* 日時フォーマット
* キーボードレイアウト

Unicode コンソーシアムの活動は、国際化の基本的な部分です。 Unicode は、世界の書記体系の多様性だけでなく、通貨や時間/日付フォーマットのような文化的な多様性にも対応しています。

関連情報
----

* 地域化
* Unicode コンソーシアム
* JavaScript 国際化対応 API
TCPハンドシェイク
==========

TCP (トランスミッションコントロールプロトコル) (en-US)は、IP ネットワーク上の 2 台のコンピューター間でコネクション型通信を行うためのトランスポート層におけるホスト間プロトコルです。 TCP は、IP ネットワーク上で TCP/IP 接続を設定するために、**3 ウェイ・ハンドシェイク**(別名 TCP ハンドシェイク、3 メッセージハンドシェイク、および、もしくはまたは SYN-SYN-ACK)を使用します。TCP セッションをネゴシエートして TCP セッションを開始するために TCP によって送信される 3 つのメッセージは、それぞれ SYN、*SYN-ACK* **/ SYN**chronize のための ACK、**SYN**chronize-**ACK**nowledgement / **ACK**nowledge という愛称で呼ばれています。HTTP ブラウザーのリクエストなどのデータを送信する前に互いに情報を双方向に渡したい 2 台のコンピューターが、接続のパラメータをネゴシエートすることができるように、３つのメッセージの仕組みが設計されています。

ホスト（一般的にはブラウザー）は、TCP SYNchronize パケットをサーバーに送信します。サーバーは SYN を受信し、SYNchronize-ACKnowledgement を返送します。ホストはサーバーの SYN-ACK を受信し、ACKnowledge を送信します。サーバーは ACK を受信し、TCP ソケット接続が確立されます。

このハンドシェイクステップは、安全な接続を作成する際に、DNS ルックアップの後、およびTLS ハンドシェイクの前に実行されます。接続は 4 度目のハンドシェイクを通じて、接続の各終端で独立して終了させることができます。

関連情報
----

* トランスポート層セキュリティ(TLS)プロトコル
* HTTPS
* Wikipedia 上のトランスポート層セキュリティ
CSS pixel
=========

**CSS Pixel** —CSS で接尾辞 `px` とともに示されます— は、人間の目で負担なく快適に見ることができるけれどなるべく小さい、1 ドットの高さや幅におおよそ一致する、長さの単位です。定義によれば、これは閲覧者の目から腕の長さまで離れた位置での、画素密度 96DPI の単一ピクセルの物理的サイズです。

その定義には、もちろん大きな揺らぎがあります。「快適に見ることができる」や「腕の長さ」などの不正確な用語は、人から人へと伝えるうちに変化してしまいます。例えば、あるユーザーがデスクトップの前にある机に着くとき、そのディスプレイは一般的に、例えば携帯電話に向かうときと比べて、ユーザーの目からかなり遠い位置にあります。

そのため、一般的には「単位 `px` を使うときに得られる値は、スクリーンの実際の画素密度に関係なく、スクリーンの 1 インチに `96px` とほとんど等しくなる距離です。」と言えば事足ります。あるいは、「もしユーザーが画素密度 266DPI の電話を持っていて、そのスクリーン上に幅 `96px` の要素がある場合、その実際の幅は 266 device pixels だろう。」とも言えます。

関連項目
----

### 技術リファレンス

* CSS Values and Units Module, section 5.2: Absolute Lengths
### これについて学習する

* CSS Length Explained on the MDN Hacks Blog
Site map (サイトマップ)
=================

**サイトマップ**は、ウェブサイトのページの一覧です。サイトのページの構造化された一覧は、検索エンジンの最適化に役立ち、検索エンジンなどのウェブクローラーが辿るためのリンクを提供します。また、サイトマップは、サイトのコンテンツの概要を一目で確認できるため、ユーザーのサイトナビゲーションにも役立ちます。
Document directive (文書ディレクティブ)
==============================

**CSP の文書ディレクティブ**は `Content-Security-Policy` ヘッダーで使用され、ポリシーが適用される文書またはワーカー環境のプロパティを管理します。

文書ディレクティブは `default-src` ディレクティブで代替されることはありません。

完全な一覧は文書ディレクティブを参照してください。

関連情報
----

* 用語集
    + CSP
    + 報告ディレクティブ
    + フェッチディレクティブ
    + ナビゲーションディレクティブ
* リファレンス
    + https://www.w3.org/TR/CSP/#directives-document
    + `upgrade-insecure-requests`
    + `block-all-mixed-content`
    + `require-sri-for` 
    非推奨
    + `Content-Security-Policy`
Garbage collection (ガベージコレクション)
===============================

**ガベージコレクション**とは、コンピュータプログラミングで用いられる用語で、オブジェクトが、他のオブジェクトによって参照されなくなったものを見つけて削除する処理を記述します。

言い換えれば、ガベージコレクションは、他のオブジェクトによって使用されていないオブジェクトを削除するプロセスです。 "GC" と省略されることが多いが、ガベージコレクションは、JavaScript で使用されるメモリー管理システムの基本的なコンポーネントです。

関連情報
----

* メモリー管理 (Wikipedia)
* ガベージコレクション (Wikipedia)
* ガベージコレクション (MDN の JavaScript ガイド)
* JavaScript でのメモリー管理
Self-Executing Anonymous Function (自己実行無名関数)
============================================

定義されるときに、すぐに実行される JavaScript の関数です。IIFE (即時実行関数式) と呼ばれることもあります。

詳細は、上記でリンクしている IIFE の用語集のページを参照してください。
SVG
===

*Scalable Vector Graphics* (**SVG**) は XML の文法に基づいた 2 次元ベクター画像フォーマットです。

W3C は、1990 年代後半に SVG に取り組み始めましたが、 SVG は Internet Explorer 9 が対応したときにはじめて有名になりました。主要なウェブブラウザーはすべて SVG に対応するようになりました。

SVG は XML の文法に基づいており、CSS によるスタイルの設定と、 JavaScript を用いたインタラクティブ化が可能です。HTML5 では HTML ドキュメントに SVG タグを直接埋め込むことができるようになりました。

SVG 画像は、ベクター画像形式であるため無制限に拡大することができ、画面のサイズに応じてインターフェース要素やグラフィックを作成できるため、レスポンシブデザインにおいても有用です。SVG にはクリッピング、マスキング、フィルター、アニメーションなどの便利なツールも用意されています。

詳細情報
----

### 基礎知識

* Wikipedia 上の SVG
### SVG を学ぶ

* W3.org の SVG 入門（英語）
### 技術情報

* MDN の SVG ドキュメント
* 最新の SVG の仕様 (英語)
Main thread (メインスレッド)
=====================

**メインスレッド**は、ブラウザーがユーザーのイベントや描画を処理するところです。既定では、ブラウザーは単一のスレッドを使用してページ内のすべての JavaScript を、レイアウト、再フロー、ガベージコレクションなどと同様に実行します。つまり、実行に時間がかかる JavaScript 関数がスレッドをブロックし、ページが反応しなくなり、使い勝手が悪くなります。

意識的に Service worker などの Web worker を使用しない限り、 JavaScript はメインスレッド上で実行されるので、イベント処理や描画の中で簡単にスクリプトが遅延を発生させます。メインスレッドで動作させる必要がある処理が少ないほど、メインスレッドがユーザーのイベントに応答したり、描画したりすることが増え、ユーザーへの反応が全般的に良くなります。

1. 関連情報
    1. 非同期 JavaScript
    2. Web worker API
    3. Service worker API
2. 用語集
    1. スレッド
プロトタイプベース
=========

**プロトタイプベース**は、オブジェクト指向プログラミングのひとつで、クラスを明示的に定義するのではなく、別のクラスのインスタンスや、あまり見かけませんが、空のオブジェクトにプロパティやメソッドを追加するという手法をとっています。

簡単に言えば、この手法はクラスをはじめに定義することなしにオブジェクトを生成することを可能にします。

詳細情報
----

### 一般知識

* Wikipedia のプロトタイプベースの記事
SMPTE (Society of Motion Picture and Television Engineers)
==========================================================

**Society of Motion Picture and Television Engineers** (**SMPTE**) は、エンターテインメントメディアの作成、放送、保存、および表示に使用される標準と技術を開発および定義するエンジニアと科学者の専門家協会です。 例えば、 SMPTE は、現代のデジタル映画館で使用されているデジタルシネマに使用されている規格を定義しています。
Web server (ウェブサーバー)
====================

ウェブサーバーは、ユーザーにサービスを提供するハードウェアサーバー上で動作するソフトウェアのことで、通常はクライアントから参照されます。一方、サーバーは、一般的にデータセンターと呼ばれるコンピューターであふれた部屋にあるハードウェアの一部です。

* サーバーの紹介
* Wikipedia の サーバ
Recursion (再帰)
==============

関数が自分自身を呼び出す動作、再帰は問題がより小さな小問題から成っている場合に解決するのに使われます。再帰関数は、ベースケース (再帰終了) と再帰ケース (再帰再開) の 2 種類の入力を受け取る可能性があります。

例
-

### 条件が揃うまで再帰関数が自分自身を呼び出す

次の Python コードは、数値を受け取り、それを表示し、数値の値 -1 を指定して再度呼び出す関数を定義しています。 数値が 0 になるまで続け、0 になると停止します。
```

def recurse(x):
   if x > 0:
       print(x)
       recurse(x - 1)

recurse(10)
```


出力は次のようになります。

 10
 9
 8
 7
 6
 5
 4
 3
 2
 1
 0

関連項目
----

### 一般知識

* Wikipedia の 再帰
* JavaScript での再帰についての詳細
Browsing context (閲覧コンテキスト)
===========================

**閲覧コンテキスト**は、ブラウザー が `Document` (今日では通常タブであり、場合によってはウィンドウまたはページ内のフレーム) を表示する環境です。

各閲覧コンテキストは、固有のオリジン、すなわちアクティブな文書の生成元と、すべての表示された文書を順番に記録した履歴を持っています。

閲覧コンテキスト間の通信は、厳しく制限されています。同じ生成元の閲覧コンテキストとの間で、 `BroadcastChannel` を開放して使用することができます。

理解を深める
------

### 技術リファレンス

* WHATWG の閲覧コンテキスト
* W3C の閲覧コンテキスト
Simple header (単純ヘッダー)
======================

CORS セーフリストリクエストヘッダー の古い用語です。
Request header (リクエストヘッダー)
==========================

**リクエストヘッダー**は、 HTTP リクエストで使用される HTTP ヘッダーであり、メッセージの内容には関連しないものです。 `Accept`, `Accept-*`, `If-*` などのリクエストヘッダーは、条件付きリクエストを行うことができます。他の `Cookie`, `User-Agent`, `Referer` などはサーバーが回答を作成するための文脈を明確にします。

リクエストに現れるすべてのヘッダーが*リクエストヘッダー*であるとは限りません。例えば、 `POST` リクエストの中に現れる `Content-Length` は、実際にはリクエストメッセージの本文の長さを表すエンティティヘッダーです。しかし、これらのエンティティヘッダーもそのような場面ではリクエストヘッダーと呼ばれることがよくあります。

加えて、 CORS では、常に認証が考慮され、プリフライトリクエストへのレスポンスで明確に列挙されないリクエストヘッダーの一部を単純ヘッダーとして定義しています。

`GET` リクエストに続くリクエストヘッダーをいくつか示します。
```

GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0
```


正確に言えば、この例の中にある `Content-Length` ヘッダーは他のようなリクエストヘッダーではなく、エンティティヘッダーです。
```

POST /myform.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Content-Length: 128
```

詳細情報
----

### 技術リファレンス

* すべての HTTP ヘッダーの一覧
Effective connection type (有効接続種別)
==================================

**有効接続種別** (ECT) とは、測定されたネットワーク性能のことで、実際の接続がテザリングされたブロードバンドや WiFi であっても、ブラウザーのページのリクエストの時間とと有効接続種別に基づいて、 3G などの携帯通信接続種別を返します。

観測されたラウンドトリップと下り接続速度の値を使用して、 '`slow-2g`', '`2g`', '`3g`', '`4g`' の値が特定されます。

| ECT | 最小 RTT | 最大下り接続 | 説明 |
| --- | --- | --- | --- |
| `slow-2g` | 2000ms | 50 Kbps | テキストのみのページなど、少量の転送のみに適したネットワークです。 |
| `2g` | 1400ms | 70 Kbps | このネットワークは小さな画像の転送に向いています。 |
| `3g` | 270ms | 700 Kbps | 高解像度の画像や音声、標準画質ビデオなどの大容量の資産の転送に適しています。 |
| `4g` | 0ms | ∞ | ネットワークは HD ビデオ、リアルタイムビデオなどに適しています。 |

effectiveType は Network Information API のプロパティであり、 JavaScript には navigator.connection オブジェクトから公開されています。有効接続種別を確認するには、対応しているブラウザーで開発者ツールのコンソールを開き、次のように入力してください。


```js
navigator.connection.effectiveType;
```

関連情報
----

* Network Information API
* `NetworkInformation`
* `NetworkInformation.effectiveType`
Variable (変数)
=============

変数は、値を格納するための名前付けされた場所です。これにより、あらかじめ決めておいた名前を使って、予測できない値にアクセスできます。

関連情報
----

* 変数\_(プログラミング) (Wikipedia)
* JavaScript の変数宣言
* JavaScript の `var` 文
buffer (バッファー)
==============

バッファーは、データをある場所から別の場所へ移動させるときに、それを一時的に保存するために使われる物理メモリー内のストレージです。

詳細情報
----

### 一般知識

* Wikipedia のバッファ
Event (イベント)
============

Events は DOM 要素によって生成される資産であり、Javascript コードから操作できます。

関連項目
----

### 技術リファレンス

* MDN の Event 文書
### 一般知識

* Official website
* Wikipedia の DOM events
undefined
=========

`undefined`は、宣言のみが行われた変数、あるいは実引数が存在しない仮引数に自動的に割り当てられるプリミティブ値のことです。

例
-


```js
var x; //値を代入しない変数

console.log("x's value is", x); //ログ："x's value is undefined"
```

関連情報
----

### 一般知識

* Wikipedia 上の記事「Undefined value（英語）」
### 技術リファレンス

* JavaScript のデータ型とデータ構造