recursal/MDN huggingface dataset:
MDN Web Docs プロジェクト
===================

**MDN Web Docs** は、オープンウェブプラットフォームを文書化した無料のリソースです。私たちの使命は、*開発者*が*ウェブプラットフォーム*上でプロジェクトを*簡単*に構築するために必要な*情報*を提供することです。

ここは MDN プロジェクトのランディングページです。ここでは、サイトがどのように動作するか、どのようにドキュメントを作成するか、どのようなガイドラインや規約を遵守するか、そしてどのようにして協力できるかについてのガイドを見ることができます。

そして、私たちは誰でも助けを求めています。この重要なウェブ開発者のリソースを改善することに興味があるなら、コンテンツを追加したり編集したりするのを歓迎します。プログラマーである必要はありませんし、技術に詳しくなくても構いません。単純な作業 (校正やタイプミスの修正) から複雑な作業 (API ドキュメントの作成) まで、実行する必要のあるさまざまな作業があります。

協力する方法を知りたい場合は、 MDN への協力のページをご覧ください。私たちと話したり質問したりしたい場合は、 Matrix の MDN Web Docs チャットルームで議論に参加してください。

MDN Web Docs の変更履歴この文書は MDN コンテンツのプロセス、構造、ベストプラクティスが変更されたこと、いつ変更されたかを記録するものです。これは、定期的に協力する人が、 MDN のコンテンツ作成プロセスで何が変わったかを確認するのに役立ちます。

MDN は 10 周年を迎えましたウェブのドキュメントを作り続けて 10 周年

MDN 製品諮問委員会MDN Web Docs は、Wiki 技術に基づいたオープンソースのウェブ開発ドキュメントプラットフォーム上に構築されたウェブ開発者向けの技術ドキュメントの信頼できるソースです。これにより、ほぼ誰でもコンテンツを作成および編集できます。

コミュニティガイドライン👋 MDN Web Docs へようこそ! MDN Web Docs は、HTML、CSS、JavaScript、Web API など、ウェブプラットフォーム技術のオープンソースかつ共同プロジェクトで、その文書を作成しています。また、初期段階の開発者や学生向けに、豊富な学習リソースを提供しています。

執筆ガイドラインMDN Web Docs はオープンソースのプロジェクトです。以下のセクションは、MDN Web Docs で私たちが*何を*文書化し、*どのように*それを行うかについてのガイドラインを記述したものです。どのように協力するかについては、協力ガイドラインを参照してください。
開発者向けのウェブ技術
===========

オープンなウェブは、開発者に素晴らしい機会をもたらします。これらの技術を最大限に活用するには、それらの使い方を知る必要があります。以下に、ウェブ技術のドキュメントへのリンクがあります。

ウェブ開発者のためのドキュメント
----------------

ウェブ開発者ガイド

ウェブ開発者ガイドは、ウェブ技術を実際に使用して、やりたいことや必要なことを実現するために役立つハウツーコンテンツを提供しています。

ウェブ開発者向けチュートリアル

HTML、CSS、JavaScript、Web API の学習を段階的に進めるためのチュートリアルです。

アクセシビリティ

ウェブサイトを使用する人に何らかの制約があっても、できるだけ多くの人が使用できるようにすることです。

パフォーマンス

コンテンツをできるだけ早く利用できるように、操作できるようにすることです。

セキュリティ

データ漏洩やデータ盗難、サイドチャンネル攻撃、クロスサイトスクリプティング、コンテンツインジェクション、クリックジャッキングなどの攻撃からユーザーを保護することです。

ウェブ技術のリファレンス
------------

Web API

ウェブでアプリを構築するために利用できる JavaScript のプログラミング API 群です。

HTML

HTML は、ウェブの文書やアプリを構成する基礎的な構成要素を提供します。

CSS

CSS は、ウェブの文書やアプリの外観を記述するために使用されます。

JavaScript

JavaScript は、ウェブのネイティブプログラミング言語です。

WebAssembly

WebAssembly により、 C、C++、Rust、Swift、C#、Go などで書かれたプログラムをウェブで実行できます。

イベント

イベントとは、ウェブアプリで応答するために構築するものです。例えば、ウェブページの読み込みが完了したとき、ユーザーが何かを選択したとき、キーを押したとき、ウィンドウのサイズを変更したとき、フォームを送信したとき、動画を一時停止したとき、などです。

HTTP

HTTP は、文書、スタイルシート、スクリプト、画像、動画、フォント、その他のリソースをウェブ上で取得し、ウェブサーバーにデータを送り返すための基本的なインターネットプロトコルです。

メディア

ウェブ文書やアプリに動画、音声、画像コンテンツを埋め込んだりストリーミングしたりするための形式、コーデック、プロトコル、API、技術です。

SVG

SVG を使用すると、画像を一連のベクトルと形状として記述して、描画されるサイズに関係なくスムーズに拡大縮小できます。

MathML

MathML により、複雑な数式や構文を表示することができます。

ウェブコンポーネント

ウェブコンポーネントは、アプリで定義したり再利用したりすることができるカスタム要素です。

WebDriver

WebDriverは、実際にブラウザーを使用している人の動作をエミュレートして、ブラウザーを遠隔制御するためのブラウザーオートメーションメカニズムです。

ウェブ拡張機能

ウェブ拡張機能は、ユーザーがブラウザーで広告や他のコンテンツをブロックしたり、ページの外観をカスタマイズしたりするなどの機能を強化するための方法です。

ウェブアプリマニフェスト

ウェブアプリマニフェストにより、縦画面/横画面の方向や表示モード（全画面など）をあらかじめ設定し、ユーザーの機器のホーム画面へウェブアプリケーションをインストールすることができます。

プログレッシブウェブアプリ (PWA)

プログレッシブウェブアプリは、ネイティブアプリのような使い勝手をもたらします。

開発者ツールの文書
---------

Firefox Developer Tools

Firefox に組み込まれた一連のウェブ開発者ツールのためのドキュメントです。

Chrome DevTools

Chrome に組み込まれた一連のウェブ開発者ツールのためのドキュメントです。

Safari Web Inspector

Safari に組み込まれた一連のウェブ開発者ツールのためのドキュメントです。

Edge DevTools

Edge に組み込まれた一連のウェブ開発者ツールのためのドキュメントです。
MDN Web Docs 用語集: ウェブ関連用語の定義
============================

ウェブ技術には、ドキュメントやコーディングで使用される専門用語や略語の膨大なリストがあります。この用語集では、ウェブの理解と構築に役立つ用語や略語の定義を掲載しています。

サイドバーから用語集を選択することができます。

**メモ:** この用語集は、現在も進行中です。新しい項目を書いたり、既存のものをより良くすることで改善に協力することができます。

**メモ:** 日本語訳注: 英語版に存在する用語を訳す場合、ページタイトルを「Array (配列)」のように、英語の後に日本語を併記するようにしてください (タイトルを翻訳する場合)。
ウェブ関連技術
=======

この節は、MDN の中心的な任務ではない（つまり、ウェブ標準技術ではない）けれども、それでもウェブに関連し、ウェブ開発者にとって興味深い技術に関する文書化のためのホームです。

**メモ:** これらの文書化リソースは、一般に MDN ライターチームによってメンテナンスされていません。これらのリソースに関する提案や問い合わせがある場合は、それらの技術のランディングページで、関連するメンテナンスチームの連絡先を調べてみてください。

技術リスト
-----

IMSC: ウェブ用字幕・キャプション (en-US)

IMSC (TTML Profiles for Internet Media Subtitles and Captions) は、字幕やキャプションを表現するためのファイル形式です。コンテンツ、時刻、レイアウト、スタイル設定を記述するために XML を使用しています。IMSC は、概念的には HTML と CSS にとても似ています。実際、IMSC のスタイルのほとんどは、CSS に直接相当するものがあります。
ゲーム開発
=====

コンピューターアクティビティの中でゲームはもっともポピュラーなものです。新技術が頻繁に登場し、標準的なウェブブラウザー上で動作するゲーム開発をより良くパワフルにしています。

ウェブゲーム開発
--------

MDN ゲーム開発センターにようこそ! サイトのこのエリアではゲーム開発をしたいウェブ開発者のためのリソースを提供します。たくさんの役立つチュートリアルやテクニックの記事を左上のメインメニューから見つけられるでしょう、気軽に探索してみてください。

またゲーム開発に良く使われる API 情報の全部を簡単に探せるリファレンスセクションもあります。

**メモ:** ウェブでゲームを作るには HTML, CSS, and JavaScript のようなコア技術を利用します。学習領域は基本から始めるのに良い場所です。

ネイティブゲームをウェブに移植する
-----------------

あなたがネイティブ開発者 (例えば、C++ でゲームを書くような) で、あなたのゲームをウェブに移植する方法に興味がある場合、Emscripten ツール — これは LLVM から JavaScript へのコンパイラーで、LLVM バイトコード(例えば Clang を使って C/C++ から、あるいは他の言語から生成したもの) を受け取り、それを asm.js というウェブで実行できるものにコンパイルします。

開始するには、次のものを見てください:

* About Emscripten は高いレベルからの詳細を含む入門です。
* Download and Install はツールチェーンのインストール用です。
* Emscripten Tutorial は開始する方法を教えてくれるチュートリアルです
例
-

ウェブゲームの作例のリストは、作例ページを見てください。さらなるリソースは games.mozilla.org もチェックしてください！

関連情報
----

新しいゲームを作る

ゲーム開発に関するチュートリアルが数多く掲載されているサイトです。最近の更新はありませんが、現在も有益な情報が多く掲載されています。

Creative JS

JavaScript のテクニックと実験のまとめです。ゲームに特化しているわけではありませんが、ゲームでも有用な情報がまとまっています。最近の更新はありませんが、それでも有用な情報がまだあります。

ゲームプログラミングパターン

Bob Nystrom によって書かれたオンライン書籍で、ゲーム開発におけいるプログラミングパターンを解説しています。解説されているパターンを利用することで、より効果的なコードを効率的に作成できるようになります。

週刊 Gamedev.js

HTML5 ゲーム開発に関するニュースレターで、毎週金曜日に発行されます。最新記事や、チュートリアル、ツール、その他の情報が紹介されています。

HTML5 ゲームエンジン

もっとも有名な HTML5 ゲームフレームワークをレーティングや、機能解説、実例付きで紹介するリストです。

JSBreakouts

さまざまな JavaScript フレームワークで作成されたブロック崩しがまとまっています。ここでは、それぞれのフレームワークをを比較できます。

Tuts+ Game Development

一般的なゲーム開発に関するチュートリアルと、解説記事です。

HTML5 Gamedev Starter

ゲーム開発初心者のためのサイトです。ウェブ上の有益な情報がまとまっています。

js13kGames

ファイルサイズが 13 KB 以内であること、という制約のもと開発された HTML ゲームを対象とした JavaScript の競技プログラミングサイトです。登録されているゲームは全て、GitHub に公開されています。

Mozilla Hacks Blog

Mozilla Hacks ブログの Games カテゴリには、ゲーム開発に関する興味深い記事が掲載されています。

関連情報
----

* Games section on wiki.mozilla.org
Mozilla
=======

以下の記事は、Mozilla のコードをダウンロードしたりビルドしたりすることについてのコンテンツが含まれています。それに加え、コードがどのように動作するかや、Mozilla のアプリケーションやそれに類するアプリケーション向けのアドオンをビルドする方法について手助けとなる記事もあるでしょう。

FirefoxFirefox は Mozilla のポピュラーな Web ブラウザで、デスクトップ上の Windows、OS X、Linux、そしてすべての Android および iOS モバイルデバイスを含む複数のプラットフォームで利用できます。幅広い互換性、最新の Web 技術、強力な開発ツールにより、Firefox は Web 開発者とエンドユーザーの両方にとって最適な選択肢です。

アドオン開発者はアドオン (add-on) を作成して Firefox の機能を拡張したり変更したりすることができます。 アドオンは JavaScript、HTML、CSS といったウェブ標準技術と、幾つかの専用の JavaScript API を使って作成します。
Descriptor (CSS) (記述子)
======================

**CSS 記述子**は、アットルールの性質を定義します。アットルールは 1 つ以上の記述子を持つことができます。それぞれの記述子には、以下のものがあります。

* 名前
* 値: コンポーネントの値
* "!important" フラグ: 設定されていない場合の既定の状態
Entity (エンティティ)
===============

HTML **エンティティ**とは、アンパサンド (`&`) で始まりセミコロン (`;`)で終わるテキスト (文字列) のひと固まりです。エンティティは（通常は HTML コードとして解釈される）予約済み文字や、(ノーブレークスペースのように) 見えない文字を表示するためによく使用されます。標準キーボードでは入力が難しい文字の代わりに使用することもできます。

**メモ:** 多くの文字は覚えやすいエンティティです。例えば、コピーライト記号 (`©`) のエンティティは `&copy;` です。覚えにくものとしては、`&#8212;` や `&#x2014;` があります。リファレンス表やデコーダーツールを使用してみてください。

予約済み文字
------

HTML で使用されるために予約されている特別な文字があり、ブラウザーはそれら予約済み文字を HTML コードとしてパースします。例えば、小なり (`<`) 記号を使用すると、ブラウザーは文章をタグとして解釈します。

これらの文字をテキストとして表示するためには、以下のテーブルで示されている、対応する文字エンティティに置き換えてください。

| 文字 | エンティティ | 注記 |
| --- | --- | --- |
| & | `&amp;` | エンティティや文字参照の開始として解釈されます。 |
| < | `&lt;` | タグの開始として解釈されます。 |
| > | `&gt;` | タグの終了として解釈されます。 |
| " | `&quot;` | 属性の値の開始や終了として解釈されます。 |

関連情報
----

### 技術リファレンス

* 文字エンティティの公式リスト
プリフェッチ
======

プリフェッチは、コンテンツが要求される可能性が高いことを前提にして、ユーザーが要求したときにコンテンツを即座にロードできるようにします。コンテンツはユーザーが明示的にリクエストすることなくダウンロードされ、将来の使用を想定してキャッシュされます。

### DNS プリフェッチ

ドメインの解決は、携帯電話のネットワークでは遅延のために時間がかかることがあります。検索エンジンの結果のように、クリックされる可能性のある外部ウェブサイトへのリンクが多数ある場合、DNS プリフェッチはドメイン名を事前に解決するため、ドメイン解決に関連するリクエスト時間を短縮し、読み込み時間が短縮されます。
```

<link rel="dns-prefetch" href="https://example.com/">
```

### リンクのプリフェッチ

リンクのプリフェッチは、ユーザーがクリックする可能性の高いリンクを想定し、それらのリンクのコンテンツを予めダウンロードしておくことで、パフォーマンスを最適化するテクニックです。ユーザーがリンクをクリックすると、コンテンツはすでにダウンロードされているため、ページが即座にレンダリングされます。

プリフェッチヒントは HTTP ヘッダーで送信されます
```

Link: ; rel=dns-prefetch,
      ; as=script; rel=preload,
      ; rel=prerender,
      ; as=style; rel=preload
```

### 属性値のプリフェッチ

ブラウザーは、prefetch 属性値付きの `<link>` タグが指示したコンテンツをプリフェッチするので、開発者はどのリソースをプリフェッチすべきかを制御することができます。
```

 <link rel="prefetch" href="https://www.example.com/solutions" />
```

関連情報
----

* defer
* async
* preload
* page prediction (en-US)
* lazy loading (en-US)
Key (暗号鍵)
=========

暗号鍵は、暗号技術における暗号化や復号で使用される情報の断片です。暗号化されたメッセージは、たとえ暗号システムに関する鍵を除くすべての知識が公開されていたとしても、安全が確保されるでしょう。

共通鍵暗号においては、同じ鍵が暗号化と復号の両方に使用されます。公開鍵暗号においては、*公開鍵*と*秘密鍵*と呼ばれる、一対の関連した鍵が存在します。公開鍵は自由に使用できますが、一方、秘密鍵は秘密に保たれます。公開鍵は、メッセージを対応する秘密鍵だけで復号できるように暗号化できます。逆もまた同様です。

1. 一般知識
    1. ウィキペディアのケルクホフスの原理の記事
2. MDN Web Docs 用語集
    1. 暗号利用モード
    2. サイファー
    3. 暗号文
    4. 暗号スイート
    5. 暗号解読
    6. 暗号学
    7. 復号
    8. 暗号化
    9. 暗号鍵
    10. 平文
    11. 公開鍵暗号
    12. 共通鍵暗号
Parameter (仮引数)
===============

仮引数は関数に渡される名前付きの変数です。仮引数の変数は関数に実引数をインポートするのに使われます。

仮引数の例です。


```js
function example(parameter) {
  console.log(parameter); // 出力 = foo
}

const argument = "foo";

example(argument);
```


仮引数には 2 種類があります。

入力引数

もっとも一般的な種類です。値を関数に渡します。プログラミング言語によっては、入力引数が渡される方法は異なります（値渡し、アドレス渡し、参照渡し、など）。

出力/返却引数

主に関数からの複数の値を返しますが、混乱の元になるため推奨しません。

### 仮引数と実引数

「仮引数 (parameter)」と「実引数 (argument)」の違いに注意してください。

* 関数の仮引数は、関数の定義に掲載されている名前です。
* 関数の実引数は、関数に渡される実際の値です。
* 仮引数は、実引数が提供した値で初期化されます。
関連情報
----

* 仮引数と実引数の違い（ウィキペディア）
* 関数宣言
* 関数式
SQL
===

**SQL** (Structured Query Language) は、テーブルベースのデータベース内のデータを更新、取得、および計算するために設計された、記述的なコンピューター言語です。

関連項目
----

### 一般知識

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

* SQL on sqlzoo.net で学ぶ
* Tutorial Point
SOAP
====

**SOAP** (Simple Object Access Protocol) は XML 形式でデータを転送するプロトコルです。Firefox は 2008 年に SOAP のサポートを廃止しました。

関連項目
----

### 一般知識

* Wikipedia の SOAP
* SOAP in Gecko-based Browsers
### 技術リファレンス

* Specification
TCP
===

**TCP (Transmission Control Protocol、伝送制御プロトコル)** は、2 台のホストを接続し、データを送受信するための重要なネットワークプロトコルです。 TCP はデータとパケットが送信した順番通りに届くことを保証します。1970 年代に、当時の DARPA 研究者である Vint Cerf と Bob Kahn によって設計されました。

TCP の役割は、パケットがエラーなく信頼性高く配信されることを保証することです。 TCP には輻輳制御があり、初期要件が小さいものから、コンピューター、サーバー、ネットワークが対応している帯域の水準まで大きさが拡大します。

1. 用語集
    1. IPv4
    2. IPv6
    3. パケット
2. Wikipedia の記事
    1. Transmission Control Protocol
3. 関連情報
    1. HTTP の概要
CRLF
====

CR と LF はテキストファイルで改行に用いることができる制御文字またはバイトコードです。

* CR = **キャリッジリターン** (`\r`、16 進数で `0x0D`、10 進数で 13) — 次の行へ進まずに、カーソルを行の先頭へ移動する。
* LF = **ラインフィード** (`\n`、16 進数で `0x0A`、10 進数で 10) — カーソルを行の先頭へ移動せずに、次の行へ下に移動する。

CR に直接 LF が続くと (CRLF, `\r\n`, or `0x0D0A`)、カーソルを下へ移動してから行の先頭へ移動します。

関連情報
----

* Wikipedia 上の 改行コード
* Wikipedia 上の キャリッジ・リターン
Mozilla Firefox
===============

**Mozilla Firefox** は、無償で利用できるオープンソースのブラウザーで、開発は Mozilla Corporation が取りまとめています。Firefox は Windows と OS X、Linux、Android で動作します。

2004 年 11 月に初版がリリースされ、 Firefox はテーマとプラグイン、アドオンを使用して完璧にカスタマイズできます。 Firefox はウェブページを表示 (レンダリング) するために Gecko を使用し、現在とこれからの両方のウェブ標準を実装しています。

詳細情報
----

### 一般知識

* Mozilla Firefox 公式サイト
### 技術リファレンス

* MDN 上のドキュメント/開発者向け情報
non-normative
=============

ソフトウェア specifications には、 *non-normative* または *informative* としてマークされた情報が含まれていることがよくあります。これは、読者が仕様をよりよく理解したり、例を示したりするのを助ける目的で提供されていることを意味している、もしくはベストプラクティスであり原則として従う必要はありません。従わなければならない仕様の公式部分を含むセクションは、多くの場合 normative とマークされています。

関連項目
----

* Description of normative and informative content in WHATWG wiki
Keyword (キーワード)
===============

**キーワード**とは、コンテンツを説明する単語やフレーズです。オンラインのキーワードは、検索エンジンのためのクエリや、ウェブサイトのコンテンツを識別するための言葉として使用されています。

検索エンジンを利用するとき、探しているウェブサイトや情報を識別するためのキーワードを使用し、検索エンジンはそのキーワードに関連するウェブページを検索結果として表示します。より正確な結果を得るためには、単なる" Mustang "を使うのではなく" Blue Mustang GTO "のようにもっと具体的なキーワードが必要です。また、ウェブページではウェブページを説明するキーワードとして head 要素内の meta 要素で使い、そのため検索エンジンは、よりよくウェブページを識別し整理することができます。

詳細情報
----

### 一般知識

* Wikipedia の Keyword
Application Context (アプリケーションコンテキスト)
====================================

**アプリケーションコンテキスト**は、それに適用されるマニフェストのある最上位の閲覧コンテキストです。

アプリケーションコンテキストが、ユーザーエージェントが深いリンクに移動することを要求された結果として生成された場合、ユーザーエージェントがユーザーエージェントはすぐに置換が有効となった深いリンクに移動しなければなりません。そうでないと、アプリケーションコンテキストが生成された時に、ユーザーエージェントは、すぐに置換が有効となった開始 URL に移動しないといけなくなります

なお、開始 URL は start\_url メンバーの値である必要はありません。ユーザーやユーザーエージェントは、アプリケーションがホーム画面に追加されたりブックマークされたりしたときに、これを変更することがあります。
Same-origin policy (同一オリジンポリシー)
===============================

\*\*同一オリジンポリシー\*\*は、重要なセキュリティの仕組みであり、あるオリジンから読み込まれた文書やスクリプトが、どのように他のオリジンからのリソースと対話することができるかを制限するものです。

悪意ある行動を起こしかねないリソースを分離し、攻撃の可能性を縮小するのに役立ちます。

関連情報
----

* 同一オリジンポリシー
* MDN Web Docs 用語集
    + CORS
    + オリジン
HTML
====

**HTML** (HyperText Markup Language) は、ウェブページの構造を指定する記述言語です。

略歴
--

1990 年に、ティム・バーナーズ・リーはウェブのビジョンの一部としてハイパーテキストという概念を定義しました。翌年、バーナーズ・リーはその概念を、 SGML に基づきマークアップを通じて形式化しました。 IETF は 1993 年に HTML の制定を正式に始めました。そして、いくつかのドラフトを経て、 1995 年にバージョン 2.0 をリリースしました。 1994 年にバーナーズ・リーは、ウェブを開発をするために W3C を設立しました。 1996 年に、 W3C は HTML の作業を引き継ぎ、 1 年後に HTML 3.2 勧告が公開されました。 HTML 4.0 が 1999 年にリリースされ、2000 年には ISO 標準になりました。

その時、 W3C は XHTML を推進していたので、 HTML をほとんど放置していました。それが 2004 年に WHATWG と呼ばれる独立したグループの設立に繋がりました。 WHATWG のおかげで、HTML に関する作業が継続されました。 2 つの組織は 2008 年に HTML5 の最初のドラフト、 2014 年に公式の規格をリリースしました。 "HTML5" という用語は、 HTML Living Standard の一部である現代のウェブ技術を表す単なるバズワードです。

概念と構文
-----

HTML 文書は、要素によって構造化されたプレーンテキストです。要素は、始まりと終わりで対応するタグで囲まれます。それぞれのタグは山括弧 (`<>`) で始まり、終わります。 `<img>` のように、どのようなテキストも囲めない、*空*要素がいくつかあります。

HTML タグは、属性で拡張することができます。これは、どのようにブラウザーが要素を解釈するかに影響する追加情報を提供します。

![HTML 要素の構造の詳細](/ja/docs/Glossary/HTML/anatomy-of-an-html-element.png)

HTML ファイルは、通常は `.htm` または `.html` という拡張子で保存され、ウェブサーバーによって提供され、どのウェブブラウザーでも表示することができます。

関連情報
----

* ウィキペディア上の HTML
* HTML チュートリアル
* The web course on codecademy.com
* MDN の HTML ドキュメント
* HTML 仕様書
Constructor (コンストラクター)
======================

**コンストラクター**は、インスタンス化された特定のクラスオブジェクトに属しています。コンストラクターは、そのオブジェクトを初期化し、オブジェクトの非公開の情報にアクセスできるようにします。コンストラクターの概念は、ほとんどのオブジェクト指向プログラミング言語にあります。本質的に、JavaScript のコンストラクターはクラスのインスタンスで宣言します。

構文
--


```js
// これは Default クラスの既定のコンストラクターです
function Default() {
}

// これは Overloaded クラスでオーバーロードされた
// 引数付きのコンストラクターです。
function Overloaded(arg1, arg2, ...,argN){
}
```


JavaScript でクラスのコンストラクターを呼び出すには、`new` 演算子を使用して新しいオブジェクトへの参照を変数に割り当てます。


```js
function Default() {}

// Default オブジェクトの新しい参照が、ローカル変数の
// defaultReference に割り当てられます
var defaultReference = new Default();
```

詳細情報
----

### 一般知識

* ウィキペディアのコンストラクタの記事
### 技術リファレンス

* MDN の JavaScript オブジェクト入門のコンストラクターの記事
* MDN の JavaScript の new 演算子の記事
Grid Row (グリッド行)
================

**グリッド行**とは CSS グリッドレイアウトにおける水平トラックであり、 2 つの水平方向のグリッドラインに挟まれた領域のことです。グリッド行は `grid-template-rows` プロパティまたは一括指定の `grid` や `grid-template` プロパティで定義されます。

加えて、明示的グリッド *(explicit grid)* で作られる行の外にアイテムが配置される場合は、暗黙的グリッド *(implicit grid)* にもグリッド行が作られます。これらの行はデフォルトでは自動的に大きさが決定されますが、`grid-auto-rows` プロパティでサイズ指定することもできます。

CSS グリッドレイアウトの中で位置調整 (alignment) をする場合、行が並ぶ軸をインライン軸もしくは行軸と呼びます。

関連情報
----

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

* `grid-template-rows`
* `grid-auto-rows`
* `grid`
* `grid-template`
### 参考情報

* CSS グリッドレイアウトガイド: *グリッドレイアウトの基本概念*
Cipher suite (暗号スイート)
=====================

暗号スイートは鍵交換アルゴリズム・鍵認証方式・サイファー・メッセージ認証符号の組み合わせです。

TLSのような暗号システムは、サーバとクライアントは安全な通信を始める前に使用する暗号スイートを決定し、同意します。典型的な暗号スイートには ECDHE\_RSA\_WITH\_AES\_128\_GCM\_SHA256 または ECDHE-RSA-AES128-GCM-SHA256 があり、それぞれの単語の意味は

* ECDHE (elliptic curve Diffie-Hellman ephemeral)を鍵交換アルゴリズムとして使用
* RSA 暗号を鍵認証方式として使用
* AES-128 をサイファーとして使用し、暗号利用モードは Galois/Counter Mode (GCM) を使用
* SHA-256 をメッセージ認証符号(HMAC:hash-based message authentication code)として使用
詳細情報
----

* Mozilla recommended cipher suite choices for TLS
Serialization (シリアライズ)
======================

オブジェクトまたはデータ構造が、ネットワークまたはストレージ（例えば、アレイバッファまたはファイルフォーマット）上の転送に適したフォーマットに変換されるプロセス。

たとえば JavaScript では、`JSON.stringify()` 関数を呼び出して、オブジェクトを JSON 文字列にシリアライズできます。

CSS 値は、`CSSStyleDeclaration.getPropertyValue()` 関数を呼び出すことによってシリアライズされます。

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

### 一般知識

* Wikipedia 上の シリアライズ
Normative
=========

Normative とは、ソフトウェア specifications で一般的に使用される単語であり、標準化されており、規則に従う必要があるセクションを示します。 仕様には *non-normative* または、 *informative* としてマークされたセクションが含まれる場合もあります。これは読者が仕様をよりよく理解できるようにするため、または例やベストプラクティスを紹介する為として提供されているセクションです。原則として従う必要はありません。

関連項目
----

* Description of normative and informative content in WHATWG wiki
CSRF
====

**CSRF** (クロスサイトリクエストフォージェリー、Cross-Site Request Forgery) は、信頼されたユーザーになりすまし、ウェブサイトに対して不正なコマンドを送信する攻撃です。

例えば、どこかへ移動すると称したリンクの URL 内に、悪意のある引数を含めたりすることで実行されます。


```html
<img src="https://www.example.com/index.php?action=delete&id=123" />
```


`https://www.example.com` で何らかの権限を持ったユーザーでは、 `<img>` 要素が `https://www.example.com` の中になくても、気づかないうちに `https://www.example.com` への操作を実行してしまいます。

CSRF を防止するには、 RESTful API を使用する、セキュリティトークンを追加するなど、様々な方法があります。

関連情報
----

* クロスサイトリクエストフォージェリ (Wikipedia)
* Prevention measures
Server (サーバー)
=============

サーバーは、ふつうはクライアントと呼ばれるユーザーにサービスを提供するソフトウェアまたはハードウェアです。ハードウェアとしてのサーバーはネットワーク上で共有されるコンピューターであり、ふつうは性能が高く、データセンターに格納されています。ソフトウェアとしてのサーバーは (よくハードウェアとしてのサーバーの上で動作しています)、クライアントプログラムにサービスを提供するプログラム、または人間のクライアントに対するユーザーインターフェイスです。

サービスは一般に、ローカルエリアネットワークまたはインターネットのような広域ネットワークで提供されます。クライアントプログラムとサーバープログラムは、慣例上、プロトコルを用いてエンコードされたメッセージを渡すことで接続をします。

例えば以下のようなものがあります。

* インターネットに接続されたウェブサーバーで、HTML ファイルをブラウザーに送信し、それでこのページが見られるもの
* ローカルエリアネットワークのファイル、名前、メール、印刷、ファックスサーバー
* データセンターのミニコンピューター、メインフレーム、スーパーコンピューター
理解を深める
------

### 一般知識

* サーバー入門
* Wikipedia 上の記事「サーバー」
DMZ
===

DMZ は、内部ネットワーク（企業または個人）と外部の信頼できない世界（通常はインターネット）との間に絶縁された安全なインターフェイスを提供する方法です。それは外部ノードからの内部ネットワークへのアクセスを拒否しながら、特定のエンドポイントだけを公開します。

関連項目
----

### 一般知識

* Wikipedia 上の 非武装地帯 (コンピュータセキュリティ)
### これについて学習する

* MDN の ウェブサーバーとファイアウォール - 攻撃に対する最大のセキュリティ
Denial of Service (サービス拒否)
==========================

サービス拒否 (DoS, Denial of Service）とは、ネットワーク攻撃のカテゴリーで、サーバーにリクエストを殺到させることによって、利用可能なサーバーリソースを消費させるものです。サーバーの動作が重くなったり、正規のユーザーが利用できなくなったりします。

詳しくは、 DoS 攻撃を参照してください。
URL
===

**Uniform Resource Locator** (**URL**) はインターネット上における(ウェブページや画像や動画といった)リソースの位置を特定するための文字列です。

HTTP においては、URL は "ウェブアドレス" や "リンク" と呼ばれます。URL はブラウザーのアドレスバーに次のように表示されます。 `https://developer.mozilla.org` いくつかのブラウザーでは "//"以降の URL、つまりドメイン名だけが表示されます。

URL は、ファイル転送 (FTP) や電子メール (SMTP) やその他のアプリケーションにおいても利用されています。

関連項目
----

### 一般知識

* Wikipedia 上の URL
### この項目について学ぶ

* URL とは何か
### 仕様書

* URL の構文は URL Living Standard で定義されています。
Modem (モデム)
===========

モデム（modem、**mod**ulator-**dem**odulator、変調器-復調器）は、ネットワークを介してデータを送信するために、デジタル情報からアナログ信号への変換や、その逆の変換を行うデバイスです。 電話回線用の DSL モデム、短距離無線信号用の Wi-Fi モデム、携帯電話基地局用の 3G モデムなど、異なるネットワークでは異なる種類のモデムが使われます。

モデムはルーターとは異なりますが、多くの企業がルーターと組み合わせたモデムを販売しています。

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

### 一般知識

* Wikipedia 上の モデム
Accessibility (アクセシビリティ)
========================

*Web アクセシビリティ* (略語: **A11Y**、Accessibility の A から Y までの間に 11 文字が挟まれているため、このように略す) は、身体的および技術的な制約によらず、Web サイトを使いやすく保つためのベストプラクティスです。Web アクセシビリティは、W3C の Web Accessibility Initiative (略称: WAI) によって、標準化と議論がされています。

関連項目
----

### 一般知識

* MDN 上 の アクセシビリティについてのリソース
* Wikipedia 上の アクセシビリティ
### Web アクセシビリティについて学ぶ

* MDN でアクセシビリティについて学ぶ
* Web Accessibility In Mind
### 技術文書

* MDN 上の ARIA についてのドキュメント
* Web Accessibility Initiative ホームページ
* WAI-ARIA 勧告
スタイルシート(Stylesheet)
===================

**スタイルシート(stylesheet)** はレイアウトを規定しウェブページまたはドキュメントをデザインする一連の CSS ルールです。*内的*スタイルシートはウェブドキュメントのヘッダー要素内のスタイル情報要素内に置かれ、*外的*スタイルシートは別の`.css` ファイルの中に置かれ、ドキュメントヘッダーのリンク要素内で参照することによりドキュメントに適用されます。

外的スタイルシートは各ページに繰り返し CSS を適用するのではなく、一箇所から複数のページのスタイリングをコントロールすることが出来るため、一般的に好ましいとされています。

詳細情報
----

### 一般知識

* CSS の第一歩
* ウィキペディア スタイルシート
SRI
===

**サブリソース完全性** (SRI) は、ブラウザーがフェッチするファイル (例えば、 CDN から) が予期しない操作無しで配信されることをブラウザーが確認できるようにするセキュリティ機能です。 フェッチされたファイルと一致する必要のある暗号化ハッシュを提供できる様にすることで機能します。

関連項目
----

* Subresource Integrity
* `Content-Security-Policy`: `require-sri-for`
Render-blocking (レンダーブロッキング)
============================

**レンダーブロッキング**はウェブサイトのローディングプロセスにおいてユーザーインターフェイスのレンダリング更新をブロックする部分のことを指します。レンダーブロッキングは、例えばコンテンツの閲覧やフォームコントロールを使った動作など、ユーザーがウェブサイトとインタラクションできるまでの応答時間が長くなるため、ウェブパフォーマンスを低下させます。

CSS や JavaScript ファイルの初期ローディングはレンダーブロッキングを発生させる最も一般的な原因です。

関連項目
----

* CSS のパフォーマンス最適化
* JavaScript のパフォーマンス最適化
* What Are Render-Blocking Resources & How to Fix Render Blocking Issues on Speckyboy (2018)
Time to interactive (対話までの時間)
=============================

**対話までの時間 (TTI)** は、ウェブパフォーマンスの標準外の 'progress' メトリクスで、最後の長いタスクが終了し、その後 5 秒間のネットワークとメインスレッドの非アクティブ状態が続いた時点として定義されています。

TTI は 2018 年に Web Incubator Community Group によって提案されたもので、ページまたはアプリケーションに有用なコンテンツが含まれ、メインスレッドがアイドル状態になり、イベントハンドラーの登録など、ユーザーの操作に自由に応答できるようになるメトリクスを提供します。

#### 警告

TTI は、長いタスク API の情報を活用して導き出されています。 TTI はいくつかのパフォーマンス監視ツールで利用できますが、執筆時点では、どの公式ウェブ仕様にも属していません。

関連情報
----

* Web Incubator Community Group における TTI の定義
* Time to Interactive — focusing on human-centric metrics by Radimir Bitsov
* Tracking TTI
Deep copy (ディープコピー)
===================

オブジェクトの **ディープコピー** とは、コピー先のオブジェクトのプロパティがコピー元のオブジェクトのプロパティと同一の参照（同じ値を指す）を共有しないコピーのことです。

結果として、コピー元かコピー先のどちらかを変更しても、そのほかのオブジェクトにも変更を及ぼしていないことを保証できます。すなわち、コピー元かコピー先に意図せずに予期しない変更が加えられるこはありません。

この振る舞いはシャローコピーとは対照的です。シャローコピーでは、コピー元かコピー先のどちらかを変更すると他のオブジェクトも変更される可能性があります。（なぜならば、それら2つのオブジェクトは参照を共有しているためです）

JavaScript では、オブジェクトを操作する標準の組み込み構文や関数（スプレッド構文, `Array.prototype.concat()`, `Array.prototype.slice()`, `Array.from()`, `Object.assign()`, `Object.create()`）はディープコピーを作成しません。（代わりにシャローコピーで作成されます）。

JavaScript のオブジェクトのディープコピーを作成する一つの方法は、そのオブジェクトが シリアライズ 可能であれば `JSON.stringify()` でオブジェクトを JSON 文字列に変換し、 `JSON.parse()` で文字列から（完全に新しい） JavaScript のオブジェクトに変換することです。


```js
let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];
let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));

// ingredients\_list\_deepcopy の 'list' プロパティの値を変更します
ingredients_list_deepcopy[1].list = ["rice flour", "water"];
// ingredients\_list の 'list' プロパティは変更されません
console.log(ingredients_list[1].list);
// Array(3) [ "eggs", "flour", "water" ]
```


上記のコードの通り、ディープコピーは元のオブジェクトと参照を共有しないため、ディープコピーにいかなる変更を加えたとしても、元のオブジェクトには影響を及ぼしません。

しかしながら、上記のコードはシンプルでシリアライズ可能ですが、多くの JavaScript のオブジェクトはシリアライズ可能とは全く言えません。例えば、関数（クロージャ）、シンボル、HTML DOM API においてHTML要素を表すオブジェクト、再帰データ、その他の多くのケース。これらのケースにおいて `JSON.stringify()` を使用したオブジェクトのシリアライズは失敗します。つまり、それらのオブジェクトのディープコピーを作成する方法はありません。

*シリアライズ可能* なオブジェクトであれば、代わりに `structuredClone()` 関数を使用してディープコピーを作成することも可能です。`structuredClone()` の利点は、ただ複製するだけでなく、移譲可能オブジェクトを元のオブジェクトから新しいコピーに *転送* できることです。ただし、`structuredClone()` は JavaScript そのものの言語機能ではなく、代わりにブラウザや `window` のようなグローバルオブジェクトを実装している他の JavaScript ランタイムによる機能であるということに留意してください。また、シリアライズ不可なオブジェクトを複製するために `structuredClone()` を呼び出すのは `JSON.stringify()` が失敗するのと同様に失敗します。

関連情報
----

* シャローコピー
* `window.structuredClone()`
Telnet
======

**Telnet** とはコマンドラインのツールであり、リモートのコンピュータにアクセスするための TCP/IP プロトコルの根底にあるものである。

さらに学ぶ
-----

* Telnet (Wikipedia)
CSS preprocessor (CSS プリプロセッサー)
===============================

**CSS プリプロセッサー** は、プリプロセッサー独自の 構文 で CSS を生成するプログラムです。 CSS プリプロセッサーには多くの種類がありますが、ほとんどの CSS プリプロセッサーは、純粋な CSS には無い、ミックスイン、セレクターの入れ子、セレクターの継承などの機能を追加しています。これらの機能によって、 CSS の可読性や保守性が向上します。

CSS プリプロセッサーを使うためには、 CSS コンパイラーをウェブサーバーにインストールするか、 CSS プリプロセッサーを使用して開発環境でコンパイルしてから、コンパイル済みの CSS ファイルをウェブサーバーにアップロードする必要があります。

1. 有名な CSS プリプロセッサーの例
    1. Sass
    2. LESS
    3. Stylus
    4. PostCSS
2. MDN Web Docs 用語集
    1. CSS
First CPU idle
==============

**First CPU Idle** は、ページが最小限のインタラクティブであるとき、またはウィンドウがユーザ入力を処理するのに十分に静かな時を測定します。これは非標準の Google Web パフォーマンスメトリックです。一般に、全ての表示されている UI 要素がインタラクティブであるとは限らない場合に発生します。UI は平均して 50ms 以内にほとんどのユーザ入力に応答します。また、これは First interactive とも呼ばれます。
ARPANET
=======

**ARPANET** (Advanced Research Projects Agency NETwork、高等研究計画局ネットワーク) は、初期のコンピューターネットワークであり、機密軍事情報を送信し、アメリカ全土の有力な研究グループを結ぶ堅牢な媒体として 1969 年に構築されました。ARPANET は、最初に NCP (network control protocol、ネットワーク制御プロトコル) を実行し、その後、インターネットプロトコルまたは TCP/IP スイートの最初のバージョンを実行し、ARPANET を初期のインターネットの重要な部分にしました。ARPANET は 1990 年の初めに閉鎖されました。

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

### 一般知識

* Wikipedia 上の ARPANET
GIF
===

GIF (Graphics Interchange Format)は、可逆圧縮とアニメーションに使える画像フォーマットです。GIF は 1 ピクセル毎 8 ビットまでと、24 ビットの色領域から最大 256 色まで扱えます。

詳細
--

### 基本的な知識

* Wikipedia 上の GIF 記事
UI
==

***ユーザーインターフェイス*** (UI) は、ユーザーと装置との間で情報のやりとりを促すものの総称です。コンピューターの分野においては、キーボード、ジョイスティック、ディスプレイ、プログラムなどが含まれます。コンピューターのソフトウェアにおいては、コマンドラインのプロンプト、ウェブページ、ユーザーの入力フォーム、フロントエンドのあらゆるアプリケーションが含まれます。

詳細情報
----

### 一般知識

* ウィキペディアのユーザーインターフェイス
* Wikipedia 英語版上の Front end development
Interpolation (補間)
==================

補間は、既知の値に基づいて値を計算する処理です。補間は、アニメーションの過程で、高さや幅などのプロパティの中間値を取得するために使用します。グラデーションでは、指定された色のリストに基づいて色の中間値を定義するために補間を使用します。また、「補間」という用語は、テンプレートリテラルを使用する文字列の置換の説明としても使用されています。

関連情報
----

* 補間 (Wikipedia)
* 文字列補間 (Wikipedia)
Time to first byte （最初のバイトまでの時間）
================================

**Time to First Byte** (TTFB) とは、ブラウザーがページをリクエストしてから、サーバーから最初の情報を受信するまでの時間を指します。この時間には DNS ルックアップと、 TCP ハンドシェイクと SSL ハンドシェイク（リクエストがHTTPSを使用している場合）を使用して接続を確立する時間が含まれます。

TTFB は、リクエストの開始からレスポンスの開始までにかかる時間をミリ秒単位で表したものです。
```

TTFB = responseStart - navigationStart
```

関連情報
----

* 典型的な HTTP セッション
* PerformanceResourceTiming
* PerformanceTiming