recursal/MDN huggingface dataset:
Semantics (セマンティクス)
===================

プログラミングでは、**セマンティクス**とは、コードの断片の*意味*を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。

JavaScript でのセマンティクス
--------------------

JavaScript において、文字列の引数を取り、その文字列を `textContent` とする `<li>` 要素を返す関数を想像してみてください。 `build('Peach')` または `createLiWithContent('Peach')` という関数名の場合、何をするのかを理解するためにコードを見る必要があるのはどちらでしょうか？

CSS でのセマンティクス
-------------

CSS において、さまざまな種類の果物を表すために `li` 要素でリストをスタイル付けすることを想像してみてください。 `div > ul > li` または `.fruits__item` で選択された DOM の一部が何であるか分かるのはどちらでしょうか？

HTML でのセマンティクス
--------------

たとえば、 `<h1>` 要素はセマンティック要素で、「ページの最上位の見出し」の役割 (または意味) をまとったテキストを提供します。


```html
<h1>これは最上位の見出しです</h1>
```


既定では、見出しのように見えるように大きなフォントサイズが与えられます (あなたが望むものに見えるようにスタイルを設定することもできます) が、もっと重要なのはセマンティックな意義が複数の方法で使用されることです。たとえば、検索エンジンは、その内容をページの検索ランキング (SEO 参照) に影響する重要なキーワードと見なし、読み上げソフトは、視覚障碍のあるユーザーがページを移動するのを助けるための道標として使用できます。

一方、どの要素も最上位の見出しのように見せることができます。次ののことを想像してみてください。


```html
<span style="font-size: 32px; margin: 21px 0;"
 >これは最上位の見出しですか？</span
>
```


これは最上位の見出しのように表示されますが、セマンティックな意義はありませんので、上記のように特別なメリットはありません。したがって、 HTML 要素を適材適所に使用することをお勧めします。

HTML は既定の表示スタイルに基づくのではなく、入力される*データ*を表現するためにコーディングするべきです。プレゼンテーション (どのように見えるか) は、完全に CSS の責任です。

セマンティックなマークアップを書くことの利点の中には、次のようなものがあります。

* 検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる (SEO を参照)
* 読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
* 意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々と `div` の中を検索するより明らかに簡単である
* 開発者に目立たせるデータの種類を提案することができる
* セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する

どのマークアップを使用するか迷ったときは、自分自身に「どの要素が掲載しようとしているデータを最もよく説明または表現しているか」と自問してみてください。例えば、これはデータのリストか？順序付きか順序なしか？これは節と関連情報の補足から成る記事か？定義の一覧になっているか？キャプションを必要としている図または画像か？サイト内でグローバルのヘッダーおよびフッターに加えてヘッダーやフッターを持つべきか？などです。

セマンティック要素
---------

これらは、およそ 100 ある利用可能なセマンティック要素の*一部*です。

* `<article>`
* `<aside>`
* `<details>`
* `<figcaption>`
* `<figure>`
* `<footer>`
* `<header>`
* `<main>`
* `<mark>`
* `<nav>`
* `<section>`
* `<summary>`
* `<time>`
より詳しく知る
-------

* MDN の HTML 要素リファレンス
* MDN の HTML のセクションとアウトラインの使用
* Wikipedia 上の コンピュータ科学におけるセマンティクスの意味

* MDN 用語集
    + SEO
* HTML におけるセマンティック要素の一部
    + `<article>`
    + `<aside>`
    + `<details>`
    + `<figcaption>`
    + `<figure>`
    + `<footer>`
    + `<header>`
    + `<main>`
    + `<mark>`
    + `<nav>`
    + `<section>`
    + `<summary>`
    + `<time>`
Binding （バインド）
==============

プログラミングにおいて**バインド**とは、識別子と値の関連付けのことです。バインドは変数だけとは限りません。例えば、関数の引数や `catch (e)` ブロックで作成されるバインドは、厳密な意味での「変数」ではありません。さらに、一部のバインドは言語によって暗黙に作成されます。例えば、 JavaScript の `this` や `new.target` などです。

バインドは代入可能であれば変更可能であり、そうでなければ変更不可です。これは、保持している値が変更不可であるという意味ではありません。

バインドはよくスコープと関連付けられます。 JavaScript でバインドを再宣言できるかどうかは、バインドを作成するために使用された構築方法に依存します。

関連情報
----

* `var`
* `let`
* `const`
* `function`
* `class`
WebM
====

**WebM** はロイヤリティフリーでオープンな動画フォーマットです。Mozilla Firefox でも標準でサポートされています。

詳細情報
----

### 基礎知識

* ウィキペディアの「WebM」の記事
Unicode
=======

Unicode とは、世界の様々な言語、書式、記号に、番号を割り当てて定義した標準の文字コード です。一つ一つの文字 に番号を割り当てることで、プログラマーは、どの言語が混ざっていても、コンピューターに保存、処理、伝送させるような文字エンコーディングを同じファイルやプログラムの中に作ることができます。

Unicode ができる以前は、同じデータのなかに異なる言語を入れることは難しく、誤りが起こりがちでした。例えば、ある文字コードは日本語の文字を格納するためのもので、別のある文字コードはアラビア文字を格納するためのものだとします。もしデータのどの部分がどの文字コードであるか明確に示していない場合、他のプログラムやコンピューターは、文章を誤って表示してしまったり、処理中にデータを破損してしまったりしていました。二重引用符 (`“”`)のような文字が `Ã‚Â£` のようなわけのわからないものに置き換わっているのを見たことがあるかもしれません。それがこの問題です。文字化けとして知られています。

ウェブ上でもっとも一般的な文字エンコーディングは UTF-8 です。UTF-16 や 廃止された UCS-2 といったエンコーディングも存在しますが、UTF-8 が推奨されています。

関連項目
----

* Wikipedia の Unicode
* The Unicode Standard: A Technical Introduction
Chrome (クローム)
=============

ブラウザーにおいては、クローム (chrome) はブラウザーの中で、ウェブページ自体を除いた見える部分すべて (ツールバー、メニューバー、タブなど) のことです。 Google Chrome ブラウザーと混同しないようにしてください。

詳細
--

* Browser and GUI Chrome
OWASP
=====

**OWASP** (Open Web Application Security Project: オープンウェブアプリケーションセキュリティプロジェクト) は、特にウェブ上で、無償ソフトウェアのセキュリティのために活動する非営利団体や国際的なネットワークを持つ団体です。

詳細情報
----

### 一般知識

* 公式ウェブサイト
Sloppy モード
==========

ECMAScript 5 以降では、スクリプトで新しい Strict モード モードをオプトインできます。これにより、JavaScript のセマンティクスがいくつかの方法で変更され、復元力が向上し、問題が発生したときに何が起こっているのかを理解しやすくなります。

JavaScript の通常の非厳密モードは、**Sloppy モード**と呼ばれることもあります。これは正式な呼称ではありませんが、真面目に JavaScript のコードを書くことに時間を費やしていると、この呼称に出くわすことがあるでしょう。

関連項目
----

### 一般知識

* "Strict Mode" in chapter 7 ("JavaScript Syntax") in the book Speaking *JavaScript*.
Apple Safari
============

Safari はウェブブラウザーであり、Apple が開発し、 macOS と iOS の両方に組み込まれています。これは、オープンソースの WebKit エンジンに基づいています。

詳細情報
----

### 基礎知識

* ウィキペディア上の記事「Safari」
* apple.com の Safari
### 技術情報

* The WebKit project
* WebKit nightly build
* Reporting a bug for Safari
Object reference (オブジェクト参照)
===========================

\*\*オブジェクト\*\*へのリンクです。オブジェクト参照はまさにリンクされたオブジェクトのように使うことができます。

オブジェクト参照の概念は、同じオブジェクトを複数の\*\*プロパティ\*\*に割り当てると明確になります。割り当てらてた各プロパティは、コピーしたオブジェクトを保持するのではなく、同じオブジェクトにリンクしたオブジェクト参照を保持します。これにより、オブジェクトが変更された時、オブジェクトを参照する全てのプロパティに変更が反映されます。

詳細情報
----

### 基礎知識

* Wikipedia 上の「参照 (計算機科学)」
SCM
===

SCM (Source Control Management) は、ソースコードを管理するための仕組みです。一般には、プログラムソースファイルのバージョン管理を行うソフトウェアの総称です。SCM は、ソースコードを誰がどのように変更を行ったかの履歴を保存しているため、プログラマーは有用な部分を消してしまう心配をすることなく、プログラムソースファイルを追加、変更、削除できます。

代表的な SCM として、CVS、SVN、GIT があります。

詳しく学ぶ
-----

### 一般知識

* Wikipedia 上の記事「バージョン管理システム」
OOP (オブジェクト指向プログラミング)
=====================

**OOP** (Object-Oriented Programming、オブジェクト指向プログラミングの略) はデータを **オブジェクト** 内にカプセル化して、その構成部品ではなくてオブジェクト自体が操作される、プログラミングアプローチです。

JavaScript はとてもオブジェクト指向です。これは **プロトタイプ**ベースのモデル (クラスベースの反対) に従っています。

詳細情報
----

### 一般知識

* Wikipedia の オブジェクト指向プログラミング
* JavaScript によるオブジェクト指向入門
Regular expression (正規表現)
=========================

**正規表現** (または *regex*) は、検索でどの文字の連続が出てくるのかを決めるルールです。

正規表現はさまざまな言語で実装されてますが、一番有名な実装は Perl による実装です。それは　 PCRE (*Perl Compatible Regular Expression*) といわれる独自の実装エコシステムを生み出しました。ウェブ上では、JavaScript は `RegExp` オブジェクトを介して別の正規表現の実装を提供します。

関連項目
----

### 一般知識

* Wikipedia の 正規表現
* Interactive tutorial
* 可視化された正規表現
### 技術リファレンス

* JavaScript で正規表現を書く
GPL
===

(GNU) GPL （General Public License: 一般公開ライセンス） はフリーソフトウェア財団が公開した 「コピーレフト(copyleft)」 のフリーソフトウェアライセンスです。GPL ライセンスで公開されたプログラムの利用者は、プログラムソースコードを読むこと、変更すること、 また同じライセンスであれば（変更の有無問わず）再配布することにも自由にできます。

詳細
--

* GNU ライセンス（英語）に関するFAQ
* Wikipedia で GNU GPL を調べる
* GPL License テキスト
Three js
========

three.js は JavaScript ベースの WebGL エンジンです。GPU を利用したゲームやその他のグラフィックスアプリを ブラウザー から直接実行できます。three.js ライブラリーは、ブラウザーで 3D のシーンを描画するための多くの機能と API を提供します。

詳細情報
----

### 一般知識

* Wikipedia 上の記事「Three.js」
* three.js 公式サイト
Grid Track (グリッドトラック)
=====================

**グリッドトラック**とは、2 本のグリッド線の間の空間のことです。*明示的なグリッド*では、 `grid-template-columns` と `grid-template-rows` プロパティ、または一括指定の `grid` または `grid-template` プロパティを使用して定義します。明示的グリッドで作成したトラックの外側にグリッドアイテムを配置することで、*暗黙的グリッド*にもトラックが生成されます。

次の画像は、グリッドにおける最初の行トラックを表しています。

![グリッドトラックを示す図。](/ja/docs/Glossary/Grid_Tracks/1_grid_track.png)

明示的グリッドにおけるトラックの大きさ
-------------------

`grid-template-columns` および `grid-template-rows` プロパティを使ってグリッドトラックを定義する際には、任意の長さ単位もしくは、グリッドコンテナー中で利用可能な領域の一部分を表す柔軟な単位 `fr` が利用できます。

例
-

次の例は、1 つ目が 200 ピクセルのトラック、2 つ目が 1fr、3 つめが 3fr となる、3 列のトラックから成るグリッドを作っています。グリッドコンテナ中の利用可能な領域のうち 200 ピクセル分を差し引いた残りの領域を 4 分割し、2 つめの列にはその 1 つ分を、3 つめの列には 3 つ分が割り当てられます。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 3fr;
}
```



```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

暗黙的グリッドにおけるトラックの大きさ
-------------------

暗黙的グリッドにおけるトラックは、既定では自動的に大きさが決定されますが、 `grid-auto-rows` および `grid-auto-columns` プロパティでこれらのトラックの大きさを定義することもできます。

関連情報
----

* グリッドレイアウトの基本概念
* CSS グリッドレイアウト仕様書におけるグリッドトラックの定義
* プロパティリファレンス
    + `grid-template-columns`
    + `grid-template-rows`
    + `grid`
    + `grid-template`
WindowProxy
===========

**`WindowProxy`** オブジェクトは `Window` オブジェクトのラッパーです。すべての閲覧コンテキストに `WindowProxy` オブジェクトが存在します。`WindowProxy` オブジェクトに対して実行される操作は、その `WindowProxy` オブジェクトが現在ラップしている `Window` オブジェクトにそのまま反映されます。したがって、`WindowProxy` オブジェクトとのやり取りは、 `Window` オブジェクトと直接やり取りするのとほとんど同じ意味になります。閲覧コンテキストが移動するとき、その `WindowProxy` がラップする `Window` オブジェクトが変更されます。

関連情報
----

* HTML 仕様 : WindowProxy 節
* Stack Overflow の質問 : WindowProxy と Window オブジェクトの違いは ?
Slug (スラグ)
==========

 スラグは、通常は URL の最後にある Web アドレスの固有の識別部分です。
 MDN のコンテキストでは、"<locale> / docs /" に続く URL の部分です。

 親文書の下に新しい文書が作成されたときの最終的な構成要素でもあります。
 たとえば、このページのスラグは `Glossary/スラグ` です。

関連情報
----

* タイトルとスラグの決め方
CORS-safelisted request header (CORS セーフリストリクエストヘッダー)
=====================================================

CORS セーフリストリクエストヘッダーは、次の HTTP ヘッダーのうちの一つです:

* `Accept`
* `Accept-Language`
* `Content-Language`
* `Content-Type`

リクエストがこれらのヘッダーのみを含んでいて、なおかつ値が後述の追加要件に合致する場合は、プリフライトリクエストを CORS のコンテキストにおいて送る必要がありません。

`Access-Control-Allow-Headers` ヘッダーを使うと、別のヘッダーをセーフリストとして追加したり、上記のヘッダーをリストアップすることで後述の追加要件を回避することができます:

#### 追加要件

CORS セーフリストリクエストヘッダーとなるためには、次の要件も満たさなければなりません:

* `Accept-Language` と `Content-Language` については、値が次の文字のみで構成されていなければなりません: `0-9`・`A-Z`・`a-z`・空白・`*,-.;=`
* `Accept` と `Content-Type` については、次の *CORS アンセーフリクエストヘッダーバイト*と呼ばれる文字を含んではいけません: `0x00-0x1F` (ただし、`0x09 (HT)` は含めても良い)・`"():<>?@[\]{}`・`0x7F (DEL)`.
* `Content-Type` について: 値をパースした結果（パラメーターを除く）が、`application/x-www-form-urlencoded` か、`multipart/form-data`、`text/plain` のうち、いずれかの MIME タイプでなければなりません。
* すべてのヘッダーについて: 値の長さが128バイトを超えてはいけません。
関連情報
----

* CORS-safelisted response header
* Forbidden header name
* Request header
フェッチメタデータリクエストヘッダー
==================

**フェッチメタデータリクエストヘッダー**は、リクエストの発信元のコンテキストに関する追加情報を提供する HTTP リクエストヘッダーです。これらのヘッダー名には `Sec-` の接頭辞が付いており、禁止ヘッダー名であるため、 JavaScript からヘッダーを変更することはできません。

フェッチメタデータリクエストヘッダーは、リクエストがどこから来たのかという追加情報をサーバーに提供し、悪意のあるリクエストを無視できるようになります。

フェッチメタデータリクエストヘッダーには以下のようなものがあります。

* `Sec-Fetch-Site` (en-US)
* `Sec-Fetch-Mode` (en-US)
* `Sec-Fetch-User`
* `Sec-Fetch-Dest` (en-US)

1. Fetch Me
    1. すべての HTTP ヘッダーの一覧
2. 用語集
    1. Entity header
    2. Header
    3. Response header
    4. Request header
Cross Axis (交差軸)
================

フレックスボックス における交差軸 (cross axis / クロス軸) は、主軸 (main axis / メイン軸) と交差する軸で、`flex-direction` が `row` または `row-reverse` であるとき (つまり主軸が行方向であるとき)、列方向の軸のことです。

![列方向の交差軸](/ja/docs/Glossary/Cross_Axis/basics3.png)

主軸が `column` または `column-reverse` の場合は、交差軸は行方向となります。

![行方向の交差軸](/ja/docs/Glossary/Cross_Axis/basics4.png)

交差軸方向のアイテムの配置は、フレックスコンテナーの `align-items` プロパティまたはアイテムの `align-self` プロパティによって行われます。交差軸方向に空間がある複数行のフレックスコンテナーでは、`align-content` を使って行の間を制御することができます。

関連情報
----

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

* `align-content`
* `align-items`
* `align-self`
* `flex-wrap`
* `flex-direction`
* `flex`
* `flex-basis`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `order`
### 参考文献

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS フレックスボックスガイド: *フレックスアイテムの折り返しをマスターする*
* 用語集
    + Flex
    + フレックスコンテナー
    + フレックスアイテム
    + グリッド
Type conversion (型変換)
=====================

型変換 (Type conversion) (または型キャスト (typecasting) ) は、データをあるデータ型から別なデータ型に変換することを意味します。*暗黙の型変換*は、コンパイラーが自動的にデータ型を割り当てるものの、その場でソースコードで*明示的に*型変換が必要な場合もあります。例えば、 `5+2.0` という命令が与えられた場合、浮動小数点の `2.0` は暗黙的に整数に型キャストされますが、 `Number("0x11")` という命令が与えられた場合、 "0x11" の文字列は明示的に数値の 17 として型キャストされます。

1. 用語集
    1. 型
    2. 型強制
2. Wikipedia の記事
    1. 型変換
HTTPS
=====

**HTTPS** (***HyperText Transfer Protocol Secure***) は HTTP プロトコルを暗号化したバージョンです。 HTTPS は通常、 SSL または TLS を用いてクライアントとサーバー間のすべての通信を暗号化します。この安全な接続により、クライアントは機密データをサーバーと安全に交換できます (例えば、銀行取引やオンラインショッピングなどで)。

1. 一般知識
    1. Wikipedia 上の HTTPS
    2. Moving to HTTPS community guide
    3. 安全なコンテキスト
2. MDN Web Docs 用語集
    1. HTTP
    2. SSL
    3. TLS
Encapsulation (カプセル化)
=====================

Encapsulation (カプセル化) とは、データと関数を一つのコンポーネント (例えば、クラス) に閉じ込め、そのコンポーネントへのアクセスを制御することにより、そのオブジェクトを "ブラックボックス" にすることです。これにより、そのクラスのユーザは隠れた実装ではなくインターフェース（すなわち、そのクラスの外に対して公開されているデータと関数）を知っているだけで済みます。

詳細情報
----

### 一般知識

* カプセル化 (Wikipedia)
Hyperlink (ハイパーリンク)
===================

ハイパーリンクはウェブページやデータ項目をお互いに接続します。HTML では `<a>` 要素が、ウェブページのある場所 (テキスト文字や画像のようなもの) から、その他のウェブページ (や同じページでも) のどこかの場所へのハイパーリンクを定義します。

詳細情報
----

### 一般知識

* Wikipedia の Hyperlink
* MDN の ハイパーリンク (en-US) ガイド
### 技術リファレンス

* Links in HTML Documents - W3C
* HTML5 a - hyperlink - W3C
### これについて学習する

* MDN の `<a>`
* MDN の `<link>`
User agent (ユーザーエージェント)
=======================

ユーザーエージェントは個人を表すコンピューターのプログラムで、例えばウェブにおけるブラウザーに当たるものです。

ブラウザーのほかに、ウェブページをスクレイピングするボット、ダウンロードマネージャー、その他のウェブにアクセスするアプリがユーザーエージェントになる可能性もあります。ブラウザーはサーバーに対してリクエストを行う際に毎回、 HTTP の `User-Agent` ヘッダーに、ユーザーエージェント (UA) 文字列と呼ばれる自分自身を識別する文字列を含めます。この文字列はブラウザー、バージョン番号、ホストのオペレーティングシステムなどを識別します。

スパムボット、ダウンロードマネージャー、一部のブラウザーは、異なるクライアントであると見せかけるために偽の UA 文字列を送ることがあります。これは *user agent spoofing* と呼ばれています。

ユーザーエージェント文字列は、クライアント側の JavaScript で `navigator.userAgent` を使用することでアクセスできます。

ユーザーエージェント文字列は、 `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"` のようなものが一般的です。

関連情報
----

### 一般知識

* Wikipedia のユーザーエージェント
### 技術リファレンス

* `navigator.userAgent`
* User Agent を用いたブラウザーの判定
* RFC 2616: 14.43: The `User-Agent` header

1. MDN Web Docs 用語集
    1. ブラウザー
2. HTTP ヘッダー
    1. `User-agent`
Network throttling (ネットワークスロットリング)
==================================

**ネットワークスロットリング**とは、インターネットの速度を意図的に低下させることです。ウェブパフォーマンスにおいて、ネットワークスロットリング、またはネットワーク状態のエミュレーションでは、サイトのターゲットユーザーの大部分が経験している低帯域の状態をエミュレートするために使用されます。

ユーザーがモバイルで経験するネットワーク状態を見落とさないようにすることが重要です。企業のオフィスビルの中で、高性能なコンピュータを使ってウェブアプリケーションを作成する開発者のインターネット速度は、一般的に非常に高速です。開発者、テクニカルライター、デザイナーであれば、このような経験があるでしょう。しかし、モバイルユーザーがウェブアプリケーションにアクセスする際のネットワーク速度は、旅行中やデータプランの適用範囲が狭い遠隔地では、インターネットに接続できたとしても非常に低速になる可能性があります。ネットワークスロットリングを使えば、開発者はユーザーの体験を再現することができます。ブラウザーのインスペクターなど、ほとんどのブラウザー開発ツールには、さまざまなネットワーク条件をエミュレートする機能があります。ネットワークスロットリングによってユーザーの体験をエミュレートすることで、ロードタイムの問題をより容易に特定し、修正することができます。

ブラウザーの開発者ツールには、一般的にネットワークスロットリングのオプションが用意されており、低速なネットワーク環境下でアプリケーションをテストすることができます。たとえば、Firefox の開発者ツールでは、ネットワークモニターとレスポンシブデザインモードの両方で、ネットワーク速度オプション (例: 無線 LAN、良好な3G、2G...) を含むドロップダウンメニューが利用できます。

関連情報
----

* 合成モニタリング
Transport Layer Security (TLS)
==============================

**TLS (Transport Layer Security)** は、以前は SSL (Secure Sockets Layer) として知られていたもので、ネットワーク上で安全に通信するためにアプリケーションが使用するプロトコルであり、電子メール、ウェブ閲覧、メッセージング、その他のプロトコルの改ざんや盗聴を防止します。 SSL と TLS はどちらもクライアント・サーバー型のプロトコルであり、暗号化したプロトコルを使用してプライバシーを保証することで、ネットワークを通じたセキュリティを提供します。サーバーとクライアントが TLS を使用して通信するすれば、どのメッセージも第三者によって盗聴や改ざんされていないことが保証されます。

最新のブラウザーはすべて TLS プロトコルに対応しており、有効なデジタル証明書の提供をサーバーに要求してその身元を確認し、安全な接続を確立します。クライアントとサーバーの両者がそれぞれのデジタル証明書を提供すれば、相互に認証することができます。

**メモ:** TLS 1.0 と 1.1 への対応は、2020 年の初頭にすべての主要なブラウザーから削除される予定です。今後はウェブサーバーが TLS 1.2 や 1.3 に対応していることを確認する必要があります。 Firefox はバージョン 74 時点で、古いバージョンの TLS を使用しているサーバーに接続する場合に Secure Connection Failed エラーを返すようになる予定です (Firefox バグ 1606734)。

1. 仕様書
    1. RFC 5246 (The Transport Layer Security Protocol, Version 1.2)
2. Wikipedia の記事
    1. Transport Layer Security
3. 関連情報
    1. Transport Layer Security
    2. OWASP: Transport Layer Protection Cheat Sheet
4. 用語集
    1. HTTPS
    2. SSL
Wrapper (ラッパー)
==============

JavaScript のようなプログラミング言語において、ラッパー (wrapper) は 1 つ以上の他の関数を呼び出すための関数であり、時には純粋に利便性のために、時にはプロセス中でまったく異なるタスクに合わせるために使用されます。

例えば、AWS の SDK ライブラリはラッパーの例になります。

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

### 一般知識

Wikipedia の Wrapper function (英語)

1. MDN Web Docs 用語集
    1. API
    2. Class
    3. Function
markup (マークアップ)
===============

マークアップ言語は、テキストを定義し提示するために設計された言語です。 HTML (HyperText Markup Language) は、マークアップ言語の一例です。

HTML ファイルなどのテキストファイル内で、要素はコンテンツのその部分の目的を説明するタグを使用して*マークアップ*されます。

マークアップ言語の種類
-----------

**視覚マークアップ:**

伝統的な WYSIWYG (what you see it is what you get) に基づくワードプロセッサーで使用されています。これは人間の作成者、ユーザー、編集者から隠蔽されているものです。

**手続きマークアップ:**

テキストと組み合わせてテキスト処理をプログラムへ指示するものです。このテキストは作成者から視覚的に操作されます。

**意味マークアップ:**

文書の区間をプログラムがどのように扱うべきかでラベル付けします。例えば、 HTML の `<td>` は HTML の表でセルを定義します。

1. MDN Web Docs 用語集
    1. HTML
    2. XHTML
    3. XML
    4. SVG
Flex コンテナ
=========

Flexbox レイアウトは親要素の `display` プロパティの値に `flex` または `inline-flex` を指定することで定義されます。この親要素が\*\*「flex コンテナ」\*\*となり、その子要素が 「flex アイテム」(flex item) となります。

値に `flex` を指定すると、この要素はブロックレベルの flex コンテナとなり、`inline-flex` を指定すると、インラインレベルの flex コンテナとなります。これらの指定は、その要素に対する\*\*「flex 整形文脈 (flex formatting context)」\*\*を作成します。Flex 整形文脈は、フロートがコンテナに侵入せず、コンテナのマージンがアイテムのマージンによって相殺されないという点で、ブロック整形文脈と同様のものです。

関連項目
----

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

* `align-content`
* `align-items`
* `flex`
* `flex-direction`
* `flex-flow`
* `flex-wrap`
* `justify-content`
### 参考文献

* CSS フレックスボックスガイド: *フレックスボックスの基本概念*
* CSS フレックスボックスガイド: *フレックスコンテナー内のアイテムの配置*
* CSS フレックスボックスガイド: *フレックスアイテムの折り返しをマスターする*
Glyph (字体)
==========

**字体**は、1 つ以上の文字を視覚的に表現するためにタイポグラフィで使用される用語です。

ウェブサイトで使用されるフォントには、フォントの文字を表すさまざまな字体のセットが含まれています。

詳細情報
----

### 一般知識

* 字体 (Wikipedia)
* Glyph, character and grapheme on Quora
IETF
====

Internet Engineering Task Force (IETF) は、インターネットの背後にあるメカニズム (特に TCP/IP やインターネットプロトコルスイート) を規定する仕様書を作成する世界的な組織です。IETF はオープンで、ボランティアが運営し、インターネットソサエティが後援します。

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

### 一般知識

* IETF の公式ウェブサイト
* Wikipedia 上の IETF
* インターネットソサエティ の公式ウェブサイト
* Wikipedia 上の インターネットソサエティ
Thread (スレッド)
=============

コンピュータ科学におけるスレッドは、複数のタスクやプログラムを同時に実行することです。それぞれのコードを実行できる機能の単位は**スレッド**と呼ばれています。

**メインスレッド** はそのうちの一つで、ブラウザーがユーザーイベントを扱い、画面に表示や描画を行い、通常のウェブページやアプリを構成するコードの大部分を実行します。これらのものがすべて一つのスレッドで行われるため、速度の遅いウェブサイトやアプリのスクリプトがブラウザー全体の速度を落とします。さらに悪いことに、サイトやアプリのスクリプトが無限ループに入ると、ブラウザー全体がハングアップすることがあります。これは使い勝手がのろく (または悪く) 失望させるものになります。

しかし、最近の JavaScript は追加のスレッドを生成する方法を提供しており、それぞれが独立して実行され互いに通信することができます。これは **ウェブワーカー** のような技術で実現されており、独自のスレッドでメインスレッドと同時に実行されるサブプログラムを分岐させるために使用することができます。これによって遅いタスク、複雑なタスク、実行に時間がかかるタスクをメインスレッドから独立して実行し、サイトやアプリの全体的な性能を、ひいてはブラウザー全体の性能を保護します。これで最近のマルチコアプロセッサーの利点を活用することもできます。

**サービスワーカー** と呼ばれる特殊な種類のワーカー —ユーザーの許可により—サイトの背後に隠れてユーザーがサイトを使用していないときにも実行されるものを作成することもできます。これにより、サイトを頻繁に操作していない間に何かが起こった時、ユーザーに通知することができるサイトを作成するために使用することができます。例えばメールサービスにログインしていない状態でも新しいメールが届いたことをユーザーに通知したりするなどです。

全体的に見て、オペレーティングシステム内のこれらのスレッドは非常に有用であることがわかります。これらのスレッドは、コンテキストの切り替え時間を最小限に抑え、より効率的な通信を可能にし、マルチプロセッサアーキテクチャのさらなる利用を可能にします。

関連情報
----

* 非同期 JavaScript
* ウェブワーカー API
* サービスワーカー API
* 用語集
    + メインスレッド
Rendering engine (レンダリングエンジン)
=============================

**レンダリングエンジン**は画面にテキストと画像を描画するソフトウェアです。このエンジンは構造化文書 (たいてい HTML) を描画して、所与のスタイル定義 (たいてい CSS にて与えられる) に基づいて整形します。レイアウトエンジンの例としては、 Blink, Gecko, EdgeHTML, WebKit があります。

詳細情報
----

### 一般知識

* Wikipedia の HTMLレンダリングエンジン
### 技術リファレンス

* Gecko のドキュメント
* Venkatraman.R - Behind Browsers (Part 1, Basics)
XForms
======

**XForms** はウェブフォームを構築し、フォームのデータを XML 形式で処理するための慣例です。

**メモ:** もう主要なブラウザーは XForms に対応していません。 — 代わりに HTML5 フォームを使うことをお勧めします。
Data structure (データ構造)
======================

**データ構造**は、データを効率的に使用できるように整理する特別な方法です。

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

### 一般知識

* Wikipedia 上の データ構造
Syntax error (構文エラー)
====================

あらかじめ定義された構文の誤った使用による例外。構文エラーは、ソースコードのコンパイルまたは構文解析中に検出されます。

例えば、JavaScript 関数を定義するときに閉じ括弧（`}`）を省略すると、構文エラーが発生します。ブラウザー開発ツールは、JavaScript と CSS の構文エラーをコンソールに表示します。

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

### 一般知識

* Wikipedia 上の Syntax error (英語)
* `SyntaxError` JavaScript オブジェクト
URN
===

URN (Uniform Resource Name) は URI の基本的なフォーマットの一つであり、リソースを参照をしますが、場所を特定したり存在の有無を確認したりする必要はありません。RFC3986からの例です: `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`

詳細情報
----

### 一般知識

* ウィキペディアのURN の記事です
Input method editor (インプットメソッドエディター)
====================================

インプットメソッドエディター (IME) は、テキスト入力のための特殊なユーザーインターフェイスを提供するプログラムです。インプットメソッドエディターは多くの場面で使用されています。

* ラテンキーボードを使用した中国語、日本語、韓国語の入力
* テンキーを使用したラテン文字の入力
* 手書き文字認識を使用したタッチ画面のテキスト入力

1. Wikipedia の記事
    1. インプットメソッド
2. 用語集
    1. 国際化対応
Plugin (プラグイン)
==============

ブラウザープラグインとは、ブラウザーがネイティブに対応できないコンテンツを扱うために、ユーザーがインストールすることができるソフトウェアコンポーネントのことです。ブラウザープラグインは通常、 NPAPI (Netscape Plugin Application Programming Interface) アーキテクチャを使用して記述されています。

最も有名で広く使われていたプラグインは Adobe Flash Player で、これによりブラウザーで Adobe Flash コンテンツを実行できるようになりました。

ブラウザーがより強力になるにつれて、プラグインはあまり有用ではなくなってきました。また、プラグインはウェブユーザーにセキュリティやパフォーマンスの問題を引き起こしてきた歴史があります。

2016 年から 2021 年にかけて、ブラウザーベンダーはプラグイン、特に Adobe Flash の廃止ロードマップに取り組み、今日では、プラグインは主要なブラウザーが対応しなくなりました。

プラグインはブラウザーの拡張機能と混同してはいけません。こちらはプラグインとは異なり、バイナリーではなくソースコードとして配布され、特に WebExtensions システムを使用してブラウザーがまだ対応しているものです。

関連情報
----

* Adobe Flash 終了アナウンス
Opera Browser
=============

**Opera** は、5 番目に多用されるウェブブラウザーであり、1996 年に公式リリースされた当初は Windows のみで動作していました。Opera は、2013 年からレイアウトエンジンとして Blink を使用しています (以前は、Presto でした)。Opera には、モバイルやタブレット端末バージョンもあります。

詳細情報
----

### 一般知識

* Wikipedia 上の Opera
* Opera ブラウザーウェブサイト
ICANN
=====

**ICANN** (Internet Corporation for Assigned Names and Numbers、**アイキャン**) は国際非営利組織で、ドメインネームシステム や IP アドレスのレコードをメンテナンスしています。

関連項目
----

### 一般知識

* Official website
* Wikipedia の ICANN
Modularity (モジュール性)
===================

モジュール性という用語は、システムのコンポーネントを分離して再結合できる程度を指しており、またソフトウェアパッケージを論理ユニットに分割することもあります。モジュラーシステムの利点は、部品を独立して考えることができることです。

関連項目
----

* Wikipedia 上の Modularity （英語）
* Wikipedia 上の モジュール
ARIA
====

**ARIA** (*Accessible Rich Internet Applications*) は、支援技術の W3C 仕様で、ユーザーに応じてセマンティクスやその他のメタデータを HTML へ付加します。

例えば、`<p>` タグに `role="alert"` 属性を付加することで、そのタグ内の情報が重要かつ時間依存であることを視覚に障害を持つユーザーに知らせることができます（仮に視覚に障害のないユーザーであれば、文字色を変えることでも同じ内容を伝えられるかもしれません）。

関連項目
----

* ARIA
HTTP header (HTTP ヘッダー)
=======================

**HTTP ヘッダー**は、 HTTP リクエストおよび HTTP レスポンスのフィールドで、メッセージや本文のセマンティクスを変更したり、より詳細に説明したりするための追加情報を渡します。ヘッダーは大文字と小文字を区別せず、行の先頭から始まり、直後に `':'` とヘッダー自体に依存する値が続きます。値は、次の CRLF またはメッセージの最後で終了します。

従来より、ヘッダーはカテゴリ分けされてきましたが、この分類は仕様書では定義されていません。

* 一般ヘッダー: リクエストとレスポンスの両方に適用され、最終的に本文の中で送信されるデータとは関係のないヘッダー。
* リクエストヘッダー: 取得するリソース又はクライアント自体に関する詳細情報を含むヘッダー。
* レスポンスヘッダー: レスポンスについての追加情報、例えば場所やサーバー自身についての情報 (名前、バージョン、など) を含むヘッダー。
* エンティティヘッダー: コンテンツの長さや MIME タイプなど、エンティティの本文に関する詳細情報を含むヘッダー。

一つのヘッダーを持つ基本的なリクエストの例です。
```

GET /example.http HTTP/1.1
Host: example.com
```


リダイレクトの場合は、必須のヘッダー (`Location`) があります。
```

302 Found
Location: /NewPage.html
```


典型的な一連のヘッダーの例です。
```

304 Not Modified
Access-Control-Allow-Origin: *
Age: 2318192
Cache-Control: public, max-age=315360000
Connection: keep-alive
Date: Mon, 18 Jul 2016 16:06:00 GMT
Server: Apache
Vary: Accept-Encoding
Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
X-Backend-Server: developer6.webapp.scl3.mozilla.com
X-Cache: Hit from cloudfront
X-Cache-Info: cached
```


1. 仕様書
    1. HTTP 仕様書におけるヘッダーの構文。
2. 技術リファレンス
    1. 全ての HTTP ヘッダー一覧
3. 用語集
    1. HTTP ヘッダー
    2. 一般ヘッダー
    3. リクエストヘッダー
    4. レスポンスヘッダー
    5. エンティティヘッダー
    6. 禁止ヘッダー名
    7. 禁止レスポンスヘッダー名
    8. CORS セーフリストリクエストヘッダー
    9. CORS セーフリストレスポンスヘッダー
Code splitting (コード分割)
======================

**コード分割**とは、コードをさまざまなバンドルまたはコンポーネントに分割することです。そうすることで、必要に応じて特定のコンポーネントのみを読み込んだり、並列で読み込んだりすることを可能にします。

たとえアプリケーションの複雑さが増すことなく、シンプルに維持されるとしても、CSS や JavaScript、バンドルといったファイルのサイズは増大するのが普通です。特にサードパーティのライブラリを導入していた場合、それらのファイルサイズ増大に伴ってアプリケーションのサイズも増します。そうした大きくなってしまったファイルを読み込むことを避けるために、コード分割を実施します。

ページの読み込み時すぐに必要なファイルはその時点で読み込み、そうでないものはその後に読み込みを行って対応します(遅延読み込み)。こうすることで、コード総量は同じであっても『初期ロード中に必要なコード量』を減らすことができパフォーマンスを向上させることができます。

関連項目
----

* Bundling
* Lazy loading (en-US)
* HTTP/2
* Tree shaking
frame rate (フレームレート, FPS)
=========================

**フレームレート**は、ブラウザーが表示するコンテンツの再計算、レイアウト、描画をすることができる速度です。**フレーム毎秒** (frame per second) または **fps** は、1 秒間に何枚のフレームを再描画できるかを表します。ウェブサイトのコンピューターグラフィックスでのフレームレートの目標値は 60fps です。

映画では一般に、フレームレートは 24fps です。フレームレートが低くても大丈夫なのは、被写体ぶれで錯覚が発生するためです。コンピューターの画面上を動く場合は被写体ぶれはありません (被写体ぶれのある画像スプライトを動かしている場合を除いて)。

1. Glossary
    1. FPS
2. Wikipedia 記事
    1. フレームレート