ARIA: grid ロール - アクセシビリティ

ARIA: grid ロール
==============

グリッド (`grid`) ロールは、1 つ以上のセルの行を含むウィジェット用です。 各セルの位置は重要であり、キーボード入力を使用してフォーカスすることができます。

```html
<table role="grid" aria-labelledby="id-select-your-seat">
  <caption id="id-select-your-seat">
    座席を選んでください
  </caption>
  <tbody role="presentation">
    <tr role="presentation">
      <td></td>
      <th>列 A</th>
      <th>列 B</th>
    </tr>
    <tr>
      <th scope="row">通路 1</th>
      <td tabindex="0">
        <button id="1a" tabindex="-1">1A</button>
      </td>
      <td tabindex="-1">
        <button id="1b" tabindex="-1">1B</button>
      </td>
      <!-- その他の列 -->
    </tr>
    <tr>
      <th scope="row">通路 2</th>
      <td tabindex="-1">
        <button id="2a" tabindex="-1">2A</button>
      </td>
      <td tabindex="-1">
        <button id="2b" tabindex="-1">2B</button>
      </td>
      <!-- その他の列 -->
    </tr>
  </tbody>
</table>
```

説明
--

グリッドウィジェットは、テーマに沿ったインタラクティブなコンテンツの 1 つ以上のセルを持つ 1 つ以上の行を含みます。 それは特定の視覚的表現を暗示するものではありませんが、要素間の関連性を暗示します。 用途は、表形式の情報の表示 (データグリッド) と他のウィジェットのグループ化 (レイアウトグリッド) の 2 つのカテゴリーに分類されます。 データグリッドとレイアウトグリッドの両方が同じ ARIA のロール、ステート、およびプロパティを採用している場合でも、そのコンテンツと目的の違いは、キーボードインタラクションのデザインにおいて考慮すべき重要な要因を表面化させます。 詳細については、WAI-ARIA Authoring Practices を参照してください。

セル要素には、行ヘッダーや列ヘッダーでない限り、グリッドセル (`gridcell`) ロールがあります。 ヘッダー要素には、それぞれ行ヘッダー (`rowheader` (en-US)) ロールと列ヘッダー (`columnheader` (en-US)) ロールがあります。 セル要素は、行 (`row`) ロールを持つ要素によって所有される必要があります。 行は行グループ (`rowgroup`) を使用してグループ化できます。

グリッドをインタラクティブなウィジェットとして使用する場合は、キーボードインタラクションを実装する必要があります。

### 関連する ARIA のロール、ステート、プロパティ

#### ロール

treegrid (en-US) (サブクラス)

グリッドに展開や折りたたみができる列がある場合は、ツリーグリッドを使用できます。

row

グリッド内の行。

rowgroup

1 つ以上の行 (row) を含むグループ。

#### ステートとプロパティ

aria-level

他の構造内でのグリッドの階層レベルを示します。 (訳注: この属性は、グリッドロールでは、ARIA 1.2 で、サポートされなくなる予定です。 行ロールでは、引き続きサポートされています。)

aria-multiselectable

`aria-multiselectable` が `true` に設定されている場合、グリッド内の複数の項目を選択できます。 デフォルト値は `false` です。

aria-readonly

ユーザーがグリッドをナビゲートできるが、グリッドの値を変更できない場合は、`aria-readonly` を `true` に設定するべきです。 デフォルト値は `false` です。

**メモ:** 多くのユースケースでは、HTML の表 (`table`) 要素で十分であり、その要素にはすでに多くの ARIA ロールが含まれています。

### キーボードインタラクション

キーボードユーザーはグリッドに出会うと、`左`、`右`、`上`、`下`のキーを使用して行と列をナビゲートします。 インタラクティブなコンポーネントをアクティブ化するには、`リターン`キーと`スペース`キーを使用します。

| キー | アクション |
| --- | --- |
| `→` | 1 セル右にフォーカスを移動します。 フォーカスが行の右端のセルにある場合、フォーカスは移動しません。 |
| `←` | 1 セル左にフォーカスを移動します。 フォーカスが行の左端のセルにある場合、フォーカスは移動しません。 |
| `↓` | 1 セル下にフォーカスを移動します。 フォーカスが列の最下部のセルにある場合、フォーカスは移動しません。 |
| `↑` | 1 セル上にフォーカスを移動します。 フォーカスが列の最上部のセルにある場合、フォーカスは移動しません。 |
| `Page Down` | 作成者が決定した行数だけ下にフォーカスを移動します。 通常、現在表示されている行セットの一番下の行が最初に表示される行の 1 つになるようにスクロールします。 フォーカスがグリッドの最後の行にある場合、フォーカスは移動しません。 |
| `Page Up` | 作成者が決定した行数だけ上にフォーカスを移動します。通常、現在表示されている行セットの一番上の行が最後に表示される行の 1 つになるようにスクロールします。 フォーカスがグリッドの最初の行にある場合、フォーカスは移動しません。 |
| `Home` | フォーカスを含む行の最初のセルにフォーカスを移動します。 |
| `End` | フォーカスを含む行の最後のセルにフォーカスを移動します。 |
| `ctrl` + `Home` | 最初の行の最初のセルにフォーカスを移動します。 |
| `ctrl` + `End` | 最後の行の最後のセルにフォーカスを移動します。 |

セル、行、列を複数選択できる場合は、次のキーの組み合わせが一般的に使用されます。

| キーの組み合わせ | アクション |
| --- | --- |
| `ctrl` + `Space` | フォーカスを含む列を選択します。 |
| `shift` + `Space` | フォーカスを含む行を選択します。 グリッドに行を選択するためのチェックボックス付きの列が含まれている場合、このキーの組み合わせを使用して、フォーカスがチェックボックスにない場合でもそのボックスをチェックできます。 |
| `ctrl` + `A` | すべてのセルを選択します。 |
| `shift` + `→` | 選択範囲を 1 セル右側に拡張します。 |
| `shift` + `←` | 選択範囲を 1 セル左側に拡張します。 |
| `shift` + `↓` | 選択範囲を 1 セル下側に拡張します。 |
| `shift` + `↑` | 選択範囲を 1 セル上側に拡張します。 |

例
-

### カレンダーの例
```

<table role="grid" aria-labelledby="calendarheader" aria-readonly="true">
  <caption id="calendarheader">
    September 2018
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <td></td>
      <th role="columnheader" aria-label="Sunday">S</th>
      <th role="columnheader" aria-label="Monday">M</th>
      <th role="columnheader" aria-label="Tuesday">T</th>
      <th role="columnheader" aria-label="Wednesday">W</th>
      <th role="columnheader" aria-label="Thursday">T</th>
      <th role="columnheader" aria-label="Friday">F</th>
      <th role="columnheader" aria-label="Saturday">S</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">Week 35</th>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td role="gridcell" tabindex="-1">1</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader">Week 36</th>
      <td role="gridcell" tabindex="-1">2</td>
      <td role="gridcell" tabindex="-1">3</td>
      <td role="gridcell" tabindex="-1">4</td>
      <td role="gridcell" tabindex="-1">5</td>
      <td role="gridcell" tabindex="-1">6</td>
      <td role="gridcell" tabindex="-1">7</td>
      <td role="gridcell" tabindex="-1">8</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader">Week 37</th>
      <td role="gridcell" tabindex="-1">9</td>
      <td role="gridcell" tabindex="-1">10</td>
      <td role="gridcell" tabindex="-1">11</td>
      <td role="gridcell" tabindex="-1">12</td>
      <td role="gridcell" tabindex="-1">13</td>
      <td role="gridcell" tabindex="-1">14</td>
      <td role="gridcell" tabindex="-1">15</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader">Week 38</th>
      <td role="gridcell" tabindex="-1">16</td>
      <td role="gridcell" tabindex="-1">17</td>
      <td role="gridcell" tabindex="-1">18</td>
      <td role="gridcell" tabindex="-1">19</td>
      <td role="gridcell" tabindex="-1">20</td>
      <td role="gridcell" tabindex="-1">21</td>
      <td role="gridcell" tabindex="-1">22</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader">Week 39</th>
      <td role="gridcell" tabindex="-1">23</td>
      <td role="gridcell" tabindex="-1">24</td>
      <td role="gridcell" tabindex="-1">25</td>
      <td role="gridcell" tabindex="-1">26</td>
      <td role="gridcell" tabindex="-1">27</td>
      <td role="gridcell" tabindex="-1">28</td>
      <td role="gridcell" tabindex="-1">29</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader">Week 40</th>
      <td role="gridcell" tabindex="-1">30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
```

```
body {
  margin: 2rem;
  font-family: "Helvetica Neue", sans-serif;
}

table {
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

tbody th, tbody td {
  padding: 5px;
}

tbody td {
  border: 1px solid #000;
  text-align: right;
  color: #767676;
}

tbody td[role="gridcell"] {
  color: #000;
}

tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus {
    background-color: #f6f6f6;
    outline: 3px solid blue;
  }
}
```

```
var selectables = document.querySelectorAll('table td[role="gridcell"]');

selectables[0].setAttribute("tabindex", 0);

var trs = document.querySelectorAll("table tbody tr"),
  row = 0,
  col = 0,
  maxrow = trs.length - 1,
  maxcol = 0;

Array.prototype.forEach.call(trs, function (gridrow, i) {
  Array.prototype.forEach.call(
    gridrow.querySelectorAll("td"),
    function (el, i) {
      el.dataset.row = row;
      el.dataset.col = col;
      col = col + 1;
    },
  );
  if (col > maxcol) {
    maxcol = col - 1;
  }
  col = 0;
  row = row + 1;
});

function moveto(newrow, newcol) {
  var tgt = document.querySelector(
    '[data-row="' + newrow + '"][data-col="' + newcol + '"]',
  );
  if (tgt && tgt.getAttribute("role") === "gridcell") {
    Array.prototype.forEach.call(
      document.querySelectorAll("[role=gridcell]"),
      function (el, i) {
        el.setAttribute("tabindex", "-1");
      },
    );
    tgt.setAttribute("tabindex", "0");
    tgt.focus();
    return true;
  } else {
    return false;
  }
}

document.querySelector("table").addEventListener("keydown", function (event) {
  switch (event.key) {
    case "ArrowRight":
      moveto(
        parseInt(event.target.dataset.row, 10),
        parseInt(event.target.dataset.col, 10) + 1,
      );
      break;
    case "ArrowLeft":
      moveto(
        parseInt(event.target.dataset.row, 10),
        parseInt(event.target.dataset.col, 10) - 1,
      );
      break;
    case "ArrowDown":
      moveto(
        parseInt(event.target.dataset.row, 10) + 1,
        parseInt(event.target.dataset.col, 10),
      );
      break;
    case "ArrowUp":
      moveto(
        parseInt(event.target.dataset.row, 10) - 1,
        parseInt(event.target.dataset.col, 10),
      );
      break;
    case "Home":
      if (event.ctrlKey) {
        var i = 0;
        var result;
        do {
          var j = 0;
          var result;
          do {
            result = moveto(i, j);
            j++;
          } while (result == false);
          i++;
        } while (result == false);
      } else {
        moveto(parseInt(event.target.dataset.row, 10), 0);
      }
      break;
    case "End":
      if (event.ctrlKey) {
        var i = maxrow;
        var result;
        do {
          var j = maxcol;
          do {
            result = moveto(i, j);
            j--;
          } while (result == false);
          i--;
        } while (result == false);
      } else {
        moveto(
          parseInt(event.target.dataset.row, 10),
          document.querySelector(
            '[data-row="' + event.target.dataset.row + '"]:last-of-type',
          ).dataset.col,
        );
      }
      break;
    case "PageUp":
      var i = 0;
      var result;
      do {
        result = moveto(i, event.target.dataset.col);
        i++;
      } while (result == false);
      break;
    case "PageDown":
      var i = maxrow;
      var result;
      do {
        result = moveto(i, event.target.dataset.col);
        i--;
      } while (result == false);
      break;
    case "Enter":
      alert(event.target.textContent);
      break;
  }
  event.preventDefault();
});
```

#### HTML

```html
<table role="grid" aria-labelledby="calendarheader">
  <caption id="calendarheader">
    September 2018
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <td></td>
      <th role="columnheader" aria-label="Sunday">S</th>
      <th role="columnheader" aria-label="Monday">M</th>
      <th role="columnheader" aria-label="Tuesday">T</th>
      <th role="columnheader" aria-label="Wednesday">W</th>
      <th role="columnheader" aria-label="Thursday">T</th>
      <th role="columnheader" aria-label="Friday">F</th>
      <th role="columnheader" aria-label="Saturday">S</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th scope="row" role="rowheader">Week 35</th>
      <td>26</td>
      <td>27</td>
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td role="gridcell" tabindex="-1">1</td>
    </tr>
    <tr role="row">
      <th scope="row" role="rowheader">Week 36</th>
      <td role="gridcell" tabindex="-1">2</td>
      <td role="gridcell" tabindex="-1">3</td>
      <td role="gridcell" tabindex="-1">4</td>
      <td role="gridcell" tabindex="-1">5</td>
      <td role="gridcell" tabindex="-1">6</td>
      <td role="gridcell" tabindex="-1">7</td>
      <td role="gridcell" tabindex="-1">8</td>
    </tr>
    <!-- … Additional Rows … -->
  </tbody>
</table>
```

#### CSS

```css
table {
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

tbody th,
tbody td {
  padding: 5px;
}

tbody td {
  border: 1px solid #000;
  text-align: right;
  color: #767676;
}

tbody td[role="gridcell"] {
  color: #000;
}

tbody td[role="gridcell"]:hover,
tbody td[role="gridcell"]:focus {
  background-color: #f6f6f6;
  outline: 3px solid blue;
}
```

#### JavaScript

```js
var selectables = document.querySelectorAll('table td[role="gridcell"]');

selectables[0].setAttribute("tabindex", 0);

var trs = document.querySelectorAll("table tbody tr"),
  row = 0,
  col = 0,
  maxrow = trs.length - 1,
  maxcol = 0;

Array.prototype.forEach.call(trs, function (gridrow, i) {
  Array.prototype.forEach.call(
    gridrow.querySelectorAll("td"),
    function (el, i) {
      el.dataset.row = row;
      el.dataset.col = col;
      col = col + 1;
    },
  );
  if (col > maxcol) {
    maxcol = col - 1;
  }
  col = 0;
  row = row + 1;
});

function moveto(newrow, newcol) {
  var tgt = document.querySelector(
    '[data-row="' + newrow + '"][data-col="' + newcol + '"]',
  );
  if (tgt && tgt.getAttribute("role") === "gridcell") {
    Array.prototype.forEach.call(
      document.querySelectorAll("[role=gridcell]"),
      function (el, i) {
        el.setAttribute("tabindex", "-1");
      },
    );
    tgt.setAttribute("tabindex", "0");
    tgt.focus();
    return true;
  } else {
    return false;
  }
}

document.querySelector("table").addEventListener("keydown", function (event) {
  switch (event.key) {
    case "ArrowRight":
      moveto(
        parseInt(event.target.dataset.row, 10),
        parseInt(event.target.dataset.col, 10) + 1,
      );
      break;
    case "ArrowLeft":
      moveto(
        parseInt(event.target.dataset.row, 10),
        parseInt(event.target.dataset.col, 10) - 1,
      );
      break;
    case "ArrowDown":
      moveto(
        parseInt(event.target.dataset.row, 10) + 1,
        parseInt(event.target.dataset.col, 10),
      );
      break;
    case "ArrowUp":
      moveto(
        parseInt(event.target.dataset.row, 10) - 1,
        parseInt(event.target.dataset.col, 10),
      );
      break;
    case "Home":
      if (event.ctrlKey) {
        var i = 0;
        var result;
        do {
          var j = 0;
          var result;
          do {
            result = moveto(i, j);
            j++;
          } while (result == false);
          i++;
        } while (result == false);
      } else {
        moveto(parseInt(event.target.dataset.row, 10), 0);
      }
      break;
    case "End":
      if (event.ctrlKey) {
        var i = maxrow;
        var result;
        do {
          var j = maxcol;
          do {
            result = moveto(i, j);
            j--;
          } while (result == false);
          i--;
        } while (result == false);
      } else {
        moveto(
          parseInt(event.target.dataset.row, 10),
          document.querySelector(
            '[data-row="' + event.target.dataset.row + '"]:last-of-type',
          ).dataset.col,
        );
      }
      break;
    case "PageUp":
      var i = 0;
      var result;
      do {
        result = moveto(i, event.target.dataset.col);
        i++;
      } while (result == false);
      break;
    case "PageDown":
      var i = maxrow;
      var result;
      do {
        result = moveto(i, event.target.dataset.col);
        i--;
      } while (result == false);
      break;
    case "Enter":
      alert(event.target.textContent);
      break;
  }
  event.preventDefault();
});
```

### より多くの例

* データグリッドの例 (英語)
* レイアウトグリッドの例 (英語)
* W3C/WAI チュートリアル: 表 (英語)
アクセシビリティに関する懸念
--------------

キーボードインタラクションが適切に実装されていても、矢印キーを使用しなければならないことに気づかないユーザーもいます。 グリッド (`grid`) ロールを使用して、必要な機能性とインタラクションが最もよく達成できることを確認してください。

仕様
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # grid |

スクリーンリーダーのサポート
--------------

TBD

関連情報
----

* ARIA composite ロール (en-US)
* ARIA table ロール
* ARIA treegrid ロール (en-US)
* ARIA row ロール
* ARIA rowgroup ロール
* ARIA: gridcell ロール
* ARIA: rowheader ロール (en-US)
* ARIA: columnheader ロール (en-US)
* HTML の表要素
* aria-level
* aria-multiselectable
* aria-readonly

1. **WAI-ARIA ロール**
    1. `alertdialog ロールの使用`
    2. `ARIA: alert ロール`
    3. `ARIA: application ロール`
    4. `ARIA: article ロール`
    5. `ARIA: banner ロール`
    6. `ARIA: button ロール`
    7. `ARIA: cell ロール`
    8. `ARIA: checkbox ロール`
    9. `ARIA: complementary ロール`
    10. `ARIA: contentinfo ロール`
    11. `ARIA: dialog ロール`
    12. `ARIA: document ロール`
    13. `ARIA: feed ロール`
    14. `ARIA: figure ロール`
    15. `ARIA: form ロール`
    16. `ARIA: grid ロール`
    17. `ARIA: gridcell ロール`
    18. `ARIA: heading ロール`
    19. `ARIA: list ロール`
    20. `ARIA: listbox ロール`
    21. `ARIA: listitem ロール`
    22. `ARIA: main ロール`
    23. `ARIA: navigation ロール`
    24. `ARIA: option ロール`
    25. `ARIA: region ロール`
    26. `ARIA: row ロール`
    27. `ARIA: rowgroup ロール`
    28. `ARIA: search ロール`
    29. `ARIA: switch ロール`
    30. `ARIA: tab ロール`
    31. `ARIA: table ロール`
    32. `ARIA: term ロール`
    33. `ARIA: textbox ロール`
    34. `group ロールの使用`
    35. `link ロールの使用`
    36. `log ロールの使用`
    37. `presentation ロールの使用`
    38. `progressbar ロールの使用`
    39. `radio ロールの使用`
    40. `slider ロールの使用`
    41. `status ロールの使用`
    42. `toolbar ロールの使用`


ARIA: term ロール - アクセシビリティ

ARIA: term ロール
==============

`term` ロールは、オプションで対応する `definition` (en-US) を持つ単語やフレーズに使用することができます。

解説
--

`term` ロールは、オプションで対応する `definition` (en-US) を持つ単語やフレーズに使用することができます。 HTML の `<dfn>` 要素や定義リスト（`<dl>`）内の定義項（`<dt>`）要素と意味づけは同じです。

`term` ロールは、作成者によって定義が提供された、またはユーザーによって提供されることが期待されている単語または語句を明示的に識別するために使用します。既存の定義、または定義を入力するフォームやフォームコントロールがある場合、作者は `aria-details` (en-US) を設定し、関連の要素を指すようにすべきです (SHOULD)。

`role="term"` をリンクのような対話的要素に使用しないでください。支援技術ユーザーが要素と対話するのを妨害する可能性があるからです。また、用語そのものがアクセシビリティ名なので、 `aria-label` (en-US) や `aria-labelledby` は使用しないでください。

**警告:** アクセシブル名は用語そのものでなければなりませんので、`aria-label` や `aria-labelledby` は使用しないでください。

### 関連付けられる WAI-ARIA ロール、ステート、プロパティ

なし。

### キーボード操作

なし。

### 必要な JavaScript 機能

なし。

例
-

```html
<p>
  <span role="term">Mansplaining</span>,
  <span role="definition"
 >a portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it</span
 >.
</p>
```

より良い意味づけをするために、上記は次のように書くこともできます。

```html
<p>
  <dfn role="term">Mansplaining</dfn>,
  <span role="definition"
 >a portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it</span
 >.
</p>
```

または ARIA なしで書くとこうなります（ただし、表示したいように表示されない可能性があります）。

```html
<dl>
  <dt>Mansplaining</dt>
  <dd>
    A portmanteau of "man" and "explain", is the patronizing act of explaining
    without being asked to do so, to someone already learned on the topic, often
    after someone has already explained it.
  </dd>
</dl>
```

アクセシビリティの考慮
-----------

`role="term"` は、支援技術ユーザーが要素と対話するのを妨げる可能性があるので、リンクのような対話要素には使用しないでください。

ベストプラクティス
---------

用語自体がアクセシブル名を定義できるようにしてください。 `aria-label` や `aria-labelledby` は使用しないでください。

### 推奨される HTML

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # term |

関連情報
----

* ARIA: `definition` ロール (en-US).
* HTML の `<dfn>` 要素


XML のイントロダクション - XML: Extensible Markup Language

XML のイントロダクション
==============

概要: この記事は、'eXtensible Markup Language' (XML、拡張可能マークアップ言語) を紹介し、その使い道について XML は HTML に似たマークアップ言語です。 これは Extensible Markup Language の略で、汎用マークアップ言語として W3C が推奨する仕様です。つまり、他のマークアップ言語とは異なり、XML は事前定義されていないため、独自のタグを定義する必要があります。この言語の主な目的は、インターネットなどのさまざまなシステム間でデータを共有することです。

XML に基づいた言語はたくさんあります。XHTML、MathML、SVG、XUL、XBL、RSS、RDF などがあります。 あなた自身のものを作ることもできます。

XML 文書構造
--------

**警告:** このサブ記事は執筆中です...

XML および XML ベースの言語の全体の構造は tag に基づいています。

### XML 宣言

XML 宣言はタグではありません。文書の送信メタデータに使用しました。
```

<?xml version="1.0" encoding="UTF-8"?>
```

#### 属性

version :

この文書で使用されている XML のバージョン

encoding :

この文書で使用されているエンコーディング。

### コメント
```

<!-- Comment -->
```

"正しい" XML (妥当であり、整形式であること)
--------------------------

### 正しいデザインルール

XML 文書を正しくするには、次の条件を満たす必要があります。

* 文書は整形式でなければなりません。
* 文書はすべての XML 構文規則に準拠している必要があります。
* 文書は、通常 XML スキーマまたは DTD (文書型定義) で設定されているセマンティックルールに準拠する必要があります。
### 例

```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
        Hello World
    <!--missing </warning> -->
</message>
```

整形式に適合した正しい例は以下です。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<message>
    <warning>
         Hello World
    </warning>
</message>
```

未定義のタグを含む文書は無効です。たとえば、`<warning>` タグを定義しなかった場合、上記の文書は無効になります。

**メモ:** ほとんどのブラウザは、形式が不適切な XML 文書を識別できるデバッガを提供しています。

エンティティ
------

HTML と同様に、XML には特別な予約文字 (タグに使用される大なり記号など) を参照するための (エンティティと呼ばれる) メソッドがあります。知っておくべきこれらの文字は 5 つあります。

| エンティティ | 文字 | 説明 |
| --- | --- | --- |
| < | < | 小なり記号 |
| > | > | 大なり記号 |
| & | & | アンパサンド |
| " | " | 二重引用符 |
| ' | ' | 1 つのアポストロフィ (または単一引用符) |

宣言されたエンティティは 5 つしかありませんが、ドキュメントの Document Type Definition を使用して追加することができます。たとえば、新しい `&warning;` エンティティを作成する場合。このようにして行うことができます：

```html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE body [
 <!ENTITY warning "Warning: Something bad happened... please refresh and try again.">
]>
<body>
  <message> &warning; </message>
</body>
```

数字参照を使用して特殊文字を指定することもできます。 たとえば、© は "©" 記号です。

XML の表示
-------

XML は説明のためにたいてい用いられますが、XML データを表示するための方法があります。その方法を定義しなければ、生の XML コードがブラウザに表示されます。

XML ページに見た目を持たせる方法の一つは、`xml-stylesheet` 宣言で CSS を用いることです。
```

<?xml-stylesheet type="text/css" href="stylesheet.css"?>
```

XML を表示するもう 1 つのより強力な方法もあります。XSL を HTML などの他の言語に変換するために使用できる Extensible Stylesheet Language Transformation (XSLT) です。 これにより、XML は非常に用途が広くなります。
```

<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
```

推奨
--

この記事は、XML の概要についてごく簡単に紹介したもので、始めるためのいくつかの小さな例と参照が含まれています。XML の詳細については、Web でもっと詳細な記事を調べてください。

ハイパーテキストマークアップ言語 (HTML) を学ぶと、XML をよりよく理解するのに役立ちます。

あわせて参照
------

* XML.com
* Extensible Markup Language (XML) @ W3.org
* XML Example: A List Apart
* Using XML: A List Apart

上記の Using XML の記事は、あなた自身の言語を変換したり作成したりするための情報に関する素晴らしいリソースです。


XML のパースとシリアライズ - XML: Extensible Markup Language

XML のパースとシリアライズ
===============

場合によっては、XML のコンテンツを解析して DOM ツリーに変換する必要があるでしょう。または逆に、既存の DOM ツリーを XML にシリアライズすることもあります。この記事では、XML のシリアライズと解析の一般的な作業を容易にするため、ウェブプラットフォームで提供されるオブジェクトに注目します。

`XMLSerializer`

DOM ツリーをシリアライズし、XML を含む文字列に変換します。

`DOMParser`

XML を含む文字列を解析して DOM ツリーを構築し、入力データに基づいて適切な `XMLDocument` または `Document` を返します。

`XMLHttpRequest`

URL からコンテンツを読み込みます。XML コンテンツは、XML 自体から構築された DOM ツリーを持つ XML `Document` オブジェクトとして返されます。

XPath

XML 文書の特定の部分のアドレスを含む文字列を作成し、それらのアドレスに基づいて XML ノードを特定する技術。

XML 文書を作成する
-----------

次のいずれかの方法で XML 文書を作成します (これは `Document` のインスタンスです)。

### 文字列を DOM ツリーにパースする

この例では、`DOMParser` を使用して文字列の XML フラグメントを DOM ツリーに変換します:

```js
const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// ルート要素の名前またはエラーメッセージを出力します
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  console.log("パース中にエラー発生");
} else {
  console.log(doc.documentElement.nodeName);
}
```

### URL にできるリソースを DOM ツリーにパースする

#### XMLHttpRequest を使用する

URL アドレス指定が可能な XML ファイルを読み込み解析して DOM ツリーにするサンプルコードを次に示します:

```js
const xhr = new XMLHttpRequest();

xhr.onload = () => {
  dump(xhr.responseXML.documentElement.nodeName);
};

xhr.onerror = () => {
  dump("Error while getting XML.");
};

xhr.open("GET", "example.xml");
xhr.responseType = "document";
xhr.send();
```

`xhr` オブジェクトの `responseXML` フィールドで返される値は XML の解析により構築された `Document` です。

document が HTML である場合、上記のコードは `Document` を返します。document が XML である場合、返されるオブジェクトは `XMLDocument` になります。この 2 種類は基本的に同じですが、その違いは主に歴史的な部分であり、差別化にはいくつかの実用的な利点があります。

**メモ:** `HTMLDocument` インターフェイスもありますが、独立した型であるとは限りません。独立した型として扱うブラウザーもありますが、単なる `Document` インターフェイスへのエイリアスとしているブラウザーもあります。

XML 文書のシリアライズ
-------------

`Document` がある時、`XMLSerializer.serializeToString()` メソッドを用いて文章の DOM ツリーを XML にシリアライズし直すことができます。

前の節で作成した XML 文書をシリアライズするには、以下の方法を用いてください。

### DOM ツリーを文字列にシリアライズ

まず、DOM ツリーの作成方法で説明された方法で DOM ツリーを作成します。もしくは、`XMLHttpRequest` で取得した DOM ツリーを用います。

DOM ツリー `doc` を XML 文字列にシリアライズするには、以下のように `XMLSerializer.serializeToString()` を呼び出します。

```js
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);
```

### HTML 文書のシリアライズ

DOM が HTML 文書である場合、`serializeToString()` を用いてシリアライズすることもできますが、より単純な方法があります。`Element.innerHTML` プロパティ (指定したノードの子孫のみを得たい場合) または `Element.outerHTML` プロパティ (指定したノードとその子孫を得たい場合) を用いればよいです。

```js
const docInnerHtml = document.documentElement.innerHTML;
```

これを実行すると、`docHTML` は文書の内容、すなわち `<body>` 要素の内容を表す HTML が入った文字列になります。

このコードを用いると、`<body>` *と* その子孫に対応する HTML を得ることができます。

```js
const docOuterHtml = document.documentElement.outerHTML;
```

関連項目
----

* XPath
* `XMLHttpRequest`
* `Document`, `XMLDocument` および `HTMLDocument`


XSLT による XML の変換 - XSLT: 拡張可能なスタイルシートの言語変換

XSLT による XML の変換
================

概要
--

概要

コンテンツとプレゼンテーションの分離は、XML の重要な設計の特徴です。 XML 文書の構造は、このデータが最終的にどのように表現されるべきかを示す必要性に妨げられることなく、コンテンツ自体の個々の側面間の重要な関係を反映し、明確にするように設計されています。このインテリジェントな構造化は、より多くのデータ移行を自動化し、ネットワークでリンクされた異機種間で配置する際に具体的な意味を持ちます。

しかし、 XML 文書内に格納されるコンテンツの多くは、最終的には人間の読者に表示する必要があります。ブラウザーは、親しみやすく柔軟性の高いインターフェイスを提供しているため、 XML コンテンツの表示版を提供するための理想的なメカニズムです。さまざまな XML 技術を利用して一から構築された Firefox は、元の XML 文書と、それらを HTML 表示用にスタイル設定およびレイアウトするために使用される特殊なスタイルシートの両方を処理するために必要なすべてのメカニズムをそれ自体に組み込んでおり、クライアントサイドの処理でサーバーの負荷を軽減します。

現時点で、 Gecko （Firefox のレイアウトエンジン）は 2 種類の XML 用のスタイルシートに対応しています。基本的な表示方法の制御 — フォント、色、位置、など — については、 Gecko は CSS を使用します。

ここでは、Gecko が対応している 2 つ目の種類のスタイルシート、XSLT スタイルシートに注目します。XSLT は eXtensible Stylesheet Language/Transform の略で、この名前は最適です。 XSLT は、スタイルシート作成者が主要な XML 文書を 2 つの重要な方法で変換することができます。コンテンツの操作と並べ替え（必要であれば、コンテンツの並べ替えも含みます）、およびコンテンツの異なる形式への変換（Firefox の場合は、ブラウザーで表示できる HTML への変換）です。

XSLT/XPath リファレンス
-----------------

### 要素

要素

* xsl:apply-imports *(対応済み)*
* xsl:apply-templates *(対応済み)*
* xsl:attribute *(対応済み)*
* xsl:attribute-set *(対応済み)*
* xsl:call-template *(対応済み)*
* xsl:choose *(対応済み)*
* xsl:comment *(対応済み)*
* xsl:copy *(対応済み)*
* xsl:copy-of *(対応済み)*
* xsl:decimal-format *(対応済み)*
* xsl:element *(対応済み)*
* xsl:fallback *(未対応)*
* xsl:for-each *(対応済み)*
* xsl:if *(対応済み)*
* xsl:import *(ほぼ対応済み)*
* xsl:include *(対応済み)*
* xsl:key *(対応済み)*
* xsl:message *(対応済み)*
* xsl:namespace-alias *(未対応)*
* xsl:number *(一部対応済み)*
* xsl:otherwise *(対応済み)*
* xsl:output *(一部対応済み)*
* xsl:param *(対応済み)*
* xsl:preserve-space *(対応済み)*
* xsl:processing-instruction
* xsl:sort *(対応済み)*
* xsl:strip-space *(対応済み)*
* xsl:stylesheet *(一部対応済み)*
* xsl:template *(対応済み)*
* xsl:text *(一部対応済み)*
* xsl:transform *(対応済み)*
* xsl:value-of *(一部対応済み)*
* xsl:variable *(対応済み)*
* xsl:when *(対応済み)*
* xsl:with-param *(対応済み)*
### 軸

軸

* ancestor (en-US)
* ancestor-or-self (en-US)
* attribute (en-US)
* child (en-US)
* descendant (en-US)
* descendant-or-self (en-US)
* following (en-US)
* following-sibling (en-US)
* namespace (en-US) *(未対応)*
* parent (en-US)
* preceding (en-US)
* preceding-sibling (en-US)
* self (en-US)
### 関数

関数

* boolean() *(対応済み)*
* ceiling() *(対応済み)*
* concat() *(対応済み)*
* contains() *(対応済み)*
* count() *(対応済み)*
* current() *(対応済み)*
* document() *(対応済み)*
* element-available() *(対応済み)*
* false() *(対応済み)*
* floor() *(対応済み)*
* format-number() *(対応済み)*
* function-available() *(対応済み)*
* generate-id() *(対応済み)*
* id() *(partially 対応済み)*
* key() *(対応済み)*
* lang() *(対応済み)*
* last() *(対応済み)*
* local-name() *(対応済み)*
* name() *(対応済み)*
* namespace-uri() *(対応済み)*
* normalize-space() *(対応済み)*
* not() *(対応済み)*
* number() *(対応済み)*
* position() *(対応済み)*
* round() *(対応済み)*
* starts-with() *(対応済み)*
* string() *(対応済み)*
* string-length() *(対応済み)*
* substring() *(対応済み)*
* substring-after() *(対応済み)*
* substring-before() *(対応済み)*
* sum() *(対応済み)*
* system-property() *(対応済み)*
* translate() *(対応済み)*
* true() *(対応済み)*
* unparsed-entity-url() *(not 対応済み)*
さらなる読み物
-------

さらなる読み物

* 書籍
* デジタル
    + ウェブサイト
    + 記事
    + チュートリアル／例
    + その他
原典情報
----

* Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
* 注: この転載記事はもともと DevEdge サイトの一部でした。


一般的な XSLT エラー - XSLT: 拡張可能なスタイルシートの言語変換

一般的な XSLT エラー
=============

### MIME タイプ

サーバーは、XML mime タイプの`text/xml`または`application/xml`のソースとスタイルシートの両方を送信する必要があります。 現在のタイプを調べるには、Mozilla でファイルを読み込み、ページ情報を見てください。 または、ダウンロードツールを使用してください。これらのツールは通常、MIME タイプを示します。

Firefox 6 以降では、公式の XSLT mimetype である `application/xslt+xml`を使用することもできます。

### 名前空間

XSLT 1.0 の名前空間は`http://www.w3.org/1999/XSL/Transform`です。IE の古いバージョンでは、異なる名前空間が使用されていました。 しかしこれらのバージョンでは、最終的に XSLT 1.0 仕様となったものと互換性のない XSLT のドラフト版も使用されていました。Firefox は公式の XSLT 1.0 バージョンのみをサポートしています。

### 不足している機能

XSLT 1.0 仕様には、Firefox が残念ながらサポートしていない機能がいくつかあります。具体的には：

* XPath 式の`namespace::` 軸。これをサポートすることは将来的に可能になりそうです
* `disable-output-escaping`属性。この機能は構築された出力ドキュメントのシリアル化の仕組みを制御します。しかし、Firefox は出力ドキュメントをシリアル化しないので、属性は実際には適用されません。 `disable-output-escaping`を適用した出力ドキュメントの一部だけをシリアライズして再解析するためのヒューリスティックを追加しようとする可能性がありますが、ヒューリスティックはしばしば間違った結果を招き、これまでこれを追加することを躊躇してきました。スタイルシートに`<xsl:text disable-output-escaping="yes"> </xsl:text>`のようなコードが含まれていることがよくあります。これはスタイルシートを入れるだけで、すべての XSLT エンジンでうまく動作します。私たちは、`disable-output-escaping`の欠如が問題であることを認識しています。私たちはそれに対する解決策を見いだしたいと思いますが、これまでのところ、良い解決策は見つかりませんでした。
* `<xsl:namespace-alias>` 要素

上記の機能のいずれかを手助けしたい場合は、大いに助けてください。


PIパラメータ - XSLT: 拡張可能なスタイルシートの言語変換

PIパラメータ
=======

### 概要

XSLT は実行時にパラメータをスタイルシートに渡すという概念をサポートしています。これによりしばらくの間は JavaScript で XSLTProcessor を使用することが可能です。しかし、 `<?xml-stylesheet?>` 処理命令（PI）を使用するときは、パラメータを提供する方法がありませんでした。

これを解決するために 2 つの新しい PI 、つまり `<?xslt-param?>` および `<?xslt-param-namespace?>` が Firefox 2 (詳細についてはSupported versionsを参照) で実装されています。どちらの PI にも、`xml-stylesheet` PI と同じ方法で「擬似属性」を含めることができます。

次のドキュメントは "color" と "size" の 2 つのパラメータをスタイルシート "style.xsl" に渡します。
```

<?xslt-param name="color" value="blue"?>
<?xslt-param name="size" select="2"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
```

これらの PI は JavaScript で `XSLTProcessor` オブジェクトを使用して変換が行われても効果がありません。

### 処理の指示

`xslt-param` および `xslt-param-namespace` PI の属性は、xml-stylesheet で定義されている規則を使用して解析されます。認識できない属性はすべて無視する必要があります。属性の解析は、 `xml-stylesheet` の構文に従う限り、認識できない属性が存在するせいで失敗してはなりません。

`xslt-param` と `xslt-param-namespace` PI の両方はドキュメントのプロローグ、つまり最初の要素タグの前になければなりません。プロローグ内のすべての PI は、`xml-stylesheet` PI の前後に発生する必要があります。

複数の `xml-stylesheet` PI がある場合、パラメータはすべてのスタイルシートに適用され、その結果すべてのスタイルシートが XSLT 仕様に従って単一のスタイルシートにインポートされます。複数の `xml-stylesheet` XSLT PI は現在 Firefox ではサポートされていません。

#### xslt-param

`xslt-param` PI は 4 つの属性をサポートしています。

name

パラメータ名のローカル名部分。属性の構文チェックは行われませんが、有効な NCName でない場合は、スタイルシートのどのパラメータにも一致しません。

namespace

パラメータ名の名前空間。属性の構文チェックは行われません。

value

パラメータの文字列値を格納します。属性の値はパラメータの値として使用されます。データ型は常に最適です。

select

パラメータの XPath 式。属性の値は XPath 式として解析されます。式を評価した結果はパラメータの値として使用されます。

**name** 属性がないか空の場合、PI は無視されます。

**namespace** 属性がないか空の場合、null 名前空間が使用されます。

スタイルシートに存在しない (またはスタイルシート内の変数である) パラメータ名を指定するのはエラーではありません。PI は単に無視されます。

**value** と **select** の両方が存在する場合、または **value** も **select** も存在しない場合、PI は無視されます。

`value="..."` はアポストロフィと引用文字の両方を含むことができるので、厳密には `select="'...'"` と等しくないことに注意してください。

##### 例

パラメータ 'color' を文字列 'red' に設定します。
```

<?xslt-param name="color" value="red"?>
```

パラメータ 'columns' を 2 に設定します。
```

<?xslt-param name="columns" select="2"?>
```

パラメータ 'books' を null 名前空間のすべての `<book>` 要素を含むノードセットに設定します。
```

<?xslt-param name="books" select="//book"?>
```

パラメータ 'show-toc' を真偽値 `true` に設定します。
```

 <?xslt-param name="show-toc" select="true()"?>
```

##### select 属性コンテキスト

次のコンテキストは、**select** 属性の式の解析と評価に使用されます。

* コンテキストノードは、スタイルシートを実行するときに使用される初期カレントノードとして使用されるノードです
* コンテキストポジションは、スタイルシートを実行する際に使用される初期カレントノードリスト内のコンテキストノードの位置です
* コンテキストサイズは、スタイルシートを実行する際に使用される初期の現在のノードリストのサイズです
* 変数はありません
* 関数ライブラリは標準の XPath 関数ライブラリです。
* 名前空間宣言は `xslt-param-namespace` PI によって決まります。以下を参照してください

**select** 属性が解析または実行に失敗した場合、PI は無視されます (特に、**value** 属性に戻ることはありません)。

#### xslt-param-namespace

`xslt-param-namespace` は 2 つの属性を使用します。

prefix

マッピングされている接頭辞

namespace

接頭辞がマップされる名前空間

`xslt-param-namespace` PI は、それに続くすべての xslt-params の select 属性の式に影響します。 これは、xslt-param-namespace と xslt-param PI の間にコメントや他の PI などの他のノードがある場合でも適用されます。

複数の PI が同じプレフィックスを使用するのはエラーではなく、新しい PI はすべてプレフィックスがマップする名前空間を変更するだけです。

**接頭辞**がないか、空もしくは無効な NCName と等しい場合、PI は無視されます。

**名前空間**がない場合、PI は無視されます。**名前空間**が空の場合、接頭辞マッピングは削除されます。

##### 例

パラメータ 'books' を 'http://www.example.org/myNamespace' 名前空間のすべての `<book>` 要素を含むノードセットに設定します。
```

<?xslt-param-namespace prefix="my" namespace="http://www.example.org/myNamespace"?>
<?xslt-param name="books" select="//my:book"?>
```

### サポート対象バージョン

Firefox 2.0.0.1 以降でサポートされています。**value** 属性は Firefox 2 ではサポートされていますが、2.0 リリースの一部の式では **select** 属性がクラッシュします。

### 可能性のある将来の開発

式に XSLT 関数を許可する必要がありますか？ `document()` は役に立ちそうですが、`generate-id()` が同じ文書に対して同じ文字列を生成しなければならない不変条件を維持するのは難しいようです。

XSLT スタイルシートで URL パラメータをクエリするとどうなりますか？ 例えば、それらを指定された <xsl:param>に渡します。


XSLT 要素リファレンス - XSLT: 拡張可能なスタイルシートの言語変換

XSLT 要素リファレンス
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

ここでは、最上位要素と指示の 2 種類の要素について説明します。最上位の要素は `<xsl:stylesheet>` または `<xsl:transform>` の子として表示する必要があります。一方、指示はテンプレートに関連付けられています。スタイルシートにはいくつかのテンプレートが含まれています。ここでは説明しない第 3 のタイプの要素はリテラル結果要素 (LRE) です。 LRE もテンプレートに表示されます。これは、HTML 変換スタイルシートの `<hr>` 要素など、結果ドキュメントにそのままコピーする必要のある非命令要素から構成されます。

関連するメモでは、 LRE 内の任意の属性と限られた数の XSLT 要素の一部の属性には、属性値テンプレートとして知られているものも含めることができます。属性値テンプレートは、属性の値を指定するために使用される埋め込み XPath 式を含む文字列です。実行時に式が評価され、XPath 式の代わりに評価結果が使用されます。たとえば、変数 "`image-dir`" が次のように定義されているとします。
```

<xsl:variable name="image-dir">/images</xsl:variable>
```

評価される式は、中括弧の中に置かれます。
```

<img src="{$image-dir}/mygraphic.jpg"/>
```

この結果、次のようになります。
```

<img src="/images/mygraphic.jpg"/>
```

続く要素の注釈には説明、構文リスト、必須およびオプションの属性のリスト、タイプと位置の説明、W3C 勧告のソース、および現在の Gecko サポートの程度の説明が含まれます。

* `<xsl:apply-imports>`
* `<xsl:apply-templates>`
* `<xsl:attribute>`
* `<xsl:attribute-set>`
* `<xsl:call-template>`
* `<xsl:choose>`
* `<xsl:comment>`
* `<xsl:copy>`
* `<xsl:copy-of>`
* `<xsl:decimal-format>`
* `<xsl:element>`
* `<xsl:fallback>` *(対応外)*
* `<xsl:for-each>`
* `<xsl:if>`
* `<xsl:import>` *(ほぼ対応)*
* `<xsl:include>`
* `<xsl:key>`
* `<xsl:message>`
* `<xsl:namespace-alias>` *(対応外)*
* `<xsl:number>` *(一部対応)*
* `<xsl:otherwise>`
* `<xsl:output>` *(一部対応)*
* `<xsl:param>`
* `<xsl:preserve-space>`
* `<xsl:processing-instruction>`
* `<xsl:sort>`
* `<xsl:strip-space>`
* `<xsl:stylesheet>` *(一部対応)*
* `<xsl:template>`
* `<xsl:text>` *(一部対応)*
* `<xsl:transform>`
* `<xsl:value-of>` *(一部対応)*
* `<xsl:variable>`
* `<xsl:when>`
* `<xsl:with-param>`


XSLT の概要 - XSLT: 拡張可能なスタイルシートの言語変換

XSLT の概要
========

« Transforming XML with XSLT

eXtensible Stylesheet Language/Transform は非常に強力な言語であり、この記事の全体的な議論はこの記事の範囲をはるかに超えていますが、基本的な概念の簡単な説明は Netscape の機能の説明の理解に役立ちます。

XSLT スタイルシートは XML ドキュメントです。

独自の特殊な構文を持つ CSS と異なり、XSLT スタイルシートは XML 文書であり、整形式を含むすべての XML 規則に準拠しなければなりません。したがって、変換のモデルは 1 つの XML 文書を使用して別の XML 文書を変換することです。

XSLT スタイルシートには、標準の XSLT 見出しが含まれています。

XSLT スタイルシートの最も外側の要素は `<xsl:stylesheet>` 要素でなければなりません (受け入れ可能な代替要素は `<xsl:transform>` 要素です)。この要素には少なくとも 1 つの名前空間宣言と必須のバージョン属性が含まれます。他の名前空間と 3 つのオプションの属性も含めることができます。

XSLT の必須名前空間は `"http://www.w3.org/1999/XSL/Transform"` です。

名前空間は XML のかなりの混乱の対象です。多くの場合、名前空間は URI であるように見えますが、実際にはそのアドレスにあるリソースを参照していません。代わりに既知の要素セットの一意の識別子を指定する単なる方法です。文字列 `"http://www.w3.org/1999/XSL/Transform"` は、1999 年に XSLT 勧告で W3C によって指定されたタグのセットに属するとマークされた要素を指定する定数です。スタイルシートで時折見られる別の文字列 `"http://www.w3.org/TR/WD-xsl"` は、W3C 文書の以前の作業草案 (したがって WD) に準拠していることを示します。後者のネームスペースは W3C が最終的に採用したものと互換性がなく、Netscape でサポートされていません。

繰り返し `"http://www.w3.org/1999/XSL/Transform"` と入力するのは面倒で、マークアップを読みにくくするため、スタイルシートの見出しの名前空間に省略名を割り当てるための標準的なメカニズムがあります。したがって、opening stylesheet 要素の完全な例は、このようになります。

`<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">`

xmlns 擬似属性は、後続の文書全体で使用するために短縮名 xsl を完全な名前空間にマップします。したがって、上記の stylesheet 要素の前に `xsl:` が付いています。xsl は従来使用されていた短縮名 (接頭辞と呼ばれます) ですが必須ではなく、別の名前を選択することも可能です。この記事の例はすべて xsl 接頭辞の使用を前提としています。

すべての XSLT 変換は、ドキュメントではなくツリーで実行されます。

プロセッサと呼ばれる XSLT 変換エンジンは、ドキュメントでは直接動作しません。変換が行われる前に、プライマリ XML ドキュメントとスタイルシートドキュメントは、メモリ内のドキュメント構造の抽象的な表現を作成するパーサを介して実行する必要があります。ツリーと呼ばれるこの表現は、プロセッサによって実際に操作されるものです。ツリーは抽象データ型であり、パーサーとプロセッサに応じてさまざまな方法で実装できる概念モデルです。Netscape ではツリー構造として W3C DOM に似た構造を使用していますが、他のものも可能です。唯一の要件はツリー内のオブジェクトの配置、そのプロパティ、およびそれらの関係に関係します。

ツリーはノードの階層的なフレームワークで構成されています。単一のルートノード、要素ノード、テキストノード、属性ノード、コメントノード、処理命令ノード、および名前空間ノードの 7 つの異なるタイプのノードで構成できます。

ツリーの最上部にルートノードがあります。ルートノードは XML 文書の個々の部分に対応していません。文書全体を表します。ルートノードの下には要素、コメント、処理命令などの子要素があります。これらの子要素の中にはさらに子要素がいるものもあります。そして、これはいくつかのレベルのために続けることができます。たとえば、テキストノードには子を持たないなど、ノードの種類が発生する特定の制約があります。

プロセッサのアクションの結果もツリーです。Netscape はこのツリーを使用してブラウザウィンドウにコンテンツを表示します。

XSLT は、高水準の宣言型言語です。

本質的に、XSLT スタイルシートはテンプレートと呼ばれる一連のルールであり、この特定のパターンに一致するノードはこの特定の方法で操作され、結果ツリーのこの特定の位置で終了することを宣言します。これがどのように達成されるかについての詳細は、プロセッサに委ねられています。スタイルシートの実行順序は保証できないため、XSLT は副作用を発生させる機能をサポートしていません。これは Lisp や Scheme のようなものです。

ツリー上の場所は、別の W3C 勧告である XPath を使用して指定されます。

変換はプロセッサがツリー上の個々のノードを特定できるかどうかに依存します。これを容易にするために、W3C は別の言語である XPath を使用することに決め、Xpath は XSLT コンテキスト外でも使用されています。その名前が示すように、XPath はプロセッサがツリーを通過して目的のノードに到達する「パス」を定義します。このパスは評価される XPath 特有の表現、一致される条件の数、ノードを関連付ける方法、および/またはツリー内の方向性の指示を含む式からなります。XSLT で最も一般的に使用される XPath の部分の詳細な説明は、参考セクションで説明します。

テンプレートマッチングの潜在的な競合は、一連のカスケード優先ルールを使用して解決されます。

一般的に、より具体的なテンプレートルールはあまり具体的でないテンプレートルールよりも優先され、他のものは同等であるため、ドキュメントの後に表示されるテンプレートルールが先に表示されたものよりも優先されます。

スタイルシートは、処理命令を介して XML 文書に添付することができます。

特定の XML 文書を処理するためにどの XSLT スタイルシートを使用すべきかを示す最も簡単な方法は、XML 文書自体に処理命令を含めることです。 たとえば、スタイルシートが inventory.xsl と呼ばれ、xml ドキュメントと同じディレクトリにある場合、xml ドキュメントの処理命令は次のようになります。

`<?xml-stylesheet type="text/xml" href="inventory.xsl"?>`

これは xml ドキュメントのプロローグセクションに配置する必要があります。

XSLT と XPath の詳細については、この記事の最後にある参考文献を参照してください。


Netscape XSLT/XPath リファレンス - XSLT: 拡張可能なスタイルシートの言語変換

Netscape XSLT/XPath リファレンス
==========================

次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。

### 要素

* xsl:apply-imports *(対応済)*
* xsl:apply-templates *(対応済)*
* xsl:attribute *(対応済)*
* xsl:attribute-set *(対応済)*
* xsl:call-template *(対応済)*
* xsl:choose *(対応済)*
* xsl:comment *(対応済)*
* xsl:copy *(対応済)*
* xsl:copy-of *(対応済)*
* xsl:decimal-format *(対応済)*
* xsl:element *(対応済)*
* xsl:fallback *(非対応)*
* xsl:for-each *(対応済)*
* xsl:if *(対応済)*
* xsl:import *(ほとんど対応)*
* xsl:include *(対応済)*
* xsl:key *(対応済)*
* xsl:message *(対応済)*
* xsl:namespace-alias *(非対応)*
* xsl:number *(一部対応)*
* xsl:otherwise *(対応済)*
* xsl:output *(一部対応)*
* xsl:param *(対応済)*
* xsl:preserve-space *(対応済)*
* xsl:processing-instruction
* xsl:sort *(対応済)*
* xsl:strip-space *(対応済)*
* xsl:stylesheet *(一部対応)*
* xsl:template *(対応済)*
* xsl:text *(一部対応)*
* xsl:transform *(対応済)*
* xsl:value-of *(一部対応)*
* xsl:variable *(対応済)*
* xsl:when *(対応済)*
* xsl:with-param *(対応済)*
### Axes

* ancestor
* ancestor-or-self
* attribute
* child
* descendant
* descendant-or-self
* following
* following-sibling
* namespace *(非対応)*
* parent
* preceding
* preceding-sibling
* self
### 関数

* boolean() *(対応済)*
* ceiling() *(対応済)*
* concat() *(対応済)*
* contains() *(対応済)*
* count() *(対応済)*
* current() *(対応済)*
* document() *(対応済)*
* element-available() *(対応済)*
* false() *(対応済)*
* floor() *(対応済)*
* format-number() *(対応済)*
* function-available() *(対応済)*
* generate-id() *(対応済)*
* id() *(一部対応)*
* key() *(対応済)*
* lang() *(対応済)*
* last() *(対応済)*
* local-name() *(対応済)*
* name() *(対応済)*
* namespace-uri() *(対応済)*
* normalize-space() *(対応済)*
* not() *(対応済)*
* number() *(対応済)*
* position() *(対応済)*
* round() *(対応済)*
* starts-with() *(対応済)*
* string() *(対応済)*
* string-length() *(対応済)*
* substring() *(対応済)*
* substring-after() *(対応済)*
* substring-before() *(対応済)*
* sum() *(対応済)*
* system-property() *(対応済)*
* translate() *(対応済)*
* true() *(対応済)*
* unparsed-entity-url() *(非対応)*


さらなる読みもの - XSLT: 拡張可能なスタイルシートの言語変換

さらなる読みもの
========

« Transforming XML with XSLT

印刷物
---

### 書籍

* **XSLT: Programmer's Reference, Second Edition**
    + **著者**: Michael H. Kay
    + **ページ数**: 992 pages
    + **出版社**: Wrox; 2 edition (May 3, 2001)
    + **ISBN**: 0764543814
        - Michael Kay は W3C XSL ワーキンググループのメンバーであり、オープンソース XSLT プロセッサである Saxon の開発者です。彼はまた、このテーマに関する第 2 版に達した唯一の本の著者でもあります。これは XSLT ストーリーのすべての可能なベースを網羅している非常に大きな本です。うまくレイアウトされています。

https://www.amazon.com/XSLT-Programmers-Reference-Programmer/dp/0764543814

* **XSLT**
    + **著者**: Doug Tidwell
    + **ページ数**: 473 pages
    + **出版社**: O'Reilly Media; 1 edition (August 15, 2001)
    + **ISBN**: 0596000537
        - Doug Tidwell は IBM の上級開発者であり、一般に XML 技術の著名なエバンジェリストです。彼は IBM の幅広い XML 開発者サイトで、XML のさまざまな側面に関するいくつかの記事とチュートリアルの著者です。この本はマイケル・ケイのものよりもいくぶん包括的ではありませんが、基礎をうまくカバーし、興味深い例を提供しています。

https://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537

* **Learning XML, Second Edition**
    + **著者**: Erik T. Ray
    + **ページ数**: 432 pages
    + **出版社**: O'Reilly Media; 2 edition (September 22, 2003)
    + **ISBN**: 0596004206
        - タイトルが示すように、これは一般的に XML の概要です。第 6 章は特に XSLT に専念しています。

https://www.amazon.com/gp/product/0596004206

デジタル
----

### ウェブサイト

* **World Wide Web Consortium**
    + **W3C ホームページ**: https://www.w3.org
    + **メインの XSL ページ**: https://www.w3.org/Style/XSL/
    + **XSLT specifications overview**: https://www.w3.org/TR/xslt/
    + **Archive of public style (CSS and XSLT) discussions**: https://lists.w3.org/Archives/Public/www-style/
    + **XPath specifications overview**: https://www.w3.org/TR/xpath/
        - World Wide Web Consortium は、多くがデファクトスタンダードとなる多くのウェブベースの技術のための勧告を公表する機関です。
### 記事

* Hands-on XSL (Don R. Day)
* What is XSLT? (G. Ken Holman)
### チュートリアル/例

* Jeni's XSLT Pages
* XMLPitstop.com
* XSL Tutorial
### その他

* Extensible Stylesheet Language (XSL)
* **XSL-List**
    + **Subscribe**: https://www.mulberrytech.com/xsl/xsl-list/index.html
    + **Archives**: https://www.biglist.com/lists/xsl-list/archives/


<xsl:copy-of> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:copy-of>
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:copy-of>` 要素は、select 属性が出力文書に指定するものすべての深いコピー (子孫ノードを含む) を作成します。

### 構文
```

<xsl:copy-of select=EXPRESSION />
```

### 必須属性

`select`

何をコピーするかを指定する XPath 式を使用します。

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 11.3.

### Gecko のサポート

サポート済み


<xsl:apply-templates> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:apply-templates>
=====================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:apply-templates>` 要素は、入力ツリー内のノードのセットを選択し、適切なテンプレートを適用するようにプロセッサに指示します。

### 構文
```

<xsl:apply-templates select=EXPRESSION mode=NAME>
  <xsl:with-param> [optional]
  <xsl:sort> [optional]
</xsl:apply-templates>
```

### 必須属性

なし

### 任意属性

`select`

処理するノードを指定する XPath 式を使用します。アスタリスク (\*) はノードセット全体を選択します。この属性が設定されていない場合は、現在のノードのすべての子ノードが選択されます。

`mode`

同じノードに対して複数の処理方法が定義されている場合は、それらを区別します。

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT section 5.4.

### Gecko のサポート

サポート済み


<xsl:import> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:import>
============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:import>` 要素はあるスタイルシートの内容を別のスタイルシートにインポートするための最上位要素です。一般に、インポートしたスタイルシートの内容は、インポートするスタイルシートの内容よりもインポートの優先度が低くなります。これは `<xsl:include>` とは対照的です。ここでインクルードされたスタイルシートの内容は、インクルードするスタイルシートの内容とまったく同じです。

### 構文
```

<xsl:import href=URI  />
```

### 必須属性

`href`

インポートするスタイルシートの URI を指定します。

### 任意属性

なし

### タイプ

トップレベルは、インポートスタイルシートの `<xsl:stylesheet>` または `<xsl:transform>` の他の子の前に表示する必要があります。

### 定義

XSLT, section 2.6.2.

### Gecko のサポート

主に Mozilla 1.0 以降のトップレベルの変数とパラメータに関するいくつかの問題でサポートされています。


<xsl:call-template> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:call-template>
===================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:call-template>` 要素は名前付きテンプレートを呼び出します。

### 構文
```

<xsl:call-template name=NAME>
  <xsl:with-param> [optional]
</xsl:call-template>
```

### 必須属性

`name`

呼び出すテンプレートの名前を指定します。

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 6.

### Gecko のサポート

サポート済み


<xsl:stylesheet> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:stylesheet>
================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:stylesheet>` 要素 (または同等の `<xsl:transform>` 要素) は、スタイルシートの最も外側の要素です。

### 名前空間宣言

文書を XSLT スタイルシートとして識別するために必要な擬似属性。通常これは `xmlns:xsl="http://www.w3.org/1999/XSL/Transform"` です。

構文
--

```xml
<xsl:stylesheet
 version="NUMBER"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 id="NAME"
 extension-element-prefixes="LIST-OF-NAMES"
 exclude-result-prefixes="LIST-OF-NAMES">
    ENTIRE STYLESHEET
</xsl:stylesheet>
```

### 必須属性

`version`

このスタイルシートに必要な XSLT のバージョンを指定します。

### 任意属性

`exclude-result-prefixes`

この文書で使用されている名前空間のうち、出力文書に送信すべきではないものを指定します。リストは空白区切りです。

`extension-element-prefixes`

この文書における拡張要素の名前空間接頭辞をすべて、空白区切りのリストで指定します。

`default-collation`

この要素を祖先とする属性またはテキスト値のテンプレートに現れるすべての XPath 式で、内部の要素の別な `default-collation` 属性で上書きされた場合を除き、使用される既定の照合を指定します。これは特定の XSLT の構築 (`<xsl:key>` および `xsl:for-each-group` などの) も指定します。

`default-mode`

`mode` 属性の既定値を、スコープ内におけるすべての `<xsl:template>` および `<xsl:apply-templates>` 要素について定義します。

`default-validation`

スコープ内に現れるすべての関連する指示について `validation` 属性の既定値を定義します。

`expand-text`

要素の配下のテキストノードをテキスト値のテンプレートとして扱うかどうかを指定します。

`id`

このスタイルシートの ID を指定します。これはスタイルシートが別の XML 文書に埋め込まれている場合に最もよく使用されます。

`input-type-annotations`

元の文書がスキーマに対して検証されているかどうかに関係なく、同じ結果が生成されるように、要素から型表記を削除するかどうかを指定します。

`use-when`

要素とそれを祖先として持つすべてのノードをスタイルシートから除外するかどうかを決定します。

`xpath-default-namespace`

XPath 式内で接頭辞のない要素名や型名に使用される名前空間を指定します。

### 種別

スタイルシートのもっとも外側の要素である必要があります。

仕様書
---

| Specification |
| --- |
| XSLT 3.0 # stylesheet-element |

ブラウザーの互換性
---------

{{Compat}}


<xsl:variable> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:variable>
==============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:variable>` 要素はスタイルシートにグローバル変数またはローカル変数を宣言し、値を与えます。XSLT は副作用を許さないため、変数の値が設定されると、変数がスコープから外れるまでは変わりません

### 構文
```

<xsl:variable name=NAME select=EXPRESSION >
  TEMPLATE
</xsl:variable>
```

### 必須属性

`name`

変数に名前を付けます。

### 任意属性

`select`

XPath 式を使用して変数の値を定義します。要素にテンプレートが含まれている場合、この属性は無視されます。

### タイプ

トップレベルまたは指示。トップレベル要素として発生するとその変数は範囲がグローバルであり、ドキュメント全体からアクセスできます。テンプレート内で発生する場合、変数はスコープ内でローカルであり、変数が現れるテンプレート内でのみアクセスできます。

### 定義

XSLT, section 11.

### Gecko のサポート

サポート済み


<xsl:output> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:output>
============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:output>` 要素は出力文書の特性を制御します。Netscape で正しく機能するには、method 属性を持つこの要素を使用する必要があります。 7.0 より `method="text"` は期待通りに機能します。

### 構文
```

<xsl:output
  method="xml" | "html" | "text"
  version=STRING
  encoding=STRING
  omit-xml-declaration="yes" | "no"
  standalone="yes" | "no"
  doctype-public=STRING
  doctype-system=STRING
  cdata-section-elements=LIST-OF-NAMES
  indent="yes" | "no"
  media-type=STRING  />
```

### 必須属性

なし

### 任意属性

`method`

出力形式を指定します。

`version`

出力文書内の XML 宣言または HTML 宣言の version 属性の値を指定します。この属性は `method="html"` または `method="xml"` の場合にのみ使用されます。

`encoding`

出力文書の `encoding` 属性の値を指定します。

`omit-xml-declaration`

XML 宣言を出力に含めるかどうかを示します。許容可能な値は "`yes`" または "`no`" です。

`standalone` (サポートされていません)

存在する場合、出力文書でスタンドアロン宣言が発生しその値が返されることを示します。許容可能な値は "yes" または "no" です。

`doctype-public`

出力文書の `DOCTYPE` 宣言の `PUBLIC` 属性の値を指定します。

`doctype-system`

出力文書の `DOCTYPE` 宣言の `SYSTEM` 属性の値を指定します。

`cdata-section-elements`

テキストの内容を `CDATA` セクションとして記述する要素をリストします。要素は空白で区切る必要があります。

`indent` (サポートされていません)

階層構造を示すために出力を字下げするかどうかを指定します。

`media-type` (サポートされていません)

出力ドキュメントの MIME タイプを指定します。

### タイプ

最上位は子 `<xsl:stylesheet>` または `<xsl:transform>` である必要があります。

### 定義

XSLT, section 16.

### Gecko のサポート

部分的なサポート。上記のコメントを参照してください。


<xsl:element> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:element>
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:element>` 要素は、出力文書に要素を作成します。

### 構文
```

<xsl:element name=NAME namespace=URI use-attribute-sets=LIST-OF-NAMES >
  TEMPLATE
</xsl:element>
```

### 必須属性

`name`

出力要素の希望する名前を指定します。名前は有効な QName でなければなりません。

### 任意属性

`namespace`

出力要素の名前空間を指定します。

`use-attribute-sets`

`element` 要素の出力要素に適用される `attribute-set` 要素 (en-US)名のスペース区切りのリスト。適用された属性は、ネストされた属性要素によってオーバーライドできます。

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 7.1.2.

### Gecko のサポート

サポート済み


<xsl:transform> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:transform>
===============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

The `<xsl:transform>` 要素は `<xsl:stylesheet>` 要素とまったく同じです。

### Gecko のサポート

サポート済み


<xsl:apply-imports> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:apply-imports>
===================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:apply-imports>` 要素は非常に秘密で、複雑なスタイルシートで主に使用されます。インポートの優先順位では、メインスタイルシートのテンプレートルールは、インポートされたスタイルシートのテンプレートルールより優先される必要があります。ただし、メインスタイルシートの同等のルールではなく、(低い優先順位の) インポートされたスタイルシートからテンプレートルールを使用するようにプロセッサを強制することが可能な場合があります。

### 構文
```

<xsl:apply-imports/>
```

### 必須属性

なし

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 5.6.

### Gecko のサポート

サポート済み


<xsl:attribute-set> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:attribute-set>
===================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:attribute-set>` 要素は名前付き属性のセットを作成します。属性のセットは、CSS の名前付きスタイルに類似した方法で出力ドキュメント全体に適用されます。

### 構文
```

<xsl:attribute-set name=NAME use-attribute-sets=LIST-OF-NAMES>
  <xsl:attribute>
</xsl:attribute-set>
```

### 必須属性

`name`

属性セットの名前を指定します。名前は有効な QName でなければなりません。

### 任意属性

`use-attribute-sets`

他の属性セットから属性セットを構築します。寄与する集合の名前は、空白文字で区切られなければならず、直接的または間接的に埋め込まれてはいけません。

### タイプ

最上位は `<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 7.1.4.

### Gecko のサポート

サポート済み


<xsl:with-param> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:with-param>
================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:with-param>` 要素はテンプレートに渡すパラメータの値を設定します。

### 構文
```

<xsl:with-param name=NAME select=EXPRESSION>
  TEMPLATE
</xsl:with-param>
```

### 必須属性

`name`

このパラメータに名前を付けます。

### 任意属性

`select`

XPath 式を使用してパラメータの値を定義します。要素にテンプレートが含まれている場合、この属性は無視されます。

### タイプ

サブ命令は常に `<xsl:apply-templates>` または `<xsl:call-template>` 要素内に現れます。

### 定義

XSLT 11.6

### Gecko のサポート

サポート済み


<xsl:include> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:include>
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:include>` 要素はあるスタイルシートの内容を別のスタイルシートにマージします。`<xsl:import>` の場合とは異なり、インクルードされたスタイルシートの内容はインクルードするスタイルシートの内容とまったく同じです。

### 構文
```

<xsl:include href=URI />
```

### 必須属性

`href`

含めるスタイルシートの URI を指定します。

### 任意属性

なし

### タイプ

トップレベルは `<xsl:stylesheet>` または `<xsl:transform>` の子として任意の順序で表示されます。

### 定義

XSLT, section 2.6.1.

### Gecko のサポート

サポート済み


<xsl:strip-space> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:strip-space>
=================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:strip-space>` 要素は空白を削除する必要があるソースドキュメント内の要素を定義します。

### 構文
```

<xsl:strip-space elements=LIST-OF-ELEMENT-NAMES  />
```

### 必須属性

`elements`

空白のみのテキストノードを削除する必要がある、ソース内の要素のスペース区切りリストを指定します。

### 任意属性

なし

### タイプ

トップレベル、`<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 3.4

### Gecko のサポート

サポート済み


<xsl:for-each> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:for-each>
==============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:for-each>` 要素は一連のノードを選択し、それぞれのノードを同じ方法で処理します。これはノードのセットを反復処理したり、現在のノードを変更したりするためによく使用されます。1 つ以上の `<xsl:sort>` 要素がこの要素の子として表示される場合、処理の前にソートが行われます。それ以外の場合、ノードはドキュメント順に処理されます。

### 構文
```

<xsl:for-each select=EXPRESSION>
  <xsl:sort> [optional]
  TEMPLATE
</xsl:for-each>
```

### 必須属性

`select`

XPath 式を使用して、処理するノードを選択します。

### 任意属性

なし

### Type

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 8.

### Gecko のサポート

サポート済み


<xsl:fallback> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:fallback>
==============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:fallback>` 要素は指定された拡張子 (または、最終的には新しいバージョン) 要素がサポートされていない場合に使用するテンプレートを指定します。

### 構文
```

<xsl:fallback>
  TEMPLATE
</xsl:fallback>
```

### 必須属性

なし

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 15

### Gecko のサポート

現時点ではサポートされていません。


<xsl:decimal-format> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:decimal-format>
====================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:decimal-format>` 要素は、`format-number( )` 関数を使用して数字を文字列に変換する際に使用される文字と記号を定義します。

### 構文
```

<xsl:decimal-format
  name=NAME
  decimal-separator=CHARACTER
  grouping-separator=CHARACTER
  infinity=STRING
  minus-sign=CHARACTER
  NaN=STRING
  percent=CHARACTER
  per-mille=CHARATER
  zero-digit=CHARACTER
  digit=CHARACTER
  pattern-separator=CHARACTER />
```

### 必須属性

なし

### 任意属性

`name`

この形式の名前を指定します。

`decimal-separator`

小数点文字を指定します。デフォルトは (`.`) です。

`grouping-separator`

桁区切り文字を指定します。 デフォルトは (`,`) です。

`infinity`

無限を表すために使用される文字列を指定します。デフォルトは文字列 "`Infinity`"です。

`minus-sign`

マイナス記号文字を指定します。デフォルトはハイフン (`-`) です。

`NaN`

値が数値でない場合に使用される文字列を指定します。デフォルトは文字列 "`NaN`" です。

`percent`

パーセント符号文字を指定します。デフォルトは (`%`) です。

`per-mille`

1000 文字ごとに指定します。デフォルトは (`‰`) です。

`zero-digit`

数字のゼロ文字を指定します。 デフォルトは (`0`) です。

`digit`

数字を表すためにフォーマットパターンで使用される文字を指定します。デフォルトは (`#`) です。

`pattern-separator`

正と負のサブパターンをフォーマットパターンで区切る文字を指定します。デフォルトはセミコロン (`;`) です。

### タイプ

最上位は `<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 12.3.

### Gecko のサポート

1.0 (Mozilla 1.0、Netscape 7.0) でサポートされています。


<xsl:choose> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:choose>
============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:choose>` 要素はいくつかの選択肢の中から選択肢を定義します。 手続き型言語の switch 文のように振る舞います。

### 構文
```

<xsl:choose>
    <xsl:when test="[whatever to test1]"></xsl:when>
    <xsl:when test="[whatever to test2]"></xsl:when>
    <xsl:otherwise></xsl:otherwise> [optional]
</xsl:choose>
```

### 必須属性

なし

### 任意属性

なし

### タイプ

インストラクションはテンプレートとともに表示されます。1 つまたは複数の `<xsl:when>` 要素と、オプションで最後の `<xsl:otherwise>` 要素を含みます。

### 定義

XSLT, section 9.2.

### Gecko のサポート

サポート済み


<xsl:text> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:text>
==========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:text>` 要素はリテラルテキストを出力ツリーに書き込みます。 `#PCDATA`、リテラルテキスト、およびエンティティ参照を含むことがあります。

### 構文
```

<xsl:text disable-output-escaping="yes" | "no">
  TEXT
</xsl:text>
```

### 必須属性

なし

### 任意属性

`disable-output-escaping` (Netscape は変換の結果 - 下の「出力」 - を直列化しませんので、この属性は本質的に文脈上は無関係です。html エンティティを出力するには、代わりに数値を使用します (例: `&nbsp`の `&#160`) )

出力に書き込まれたときに特殊文字をエスケープするかどうかを指定します。使用可能な値は "`yes`" または "`no`" です。たとえば "`yes`" が設定されている場合、文字>は `>` ではなく"`&gt`" として出力されます。

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 7.2

### Gecko のサポート

注意してサポートされています。


<xsl:key> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:key>
=========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:key>`要素は、`key( )`関数を使用してスタイルシートの他の場所で使用できる名前付きキーを宣言します。

### 構文
```

<xsl:key name=NAME match=EXPRESSION
  use=EXPRESSION />
```

### 必須属性

`name`

このキーの名前を指定します。QName でなければなりません。

`match`

このキーが適用可能なノードを定義します。

`use`

適用可能な各ノードのキーの値を決定するために使用される XPath 式を指定します。

### 任意属性

なし

### タイプ

最上位は `<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 12.2.

### Gecko のサポート

サポート済み


<xsl:param> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:param>
===========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:param>` 要素はパラメータを名前で設定し、オプションでそのパラメータのデフォルト値を設定します。最上位要素として使用される場合、パラメータはグローバルです。`<xsl:template>` 要素内で使用される場合、パラメータはそのテンプレートに対してローカルです。この場合、テンプレートの最初の子要素でなければなりません。

### 構文
```

<xsl:param name=NAME select=EXPRESSION>
  TEMPLATE
</xsl:param>
```

### 必須属性

`name`

パラメータに名前を付けます。これは QName でなければなりません。

### 任意属性

`select`

指定されていない場合は XPath 式を使用してデフォルト値を指定します。

### タイプ

命令は、トップレベルの要素として表示されるか、テンプレート内に表示されます。

### 定義

XSLT, section 11.

### Gecko のサポート

サポート済み


<xsl:preserve-space> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:preserve-space>
====================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:preserve-space>` 要素は空白を保存する要素をソース文書内で定義します。複数の要素がある場合は、名前を空白文字で区切ります。空白を保持するのがデフォルト設定なので、この要素は `<xsl:strip-space>` 要素を打ち消すために使用する必要があります。

### 構文
```

<xsl:preserve-space elements=LIST-OF-ELEMENT-NAMES  />
```

### 必須属性

`elements`

空白を保持する要素を指定します。

### 任意属性

なし

### タイプ

トップレベル、 `<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 3.4

### Gecko のサポート

サポート済み


<xsl:number> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:number>
============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:number>` 要素は物事を順番に数えます。 また、番号をすばやくフォーマットするためにも使用できます。

### 構文
```

<xsl:number
  count=EXPRESSION
  level="single" | "multiple" | "any"
  from=EXPRESSION
  value=EXPRESSION
  format=FORMAT-STRING
  lang=XML:LANG-CODE
  letter-value="alphabetic" | "traditional"
  grouping-separator=CHARACTER
  grouping-size=NUMBER  />
```

### 必須属性

なし

### 任意属性

`count`

ソースツリー内で連続して番号を付けるべき項目を指定します。XPath 式を使用します。

`level`

順序番号を生成する際にソースツリーのレベルをどのように考慮すべきかを定義します。これには 3 つの有効な値があります：`single` 、`multiple` 、`any` 。デフォルト値は `single` です。

`single`

リスト内の項目のように、ノードを兄弟順に番号付けします。プロセッサは count 属性に一致する `ancestor-or-self` 軸の最初のノードに移動し、そのノードとそれに先行する count 属性にも一致するすべての兄弟 (それが存在する場合は `from` 属性に一致すると停止する) をカウントします。一致するものが見つからない場合、シーケンスは空のリストになります。

`multiple`

ノードの階層位置 (例: 1.2.2.5 ) を反映する合成シーケンスとしてのノードの番号付け。 (ネストされた書式は `format` 属性で指定することができます (例：A.1.1) )。プロセッサは現在のノードおよび現在のノード自体のすべての祖先を調べ、`from` 属性と一致するものに達したときに停止します (存在する場合)。このリスト内の `count` 属性に一致するノードごとに、プロセッサはそれに先行して一致する兄弟数を数え、ノード自体に 1 を加算します。一致するものが見つからない場合、シーケンスは空のリストになります。

`any` (現時点ではサポートされていません)

レベルに関係なく、すべての一致するノードに順番に番号を付けます。 `ancestor`、 `self`、および `preceding` 軸すべてが考慮されます。プロセッサは現在のノードから開始し、逆の文書順に進み、`from` 属性に一致する場合は停止します。 count 属性に一致するものが見つからない場合、シーケンスは空のリストになります。このレベルは現時点ではサポートされていません。

from

番号付けを開始または開始する場所を指定します。シーケンスは `from`属性に一致するノードの最初の子孫で始まります。

value

与えられた形式を数値に適用します。これは標準 `<xsl:number>` 形式のいずれかでユーザーが入力した番号 (ノード順序番号とは対照的に) を簡単にフォーマットする方法です。

format

生成された番号の形式を定義します。

format="1"

1 2 3 . . . (これは現時点でサポートされている唯一の形式です)

format="01"

01 02 03 . . . 09 10 11 . . .

format="a"

a b c . . .y z aa ab . . .

format="A"

A B C . . . Y Z AA AB . . .

format="i"

i ii iii iv v . . .

format="I"

I II III IV V . . .

lang (現時点ではサポートされていません)

文字ベースの番号書式で使用する言語のアルファベットを指定します。

letter-value

文字を使用する番号付けシーケンスの間の曖昧さを解消します。いくつかの言語には文字を使用する複数の番号システムがあります。両方のシステムが同じトークンで始まる場合、あいまいさが発生する可能性があります。この属性の値は "`alphabetic`" または "`traditional`" です。デフォルトは "`alphabetic`" です。

grouping-separator

どの文字をグループ (たとえば千) の区切り文字として使用するかを指定します。デフォルトはカンマ (`,`) です。

grouping-size

数値グループを構成する数字の桁数を示します。デフォルト値は "`3`" です。

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 7.7

### Gecko のサポート

部分的なサポート。上記のコメントを参照してください。


<xsl:sort> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:sort>
==========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:sort>` 要素は、`<xsl:apply-templates>` または `<xsl:for-each>` で選択されたノードのソートキーを定義し、それらが処理される順序を決定します。

### 構文
```

<xsl:sort
  select=EXPRESSION
  order="ascending" | "descending"
  case-order="upper-first" | "lower-first"
  lang=XML:LANG-CODE
  data-type="text" | "number" />
```

### 必須属性

なし

### 任意属性

`select`

XPath 式を使用してソートするノードを指定します。

`order`

ノードを "`ascending`" または "`descending`" に処理するかどうかを指定します。デフォルトは "`ascending`" です。

`case-order`

大文字か小文字かを最初に指示するかどうかを示します。許容される値は "`upper-first`" および "`lower-first`" である。

`lang`

ソートで使用する言語を指定します。

`data-type`

アイテムをアルファベット順または数値順に並べ替えるかどうかを定義します。 許容される値は "`text`" と "`number`" で、"`text`" がデフォルトです。

### タイプ

Subinstruction は常に <xsl:for-each> の子として現れます。テンプレートの適切な場所または <xsl:apply-templates> の前に現れなければなりません。

### 定義

XSLT, section10.

### Gecko のサポート

サポート済み


<xsl:processing-instruction> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:processing-instruction>
============================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:processing-instruction>` 要素は処理命令を出力文書に書き込みます。

### 構文
```

<xsl:processing-instruction name=NAME> TEMPLATE </xsl:processing-instruction>
```

### 必須属性

`name`

この処理命令の名前を指定します。

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 7.3

### Gecko のサポート

サポート済み


<xsl:if> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:if>
========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:if>` 要素にはテスト属性とテンプレートが含まれています。テストが真と評価された場合、テンプレートは処理されます。これは、他の言語の if 文に似ています。ただし、if-then-else ステートメントの機能を実現するには、`<xsl:when>` と `<xsl:otherwise>` の子要素を 1 つずつ持つ `<xsl:choose>` 要素を使用します。

### 構文
```

<xsl:if test=EXPRESSION>
  TEMPLATE
</xsl:if>
```

### 必須属性

`test`

必要に応じて `boolean( )` に対して定義されたルールを使用して評価可能な XPath 式を含め、ブール値にします。値が true の場合、テンプレートは処理されます。そうでない場合は何もしません。

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSL section 9.1.

### Gecko のサポート

サポート済み


<xsl:otherwise> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:otherwise>
===============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:otherwise>` 要素は `<xsl:when>` 条件のいずれも適用されない場合に実行されるアクションを定義するために使用されます。他のプログラミング言語の `else` または `default` の場合と似ています。

### 構文
```

<xsl:otherwise>
  TEMPLATE
</xsl:otherwise>
```

### 必須属性

なし

### 任意属性

なし

### タイプ

サブ命令は `<xsl:choose>` 要素の最後の子としてテンプレート内に現れなければなりません。

### 定義

XSLT, section 9.2

### Gecko のサポート

サポート済み


<xsl:copy> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:copy>
==========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:copy>` 要素は、現在のノードの浅いコピー (ノードおよび関連する名前空間ノード) を出力ドキュメントに転送します。現在のノードの子または属性はコピーされません。

### 構文
```

<xsl:copy use-attribute-sets=LIST-OF-NAMES>
  TEMPLATE
</xsl:copy>
```

### 必須属性

なし

### 任意属性

`use-attribute-sets`

要素であれば、出力ノードに適用される属性セットをリストします。 セットの名前は空白文字で区切る必要があります。

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 7.5.

### Gecko のサポート

サポート済み


<xsl:value-of> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:value-of>
==============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:value-of>` 要素は XPath 式を評価し、それを文字列に変換し、その文字列を result tree に書きます。

### 構文
```

<xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  />
```

### 必須属性

`select`

評価され、出力ツリーに書き込まれる XPath 式を指定します。

### オプション属性

`disable-output-escaping` (Netscape は変換の結果 - 下の「出力」 - を直列化しませんので、この属性は本質的に文脈上は無関係です。html エンティティを出力するには、代わりに数値を使用します (例: `&nbsp`の `&#160`) )

出力に書き込まれたときに特殊文字をエスケープするかどうかを指定します。使用可能な値は "`yes`" または "`no`" です。たとえば "`yes`" が設定されている場合、文字>は `>` ではなく"`&gt`" として出力されます。

### タイプ

インストラクションはテンプレートとともに表示されます。

### 定義

XSLT, section 7.6.1.

### Gecko のサポート

上記以外はサポートされています。


<xsl:namespace-alias> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:namespace-alias>
=====================

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:namespace-alias>` 要素はスタイルシート内の名前空間を出力ツリー内の別の名前空間にマップする、めったに使用されないデバイスです。 この要素の最も一般的な使い方は、別のスタイルシートからスタイルシートを生成することです。通常は `xsl:`-prefixed リテラルの result 要素 (結果ツリーにそのままコピーする必要があります) がプロセッサによって誤解されるのを防ぐため、出力ツリーの XSLT 名前空間に適切に再変換される一時的な名前空間が割り当てられます。

### 構文
```

<xsl:namespace-alias stylesheet-prefix=NAME result-prefix=NAME />
```

### 必須属性

`stylesheet-prefix`

一時的な名前空間を指定します。

`result-prefix`

出力ツリーに必要な名前空間を指定します。

### 任意属性

なし

### タイプ

最上位は `<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 7.1.1

### Gecko のサポート

現時点ではサポートされていません。


<xsl:comment> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:comment>
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:comment>` 要素は出力文書にコメントを書き込みます。テキストのみを含める必要があります。

### 構文
```

<xsl:comment>
  TEMPLATE
</xsl:comment>
```

### 必須属性

なし

### 任意属性

なし

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 7.4.

### Gecko のサポート

サポート済み


<xsl:when> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:when>
==========

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:when>` 要素は `<xsl:choose>` 要素内に常に表示され、case 文のように動作します。

### 構文
```

<xsl:when test=EXPRESSION>
  TEMPLATE
</xsl:when>
```

### 必須属性

`test`

評価されるブール式を指定します。true の場合、要素の内容が処理されます。false の場合は無視されます。

### 任意属性

なし

### タイプ

サブ命令は、常に `<xsl:choose>` 要素内に現れます。

### 定義

XSLT, section 9.2.

### Gecko のサポート

サポート済み


<xsl:template> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:template>
==============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:template>` 要素は出力生成テンプレートを定義します。この要素は、match 属性または name 属性のいずれかを持つ必要があります。

### 構文
```

<xsl:template
  match=PATTERN
  name=NAME
  mode=NAME
  priority=NUMBER>
  <xsl:param> [optional]
  TEMPLATE
</xsl:template>
```

### 必須属性

なし

### 任意属性

`match`

このテンプレートを使用する要素を決定するパターンを指定します。これは `name` 属性がない場合に必須の属性です。

`name`

このテンプレートの名前を指定します。テンプレートの名前は `<xsl:call-template>` 要素を使用して呼び出すことができます。

`mode`

このテンプレートの特定のモードを指定します。このモードは `<xsl:apply-templates>` 要素の属性と一致させることができます。 これは複数の方法で同じ情報を処理する場合に便利です。

`priority`

このテンプレートの数値優先度を指定します。これは `Infinity` 以外の任意の数にすることができます。複数のテンプレートが同じノードに一致する場合、プロセッサはこの番号を使用します。

### タイプ

最上位は `<xsl:stylesheet>` または `<xsl:transform>` の子である必要があります。

### 定義

XSLT, section 5.3.

### Gecko のサポート

サポート済み


<xsl:attribute> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:attribute>
===============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:attribute>` 要素は、スタイルシートからアクセス可能な任意の値を使用して出力文書に属性を作成します。要素は属性値を設定する出力文書要素内の他の出力文書要素の前に定義する必要があります。しかし、( `<xsl:choose>` や `<xsl:apply-templates>` などのように) 出力の一部ではない要素の後または内部にある可能性があります。

### 構文
```

<xsl:attribute name=NAME namespace=URI>
  TEMPLATE
</xsl:attribute>
```

### 必須属性

`name`

出力文書に作成する属性の名前を指定します。名前は有効な QName でなければなりません。

### 任意属性

`namespace`

この属性の名前空間 URI を出力文書に定義します。関連する名前空間プレフィックスをこの要素で設定することはできません。

### タイプ

命令は、テンプレートまたは `<xsl:attribute-set>` 要素内に現れます。

### 定義

XSLT, section 7.1.3.

### Gecko のサポート

サポート済み


<xsl:message> - XSLT: 拡張可能なスタイルシートの言語変換

<xsl:message>
=============

**XSLT/XPath リファレンス**: XSLT 要素, EXSLT 関数, XPath 関数, XPath 軸

`<xsl:message>` 要素は (NS の JavaScript コンソールに) メッセージを出力し、オプションでスタイルシートの実行を終了します。これはデバッグに便利です。

### 構文
```

<xsl:message terminate="yes" | "no" >
  TEMPLATE
</xsl:message>
```

### 必須属性

なし

### 任意属性

`terminate`

"`yes`" に設定すると実行を終了する必要があります。デフォルト値は "`no`" です。この場合メッセージが出力され、実行が続行されます。

### タイプ

命令は、テンプレート内に表示されます。

### 定義

XSLT, section 13.

### Gecko のサポート

サポート済み


JavaScript 技術概説 - JavaScript

JavaScript 技術概説
===============

はじめに
----

HTML がウェブページの構造と内容を定義し、CSS が書式と外観を定義しているのに対し、JavaScript はインタラクティブ機能をウェブページに追加し、豊かなウェブアプリケーションを作成します。

しかしながら、ウェブブラウザーの文脈で解釈されるこの「JavaScript」という包括的用語は、まったく異なる複数の要素を含んでいます。その要素とは、中核となるプログラミング言語（ECMAScript）、もう一つは DOM（Document Object Model）を含んだ Web API 群です。

JavaScript: コア言語 (ECMAScript)
-----------------------------

JavaScript の中核となる言語は ECMAScript という名前の言語として ECMA TC39 委員会で標準化されています。

このコア言語はまた、node.js といったブラウザー以外の環境でも使用されています。

### ECMAScript の該当範囲

とりわけ、ECMAScript は以下のものを定義しています。

* 言語文法（構文解析のルール、キーワード、制御フロー、オブジェクトリテラルの初期化、…）
* エラー処理のメカニズム （`throw`、`try/catch`、ユーザー定義エラー型の作成機能）
* 型 （真偽値、数値、文字列、関数、オブジェクト、…）
* グローバルオブジェクト。ブラウザー環境では、このグローバルオブジェクトは `window` オブジェクトですが、ECMAScript ではブラウザーとは直接関係のない API のみが定義されています。例えば `parseInt`、`parseFloat`、`decodeURI`、`encodeURI`……
* プロトタイプベースの継承メカニズム。その対象は次のもの:
* ビルトインオブジェクトと関数（`JSON`、`Math`、`Array.prototype` メソッド、オブジェクト内部確認メソッド……）
* Strict モード (ここを見てください)
### ブラウザーサポート

2016 年 10 月以降、主要ウェブブラウザーの現在のバージョンは、ECMAScript 5.1 と ECMAScript 2015（ES6 としても知られる）を実装していますが、（まだ使用中の）古いバージョンは ECMAScript 5 のみが実装されています。

### 将来

ECMAScript の第 6 版は、ECMA 総会で 2015 年 6 月 17 日に正式に承認され、標準として公開されました。それ以来、ECMAScript の版は毎年発行されています。

### 国際化 API

ECMAScript 国際化 API 仕様は Ecma TC39 によって標準化された ECMAScript 言語仕様の増補仕様です。国際化 API は JavaScript アプリケーションのための照合機能（文字列比較）、数値フォーマット、日時フォーマットを提供し、アプリケーション上で言語を選択して必要に応じて各種機能を調整可能にします。標準仕様は 2012 年 12 月に承認されました。ブラウザーでの実装状況は `Intl` オブジェクト (en-US)のドキュメントにて随時更新されています。国際化標準は昨今、毎年承認されてブラウザーは常に実装を改良しています。

DOM API
-------

### WebIDL

WebIDL 仕様は DOM 技術と ECMAScript とを繋ぐ機能を提供します。

### DOM の中核

Document Object Model (DOM) は HTML、XHTML、XML ドキュメント内のオブジェクトを表し、その情報をやりとりするための、クラスプラットフォームな**言語に依存しない取り決め**です。**DOM ツリー**内のオブジェクトはそのオブジェクトのメソッドを使って処理、操作できます。W3C によって Document Object Model の中核部分が標準化されており、これにより HTML や XML ドキュメントをオブジェクトとして抽象化して言語に依存しないインターフェイスを定義し、その抽象化したものを取り扱うメカニズムも定義されます。DOM によって定義されているものには、次のものがあります :

* DOM core で定義されている、文書構造、ツリーモデルや DOM イベントアーキテクチャ。`Node`、`Element`、`DocumentFragment`、`Document`、`DOMImplementation`、`Event`、`EventTarget` など。
* DOM イベントアーキテクチャの大まかな定義に加え、DOM events で定義されるより具体的なイベント。
* その他、DOM Traversal や DOM Range など。

ECMAScript から見た場合に、DOM 仕様で定義されるオブジェクトのことを「ホストオブジェクト」と呼びます。

### HTML DOM

ウェブのマークアップ言語である HTML は、DOM に関しても規定しています。HTML は DOM Core 内で定義された抽象概念の上位レイヤーを形成し、更に要素の意味も定義しています。HTML DOM には HTML 要素の `className` プロパティ、あるいは `document.body` といった API などが含まれます。

HTML 仕様はドキュメント上の制約事項についても定義しています。例えば、「順序なしリストを意味する `ul` 要素のすべての子は、そのリストアイテムを意味する `li` 要素でなければならない」などです。一般に、標準で定義されていない要素や属性を使用することは禁止されています。

`Document` オブジェクトや、`Window` オブジェクトや、その他の DOM 要素についてお探しであれば、DOM ドキュメントをご覧ください。

その他の重要な API
-----------

* `setTimeout` や `setInterval` 関数は HTML 標準の `Window` インターフェイスによって最初に規定されていました。
* XMLHttpRequest は非同期の HTTP リクエストを送ることを可能にする API です。
* CSS オブジェクト モデル (CSSOM) は CSS のルールをオブジェクトとして抽象化したものです。
* WebWorkers は並列処理を可能にする API です。
* WebSockets は双方向通信を可能にする API です。
* Canvas 2D コンテキストは`<canvas>` 要素の描画 API です。
### ブラウザーサポートについて

どのウェブ開発者も「DOM は面倒である」ということに悩まされてきました。ブラウザーのサポートの統一性はその機能によって大きく異なります。この状況の主な理由は、DOM の重要な機能の多くが、仮にあったとしてもその仕様が非常に不明確であったという事実です。また様々なウェブブラウザーが、例えば Internet Explorer によるイベントモデルの使用実態と一致させようと、互換性の無い機能を追加してきました。2011 年 6 月以降、W3C と特に WHATWG が相互運用性を改善するために細部にわたって古い機能を定義しており、これらの仕様に基づいて、ブラウザーへの実装は日々改善されています。

ブラウザー間の互換性保持のための一般的な (おそらく最も信頼できるわけではない) アプローチのひとつとして、JavaScript のライブラリーの使用が挙げられます。これらのライブラリーは DOM の機能を抽象化し、異なるブラウザーでこれらの API が同じように動作するようにします。最も広く使われているフレームワークには、jQuery や prototype、YUI があります。


JavaScript リファレンス - JavaScript

JavaScript リファレンス
=================

JavaScript リファレンスは、 JavaScript 言語に関する事実の保管庫として機能します。言語全体がここで詳細に記述されています。 JavaScript のコードを書いていると、これらのページをよく参照することになります（だから「JavaScript リファレンス」という題名なのです）。

JavaScript 言語は、ブラウザーやサーバーサイドのスクリプトなど、何か大きな環境の中で使用されることを想定しています。ほとんどの場合、このリファレンスは環境に依存しないようにしており、ウェブブラウザー環境のみを対象としている訳ではありません。

もし JavaScript が初めてであれば、ガイドから始めてください。基本的なことをしっかりと把握したら、個々のオブジェクトや言語構成について、このリファレンスを使用して、より詳細な情報を取得することができます。

組み込みオブジェクト
----------

JavaScript の標準組み込みオブジェクトと、そのメソッドやプロパティです。

### 値プロパティ

* `globalThis`
* `Infinity`
* `NaN`
* `undefined`
### 関数プロパティ

* `eval()`
* `isFinite()`
* `isNaN()`
* `parseFloat()`
* `parseInt()`
* `decodeURI()`
* `decodeURIComponent()`
* `encodeURI()`
* `encodeURIComponent()`
* `escape()`
非推奨
* `unescape()`
非推奨
### 基本オブジェクト

* `Object`
* `Function`
* `Boolean`
* `Symbol`
### エラーオブジェクト

* `Error`
* `AggregateError`
* `EvalError`
* `RangeError`
* `ReferenceError`
* `SyntaxError`
* `TypeError`
* `URIError`
* `InternalError`
Non-standard
### 数値と日付

* `Number`
* `BigInt`
* `Math`
* `Date`
### テキスト処理

* `String`
* `RegExp`
### 添字付きコレクション

* `Array`
* `Int8Array`
* `Uint8Array`
* `Uint8ClampedArray`
* `Int16Array`
* `Uint16Array`
* `Int32Array`
* `Uint32Array`
* `BigInt64Array`
* `BigUint64Array`
* `Float32Array`
* `Float64Array`
### キー付きコレクション

* `Map`
* `Set`
* `WeakMap`
* `WeakSet`
### 構造化データ

* `ArrayBuffer`
* `SharedArrayBuffer`
* `DataView`
* `Atomics`
* `JSON`
### メモリー管理

* `WeakRef`
* `FinalizationRegistry`
### 制御の抽象化

* `Iterator`
* `AsyncIterator`
* `Promise`
* `GeneratorFunction`
* `AsyncGeneratorFunction`
* `Generator`
* `AsyncGenerator`
* `AsyncFunction`
### リフレクション

* `Reflect`
* `Proxy`
### 国際化

* `Intl`
* `Intl.Collator`
* `Intl.DateTimeFormat`
* `Intl.DisplayNames`
* `Intl.DurationFormat` (en-US)
* `Intl.ListFormat`
* `Intl.Locale`
* `Intl.NumberFormat`
* `Intl.PluralRules`
* `Intl.RelativeTimeFormat`
* `Intl.Segmenter`
文
-

JavaScript の文と宣言

### 制御フロー

* `return`
* `break`
* `continue`
* `throw`
* `if...else`
* `switch`
* `try...catch`
### 宣言

* `var`
* `let`
* `const`
### 関数とクラス

* `function`
* `function*`
* `async function`
* `async function*`
* `class`
### 反復処理

* `do...while`
* `for`
* `for...in`
* `for...of`
* `for await...of`
* `while`
### その他

* 空文
* ブロック
* 式文
* `debugger`
* `export`
* `import`
* ラベル
* `with`
非推奨
式と演算子
-----

JavaScript の式と演算子

### 主要な式

* `this`
* リテラル
* `[]`
* `{}`
* `function`
* `class`
* `function*`
* `async function`
* `async function*`
* `/ab+c/i`
* ``string``
* `( )`
### 左辺式

* プロパティアクセサー
* `?.`
* `new`
* `new.target`
* `import.meta`
* `super`
* `import()`
### インクリメントとデクリメント

* `A++`
* `A--`
* `++A`
* `--A`
### 単項演算子

* `delete`
* `void`
* `typeof`
* `+`
* `-`
* `~`
* `!`
* `await`
### 算術演算子

* `**`
* `*`
* `/`
* `%`
* `+` (プラス)
* `-`
### 関係演算子

* `<` (小なり)
* `>` (大なり)
* `<=`
* `>=`
* `instanceof`
* `in`
### 等価演算子

* `==`
* `!=`
* `===`
* `!==`
### ビットシフト演算子

* `<<`
* `>>`
* `>>>`
### バイナリービット演算子

* `&`
* `|`
* `^`
### バイナリー論理演算子

* `&&`
* `||`
* `??`
### 条件 (三項) 演算子

* `(condition ? ifTrue : ifFalse)`
### 代入演算子

* `=`
* `*=`
* `/=`
* `%=`
* `+=`
* `-=`
* `<<=`
* `>>=`
* `>>>=`
* `&=`
* `^=`
* `|=`
* `**=`
* `&&=`
* `||=`
* `??=`
* `[a, b] = arr`, `{ a, b } = obj`
### yield 演算子

* `yield`
* `yield*`
### スプレッド構文

* `...obj`
### カンマ演算子

* `,`
関数
--

JavaScript の関数

* アロー関数
* デフォルト引数
* 残余引数
* `arguments`
* メソッド定義
* ゲッター
* セッター
クラス
---

JavaScript のクラス

* `constructor`
* `extends`
* プライベートクラス機能
* パブリッククラスフィールド
* `static`
* 静的初期化ブロック
追加のリファレンスページ
------------

* 字句文法
* データ型とデータ構造
* 反復処理プロトコル
* 末尾のカンマ
* エラー
* 厳格モード
* 非推奨の機能


JavaScript 言語概要 - JavaScript

JavaScript 言語概要
===============

JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が JavaScript にも同様に適用できます。 JavaScript は、オブジェクトプロトタイプやクラスによるオブジェクト指向プログラミングに対応しています。また、JavaScript は関数型プログラミングもサポートします。関数が第一級オブジェクトであり、式から容易に作成し、他のオブジェクトと同じように受け渡しすることができます。

このページは、 JavaScript のさまざまな言語機能の概要で、 C や Java など、他の言語のバックグラウンドがある読者のために書かれたものです。

データ型
----

まずはあらゆる言語の構成要素、「型」を見ることから始めましょう。 JavaScript のプログラムは値を操作し、それらの値はすべて型に属しています。JavaScript の型は次の通りです。

* 数値型: 非常に大きな整数を除くすべての数値（整数、浮動小数点数）で使用します。
* 長整数型: 任意の長さの大きな整数に使用します。
* 文字列型: テキストを格納するために使用されます。
* 論理型: `true`と `false` - 通常は条件の論理に使用します。
* シンボル型: 衝突しない固有の識別子を作成するために使用します。
* Undefined: 変数に値が割り当てられていないことを示します。
* Null: 意図的に値がないことを示します。

他のすべてのものはオブジェクト型と呼ばれます。主なオブジェクト型には次のものがあります。

* `Function`
* `Array`
* `Date`
* `RegExp`
* `Error`

JavaScript では、関数は特別なデータ構造ではありません。呼び出すことができるオブジェクトの特別な型にすぎません。

### 数値

JavaScript には 2 つの組み込み数値型があります。 **数値型** (Number) と **長整数型** (BigInt) です。

数値型はIEEE 754 倍精度 64 ビットバイナリー値です。これは整数の場合は-(253 − 1) と 253 − 1 の間の数ならば精度が落ちることがなく、浮動小数点数は 1.79 × 10308 まで格納できます。 JavaScript では、数値型の中で浮動小数点数と整数を区別しません。

```js
console.log(3 / 2); // 1.5, 1 ではない
```

つまり、整数のように見えるものは、実は暗黙のうちに浮動小数点です。 IEEE 754 のエンコード方式では、浮動小数点数で演算が不正確になることがあります。

```js
console.log(0.1 + 0.2); // 0.30000000000000004
```

ビット演算など整数を想定した処理を行う場合、数値は 32 ビット整数に変換されます。

数値リテラルには、基数（2 進数、8 進数、10 進数、16 進数）を示す接頭辞や、指数接尾辞もあります。

```js
console.log(0b111110111); // 503
console.log(0o767); // 503
console.log(0x1f7); // 503
console.log(5.03e2); // 503
```

長整数型は任意の長さの整数です。その動作は C の整数型に似ていますが （例えば除算は 0 で切り捨てられます）、無限に大きくなることができます。長整数型は数値リテラルと接尾辞 `n` で指定します。

```js
console.log(-3n / 2n); // -1n
```

標準の算術演算子は、加算、減算、剰余演算などを含めて対応しています。長整数型と数値型を混合して演算処理を行うことはできません。

`Math` オブジェクトは、標準数学関数と定数を提供します。

```js
Math.sin(3.5);
const circumference = 2 \* Math.PI \* r;
```

文字列を数値に変換する方法は 3 つあります。

* `parseInt()` は、文字列を整数として解釈します。
* `parseFloat()` は、文字列を浮動小数点数として解釈します。
* `Number()` 関数は、 文字列を数値リテラルであるかのように解釈でき、さまざまな数値表現に対応しています。

また、単項 `+` を `Number()` の短縮形として使用することもできます。

数値の値には、 `NaN` （"Not a Number" の略）と `Infinity` も含みます。例えば、数値以外の文字列を解釈しようとした場合や、負の値に対して `Math.log()` を使用した場合など、多くの「不正な演算」は `NaN` を返します。ゼロによる除算は `Infinity` （正の値または負の値）を返します。

`NaN` は伝染します。どんな数学処理にもオペランドとして提供すると、結果も `NaN` になります。 `NaN` は JavaScript で唯一それ自身と等しくない値です（IEEE 754 仕様による）。

### 文字列

JavaScript での文字列は Unicode 文字の列です。これは国際化に携わったことのある人にとっては歓迎すべきニュースでしょう。より正確な言い方をすれば、文字列は UTF-16 エンコード方式です。

```js
console.log("Hello, world");
console.log("你好，世界！"); // ほぼすべての Unicode 文字は文字列リテラルで書くことができます。
```

文字列は一重引用符でも二重引用符でも書くことができます。 JavaScript には文字と文字列の区別はありません。単一の文字を表したい場合は、その単一の文字からなる文字列を使用するだけです。

```js
console.log("Hello"[1] === "e"); // true
```

文字列の長さ（コード単位）を調べるには、その`length`プロパティにアクセスします。

文字列には、文字列を操作したり、文字列に関する情報にアクセスしたりするための ユーティリティメソッドがあります。設計上、すべてのプリミティブは不変なので、これらのメソッドは新しい文字列を返します。

演算子 `+` は文字列に対してオーバーロードされています。演算子の 1 つが文字列の場合、数値の加算の代わりに文字列の連結を行います。特別なテンプレートリテラル構文により、式を埋め込んだ文字列をより簡潔に書くことができます。 Python の f-strings や C# の補完文字列とは異なり、テンプレートリテラルは（単一引用符や二重引用符ではなく）逆引用符を使用します。

```js
const age = 25;
console.log("私は " + age + " 歳です。"); // 文字列へ変換
console.log(`私は ${age} 歳です。`); // テンプレートリテラル
```

### その他の型

JavaScript では、意図的に値がないことを示す `null`（`null` のキーワードでのみアクセスできます）と、値がないことを示す `undefined` を区別します。 `undefined` を取得する方法はたくさんあります。

* `return` 文に値がない場合 (`return;`) は、暗黙に `undefined` を返します。
* 存在しないオブジェクトのプロパティへアクセスすると (`obj.iDontExist`)、 `undefined` を返します。
* 初期化を伴わない変数宣言 (`let x;`) は、暗黙のうちにその変数を `undefined` に初期化します。

JavaScript には `true` と `false` （これらはともにキーワードです）を取りうる値とする論理型があります。どんな値でも以下の規則に基づいて論理値に変換できます。

1. `false`、`0`、空文字列 (`""`)、`NaN`、`null`、`undefined` は、すべて `false` になる。
2. その他の値はすべて `true` になる。

`Boolean()` 関数を使うことで、明示的にこの変換を行うことができます。

```js
Boolean(""); // false
Boolean(234); // true
```

しかし、これはほとんど必要ありません。 JavaScript は、 `if` 文の中など（制御構造を参照）のように論理値が期待される場面では、暗黙にこの変換を行うからです。このため、ときどき "真値 (truthy)" および "偽値 (falsy)" と言うことがありますが、これは論理値に変換されるときにそれぞれ `true` または `false` になる値という意味です。

`&&` (論理 *AND*) や `||` (論理 *OR*)、`!` (論理 *NOT*) などの論理演算がサポートされています。演算子を参照してください。

シンボル (Symbol) 型は固有の識別子を作成するために多く使用されます。 `Symbol()` 関数で作成するシンボルは固有のものであることが保証されています。さらに、共有定数である登録シンボルや、特定の演算を実行するための「プロトコル」として言語が利用する公知のシンボルがあります。シンボルリファレンスで詳しく説明されています。

変数
--

JavaScript では、新しい変数を宣言するのに `let`、`const`、`var` の 3 つのキーワードのいずれかを使用します。

`let` は、ブロックレベルの変数を宣言できます。宣言した変数は、変数を包含する*ブロック*から使用できます。

```js
let a;
let name = "Simon";

// ここでは myLetVariable が \*見えません\*

for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
  // ここでだけ myLetVariable が見えます
}

// ここでは myLetVariable が \*見えません\*
```

`const` は、値を変更することを意図しない変数を宣言することができます。宣言した変数は、変数を宣言した*ブロック*から使用できます。

```js
const Pi = 3.14; // 変数 Pi を設定
console.log(Pi); // 3.14
```

`const` で宣言された変数は再代入できません。

```js
const Pi = 3.14;
Pi = 1; // エラーが発生します。定数変数は変更できないからです。
```

オブジェクトの場合、 `const` 宣言は変数の値の *再代入* を防ぐだけで、変数の値の *変更* を防ぐことはできません。

```js
const obj = {};
obj.a = 1; // エラーなし
console.log(obj); // { a: 1 }
```

`var` 宣言は意外な挙動をすることがあり （例えばブロックのスコープにならない）、現代の JavaScript コードでは推奨されません。

値を割り当てずに変数を宣言した場合、その値は `undefined` となります。初期化子なしで `const` 変数を宣言することはできません。

`let` と `const` で宣言された変数は、定義したスコープ全体で存在しますが、実際の宣言行の前には一時的なデッドゾーンと呼ばれる領域で存在します。これは他の言語には見られない、変数の影ともいえる興味深い作用が発生します。

```js
function foo(x, condition) {
  if (condition) {
    console.log(x);
    const x = 2;
    console.log(x);
  }
}

foo(1, true);
```

他のほとんどの言語では、`const x = 2` の行の前では `x` はまだ上位スコープの引数 `x` を参照しているはずなので、これは "1" と "2" をログ出力することになります。 JavaScript では、それぞれの宣言がスコープ全体を占めるため、最初の `console.log` で "Cannot access 'x' before initialization" というエラーが発生します。詳しくは、`let`のリファレンスページを参照してください。

JavaScript は動的型付けを行います。（前の節で記述されているように）型は値にのみ関連付けられますが、変数には関連付けられません。 `let` 宣言された変数については、常に再代入によって型を変更することができます。

```js
let a = 1;
a = "foo";
```

演算子
---

JavaScript の算術演算子は、`+`、`-`、`*`、`/`、そして剰余演算子の `%` (モジュロと同じです) です。値は `=` を使って代入されます。また `+=` や `-=` のような複合代入文もあります。これらは `x = x 演算子 y` と展開できるものです。

```js
x += 5;
x = x + 5;
```

`++` や `--` を使ってインクリメントやデクリメントできます。これらは前置あるいは後置演算子として使うことができます。

`+` 演算子は文字列の結合も行います。

```js
"hello" + " world"; // "hello world"
```

文字列を数字（や他の値）に足すと、すべてのものが最初に文字列に変換されます。このことはミスを誘うかもしれません。

```js
"3" + 4 + 5; // "345"
3 + 4 + "5"; // "75"
```

空文字列を足すのは、何かを文字列に変換する便利な方法です。

JavaScript における 比較 は、`<` や `>`、`<=`、`>=` を使って行うことができます。これらは文字列と数値のどちらでも機能します。等価の場合、二重等号演算子は異なる型を与えると型の変換が行われ、時には興味深い結果をもたらします。一方、三重等号演算子は型の強制を行わないので、通常はこちらを推奨します。

```js
123 == "123"; // true
1 == true; // true

123 === "123"; // false
1 === true; // false
```

二重等号と三重等号には、不等号にも対応する `!=` と `!==` があります。

JavaScript にはビット演算子や論理演算子もあります。特に、論理演算子は論理値だけで動作するわけではありません。値の「真偽度」によって動作します。

```js
const a = 0 && "Hello"; // 0 は偽値なので 0
const b = "Hello" || "world"; // "Hello" と "world" は共に真値なので "Hello"
```

演算子 `&&` と `||` は短絡評価を使用します。つまり、 2 つ目の演算子を実行するかどうかは最初の演算子に依存します。これは、オブジェクトの属性にアクセスする前に null かどうかを調べるのに有益です。

```js
const name = o && o.getName();
```

また、値のキャッシュにも使えます（偽値の値が無効である場合）。

```js
const name = cachedName || (cachedName = getName());
```

演算子の包括的なリストについては、ガイドページまたはリファレンスの章を参照してください。特に演算子の優先順位に関心があるかもしれません。

文法
--

JavaScript の文法は C 言語にとてもよく似ています。特筆すべき点がいくつかあります。

* 識別子には Unicode 文字を入れることができますが、予約語のいずれかにすることはできません。
* コメントは共通の `//` または `/* */` ですが、他の多くのスクリプト言語、例えば Perl, Python, Bash は `#` です。
* JavaScript でセミコロンは省略可能で、必要なときに自動的に挿入されます。しかし、 Python とは異なり、セミコロンは構文の一部であるため、注意すべき点があります。

JavaScriptの文法について詳しく見ていくには、字句文法のリファレンスページを参照してください。

制御構造
----

JavaScript は C 言語ファミリーの他の言語とよく似た制御構造セットを持っています。条件文は `if` と `else` で対応しています。必要ならこれらを連鎖させることもできます。

```js
let name = "kittens";
if (name === "puppies") {
  name += " woof";
} else if (name === "kittens") {
  name += " meow";
} else {
  name += "!";
}
name === "kittens meow";
```

JavaScript には `elif` がなく、 `else if` は実際には単一の `if` 文からなる `else` 分岐にすぎません。

JavaScript には `while` ループと `do...while` ループがあります。前者は普通のループ処理に適しており、後者はループの本体が少なくとも 1 回は実行されるようにしたいときのループです。

```js
while (true) {
  // 無限ループ!
}

let input;
do {
  input = get\_input();
} while (inputIsNotValid(input));
```

JavaScript の `for` ループは C や Java のそれと同じです。これはループの制御情報を 1 行で与えることができます。

```js
for (let i = 0; i < 5; i++) {
  // 5 回実行されます
}
```

JavaScript にはこの他に、特徴的な for ループが 2 つあります。 `for...of` は反復可能オブジェクトや多くの特徴的な配列を反復処理し、 `for...in` はオブジェクトのすべての列挙可能プロパティを反復処理します。

```js
for (const value of array) {
  // 値に関する処理
}

for (const property in object) {
  // オブジェクトのプロパティに関する処理
}
```

`switch` 文はある数値や文字列を元にした複数分岐に使われます。

```js
switch (action) {
  case "draw":
    drawIt();
    break;
  case "eat":
    eatIt();
    break;
  default:
    doNothing();
}
```

C 言語と同様、 case 句は概念的にはラベル付けと同じなので、 `break` 文を追加しなければ、実行は次のレベルに「落下」します。しかし、実際にはジャンプ表ではありません。文字列や数値リテラルだけでなく、どのような式でも `case` 句には属せず、照合する値と等しくなるまで 1 つずつ評価されます。比較は `===` 演算子を用いて行われます。

Rust など一部の言語とは異なり、制御構造は JavaScript では文ですので、 `const a = if (x) { 1 } else { 2 }` のように変数に代入することはできません。

JavaScript のエラーは `try...catch` 文を使用して処理します。

```js
try {
  buildMySite("./website");
} catch (e) {
  console.error("サイトの構築に失敗しました:", e);
}
```

エラーは `throw` 文を使用して発生させる（投げる）ことができます。多くの組み込み処理も、同様にしてエラーを発生させる可能性があります。

```js
function buildMySite(siteDirectory) {
  if (!pathExists(siteDirectory)) {
    throw new Error("サイトのディレクトリーが存在しません");
  }
}
```

一般に、 `throw` 文からは何でもエラーとして投げることができるため、捕捉するエラーの型を指示することはできません。しかし、例えば上の例のように、通常は `Error` のインスタンスであると想定することができます。 `Error` には `TypeError` や `RangeError` のような組み込みのサブクラスがいくつかあり、エラーに関する特別な意味づけを提供するために使用することができます。 JavaScript では条件付きの catch はありません。 1 つの種類のエラーだけを処理したい場合は、すべてを catch し、 `instanceof` を使用してエラーの型を特定し、他の用途のものは throw しなおす必要があります。

```js
try {
  buildMySite("./website");
} catch (e) {
  if (e instanceof RangeError) {
    console.error("引数が範囲を超えているようです:", e);
    console.log("再試行中...");
    buildMySite("./website");
  } else {
    // 他の種類のエラーをどのように処理すればよいのかわからない場合、呼び出す
    // スタックの上位にある何かで捕捉して処理できるように throw します。
    throw e;
  }
}
```

エラーがコールスタック内の `try...catch` で捕捉されなかった場合、プログラムは終了します。

制御フロー文の包括的なリストは、リファレンスの該当部分を参照してください。

オブジェクト
------

JavaScript のオブジェクトは、名前と値のペアの単純な集合であると考えることができます。これは以下のものに似ています。

* Python の辞書型
* Perl や Ruby のハッシュ
* C や C++ のハッシュテーブル
* Java の HashMap クラス
* PHP の連想配列

JavaScript でオブジェクトはハッシュです。静的型付け言語のオブジェクトとは異なり、 JavaScript でオブジェクトは固定された形状を持ちません - プロパティはいつでも追加したり、削除したり、並べ替えたり、変更したり、動的に問い合わせたりすることができます。オブジェクトのキーは常に文字列またはシンボル。配列の添字でさえ、正規的には整数ですが、その基盤は文字列です。

空のオブジェクトを生成する 2 つの基本的な方法があります。

```js
const obj = {
  name: "Carrot",
  for: "Max",
  details: {
    color: "orange",
    size: 12,
  },
};
```

オブジェクのプロパティにアクセスするには、ドット (`.`) または角括弧 (`[]`) を使用することができます。ドット記法を使用する場合、キーは有効な識別子でなければなりません。一方、角括弧を使用すると、動的なキー値でオブジェクトのインデックスを指定することができます。

```js
// ドット記法
obj.name = "Simon";
const name = obj.name;

// ブラケット記法
obj["name"] = "Simon";
const name = obj["name"];

// 変数をキー定義に使用できる
const userName = prompt("キーは何ですか？");
obj[userName] = prompt("値は何ですか？");
```

プロパティのアクセスは連鎖させることができます。

```js
obj.details.color; // orange
obj["details"]["size"]; // 12
```

オブジェクトは常に参照なので、何かが明示的にオブジェクトをコピーしない限り、オブジェクトへの変更は外部から見えることになります。

```js
const obj = {};
function doSomething(o) {
  o.x = 1;
}
doSomething(obj);
console.log(obj.x); // 1
```

これはまた、別個に作成された2つのオブジェクトは異なる参照であるため、決して等しくならない (`!==`) と いう意味も含んでいます。同じオブジェクトの参照を2つ持っている場合、片方を変更するともう一方のオブジェクトから観察することができます。

```js
const me = {};
const stillMe = me;
me.x = 1;
console.log(stillMe.x); // 1
```

オブジェクトとプロトタイプの詳細については、 `Object` のリファレンスページを参照してください。オブジェクト初期化構文の詳細については、リファレンスページを参照してください。

このページでは、オブジェクトのプロトタイプと継承についての詳細はすべて省略しました。というのも、通常は（難解に聞こえるかもしれない）基盤のメカニズムに触れることなく、クラスで継承を実現できるからです。これらについては、継承とプロトタイプチェーンを参照してください。

配列
--

JavaScript における配列は、実はオブジェクトの特殊型です。普通のオブジェクトとほとんど同じように働きます（数値のプロパティは当然 `[]` の構文でのみアクセスできます）が、しかし配列は `length` という魔法のプロパティを持っています。これは常に配列の一番大きなインデックスより 1 だけ大きい値を取ります。

配列を生成する方法のひとつは以下の通りです。

```js
const a = ["dog", "cat", "hen"];
a.length; // 3
```

JavaScript の配列はオブジェクトでもあり、任意の数値を含めたあらゆるプロパティを配列に割り当てることができます。唯一の「魔法」は、特定のインデックスを設定すると、 `length` が自動的に更新されることです。

```js
const a = ["dog", "cat", "hen"];
a[100] = "fox";
console.log(a.length); // 101
console.log(a); // ['dog', 'cat', 'hen', 空 × 97, 'fox']
```

上記で得られた配列は、途中に空きスロットがあるため疎配列と呼ばれ、エンジンは配列としての最適化を行わなくなりハッシュ表になります。配列が密に配置されていることを確認してください。

範囲外のインデックスを使用しても例外は発生しません。配列の存在しないインデックスを求めようとすると、 `undefined` の値が返ります。

```js
const a = ["dog", "cat", "hen"];
console.log(typeof a[90]); // undefined
```

配列は任意の要素を持つことができ、任意に増減することができます。

```js
const arr = [1, "foo", true];
arr.push({});
// arr = [1, "foo", true, {}]
```

配列は他の C 言語風の言語と同じように、 `for` ループで反復処理することができます。

```js
for (let i = 0; i < a.length; i++) {
  // a[i] について何かする
}
```

あるいは、配列は反復処理可能なので、 C++/Java の `for (int x : arr)` 構文と同義の `for...of` ループを使用することもできます。

```js
for (const currentValue of a) {
  // currentValue (現在の値) で何かをする
}
```

配列には、たくさんの配列メソッドがあります。例えば `map()` はすべての配列要素にコールバックを適用し、新しい配列を返します。

```js
const babies = ["dog", "cat", "hen"].map((name) => `baby ${name}`);
// babies = ['baby dog', 'baby cat', 'baby hen']
```

関数
--

関数は、オブジェクトとともに JavaScript を理解するうえで核となる構成要素です。基本的な関数は極めてシンプルです。

```js
function add(x, y) {
  const total = x + y;
  return total;
}
```

これは基本的な関数を例示しています。JavaScript の関数は 0 以上の名前のついた引数を取ることができます。関数の本体は好きなだけたくさんの文を含ませることができ、またその関数内で局所的な変数を宣言することができます。 `return` 文は好きなときに関数を終了し値を返すために使うことができます。もし return 文が使われなかったら（あるいは値を持たない空の return が使われたら）、JavaScript は `undefined` を返します。

関数は、その関数を指定する引数の数より多くても少なくても呼び出すことができます。関数が期待している引数を渡さずに呼び出すと、その引数は `undefined` に設定されます。もし期待する以上の引数を渡すと、関数は余分な引数を無視します。

```js
add(); // NaN
// Equivalent to add(undefined, undefined)

add(2, 3, 4); // 5
// 第 1、第 2 引数を加算。4 は無視される
```

他にも利用できる引数の構文があります。例えば、残余引数構文は、 Python の `*args` と同じように、呼び出し側から渡された余分な引数をすべて配列に集合させることができます。（JS は言語レベルで名前付き引数を持っていないので、 `**kwargs` はありません。）

```js
function avg(...args) {
  let sum = 0;
  for (const item of args) {
    sum += item;
  }
  return sum / args.length;
}

avg(2, 3, 4, 5); // 3.5
```

上のコードでは、変数 `args` に関数に渡された値をすべて格納しています。

残余引数は、宣言された引数以降をすべて格納しますが、宣言される前の引数は格納しません。言い換えれば、 `function avg(firstValue, ...args)` は関数に渡された最初の値を `firstValue` 変数に格納し、残りの引数を `args` に格納します。

関数が引数のリストを受け入れ、それらがすでに配列にある場合、関数呼び出しの中でスプレッド構文を使って、配列を要素のリストとして展開することができます。例えば `avg(...numbers)` のようにします。

JavaScript には名前付き引数がないと述べました。しかし、オブジェクトを便利にパックしたり展開したりできるオブジェクト分割代入を使用して実装することは可能です。

```js
// { } 中括弧はオブジェクト野分割代入する
function area({ width, height }) {
  return width \* height;
}

// { } 中括弧はここでは新しいオブジェクトを作成する
console.log(area({ width: 2, height: 3 }));
```

また、デフォルト引数構文もあります。これは、省略した引数（または値がdefinedとして渡された引数）に既定値を持たせるものです。

```js
function avg(firstValue, secondValue, thirdValue = 0) {
  return (firstValue + secondValue + thirdValue) / 3;
}

avg(1, 2); // 1, instead of NaN
```

### 無名関数

JavaScript では無名関数、つまり名前のない関数を作成することができます。実際には、無名関数は他の関数の引数として使用されたり、関数を呼び出すために使用できる変数に代入されたり、他の関数から返されたりします。

```js
// 括弧の前に関数名がないことに注意
const avg = function (...args) {
  let sum = 0;
  for (const item of args) {
    sum += item;
  }
  return sum / args.length;
};
```

これにより、引数を指定して `avg()` を呼び出すことで、無名関数を呼び出すことができるようになります。つまり、意味づけとしては `function avg() {}` という宣言構文を使用して関数を宣言することと同じになります。

無名関数を定義する方法は、他にもアロー関数式を使用する方法があります。

```js
// 括弧の前に関数名がないことに注意
const avg = (...args) => {
  let sum = 0;
  for (const item of args) {
    sum += item;
  }
  return sum / args.length;
};

// 単に式を返す場合は `return` を省略できる
const sum = (a, b, c) => a + b + c;
```

アロー関数は意味的に関数式と等価ではありません。詳しくは、そのリファレンスページを参照してください。

関数式が役に立つ他の場面もあります。単一の式で関数の宣言と起動を同時に行う仕組みがあります。これは IIFE (Immediately invoked function expression) と呼ばれます。

```js
(function () {
  // …
})();
```

IIFE の用途については、クロージャでプライベートメソッドを模倣するで見ることができます。

### 再帰関数

JavaScript では関数を再帰的に呼び出すことができます。これは特にブラウザーの DOM などにみられる木構造を取り扱うときに便利でしょう。

```js
function countChars(elm) {
  if (elm.nodeType === 3) {
    // TEXT\_NODE
    return elm.nodeValue.length;
  }
  let count = 0;
  for (let i = 0, child; (child = elm.childNodes[i]); i++) {
    count += countChars(child);
  }
  return count;
}
```

関数式には名前を付けることができるので、同様に再帰にすることができます。

```js
const charsInBody = (function counter(elm) {
  if (elm.nodeType === 3) {
    // TEXT\_NODE
    return elm.nodeValue.length;
  }
  let count = 0;
  for (let i = 0, child; (child = elm.childNodes[i]); i++) {
    count += counter(child);
  }
  return count;
})(document.body);
```

上記のように関数式に与えられた名前は、関数自身のスコープ内でのみ有効です。これはエンジンによる高度な最適化を実現して、結果的に可読性が高いコードになります。この名前はデバッガーやスタックトレースにも表示されますので、デバッグにかかる時間を節約できます。

関数型プログラミングを使用している場合、 JavaScript での再帰のパフォーマンスへの影響に注意してください。言語仕様では末尾呼出し最適化を指定していますが、スタックトレースの復元やデバッガビリティが難しいため、JavaScriptCore（Safariで使用されています）のみ実装しています。深い再帰では、スタックオーバーフローを避けるために代わりに反復処理を用いることを検討してください。

### 関数は第一級オブジェクト

JavaScript の関数は第一級のオブジェクトです。これは、関数が変数に割り当てることができ、他の関数に引数として渡すことができ、他の関数から返すことができることを意味しています。さらに JavaScript では、明示的にキャプチャすることなくすぐにクロージャに対応しているため、関数型プログラミングのスタイルを便利に適用することができます。

```js
// 関数を返す関数
const add = (x) => (y) => x + y;
// 関数を受け入れる関数
const babies = ["dog", "cat", "hen"].map((name) => `baby ${name}`);
```

JavaScript の関数はそれ自体がオブジェクトであり、 JavaScript で他のものと同様に、オブジェクトの節で見てきたような、プロパティの追加や変更ができることに注意してください。

### 内部関数

JavaScript での関数宣言は他の関数内でも行うことができます。 JavaScript で関数を入れ子にすることの重要なことは、内部関数内で親関数スコープの変数にアクセスできることです。

```js
function parentFunc() {
  const a = 1;

  function nestedFunc() {
    const b = 4; // parentFunc はこれを使用できない
    return a + b;
  }
  return nestedFunc(); // 5
}
```

内部関数は保守しやすいコードを書くときに多大な利便性をもたらします。ある関数が他の部分のコードでは役立たない関数を 1 つか 2 つ使っているなら、これらのユーティリティ関数を他から呼び出される関数の入れ子にすることができます。内部関数はグローバルスコープでなくなるので、いいことです。

内部関数はグローバル変数を使うという誘惑に対する対抗措置です。複雑なコードを書くとき、複数の関数間で値を共有するためにグローバル変数を使いたくなります。しかし、これでは保守がしづらくなります。内部関数は親関数の変数を共有できるので、グローバルな名前空間を消費せずに複数の関数をまとめることができます。

クラス
---

JavaScript には class 構文があり、これは Java などの言語にとてもよく似ています。

```js
class Person {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    return `Hello, I'm ${this.name}!`;
  }
}

const p = new Person("Maria");
console.log(p.sayHello());
```

JavaScript のクラスは単なる関数であり、 `new` 演算子でインスタンス化する必要があります。クラスはインスタンス化されるたびに、そのクラスが指定したメソッドやプロパティを格納したオブジェクトを返します。クラスはコードの整理を強制しません。例えば、クラスを返す関数を持つこともできますし、ファイルごとに複数のクラスを持つこともできます。例えば、クラスの生成はアロー関数から発生した式に過ぎません。このパターンはミックスインと呼ばれます。

```js
const withAuthentication = (cls) =>
  class extends cls {
    authenticate() {
      // …
    }
  };

class Admin extends withAuthentication(Person) {
  // …
}
```

静的プロパティは先頭に `static` を付けて作成します。プライベートプロパティは先頭にハッシュ `#` を付けて作成します（`private` ではありません）。ハッシュはプロパティ名の一部です。（`#` は Python の `_` と考えてください。）他の多くの言語とは異なり、派生クラスであっても、クラス本体の外でプライベートプロパティを読み取る方法はありません。

様々なクラス機能の詳細なガイドについては、ガイドページを参照してください。

非同期プログラミング
----------

JavaScript は本質的に単一スレッドです。並列処理はなく、並行処理のみです。非同期プログラミングはイベントループによって行われ、設定するにはタスクの集合をキューに入れ、完了をポーリングします。

JavaScript で非同期コードを書く慣用的な方法は 3 つあります。

* コールバックベース（`setTimeout()` など）
* プロミス (`Promise`) ベース
* プロミスの糖衣構文である `async`/`await`

例えば、 JavaScript でファイル読み込み処理をすると次のようになります：

```js
// コールバックベース
fs.readFile(filename, (err, content) => {
  // このコールバックは、ファイルが読み込まれたときに呼び出される
  if (err) {
    throw err;
  }
  console.log(content);
});
// このコードは、ファイルが読み込まれるのを待っている間に実行される

// プロミスベース
fs.readFile(filename)
  .then((content) => {
    // ファイルが読み取られたときに実行されること
    console.log(content);
  })
  .catch((err) => {
    throw err;
  });
// このコードは、ファイルが読み込まれるのを待っている間に実行される

// Async/await
async function readFile(filename) {
  const content = await fs.readFile(filename);
  console.log(content);
}
```

コア言語では非同期プログラミング機能を特に指定していませんが、外部環境と対話する際には非常に重要です。ユーザーの許可を依頼したり、データを取得したり、ファイルを読み取ったりするときなどです。長時間実行される可能性のある処理を非同期にしておくことで、この処理が待機している間も他の処理を実行できることを保証します。例えば、ユーザーが許可を与えるボタンをクリックするのを待っている間にブラウザーがフリーズしないようにします。

非同期の値がある場合、その値を同期的に取得することはできません。例えば、プロミスがある場合、最終的な結果にアクセスするには `then()` メソッドを使用するしかありません。同様に、 `await` は非同期コンテキスト（通常は非同期関数やモジュール）でしか使用できません。プロミスは決してブロッキングされません。プロミスの結果に依存するロジックだけが遅延され、他のすべてはその間に実行され続けます。関数型プログラマーであれば、プロミスは `then()` で割り当てられたモナドであると認識するかもしれません（しかし、これらは自動平坦化されるため、完全なモナドではありません。つまり `Promise<Promise<T>>` を作ることはできません）。

実際、シングルスレッドモデルであるにもかかわらず、 Node.js はノンブロッキング IO のため、多数のデータベースやファイルシステムリクエストを処理してもとてもパフォーマンスが高く、サーバーサイドプログラミングによく使われています。しかし、純粋な JavaScript である CPU バウンド（計算集約的な）タスクはメインスレッドをブロックします。本当の並列化を実現するには、ワーカー を使用する必要があるかもしれません。

非同期プログラミングについてもっと学ぶには、プロミスの使用を読むか、非同期 JavaScript チュートリアルに従ってください。

モジュール
-----

JavaScript はほとんどのランタイムで対応しているモジュールシステムも指定しています。モジュールは通常ファイルであり、ファイルパスまたは URL で識別されます。モジュール間でデータを交換するために `import` および `export` 文を使用することができます。

```js
import { foo } from "./foo.js";

// エクスポートされていない変数はモジュールにローカル
const b = 2;

export const a = 1;
```

Haskell、Python、Java などとは異なり、 JavaScript のモジュール解像度は完全にホスト定義です。通常は URL やファイルパスに基づいているので、相対ファイルパスは「うまく行き」、プロジェクトのルートパスではなく現在のモジュールのパスからの相対パスとなります。

しかし、 JavaScript 言語は標準ライブラリーモジュールを提供していません。すべてのコア機能は、代わりに `Math` や `Intl` のようなグローバル変数によって動いています。これは、 JavaScriptが長い間モジュールシステムを欠いてきた歴史と、モジュールシステムを選ぶとランタイムのセットアップにいくつかの変更を伴うという事実によるものです。

ランタイムが異なれば、使用するモジュールシステムも異なります。例えば、 Node.js はパッケージマネージャ npm を使用し、ほとんどの場合ファイルシステムベースですが、 Deno やブラウザーは完全に URL ベースで、 HTTP URL からモジュールを解決することができます。

詳しい情報はモジュールガイドページを参照してください。

言語とランタイム
--------

このページを通して、ある機能は「言語レベル」であり、他にも「ランタイムレベル」の機能があることを常に述べてきました。

JavaScript は汎用スクリプト言語です。コア言語仕様は、純粋な計算ロジックに焦点を当てています。入出力は扱いません。実際、特別なランタイムレベルの API （最も有名なものが `console.log()`）がなければ、 JavaScript プログラムの動作は完全に観察不可能です。

ランタイム、またはホストとは、 JavaScript エンジン（インタープリター）にデータを供給し、特別なグローバルプロパティを提供し、エンジンが外の世界と対話するための仕掛けを提供するものです。モジュール解決、データの読み込み、メッセージの出力、ネットワークリクエストの送信などはすべてランタイムレベルの処理です。 JavaScript はその誕生以来、 DOM のような API を提供するブラウザー、ファイルシステムアクセス などの API を提供する Node.js など、さまざまな環境で採用されてきました。 JavaScript はウェブ（これが本来の目的でした）、モバイルアプリ、デスクトップアプリ、サーバーサイドアプリ、サーバーレス、組み込みシステムなどでうまく統合されています。 JavaScript のコア機能を学ぶ一方で、知識を使用するためにはホスティング提供された機能を理解することも重要です。例えば、ウェブプラットフォーム API はすべて読むことができ、これらはブラウザー、時にはブラウザー以外によって実装されます。

さらなる探究
------

このページでは、 JavaScript の様々な機能が他の言語と比較してどう異なるのかという観点で、とても基本的なことを説明しています。言語そのものや各機能の細部についてもっと知りたい場合は、JavaScript ガイドや JavaScript リファレンスを参照してください。

言語の本質的な部分については、紙面や 複雑さのために省略した部分もありますが、自分自身で探求してください。

* 継承とプロトタイプチェーン
* クロージャ
* 正規表現
* 反復処理