initial commit

9 files changed, 1219 insertions, 0 deletions

diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html
new file mode 100644
index 0000000000..049e69396d
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html
@@ -0,0 +1,191 @@
+---
+title: Intl.DateTimeFormat() コンストラクター
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+tags:
+  - Constructor
+  - DateTimeFormat
+  - Intl
+  - JavaScript
+  - Reference
+  - コンストラクター
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat()</code></strong> コンストラクターは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのものです。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>locales</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>BCP47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、この引数を省略するか、 <code>undefined</code> を渡すかしてください。 Unicode 拡張に対応しています (例えば "<code>en-US-u-ca-buddhist</code>" など)。 <code>locales</code> 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。</p>
+
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>番号方式。使用できる値は次のとおりです。 "<code>arab</code>", "<code>arabext</code>", "<code>bali</code>", "<code>beng</code>", "<code>deva</code>", "<code>fullwide</code>", "<code>gujr</code>", "<code>guru</code>", "<code>hanidec</code>", "<code>khmr</code>", "<code>knda</code>", "<code>laoo</code>", "<code>latn</code>", "<code>limb</code>", "<code>mlym</code>", "<code>mong</code>", "<code>mymr</code>", "<code>orya</code>", "<code>tamldec</code>", "<code>telu</code>", "<code>thai</code>", "<code>tibt</code>"</dd>
+  <dt><code>ca</code></dt>
+  <dd>カレンダー。使用できる値は次のとおりです。 "<code>buddhist</code>", "<code>chinese</code>", "<code>coptic</code>", "<code>ethiopia</code>", "<code>ethiopic</code>", "<code>gregory</code>", "<code>hebrew</code>", "<code>indian</code>", "<code>islamic</code>", "<code>iso8601</code>", "<code>japanese</code>", "<code>persian</code>", "<code>roc</code>"</dd>
+  <dt><code>hc</code></dt>
+  <dd>時制。使用できる値は次の通りです。 "<code>h11</code>", "<code>h12</code>", "<code>h23</code>", "<code>h24</code>".</dd>
+ </dl>
+ </dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>
+ <p>以下のプロパティの一部またはすべてを持つオブジェクトです。</p>
+
+ <dl>
+  <dt><code>dateStyle</code></dt>
+  <dd><code>format()</code> が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。
+  <ul>
+   <li>"<code>full</code>"</li>
+   <li>"<code>long</code>"</li>
+   <li>"<code>medium</code>"</li>
+   <li>"<code>short</code>"</li>
+  </ul>
+  </dd>
+  <dt><code>timeStyle</code></dt>
+  <dd><code>format()</code> が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。
+  <ul>
+   <li>"<code>full</code>"</li>
+   <li>"<code>long</code>"</li>
+   <li>"<code>medium</code>"</li>
+   <li>"<code>short</code>"</li>
+  </ul>
+  </dd>
+  <dt><code>fractionalSecondDigits</code></dt>
+  <dd><code>format()</code> を呼び出したときに適用する秒の小数点以下の桁数です。有効な値は 0-3 です。</dd>
+  <dt><code>calendar</code></dt>
+  <dd>暦です。有効な値は、 "<code>buddhist</code>", "<code>chinese</code>", " <code>coptic</code>", "<code>ethiopia</code>", "<code>ethiopic</code>", "<code>gregory</code>", " <code>hebrew</code>", "<code>indian</code>", "<code>islamic</code>", "<code>iso8601</code>", " <code>japanese</code>", "<code>persian</code>", "<code>roc</code>" です。</dd>
+  <dt><code>dayPeriod</code></dt>
+  <dd>日単位の期間の表現の仕方です。有効な値は、 "<code>narrow</code>", "<code>short</code>", " <code>long</code>" です。</dd>
+  <dt><code>numberingSystem</code></dt>
+  <dd>命数法です。有効な値は、 "<code>arab</code>", "<code>arabext</code>", " <code>bali</code>", "<code>beng</code>", "<code>deva</code>", "<code>fullwide</code>", " <code>gujr</code>", "<code>guru</code>", "<code>hanidec</code>", "<code>khmr</code>", " <code>knda</code>", "<code>laoo</code>", "<code>latn</code>", "<code>limb</code>", "<code>mlym</code>", " <code>mong</code>", "<code>mymr</code>", "<code>orya</code>", "<code>tamldec</code>", " <code>telu</code>", "<code>thai</code>", "<code>tibt</code>" です。</dd>
+  <dt><code>localeMatcher</code></dt>
+  <dd>使用するロケール一致アルゴリズム。利用可能な値は "<code>lookup</code>" と "<code>best fit</code>" です。既定値は "<code>best fit</code>" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。</dd>
+  <dt><code>timeZone</code></dt>
+  <dd>使用するタイムゾーン。実装が認識しなければならない唯一の値は "<code>UTC</code>" です。既定値は、実行時の既定のタイムゾーンです。実装は、 <a href="https://www.iana.org/time-zones">IANA タイムゾーンデータベース</a>のタイムゾーン名、例えば "<code>Asia/Shanghai</code>", "<code>Asia/Kolkata</code>", "<code>America/New_York</code>" なども認識できる場合があります。</dd>
+  <dt><code>hour12</code></dt>
+  <dd>12時制を使用するかどうか (24時制に対して)。可能な値は <code>true</code> と <code>false</code> です。既定ではロケールに依存します。このオプションは <code>hc</code> 言語タグや <code>hourCycle</code> オプションと一緒に使用された場合、これらを上書きします。</dd>
+  <dt><code>hourCycle</code></dt>
+  <dd>使用する時の周期です。利用可能な値は "<code>h11</code>", "<code>h12</code>", "<code>h23</code>", "<code>h24</code>" です。このオプションは <code>hc</code> 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は <code>hour12</code> オプションが優先されます。</dd>
+  <dt><code>formatMatcher</code></dt>
+  <dd>使用する書式一致アルゴリズム。可能な値は "<code>basic</code>" と "<code>best fit</code>" です。既定値は "<code>best fit</code>" です。このプロパティの使用方法については、以下の項を参照してください。</dd>
+ </dl>
+
+ <p>以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。</p>
+
+ <ul>
+  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li>
+  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li>
+  <li><code>year</code>, <code>month</code>, <code>day</code></li>
+  <li><code>year</code>, <code>month</code></li>
+  <li><code>month</code>, <code>day</code></li>
+  <li><code>hour</code>, <code>minute</code>, <code>second</code></li>
+  <li><code>hour</code>, <code>minute</code></li>
+ </ul>
+
+ <p>実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 <code>formatMatcher</code> プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。<a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">完全に定義された "<code>basic</code>" アルゴリズム</a>と、実装に依存した"<code>best fit</code>" アルゴリズムです。</p>
+
+ <dl>
+  <dt><code>weekday</code></dt>
+  <dd>曜日の表現です。利用可能な値は以下の通りです。
+  <ul>
+   <li>"<code>long</code>" (例 <code>Thursday</code>)</li>
+   <li>"<code>short</code>" (例 <code>Thu</code>)</li>
+   <li>"<code>narrow</code>" (例 <code>T</code>)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 <code>Tuesday</code> の narrow 形式も <code>T</code> です)。</li>
+  </ul>
+  </dd>
+  <dt><code>era</code></dt>
+  <dd>時代の表現です。利用可能な値は以下の通りです。
+  <ul>
+   <li>"<code>long</code>" (例 <code>Anno Domini</code>, 紀元)</li>
+   <li>"<code>short</code>" (例 <code>AD</code>)</li>
+   <li>"<code>narrow</code>" (例 <code>A</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>year</code></dt>
+  <dd>年の表現です。利用可能な値は以下の通りです。
+  <ul>
+   <li>"<code>numeric</code>" (例 <code>2012</code>)</li>
+   <li>"<code>2-digit</code>" (例 <code>12</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>month</code></dt>
+  <dd>月の表現です。利用可能な値は以下の通りです。
+  <ul>
+   <li>"<code>numeric</code>" (例 <code>2</code>)</li>
+   <li>"<code>2-digit</code>" (例 <code>02</code>)</li>
+   <li>"<code>long</code>" (例 <code>March</code>)</li>
+   <li>"<code>short</code>" (例 <code>Mar</code>)</li>
+   <li>"<code>narrow</code>" (例 <code>M</code>)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 <code>May</code> の narrow 形式も <code>M</code> です)。</li>
+  </ul>
+  </dd>
+  <dt><code>day</code></dt>
+  <dd>日の表現です。利用可能な値は以下の通りです。
+  <ul>
+   <li>"<code>numeric</code>" (例 <code>1</code>)</li>
+   <li>"<code>2-digit</code>" (例 <code>01</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>hour</code></dt>
+  <dd>時の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd>
+  <dt><code>minute</code></dt>
+  <dd>分の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd>
+  <dt><code>second</code></dt>
+  <dd>秒の表現です。利用可能な値は "<code>numeric</code>", "<code>2-digit</code>" です。</dd>
+  <dt><code>timeZoneName</code></dt>
+  <dd>タイムゾーン名の表現です。利用可能な値は以下の通りです。
+  <ul>
+   <li>"<code>long</code>" (例 <code>British Summer Time</code>)</li>
+   <li>"<code>short</code>" (例 <code>GMT+1</code>)</li>
+  </ul>
+  </dd>
+ </dl>
+
+ <p class="noinclude">日付・時間コンポーネントプロパティの既定値は {{jsxref("undefined")}} ですが、すべてのコンポーネントプロパティが {{jsxref("undefined")}} であった場合、 <code>year</code>, <code>month</code>, <code>day</code> は "<code>numeric</code>" であると仮定されます。</p>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl-datetimeformat-constructor', 'Intl.DateTimeFormat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.DateTimeFormat")}}</p>
+
+<h3 id="Implementation_Progress" name="Implementation_Progress">実装の進捗状況</h3>
+
+<p>以下の表は、クロスブラウザーの安定性にまだ達していない新機能の日々の実装状況を示しています。このデータは、 JavaScript の標準テストスイートである <a href="https://github.com/tc39/test262">Test262</a> で関連する機能テストをナイトリービルド、または各ブラウザの JavaScript エンジンの最新リリースで実行することで生成されます。</p>
+
+<div>{{EmbedTest262ReportResultsTable("Intl.DateTimeFormat-datetimestyle")}}</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a></code></li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
new file mode 100644
index 0000000000..af59293b1f
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html
@@ -0,0 +1,113 @@
+---
+title: Intl.DateTimeFormat.prototype.format()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.NumberFormat.prototype.format()</code></strong> メソッドは、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.format(<var>date</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>date</var></code></dt>
+ <dd>整形する日付や時刻です。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>format</code> ゲッター関数は、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_format" name="Using_format">format の使用</h3>
+
+<p><code>format</code> ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。</p>
+
+<pre class="brush: js notranslate">var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."
+</pre>
+
+<h3 id="Using_format_with_map" name="Using_format_with_map">format と map の使用</h3>
+
+<p><code>format</code> ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。</p>
+
+<pre class="brush: js notranslate">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = { year: 'numeric', month: 'long' };
+var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join('; '));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"
+</pre>
+
+<h3 id="書式化された日付値を固定値と比較することは避ける">書式化された日付値を固定値と比較することは避ける</h3>
+
+<p>ほとんどの場合、 <code>format()</code> が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。</p>
+
+<p>このことから、 <code>format()</code> の結果と固定値を比較することができると期待してはいけません。</p>
+
+<pre class="brush: js; example-bad notranslate">let d = new Date("2019-01-01T00:00:00.000000Z");
+let formattedDate = Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+}).format(d);
+
+"1.1.2019, 01:00:00" === formattedDate;
+// true in Firefox and others
+// false in IE and Edge
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: この <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow のスレッド</a>に詳細や例があります。</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.format', 'Intl.DateTimeFormat.format')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html
new file mode 100644
index 0000000000..39d0d6212e
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html
@@ -0,0 +1,86 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRange()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - メソッド
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.DateTimeFormat.prototype.formatRange()</code></strong> は、日付の範囲をもっとも簡明な方法で、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <strong><code>locale</code></strong> と <code><strong>options</strong></code> に基づいて書式化します。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", "taller")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre><code>Intl.DateTimeFormat.prototype.formatRange(<var>startDate, endDate</var>)</code></pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な <code>formatRange</code> の使用</h3>
+
+<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <strong><code>locale</code></strong> と <code><strong>options</strong></code> に基づいて日付の範囲を書式化します。</p>
+
+<pre class="brush: js">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
+// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
+// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
+// &gt; 'Sat, 20 Jan 2007 10:00:00 GMT'
+
+let fmt1 = new Intl.DateTimeFormat("en", {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+});
+console.log(fmt1.format(date1));
+console.log(fmt1.formatRange(date1, date2));
+console.log(fmt1.formatRange(date1, date3));
+// &gt; '1/10/07, 10:00 AM'
+// &gt; '1/10/07, 10:00 – 11:00 AM'
+// &gt; '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
+
+let fmt2 = new Intl.DateTimeFormat("en", {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+});
+console.log(fmt2.format(date1));
+console.log(fmt2.formatRange(date1, date2));
+console.log(fmt2.formatRange(date1, date3));
+// &gt; 'Jan 10, 2007'
+// &gt; 'Jan 10, 2007'
+// &gt; 'Jan 10 – 20, 2007'
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.es/proposal-intl-DateTimeFormat-formatRange/#sec-intl.datetimeformat.prototype.formatRange">Intl.DateTimeFormat.prototype.formatRange</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html
new file mode 100644
index 0000000000..9659a69883
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html
@@ -0,0 +1,83 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRangeToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+tags:
+  - Internationalization
+  - JavaScript
+  - Localization
+  - Method
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+---
+<p>{{JSRef}}</p>
+
+<p><strong><code>Intl.DateTimeFormat.prototype.formatRangeToParts()</code></strong> メソッドは、 <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype">DateTimeFormat</a></code> フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", "taller")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="notranslate"><code>Intl.DateTimeFormat.prototype.formatRangeToParts(<var>startDate</var>, <var>endDate</var>)</code></pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な formatRangeToParts の使い方</h3>
+
+<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表すロケール特有のトークンを含む {{jsxref("Array")}} オブジェクトを返します。</p>
+
+<pre class="brush: js notranslate">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
+// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
+
+let fmt = new Intl.DateTimeFormat("en", {
+    hour: 'numeric',
+    minute: 'numeric'
+});
+
+console.log(fmt.formatRange(date1, date2));
+// &gt; '10:00 – 11:00 AM'
+
+fmt.formatRangeToParts(date1, date2);
+// return value:
+// [
+//   { type: 'hour',      value: '10',  source: "startRange" },
+//   { type: 'literal',   value: ':',   source: "startRange" },
+//   { type: 'minute',    value: '00',  source: "startRange" },
+//   { type: 'literal',   value: ' – ', source: "shared"     },
+//   { type: 'hour',      value: '11',  source: "endRange"   },
+//   { type: 'literal',   value: ':',   source: "endRange"   },
+//   { type: 'minute',    value: '00',  source: "endRange"   },
+//   { type: 'literal',   value: ' ',   source: "shared"     },
+//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
+// ]</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-Intl.DateTimeFormat.prototype.formatRangeToParts', 'formatRangeToParts()')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Intl.DateTimeFormat.prototype.formatRange()")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
new file mode 100644
index 0000000000..b6a1ea6c3e
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html
@@ -0,0 +1,241 @@
+---
+title: DateTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> メソッドは、ロケールを意識した <code>DateTimeFormat</code> フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.formatToParts(<var>date</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>date</code> {{optional_inline}}</dt>
+ <dd>書式化する日付。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>書式化された日付のパーツを含むオブジェクトの {{jsxref("Array")}} です。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>formatToParts()</code> メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。<code>formatToParts()</code> メソッドが返却する構造は、このようになります。</p>
+
+<pre class="brush: js notranslate">[
+  { type: 'day', value: '17' },
+  { type: 'weekday', value: 'Monday' }
+]</pre>
+
+<p>渡される可能性がある type は以下のとおりです。</p>
+
+<dl>
+ <dt>day</dt>
+ <dd>日付として使用される文字列。たとえば、 "<code>17</code>"。</dd>
+ <dt>dayPeriod</dt>
+ <dd>日付期間として使用される文字列。たとえば、 "<code>AM</code>", "<code>PM</code>", "<code>in the morning</code>", "<code>noon</code>" など。</dd>
+ <dt>era</dt>
+ <dd>時代として使用される文字列。たとえば、"<code>BC</code>" や "<code>AD</code>"。</dd>
+ <dt>fractionalSecond</dt>
+ <dd>小数点以下の秒として使用される文字列です。例えば "<code>0</code>" や "<code>00</code>" や "<code>000</code>" です。</dd>
+ <dt>hour</dt>
+ <dd>時刻として使用される文字列。たとえば "<code>3</code>" や "<code>03</code>"。</dd>
+ <dt>literal</dt>
+ <dd>日付や時刻の区切りとして使用される文字列。たとえば "<code>/</code>"、"<code>,</code>"、"<code>o'clock</code>"、"<code>de</code>"。</dd>
+ <dt>minute</dt>
+ <dd>分として使用される文字列。たとえば、"<code>00</code>"。</dd>
+ <dt>month</dt>
+ <dd>月として使用される文字列。たとえば、"<code>12</code>"。</dd>
+ <dt>relatedYear</dt>
+ <dd>カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "<code>2019</code>" です。</dd>
+ <dt>second</dt>
+ <dd>秒として使用される文字列。たとえば、"<code>07</code>" や "<code>42</code>"。</dd>
+ <dt>timeZoneName</dt>
+ <dd>タイムゾーン名として使用される文字列。たとえば、"<code>UTC</code>"。</dd>
+ <dt>weekday</dt>
+ <dd>曜日として使用される文字列。たとえば、"<code>M</code>" や "<code>Monday</code>"、"<code>Montag</code>"。</dd>
+ <dt>year</dt>
+ <dd>年として使用される文字列。たとえば、"<code>2012</code>" や "<code>96</code>"。</dd>
+ <dt>yearName</dt>
+ <dd>関連するコンテキストで yearName に使用される文字列、例えば "<code>geng-zi</code>" など。</dd>
+</dl>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p>この機能のポリフィルは、<a href="https://github.com/zbraniecki/proposal-intl-formatToParts">提案リポジトリ</a>から利用できます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>DateTimeFormat</code> は、直接操作できないローカライズされた透過的でない文字列を出力します。</p>
+
+<pre class="brush: js notranslate">var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat('en-us', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  fractionalSecondDigits: 3,
+  hour12: true,
+  timeZone: 'UTC'
+});
+
+formatter.format(date);
+// "Monday, 12/17/2012, 3:00:42.000 AM"
+</pre>
+
+<p>しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 <code>formatToParts</code> メソッドは、文字列を部品単位で提供することで、 <code>DateTimeFormat</code> フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。</p>
+
+<pre class="brush: js notranslate">formatter.formatToParts(date);
+
+// return value:
+[
+  { type: 'weekday',   value: 'Monday' },
+  { type: 'literal',   value: ', '     },
+  { type: 'month',     value: '12'     },
+  { type: 'literal',   value: '/'      },
+  { type: 'day',       value: '17'     },
+  { type: 'literal',   value: '/'      },
+  { type: 'year',      value: '2012'   },
+  { type: 'literal',   value: ', '     },
+  { type: 'hour',      value: '3'      },
+  { type: 'literal',   value: ':'      },
+  { type: 'minute',    value: '00'     },
+  { type: 'literal',   value: ':'      },
+  { type: 'second',    value: '42'     },
+  { type: 'fractionalSecond', value: '000' },
+  { type: 'literal',   value: ' '      },
+  { type: 'dayPeriod', value: 'AM'     }
+]
+</pre>
+
+<p>これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>、 <a href="/ja/docs/Web/JavaScript/Reference/Statements/switch">switch 文</a>、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>、 {{jsxref("Array.prototype.reduce()")}} などを使用しています。</p>
+
+<pre class="brush: js notranslate">var dateString = formatter.formatToParts(date).map(({type, value}) =&gt; {
+  switch (type) {
+    case 'dayPeriod': return `&lt;b&gt;${value}&lt;/b&gt;`;
+    default : return value;
+  }
+}).reduce((string, part) =&gt; string + part);
+</pre>
+
+<p>これにより、 <code>formatToParts()</code> メソッドを使用する際に、日の部分が太字になります。</p>
+
+<pre class="brush: js notranslate">console.log(formatter.format(date));
+// "Monday, 12/17/2012, 3:00:42.000 AM"
+
+console.log(dateString);
+// "Monday, 12/17/2012, 3:00:42.000 &lt;b&gt;AM&lt;/b&gt;"</pre>
+
+<h3 id="Named_Years_and_Mixed_calendars" name="Named_Years_and_Mixed_calendars">名前付きの年と混合カレンダー</h3>
+
+<p>いくつかのケースでは、暦は名前付きの年を使用しています。 例えば、中国やチベットの暦では、60年周期の<a href="https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF">干支</a>を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 <code>formatToParts()</code> の結果は、通常は年が存在するはずなのに、年の項目ではなく、4桁のグレゴリオ暦の年を含む relatedYear のエントリを含むことになります。バッグの中の項目を (任意の値で) <code>year</code> に設定すると、年と <code>yearName</code> グレゴリオ暦の <code>relatedYear</code> の両方が得られます。</p>
+
+<pre class="brush: js notranslate">let opts = { year: "numeric", month: "numeric", day: "numeric" };
+let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
+df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
+
+// return value
+[
+  { type: 'relatedYear', value: '2012' },
+  { type: 'literal', value: '年' },
+  { type: 'month', value: '十一月' },
+  { type: 'day', value: '4' }
+]
+</pre>
+
+<p><code>year</code> オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には <code>relatedYear</code> のみが含まれます。</p>
+
+<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("zh-u-ca-chinese");
+df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
+
+// 返値
+[
+   { type: 'relatedYear', value: '2012' },
+   { type: 'literal', value: '年' },
+   { type: 'month', value: '十一月' },
+   { type: 'day', value: '4' }
+]
+</pre>
+
+<p><code>year</code> を出力したい場合は、 <code>.format()</code> は一般的にこれらを並べて表示することができます。</p>
+
+<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"});
+df.format(Date.UTC(2012, 11, 17, 3, 0, 42));
+
+// 返値
+2012壬辰年</pre>
+
+<p>これにより、ロケールとカレンダーを両方の <code>format</code> で混在させることも可能になります。</p>
+
+<pre class="brush: js notranslate">let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"});
+let date = Date.UTC(2012, 11, 17, 3, 0, 42);
+df.format(date);
+
+// 返値
+2012(ren-chen)
+</pre>
+
+<p>および <code>formatToParts</code> の場合</p>
+
+<pre class="brush: js notranslate">let opts = {month: 'numeric', day: 'numeric', year: "numeric"};
+let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts);
+let date = Date.UTC(2012, 11, 17, 3);
+df.formatToParts(date)
+
+// 返値
+[
+  { type: 'month', value: '11' },
+  { type: 'literal', value: '/' },
+  { type: 'day', value: '4' },
+  { type: 'literal', value: '/' },
+  { type: 'relatedYear', value: '2012' }
+]
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html
new file mode 100644
index 0000000000..0c9a663a52
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html
@@ -0,0 +1,195 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+tags:
+  - Class
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat</code></strong> オブジェクトは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのコンストラクターです。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Constructor" name="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}</dt>
+ <dd>新しい <code>DateTimeFormat</code> オブジェクトを生成します。</dd>
+</dl>
+
+<h2 id="Static_methods" name="Static_methods">静的メソッド</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt>
+ <dd>ロケールおよびこの {{jsxref("DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd>
+ <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。</dd>
+ <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。</dd>
+ <dt>{{jsxref("DateTimeFormat.formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt>
+ <dd>このメソッドは2つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Date</a> を受け取り、 {{jsxref("DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。</dd>
+ <dt>{{jsxref("DateTimeFormat.formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}</dt>
+ <dd>このメソッドは2つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Date</a> を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_DateTimeFormat" name="Using_DateTimeFormat">DateTimeFormat の使用</h3>
+
+<p>基本的に、ロケールを指定せずに使用すると、 <code>DateTimeFormat</code> は既定のロケールとオプションを使用します。</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// toLocaleString without arguments depends on the implementation,
+// the default locale, and the default time zone
+console.log(new Intl.DateTimeFormat().format(date));
+// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
+</pre>
+
+<h3 id="Using_locales" name="Using_locales">locales の使用</h3>
+
+<p>この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 <code>locales</code> 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time)
+
+// US English uses month-day-year order
+console.log(new Intl.DateTimeFormat('en-US').format(date));
+// → "12/19/2012"
+
+// British English uses day-month-year order
+console.log(new Intl.DateTimeFormat('en-GB').format(date));
+// → "19/12/2012"
+
+// Korean uses year-month-day order
+console.log(new Intl.DateTimeFormat('ko-KR').format(date));
+// → "2012. 12. 19."
+
+// Arabic in most Arabic speaking countries uses real Arabic digits
+console.log(new Intl.DateTimeFormat('ar-EG').format(date));
+// → "١٩<span dir="rtl">‏/١٢‏/٢٠١٢</span>"
+
+// for Japanese, applications may want to use the Japanese calendar,
+// where 2012 was the year 24 of the Heisei era
+console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
+// → "24/12/19"
+
+// when requesting a language that may not be supported, such as
+// Balinese, include a fallback language, in this case Indonesian
+console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
+// → "19/12/2012"
+</pre>
+
+<h3 id="Using_options" name="Using_options">options の使用</h3>
+
+<p>日付と時刻の書式は <code>options</code> 引数を使用してカスタマイズできます。</p>
+
+<pre class="brush: js notranslate">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
+
+// request a weekday along with a long date
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// an application may want to use UTC and make that visible
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// sometimes you want to be more precise
+options = {
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  timeZone: 'Australia/Sydney',
+  timeZoneName: 'short'
+};
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00 pm AEDT"
+
+// sometimes you want to be very precise
+options.fractionalSecondDigits = 3;
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00.200 pm AEDT"
+
+
+// sometimes even the US needs 24-hour time
+options = {
+  year: 'numeric', month: 'numeric', day: 'numeric',
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour12: false,
+  timeZone: 'America/Los_Angeles'
+};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "12/19/2012, 19:00:00"
+
+
+// to specify options but use the browser's default locale, use 'default'
+console.log(new Intl.DateTimeFormat('default', options).format(date));
+// → "12/19/2012, 19:00:00"
+
+// sometimes it's helpful to include the period of the day
+options = {hour: "numeric", dayPeriod: "short"};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → 10 at night
+</pre>
+
+<p>The used calendar and numbering formats can also be set independently via <code>options</code> arguments:</p>
+
+<pre class="brush: js notranslate">var options = {calendar: 'chinese', numberingSystem: 'arab'};
+var dateFormat = new Intl.DateTimeFormat('default', options);
+var usedOptions = dateFormat.resolvedOptions();
+
+console.log(usedOptions.calendar);
+// → "chinese"
+
+console.log(usedOptions.numberingSystem);
+// → "arab"
+
+console.log(usedOptions.timeZone);
+// → "America/New_York" (the users default timezone)
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Intl", "Intl")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
new file mode 100644
index 0000000000..bf782a0664
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
@@ -0,0 +1,87 @@
+---
+title: Intl.DateTimeFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> プロパティは、 {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} コンストラクターに対するプロトタイプオブジェクトを表します。</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>Intl.DateTimeFormat</code> インスタンスの解説については {{jsxref("DateTimeFormat")}} を確認して下さい。</p>
+
+<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスは <code>Intl.DateTimeFormat.prototype</code> から継承します。プロトタイプオブジェクトへの変更はすべての {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスによって継承されます。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt>
+ <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} への参照です。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt>
+ <dd>ロケールおよびこの {{jsxref("DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd>
+ <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of objects representing the date string in parts that can be used for custom locale-aware formatting.</dd>
+ <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算されたオプションをもった新しいオブジェクトを返します。</dd>
+ <dt>{{jsxref("DateTimeFormat.formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt>
+ <dd>This method receives two <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Dates</a> and formats the date range in the most concise way based on the locale and options provided when instantiating {{jsxref("DateTimeFormat", "DateTimeFormat")}}.</dd>
+ <dt>{{jsxref("DateTimeFormat.formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}</dt>
+ <dd>This method receives two <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Dates</a> and returns an Array of objects containing the locale-specific tokens representing each part of the formatted date range.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..4e28ab0347
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html
@@ -0,0 +1,95 @@
+---
+title: Intl.DateTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.Collator.prototype.resolvedOptions()</code></strong> メソッドは、この {{jsxref("Collator")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトを返します。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>dateTimeFormat</var>.resolvedOptions()</pre>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>この {{jsxref("DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>返されるオブジェクトには以下のプロパティがあります。</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが <code>locale</code> に含まれます。</dd>
+ <dt><code>calendar</code></dt>
+ <dd>例: "gregory"</dd>
+ <dt><code>numberingSystem</code></dt>
+ <dd>Unicode 拡張キーの <code>"ca"</code> および <code>"nu"</code> で要求された値、または既定値が入ります。</dd>
+ <dt><code>timeZone</code></dt>
+ <dd><code>options</code> 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。</dd>
+ <dt><code>hour12</code></dt>
+ <dd><code>options</code> 引数の同名のプロパティで要求された値、または既定値が入ります。</dd>
+ <dt><code>weekday</code></dt>
+ <dt><code>era</code></dt>
+ <dt><code>year</code></dt>
+ <dt><code>month</code></dt>
+ <dt><code>day</code></dt>
+ <dt><code>hour</code></dt>
+ <dt><code>minute</code></dt>
+ <dt><code>second</code></dt>
+ <dt><code>timeZoneName</code></dt>
+ <dd><code>options</code> 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_the_resolvedOptions_method" name="Using_the_resolvedOptions_method">resolvedOptions メソッドの使用</h3>
+
+<pre class="brush: js notranslate">var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' });
+var usedOptions = germanFakeRegion.resolvedOptions();
+
+usedOptions.locale;          // "de"
+usedOptions.calendar;        // "gregory"
+usedOptions.numberingSystem; // "latn"
+usedOptions.timeZone;        // "UTC"
+usedOptions.month;           // "numeric"
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.resolvedoptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..0be4ec7300
--- /dev/null
+++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html
@@ -0,0 +1,128 @@
+---
+title: Intl.DateTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+---
+<div>{{JSRef("Global_Objects", "DateTimeFormat", "Intl,Collator,NumberFormat")}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p>ランタイムのデフォルトローケルに戻る必要なしでフォーマットしている日時でサポートしている提供されているローケルを含んでいる配列を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><code>Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>BCP47言語タグの文字列、そのような文字列の配列。 <code>locales</code>引数の一般的な形式に対して、{{jsxref("Global_Objects/Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}を確かめて下さい。</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>オプション。次のプロパティを持つオブジェクト:</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>使っているローケルマッチングアルゴリズム。利用可能な値は<code>"lookup"</code>、<code>"best fit"</code>。デフォルトでは <code>"best fit"</code>。このオプションについての情報のために、{{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}を確かめて下さい。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="説明">説明</h2>
+
+<p><code>locales</code>で提供されている言語タグのサブセットを持つ配列を返します。返される言語タグは、ランタイムがローケルマッチングアルゴリズムを使って考慮してフォーマットしている日時でのローケルをサポートしていてるので、デフォルトローケルに戻る必要はありません。</p>
+
+<h2 id="例">例</h2>
+
+<h3 id="例_supportedLocalesOfを使う">例: <code>supportedLocalesOf</code>を使う</h3>
+
+<p>日時のフォーマットで、バリ語ではなく、インドネシア語とドイツ語をサポートしているランタイムを仮定すると、<code>supportedLocalesOf</code>はインドネシア語とドイツ語の言語タグを返します。ピンインは日時のフォーマットには適切ではなくインドネシア語では使われません。インドネシアの特定のドイツ語はサポートされそうにもありません。 <code>"lookup"</code>アルゴリズムの指定に注意して下さい。<code>"best fit"</code>はインドネシア語はバリ語に対して、十分にふさわしいと決定するかもしれません。というのも、 ほとんどのバリの人はインドネシア語も理解するからです。それゆえバリ言語タグも同様に返します。</p>
+
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>{{CompatChrome("24")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("15")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>機能</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本サポート</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome("26")}}</td>
+   <td>{{CompatNo}}<br>
+    {{bug("864843")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>