diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ja/web/javascript/reference/global_objects | |
parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects')
49 files changed, 2442 insertions, 2461 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html b/files/ja/web/javascript/reference/global_objects/array/tostring/index.html deleted file mode 100644 index c5f260f82e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/tostring/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Array.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/Array/toString -tags: - - Array - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString ---- -<div>{{JSRef}}</div> - -<p><code><strong>toString()</strong></code> メソッドは、指定された配列とその要素を表す文字列を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>arr</var>.toString()</pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>配列の要素を表す文字列です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の <code>toString</code> メソッドを上書きしています。Array オブジェクトでは、<code>toString</code> メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。</p> - -<p>配列が文字列値として表される必要がある場合や、配列が文字列の結合として参照される時、JavaScript は <code>toString</code> メソッドを自動的に呼び出します。</p> - -<h3 id="ECMAScript_5_semantics" name="ECMAScript_5_semantics">ECMAScript 5 でのセマンティック</h3> - -<p>JavaScript 1.8.5 (Firefox 4)以降、および ECMAScript 第 5 版では、<code>toString()</code> メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_toString" name="Using_toString">toString を使用する</h3> - -<pre class="brush: js notranslate">const array1 = [1, 2, 'a', '1a']; - -console.log(array1.toString()); -// expected output: "1,2,a,1a" -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Array.toString")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Array.prototype.join()")}}</li> - <li>{{jsxref("Object.prototype.toSource()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/array/tostring/index.md b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md new file mode 100644 index 0000000000..17807b4e04 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/array/tostring/index.md @@ -0,0 +1,60 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +tags: + - Array + - JavaScript + - Method + - Prototype +browser-compat: javascript.builtins.Array.toString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +{{JSRef}} + +**`toString()`** メソッドは、指定された配列とその要素を表す文字列を返します。 + +{{EmbedInteractiveExample("pages/js/array-tostring.html","shorter")}} + +## 構文 + +```js +toString() +``` + +### 返値 + +配列の要素の文字列表現です。 + +## 解説 + +{{jsxref("Array")}} オブジェクトは {{jsxref("Object")}} の `toString` メソッドをオーバーライドしています。Array オブジェクトでは、`toString` メソッドは配列をつないで、配列のそれぞれの要素がカンマで区切られた 1 つの文字列を返します。 + +配列を文字列値として表す必要がある場合や、配列が文字列の結合として参照されるとき、JavaScript は `toString` メソッドを自動的に呼び出します。 + +### ECMAScript 5 でのセマンティック + +JavaScript 1.8.5 (Firefox 4) 以降、および ECMAScript 第 5 版では、`toString()` メソッドは一般化されており、すべてのオブジェクトで使用可能となっています。{{jsxref("Object.prototype.toString()")}} が呼び出され、その結果の値が返されます。 + +## 例 + +### toString の使用 + +```js +const array1 = [1, 2, 'a', '1a']; + +console.log(array1.toString()); +// 期待される出力: "1,2,a,1a" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Array.prototype.join()")}} +- {{jsxref("Object.prototype.toSource()")}} diff --git a/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html index bc4359a60b..eaf1f2c2e9 100644 --- a/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html +++ b/files/ja/web/javascript/reference/global_objects/asyncfunction/index.html @@ -39,7 +39,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction <div class="note"> <p><strong>注:</strong> {{jsxref("Statements/async_function", "非同期関数", "", 1)}}が <code>AsyncFunction</code> コンストラクターによって生成された場合、生成コンテキストのクロージャは生成されません。常にグローバルスコープに生成されます。</p> -<p>実行すると、ローカル変数とグローバルグローバル変数にのみアクセスでき、 <code>AsyncFunction</code> コンストラクターが呼び出されたスコープの変数にはアクセスできません。</p> +<p>実行すると、ローカル変数とグローバル変数にのみアクセスでき、 <code>AsyncFunction</code> コンストラクターが呼び出されたスコープの変数にはアクセスできません。</p> <p>これは、非同期関数式のコードで {{jsxref("Global_Objects/eval", "eval")}} を使用した場合とは異なります。</p> </div> diff --git a/files/ja/web/javascript/reference/global_objects/date/parse/index.html b/files/ja/web/javascript/reference/global_objects/date/parse/index.html index ec4a46ca35..b666075816 100644 --- a/files/ja/web/javascript/reference/global_objects/date/parse/index.html +++ b/files/ja/web/javascript/reference/global_objects/date/parse/index.html @@ -107,7 +107,7 @@ Date.parse('foo-bar 2014'); <h2 id="Examples" name="Examples">例</h2> -<h3 id="Using_Date.parse" name="Using_Date.parse">Using <code>Date.parse()</code> の使用</h3> +<h3 id="Using_Date.parse" name="Using_Date.parse"><code>Date.parse()</code> の使用</h3> <p>以下の呼び出しはすべて <code>1546300800000</code> を返します。最初のものは ES5 によれば UTC 時刻を意味し、それ以外は ISO 日付仕様 (<code>Z</code> および <code>+00:00</code>) に従って UTC をタイムゾーンを指定しています。</p> diff --git a/files/ja/web/javascript/reference/global_objects/index.html b/files/ja/web/javascript/reference/global_objects/index.html deleted file mode 100644 index 44c08eeb57..0000000000 --- a/files/ja/web/javascript/reference/global_objects/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: 標準組込みオブジェクト -slug: Web/JavaScript/Reference/Global_Objects -tags: - - JavaScript - - Landing page - - Overview - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects ---- -<p>{{JSSidebar("Objects")}}</p> - -<p><span class="seoSummary">本章では JavaScript の標準組込みオブジェクトについて、それらのメソッドやプロパティと共にすべて文書化しています。</span></p> - -<p>ここでいう「<ruby>グローバルオブジェクト<rp> (</rp><rt>global objects</rt><rp>)</rp></ruby>」 (または標準組込みオブジェクト) という用語を<ruby><strong>グローバルオブジェクト</strong><rp> (</rp><rt>the global object</rt><rp>) </rp></ruby>と混同しないでください。ここで、『グローバルオブジェクト』は<strong>グローバルスコープにあるオブジェクト</strong>を指します。 (訳注: 日本語では複数形や the による区別ができないため、ここでは後者の <strong>the global object</strong> を『グローバルオブジェクト』と表記して区別します。)</p> - -<p>後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』 (継承されたプロパティがあればそれらも含む) のプロパティから<strong>構成されています</strong>。</p> - -<p>グローバルスコープ内のその他のオブジェクトは、<a href="/ja/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">ユーザースクリプトによって作られる</a>か、あるいはホストアプリによって提供されます。ブラウザー上で提供されている利用可能なオブジェクトについては、<a href="/ja/docs/Web/API/Reference">API リファレンス</a> で文書化されています。</p> - - - -<p><a href="/ja/docs/DOM/DOM_Reference">DOM</a> と中核の <a href="/ja/docs/Web/JavaScript">JavaScript</a> との違いについての詳しい情報は、<a href="/ja/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript 技術概説</a>をご覧ください。</p> - -<h2 id="Standard_objects_by_category" name="Standard_objects_by_category">標準オブジェクト (カテゴリ別)</h2> - -<h3 id="Value_properties" name="Value_properties">値プロパティ</h3> - -<p>これらのグローバルプロパティは、単なる値を返します。これらはプロパティもメソッドも持ちません。</p> - -<ul> - <li>{{JSxRef("Infinity")}}</li> - <li>{{JSxRef("NaN")}}</li> - <li>{{JSxRef("undefined")}}</li> - <li>{{JSxRef("globalThis")}}</li> -</ul> - -<h3 id="Function_properties" name="Function_properties">関数プロパティ</h3> - -<p>これらのグローバル関数 (オブジェクト上ではなくグローバルに呼ばれる関数) は、呼び出し元に直接結果を返します。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> - <li>{{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} </li> - <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li> - <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li> - <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li> - <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li> - <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li> - <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> - <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li> - <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> - <li><strong>Deprecated</strong> - <ul> - <li>{{deprecated_inline}} {{JSxRef("Global_Objects/escape", "escape()")}}</li> - <li>{{deprecated_inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}}</li> - </ul> - </li> -</ul> -</div> - -<h3 id="Fundamental_objects" name="Fundamental_objects">基本オブジェクト</h3> - -<p>これらは、他のすべてのオブジェクトの基礎となる、主要な基本オブジェクトです。これらには、一般的なオブジェクト、関数、そしてエラーを表すオブジェクトが含まれます。</p> - -<ul> - <li>{{JSxRef("Object")}}</li> - <li>{{JSxRef("Function")}}</li> - <li>{{JSxRef("Boolean")}}</li> - <li>{{JSxRef("Symbol")}}</li> -</ul> - -<h3 id="Error_objects" name="Error_objects">エラーオブジェクト</h3> - -<p>エラーオブジェクトは基本オブジェクトの特殊型です。これらのオブジェクトには、基本的な {{JSxRef("Error")}} 型の他に、いくつかの特殊なエラー型があります。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Error")}}</li> - <li>{{Experimental_Inline}} {{JSxRef("AggregateError")}} </li> - <li>{{JSxRef("EvalError")}}</li> - <li>{{JSxRef("InternalError")}}</li> - <li>{{JSxRef("RangeError")}}</li> - <li>{{JSxRef("ReferenceError")}}</li> - <li>{{JSxRef("SyntaxError")}}</li> - <li>{{JSxRef("TypeError")}}</li> - <li>{{JSxRef("URIError")}}</li> -</ul> -</div> - -<h3 id="Numbers_and_dates" name="Numbers_and_dates">数と日付</h3> - -<p>これらは数、日付、数学計算を表す基本的なオブジェクトです。</p> - -<ul> - <li>{{JSxRef("Number")}}</li> - <li>{{JSxRef("BigInt")}}</li> - <li>{{JSxRef("Math")}}</li> - <li>{{JSxRef("Date")}}</li> -</ul> - -<h3 id="Text_processing" name="Text_processing">テキスト処理</h3> - -<p>これらのオブジェクトは、文字列表現および文字列操作をサポートします。</p> - -<ul> - <li>{{JSxRef("String")}}</li> - <li>{{JSxRef("RegExp")}}</li> -</ul> - -<h3 id="Indexed_collections" name="Indexed_collections">索引付きコレクション</h3> - -<p>これらのオブジェクトは、インデックス値で順序付けされたデータのコレクションを表します。これには、(型付けされた) 配列や配列に似た構造体も含まれます。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Array")}}</li> - <li>{{JSxRef("Int8Array")}}</li> - <li>{{JSxRef("Uint8Array")}}</li> - <li>{{JSxRef("Uint8ClampedArray")}}</li> - <li>{{JSxRef("Int16Array")}}</li> - <li>{{JSxRef("Uint16Array")}}</li> - <li>{{JSxRef("Int32Array")}}</li> - <li>{{JSxRef("Uint32Array")}}</li> - <li>{{JSxRef("Float32Array")}}</li> - <li>{{JSxRef("Float64Array")}}</li> - <li>{{JSxRef("BigInt64Array")}}</li> - <li>{{JSxRef("BigUint64Array")}}</li> -</ul> -</div> - -<h3 id="Keyed_collections" name="Keyed_collections">キー付きコレクション</h3> - -<p>これらのオブジェクトは、キーを使ったコレクションを表します。これらは、挿入順に反復可能な要素で構成されています。</p> - -<ul> - <li>{{JSxRef("Map")}}</li> - <li>{{JSxRef("Set")}}</li> - <li>{{JSxRef("WeakMap")}}</li> - <li>{{JSxRef("WeakSet")}}</li> -</ul> - -<h3 id="Structured_data" name="Structured_data">構造化データ</h3> - -<p>これらのオブジェクトは、構造化データバッファおよび JavaScript Object Notation (JSON) を用いて書かれたデータを表現、操作します。</p> - -<ul> - <li>{{JSxRef("ArrayBuffer")}}</li> - <li>{{JSxRef("SharedArrayBuffer")}}</li> - <li>{{JSxRef("Atomics")}}</li> - <li>{{JSxRef("DataView")}}</li> - <li>{{JSxRef("JSON")}}</li> -</ul> - -<h3 id="Control_abstraction_objects" name="Control_abstraction_objects">制御抽象化オブジェクト</h3> - -<p>制御抽象化オブジェクトは、特に非同期のコードを構造化するために役立ちます (例えば深く入り組んだコールバックを使用しないなど)。</p> - -<ul> - <li>{{JSxRef("Promise")}}</li> - <li>{{JSxRef("Generator")}}</li> - <li>{{JSxRef("GeneratorFunction")}}</li> - <li>{{JSxRef("AsyncFunction")}}</li> -</ul> - -<h3 id="Reflection" name="Reflection">リフレクション</h3> - -<ul> - <li>{{JSxRef("Reflect")}}</li> - <li>{{JSxRef("Proxy")}}</li> -</ul> - -<h3 id="Internationalization" name="Internationalization">国際化</h3> - -<p>ECMAScript コアに追加された言語の扱いに影響する機能です。</p> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("Intl")}}</li> - <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li> - <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li> - <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> - <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li> - <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> - <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li> -</ul> -</div> - -<h3 id="WebAssembly" name="WebAssembly">WebAssembly</h3> - -<div class="twocolumns"> -<ul> - <li>{{JSxRef("WebAssembly")}}</li> - <li>{{JSxRef("WebAssembly.Module")}}</li> - <li>{{JSxRef("WebAssembly.Instance")}}</li> - <li>{{JSxRef("WebAssembly.Memory")}}</li> - <li>{{JSxRef("WebAssembly.Table")}}</li> - <li>{{JSxRef("WebAssembly.CompileError")}}</li> - <li>{{JSxRef("WebAssembly.LinkError")}}</li> - <li>{{JSxRef("WebAssembly.RuntimeError")}}</li> -</ul> -</div> - -<h3 id="Other" name="Other">その他</h3> - -<ul> - <li>{{JSxRef("Functions/arguments", "arguments")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/index.md b/files/ja/web/javascript/reference/global_objects/index.md new file mode 100644 index 0000000000..196e993730 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/index.md @@ -0,0 +1,170 @@ +--- +title: 標準組み込みオブジェクト +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Landing page + - Overview + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +{{JSSidebar("Objects")}} + +本章では JavaScript の標準組み込みオブジェクトについて、それらのメソッドやプロパティと共にすべて文書化しています。 + +ここでいう「グローバルオブジェクト (global objects)」 (または標準組み込みオブジェクト) という用語を**グローバルオブジェクト** (the global object) と混同しないでください。ここで、『グローバルオブジェクト』は**グローバルスコープにあるオブジェクト**を指します。 (訳注: 日本語では複数形や the による区別ができないため、ここでは後者の **the global object** を『グローバルオブジェクト』と表記して区別します。) + +後者の『グローバルオブジェクト』自体は、グローバルスコープ中で {{JSxRef("Operators/this", "this")}} 演算子を使ってアクセスすることができます。実際、グローバルスコープは『グローバルオブジェクト』のプロパティと、もしあれば継承されたプロパティから**構成されています**。 + +グローバルスコープ内のその他のオブジェクトは、[ユーザースクリプトによって作られたり](/ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects)、ホストアプリケーションによって提供されたりします。ブラウザー上で提供されている利用可能なオブジェクトについては、[API リファレンス](/ja/docs/Web/API)で文書化されています。 + +[DOM](/en-US/docs/Web/API/Document_Object_Model) と中核の [JavaScript](/en-US/docs/Web/JavaScript) との違いについての詳しい情報は、[JavaScript 技術概説](/en-US/docs/Web/JavaScript/JavaScript_technologies_overview)をご覧ください。 + +## 標準オブジェクト (カテゴリー別) + +### 値プロパティ + +これらのグローバルプロパティは、単なる値を返します。プロパティもメソッドも持ちません。 + +- {{JSxRef("Infinity")}} +- {{JSxRef("NaN")}} +- {{JSxRef("undefined")}} +- {{JSxRef("globalThis")}} + +### 関数プロパティ + +これらのグローバル関数 (オブジェクト上ではなくグローバルに呼ばれる関数) は、呼び出し元に直接結果を返します。 + +- {{JSxRef("Global_Objects/eval", "eval()")}} +- {{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} +- {{JSxRef("Global_Objects/isFinite", "isFinite()")}} +- {{JSxRef("Global_Objects/isNaN", "isNaN()")}} +- {{JSxRef("Global_Objects/parseFloat", "parseFloat()")}} +- {{JSxRef("Global_Objects/parseInt", "parseInt()")}} +- {{JSxRef("Global_Objects/encodeURI", "encodeURI()")}} +- {{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} +- {{JSxRef("Global_Objects/decodeURI", "decodeURI()")}} +- {{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}} +- **非推奨** + + - {{Deprecated_Inline}} {{JSxRef("Global_Objects/escape", "escape()")}} + - {{Deprecated_Inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}} + +### 基本オブジェクト + +他のすべてのオブジェクトの基礎となる、主要な基本オブジェクトです。一般的なオブジェクト、関数、そしてエラーを表すオブジェクトが含まれます。 + +- {{JSxRef("Object")}} +- {{JSxRef("Function")}} +- {{JSxRef("Boolean")}} +- {{JSxRef("Symbol")}} + +### エラーオブジェクト + +エラーオブジェクトは基本オブジェクトの特殊型です。これらのオブジェクトには、基本的な {{JSxRef("Error")}} 型の他に、いくつかの特殊なエラー型があります。 + +- {{JSxRef("Error")}} +- {{JSxRef("AggregateError")}} +- {{JSxRef("EvalError")}} +- {{JSxRef("InternalError")}} +- {{JSxRef("RangeError")}} +- {{JSxRef("ReferenceError")}} +- {{JSxRef("SyntaxError")}} +- {{JSxRef("TypeError")}} +- {{JSxRef("URIError")}} + +### 数値と日付 + +数値、日付、数学計算を表す基本的なオブジェクトです。 + +- {{JSxRef("Number")}} +- {{JSxRef("BigInt")}} +- {{JSxRef("Math")}} +- {{JSxRef("Date")}} + +### テキスト処理 + +これらのオブジェクトは、文字列を表したりその操作をサポートしたりします。 + +- {{JSxRef("String")}} +- {{JSxRef("RegExp")}} + +<h3 id="Indexed_collections" name="Indexed_collections">索引付きコレクション</h3> + +これらのオブジェクトは、インデックス値で順序付けされたデータのコレクションを表します。これには、(型付けされた) 配列や配列に似た構造体も含まれます。 + +- {{JSxRef("Array")}} +- {{JSxRef("Int8Array")}} +- {{JSxRef("Uint8Array")}} +- {{JSxRef("Uint8ClampedArray")}} +- {{JSxRef("Int16Array")}} +- {{JSxRef("Uint16Array")}} +- {{JSxRef("Int32Array")}} +- {{JSxRef("Uint32Array")}} +- {{JSxRef("Float32Array")}} +- {{JSxRef("Float64Array")}} +- {{JSxRef("BigInt64Array")}} +- {{JSxRef("BigUint64Array")}} + +### キー付きコレクション + +これらのオブジェクトは、キーを使ったコレクションを表します。反復可能なコレクション ({{JSxRef("Map")}} と {{JSxRef("Set")}}) は挿入順に容易に反復処理することができます。 + +- {{JSxRef("Map")}} +- {{JSxRef("Set")}} +- {{JSxRef("WeakMap")}} +- {{JSxRef("WeakSet")}} + +### 構造化データ + +これらのオブジェクトは、構造化データバッファおよび JavaScript Object Notation (JSON) を用いて書かれたデータを表現、操作します。 + +- {{JSxRef("ArrayBuffer")}} +- {{JSxRef("SharedArrayBuffer")}} +- {{JSxRef("Atomics")}} +- {{JSxRef("DataView")}} +- {{JSxRef("JSON")}} + +### 制御抽象化オブジェクト + +制御抽象化オブジェクトは、特に非同期のコードを (例えば深く入り組んだコールバックを使用せずに) 構造化するのに役立ちます。 + +- {{JSxRef("Promise")}} +- {{JSxRef("Generator")}} +- {{JSxRef("GeneratorFunction")}} +- {{JSxRef("AsyncFunction")}} +- {{JSxRef("Global_Objects/AsyncGenerator", "AsyncGenerator")}} +- {{JSxRef("Global_Objects/AsyncGeneratorFunction", "AsyncGeneratorFunction")}} + +### リフレクション + +- {{JSxRef("Reflect")}} +- {{JSxRef("Proxy")}} + +### 国際化 + +中核の ECMAScript に言語に固有の機能を追加するものです。 + +- {{JSxRef("Intl")}} +- {{JSxRef("Global_Objects/Intl/Collator", "Intl.Collator")}} +- {{JSxRef("Global_Objects/Intl/DateTimeFormat", "Intl.DateTimeFormat")}} +- {{JSxRef("Global_Objects/Intl/ListFormat", "Intl.ListFormat")}} +- {{JSxRef("Global_Objects/Intl/NumberFormat", "Intl.NumberFormat")}} +- {{JSxRef("Global_Objects/Intl/PluralRules", "Intl.PluralRules")}} +- {{JSxRef("Global_Objects/Intl/RelativeTimeFormat", "Intl.RelativeTimeFormat")}} +- {{JSxRef("Global_Objects/Intl/Locale", "Intl.Locale")}} + +### WebAssembly + +- {{JSxRef("WebAssembly")}} +- {{JSxRef("WebAssembly.Module")}} +- {{JSxRef("WebAssembly.Instance")}} +- {{JSxRef("WebAssembly.Memory")}} +- {{JSxRef("WebAssembly.Table")}} +- {{JSxRef("WebAssembly.CompileError")}} +- {{JSxRef("WebAssembly.LinkError")}} +- {{JSxRef("WebAssembly.RuntimeError")}} + +### その他 + +- {{JSxRef("Functions/arguments", "arguments")}} diff --git a/files/ja/web/javascript/reference/global_objects/infinity/index.html b/files/ja/web/javascript/reference/global_objects/infinity/index.html deleted file mode 100644 index bbd61bc49e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/infinity/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Infinity -slug: Web/JavaScript/Reference/Global_Objects/Infinity -tags: - - JavaScript - - Property - - Reference - - プロパティ -translation_of: Web/JavaScript/Reference/Global_Objects/Infinity ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>グローバルプロパティ <code><strong>Infinity</strong></code> は無限大を表す数値です。</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Infinity</code> は<em>グローバルオブジェクト</em>のプロパティです。言い換えればグローバルスコープ内の変数です。</p> - -<p><code>Infinity</code> の初期値は {{jsxref("Number.POSITIVE_INFINITY")}} です。<code>Infinity</code> という値 (正の無限大) は他のあらゆる数より大きい数です。</p> - -<p>この値は数学的に無限大のように振る舞います。詳しくは {{jsxref("Number.POSITIVE_INFINITY")}} を参照してください。</p> - -<p>ECMAScript 5 の仕様では、<code>Infinity</code> は読み取り専用です (JavaScript 1.8.5 / Firefox 4 にて実装)。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Infinity" name="Using_Infinity">Infinity を使う</h3> - -<pre class="brush: js notranslate">console.log(Infinity ); /* Infinity */ -console.log(Infinity + 1 ); /* Infinity */ -console.log(Math.pow(10, 1000)); /* Infinity */ -console.log(Math.log(0) ); /* -Infinity */ -console.log(1 / Infinity ); /* 0 */ -console.log(1 / 0 ); /* Infinity */ -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.parseInt")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> - <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> - <li>{{jsxref("Number.isFinite")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/infinity/index.md b/files/ja/web/javascript/reference/global_objects/infinity/index.md new file mode 100644 index 0000000000..85a48243b1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/infinity/index.md @@ -0,0 +1,54 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Global_Objects/Infinity +tags: + - JavaScript + - プロパティ + - リファレンス +browser-compat: javascript.builtins.Infinity +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +{{jsSidebar("Objects")}} + +グローバルプロパティ **`Infinity`** は無限大を表す数値です。 + +{{js_property_attributes(0,0,0)}} + +{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}} + +## 解説 + +`Infinity` は*グローバルオブジェクト*のプロパティです。言い換えればグローバルスコープ内の変数です。 + +`Infinity` の初期値は {{jsxref("Number.POSITIVE_INFINITY")}} です。`Infinity` という値 (正の無限大) は他のあらゆる数より大きい数です。 + +この値は数学的に無限大のように振る舞います。詳しくは {{jsxref("Number.POSITIVE_INFINITY")}} を参照してください。 + +ECMAScript 5 の仕様では、`Infinity` は読み取り専用です (JavaScript 1.8.5 / Firefox 4 にて実装)。 + +## 例 + +### Infinity の使用 + +```js +console.log(Infinity ); /* Infinity */ +console.log(Infinity + 1 ); /* Infinity */ +console.log(Math.pow(10, 1000)); /* Infinity */ +console.log(Math.log(0) ); /* -Infinity */ +console.log(1 / Infinity ); /* 0 */ +console.log(1 / 0 ); /* Infinity */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Number.NEGATIVE_INFINITY")}} +- {{jsxref("Number.POSITIVE_INFINITY")}} +- {{jsxref("Number.isFinite")}} 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 deleted file mode 100644 index 7a98ab57cf..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -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 notranslate">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 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 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> - - <div class="blockIndicator note"> - <p><code>dateStyle</code> は <code>timeStyle</code> と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば <code>weekday</code>, <code>hour</code>, <code>month</code>, など)。</p> - </div> - </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> - <dd> - <div class="blockIndicator note"> - <p><code>timeStyle</code> は <code>dateStyle</code> と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば <code>weekday</code>, <code>hour</code>, <code>month</code>, など)。</p> - </div> - </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>fractionalSecondDigits</code></dt> - <dd> - <div class="blockIndicator note"> - <p class="noinclude">Firefox 84, Chrome 84, などで追加されました。詳しくは互換性一覧表を参照してください。</p> - </div> - 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。 - - <ul> - <li><code>0</code> (小数点以下は切り捨て)</li> - <li><code>1</code> (小数点以下は1桁で表される。例えば、 736 は <code>7</code> と書式化される。)</li> - <li><code>2</code> (小数点以下は2桁で表される。例えば、 736 は <code>73</code> と書式化される。)</li> - <li><code>3</code> (小数点以下は2桁で表される。例えば、 736 は <code>736</code> と書式化される。)</li> - </ul> - </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="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_timeStyle_and_dateStyle" name="Using_timeStyle_and_dateStyle">timeStyle と dateStyle の使用</h3> - -<pre class="brush: js notranslate">let o = new Intl.DateTimeFormat("en" , { - timeStyle: "short" -}); -console.log(o.format(Date.now())); // "13:31 AM" - -let o = new Intl.DateTimeFormat("en" , { - dateStyle: "short" -}); -console.log(o.format(Date.now())); // "07/07/20" - -let o = new Intl.DateTimeFormat("en" , { - timeStyle: "medium", - dateStyle: "short" -}); -console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"</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-constructor', 'Intl.DateTimeFormat')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.DateTimeFormat")}}</p> - -<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/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md new file mode 100644 index 0000000000..9dd69a4d94 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md @@ -0,0 +1,261 @@ +--- +title: Intl.DateTimeFormat() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +tags: + - Constructor + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.DateTimeFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat()`** コンストラクターは、言語に応じた日付と時刻の書式化を可能にする +{{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトを生成します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}} + + +## 構文 + +```js +new Intl.DateTimeFormat() +new Intl.DateTimeFormat(locales) +new Intl.DateTimeFormat(locales, options) +``` + +### 引数 + +- `locales` {{optional_inline}} + - : BCP 47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "`en-US-u-ca-buddhist`" など)。 `locales` 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。 + + - `nu` + - : 番号方式。使用できる値は "`arab`", "`arabext`", "`bali`", "`beng`", "`deva`", "`fullwide`", "`gujr`", "`guru`", "`hanidec`", "`khmr`", "`knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", "`mong`", "`mymr`", "`orya`", "`tamldec`", "`telu`", "`thai`", "`tibt`" です。 + - `ca` + - : カレンダー。使用できる値は "`buddhist`", "`chinese`", "`coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", "`hebrew`", "`indian`", "`islamic`", "`iso8601`", "`japanese`", "`persian`", "`roc`" です。 + - `hc` + - : 時制。使用できる値は "`h11`", "`h12`", "`h23`", "`h24`" です。 + +- `options` {{optional_inline}} + + - : 以下のプロパティの一部またはすべてを持つオブジェクトです。 + + - `dateStyle` + + - : `format()` が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。 + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **Note:** `dateStyle` は `timeStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。 + + - `timeStyle` + - : `format()` が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。 + + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **Note:** `timeStyle` は `dateStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。 + - `calendar` + - : 暦です。有効な値は、 "`buddhist`", "`chinese`", " `coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", " `hebrew`", "`indian`", "`islamic`", "`iso8601`", " `japanese`", "`persian`", "`roc`" です。 + - `dayPeriod` + + - : 日単位の期間の表現の仕方です。有効な値は、 "`narrow`", "`short`", " `long`" です。 + + > **Note:** + > + > - このオプションは12時間制を使用したときのみ効果があります。 + > - 多くのロケールでは幅の指定を無視して同じ文字列を使用します。 + + - `numberingSystem` + - : 命数法です。有効な値は、 "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`" です。 + - `localeMatcher` + - : 使用するロケール一致アルゴリズム。利用可能な値は "`lookup`" と "`best fit`" です。既定値は "`best fit`" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} のページをご覧ください。 + - `timeZone` + - : 使用するタイムゾーン。実装が認識しなければならない唯一の値は "`UTC`" です。既定値は、実行時の既定のタイムゾーンです。実装は、 [IANA タイムゾーンデータベース](https://www.iana.org/time-zones)のタイムゾーン名、例えば "`Asia/Shanghai`", "`Asia/Kolkata`", "`America/New_York`" なども認識できる場合があります。 + - `hour12` + - : (24 時制に対して) 12 時制を使用するかどうか。可能な値は `true` と `false` です。既定ではロケールに依存します。このオプションは `hc` 言語タグや `hourCycle` オプションと一緒に使用された場合、これらを上書きします。 + - `hourCycle` + - : 使用する時の周期です。利用可能な値は "`h11`", "`h12`", "`h23`", "`h24`" です。このオプションは `hc` 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は `hour12` オプションが優先されます。 + - `formatMatcher` + - : 使用する書式一致アルゴリズム。可能な値は "`basic`" と "`best fit`" です。既定値は "`best fit`" です。このプロパティの使用方法については、以下の項を参照してください。 + + 以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。 + + - `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second` + - `weekday`, `year`, `month`, `day` + - `year`, `month`, `day` + - `year`, `month` + - `month`, `day` + - `hour`, `minute`, `second` + - `hour`, `minute` + + 実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 `formatMatcher` プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。[完全に定義された "`basic`" アルゴリズム](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher)と、実装に依存した "`best fit`" アルゴリズムです。 + + - `weekday` + + - : 曜日の表現です。利用可能な値は以下の通りです。 + - "`long`" (例 `Thursday`) + - "`short`" (例 `Thu`) + - "`narrow`" (例 `T`)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 `Tuesday` の narrow 形式も `T` です)。 + + - `era` + + - : 時代の表現です。利用可能な値は以下の通りです。 + + - "`long`" (例 `Anno Domini`, 紀元) + - "`short`" (例 `AD`) + - "`narrow`" (例 `A`) + + - `year` + + - : 年の表現です。利用可能な値は以下の通りです。 + + - "`numeric`" (例 `2012`) + - "`2-digit`" (例 `12`) + + - `month` + + - : 月の表現です。利用可能な値は以下の通りです。 + - "`numeric`" (例 `2`) + - "`2-digit`" (例 `02`) + - "`long`" (例 `March`) + - "`short`" (例 `Mar`) + - "`narrow`" (例 `M`)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 `May` の narrow 形式も `M` です)。 + + - `day` + + - : 日の表現です。利用可能な値は以下の通りです。 + + - "`numeric`" (例 `1`) + - "`2-digit`" (例 `01`) + + - `hour` + - : 時の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `minute` + - : 分の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `second` + - : 秒の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `fractionalSecondDigits` + - : 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。 + + - `0` (小数点以下は切り捨て) + - `1` (小数点以下は1桁で表される。例えば、 736 は `7` と書式化される。) + - `2` (小数点以下は2桁で表される。例えば、 736 は `73` と書式化される。) + - `3` (小数点以下は2桁で表される。例えば、 736 は `736` と書式化される。) + + - `timeZoneName` + + - : タイムゾーン名の表現です。利用可能な値は以下の通りです。 + + - "`long`" ローカライズされた長い形式 (例 `Pacific Standard Time`, `Nordamerikanische Westküsten-Normalzeit`) + - "`short`" ローカライズされた短い形式 (例 `PST`, `GMT-8`) + - "`shortOffset`" ローカライズされた短い GMT 形式 (例 `GMT-8`) + - "`longOffset`" ローカライズされた長い GMT 形式 (例 `GMT-0800`) + - "`shortGeneric`" 一般的な場所を指定しない短い形式 (例 `PT`, `Los Angeles Zeit`). + - "`longGeneric`" 一般的な場所を指定しない長い形式 (例 `Pacific Time`, `Nordamerikanische Westküstenzeit`) + + > **Note:** タイムゾーンの表示は、必要な文字列が利用できない場合、別の形式にフォールバックすることがあります。例えば、場所を指定しない形式では、 "Pacific Time" のように特定の国や都市の場所を指定せずにタイムゾーンを表示する必要がありますが、 "Los Angeles Time" のようなタイムゾーンにフォールバックする場合があります。 + + それぞれの日付や時刻の部分のプロパティの既定値は {{jsxref("undefined")}} ですが、すべての部分のプロパティが {{jsxref("undefined")}} であった場合、 `year`, `month`, `day` は "`numeric`" であると想定されます。 + +## 例 + +### DateTimeFormat の使用 + +ロケールを指定しない基本的な使用方法では、 `DateTimeFormat` は既定のロケールとオプションを使用します。 + +```js +let 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) +``` + +### timeStyle と dateStyle の使用 + +```js +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "short" +}); +console.log(o.format(Date.now())); // "13:31 AM" + +let o = new Intl.DateTimeFormat("en" , { + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20" + +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "medium", + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM" +``` + +### dayPeriod の使用 + +`dayPeriod` オプションを使用して、1日の時間帯 (「朝」、「夜」、「正午」など) を表す文字列を出力します。なお、これは 12 時間制の書式でのみ有効であり、 (`hourCycle: 'h12'`)、多くのロケールでは `dayPeriod` の値に関係なく同じ文字列が出力されます。 + +```js +let date = Date.UTC(2012, 11, 17, 4, 0, 42); + +console.log(new Intl.DateTimeFormat('en-GB', { hour: 'numeric', hourCycle: 'h12', +dayPeriod: 'short', timeZone: 'UTC' }).format(date)); +// > 4 at night" (same formatting in en-GB for all dayPeriod values) + +console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', + dayPeriod: 'narrow', timeZone: 'UTC' }).format(date)); +// > "4 mat." (same output in French for both narrow/short dayPeriod) + +console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', + dayPeriod: 'long', timeZone: 'UTC' }).format(date)); +// > "4 du matin" +``` + +### timeZoneName の使用 + +`timeZoneName` を使用して、タイムゾーンの文字列 ("GMT", "Pacific Time", など) を出力します。 + +```js +var date = Date.UTC(2021, 11, 17, 3, 0, 42); +const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric'] + +for (const zoneName of timezoneNames) { + // Do something with currentValue + var formatter = new Intl.DateTimeFormat('en-US', { + timeZone: 'America/Los_Angeles', + timeZoneName: zoneName, + }); + console.log(zoneName + ": " + formatter.format(date) ); +} + +// expected output: +// > "short: 12/16/2021, PST" +// > "long: 12/16/2021, Pacific Standard Time" +// > "shortOffset: 12/16/2021, GMT-8" +// > "longOffset: 12/16/2021, GMT-08:00" +// > "shortGeneric: 12/16/2021, PT" +// > "longGeneric: 12/16/2021, Pacific Time" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Global_Objects/Intl", "Intl")}} 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 deleted file mode 100644 index a7606b00f0..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -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> - -<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/format/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md new file mode 100644 index 0000000000..2cd8c9fae8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md @@ -0,0 +1,101 @@ +--- +title: Intl.DateTimeFormat.prototype.format() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.format +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +--- +{{JSRef}} + +The **`Intl.DateTimeFormat.prototype.format()`** メソッドは、この {{jsxref("Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}} + + +## 構文 + +```js +format(date) +``` + +### 引数 + +- `date` + - : 整形する日付です。 + +## 解説 + +`format` ゲッター関数は、この {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。 + +## 例 + +### format の使用 + +`format` ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。 + +```js +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." +``` + +### format と map の使用 + +`format` ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。 + +```js +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" +``` + +### 書式化された日付値を固定値と比較することは避ける + +ほとんどの場合、 `format()` が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。 + +このことから、 `format()` の結果と固定値を比較することができると期待してはいけません。 + +```js example-bad +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 +``` + +> **Note:** この [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)に詳細や例があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} 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 deleted file mode 100644 index 1722354d9e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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> と <strong><code>options</code></strong> に基づいて書式化します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.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.formatRange(<var>startDate, endDate</var>)</code></pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Basic_formatRange_usage" name="Basic_formatRange_usage">基本的な formatRange の使用</h3> - -<p>このメソッドは2つの {{jsxref("Date")}} を受け取り、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された <code>locale</code> と <code>options</code> に基づいて日付の範囲を書式化します。</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)); -let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0)); -// > 'Wed, 10 Jan 2007 10:00:00 GMT' -// > 'Wed, 10 Jan 2007 11:00:00 GMT' -// > '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)); -// > '1/10/07, 10:00 AM' -// > '1/10/07, 10:00 – 11:00 AM' -// > '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)); -// > 'Jan 10, 2007' -// > 'Jan 10, 2007' -// > 'Jan 10 – 20, 2007' -</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.formatRange', 'formatRange()')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRange")}}</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/formatrange/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md new file mode 100644 index 0000000000..0c14478615 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md @@ -0,0 +1,81 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRange() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRange +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatRange()`** は、 {{jsxref("Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された **`locale`** と **`options`** に基づいて、もっとも簡明な方法で日付の範囲を書式化します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", + "taller")}} + + +## 構文 + +```js +formatRange(startDate, endDate) +``` + +## 例 + +### 基本的な formatRange の使用 + +このメソッドは 2 つの {{jsxref("Date")}} を受け取り、 {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された `locale` と `options` に基づいて日付の範囲を書式化します。 + +```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)); +// > 'Wed, 10 Jan 2007 10:00:00 GMT' +// > 'Wed, 10 Jan 2007 11:00:00 GMT' +// > '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)); +// > '1/10/07, 10:00 AM' +// > '1/10/07, 10:00 – 11:00 AM' +// > '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)); +// > 'Jan 10, 2007' +// > 'Jan 10, 2007' +// > 'Jan 10 – 20, 2007' +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} 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 deleted file mode 100644 index be4d8a0bc4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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)); -// > 'Wed, 10 Jan 2007 10:00:00 GMT' -// > 'Wed, 10 Jan 2007 11:00:00 GMT' - -let fmt = new Intl.DateTimeFormat("en", { - hour: 'numeric', - minute: 'numeric' -}); - -console.log(fmt.formatRange(date1, date2)); -// > '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> - -<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/formatrangetoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md new file mode 100644 index 0000000000..034909ed3c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md @@ -0,0 +1,78 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRangeToParts() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRangeToParts +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatRangeToParts()`** メソッドは、 {{jsxref("Intl.DateTimeFormat")}} フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", + "taller")}} + + +## 構文 + +```js +formatRangeToParts(startDate, endDate) +``` + +## 例 + +### 基本的な formatRangeToParts の使い方 + +このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表す*ロケール特有*のトークンを含む {{jsxref("Array")}} オブジェクトを返します。 + +> **Note:** 返値は現在のロケールで表示されるので、以下のものとは異なる可能性があります。 + +```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)); +// > 'Wed, 10 Jan 2007 10:00:00 GMT' +// > 'Wed, 10 Jan 2007 11:00:00 GMT' + +let fmt = new Intl.DateTimeFormat("en", { + hour: 'numeric', + minute: 'numeric' +}); + +console.log(fmt.formatRange(date1, date2)); +// > '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" } +// ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} +- {{jsxref("Intl.DateTimeFormat")}} 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 deleted file mode 100644 index 04e140d0e8..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -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}) => { - switch (type) { - case 'dayPeriod': return `<b>${value}</b>`; - default : return value; - } -}).reduce((string, part) => 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 <b>AM</b>"</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> -<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/formattoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md new file mode 100644 index 0000000000..cbe6256671 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md @@ -0,0 +1,238 @@ +--- +title: Intl.DateTimeFormat.prototype.formatToParts() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatToParts +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatToParts()`** メソッドは、ロケールを考慮した {{jsxref("Intl.DateTimeFormat")}} フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。 + +## 構文 + +```js +formatToParts(date) +``` + +### 引数 + +- `date` {{optional_inline}} + - : 書式化する日付。 + +### 返値 + +{{jsxref("Array")}} で、書式化された日付のパーツを含むオブジェクトの配列です。 + +## 解説 + +`formatToParts()` メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。`formatToParts()` メソッドが返却する構造は、このようになります。 + +```js +[ + { type: 'day', value: '17' }, + { type: 'weekday', value: 'Monday' } +] +``` + +渡される可能性がある type は以下のとおりです。 + +- day + - : 日付として使用される文字列。たとえば、 "`17`"。 +- dayPeriod + - : 日付期間として使用される文字列。たとえば、 "`AM`", "`PM`", "`in the morning`", "`noon`" など。 +- era + - : 時代として使用される文字列。たとえば、"`BC`" や "`AD`"。 +- fractionalSecond + - : 小数点以下の秒として使用される文字列です。例えば "`0`" や "`00`" や "`000`" です。 +- hour + - : 時刻として使用される文字列。たとえば "`3`" や "`03`"。 +- literal + - : 日付や時刻の区切りとして使用される文字列。たとえば "`/`"、"`,`"、"`o'clock`"、"`de`"。 +- minute + - : 分として使用される文字列。たとえば、"`00`"。 +- month + - : 月として使用される文字列。たとえば、"`12`"。 +- relatedYear + - : カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "`2019`" です。 +- second + - : 秒として使用される文字列。たとえば、"`07`" や "`42`"。 +- timeZoneName + - : タイムゾーン名として使用される文字列。たとえば、"`UTC`"。 +- weekday + - : 曜日として使用される文字列。たとえば、"`M`" や "`Monday`"、"`Montag`"。 +- year + - : 年として使用される文字列。たとえば、"`2012`" や "`96`"。 +- yearName + - : 関連するコンテキストで yearName に使用される文字列、例えば "`geng-zi`" など。 + +## ポリフィル + +この機能のポリフィルは、[提案リポジトリー](https://github.com/zbraniecki/proposal-intl-formatToParts)から利用できます。 + +## 例 + +`DateTimeFormat` は、直接操作できないローカライズされた透過的でない文字列を出力します。 + +```js +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" +``` + +しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 `formatToParts` メソッドは、文字列を部品単位で提供することで、 `DateTimeFormat` フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。 + +```js +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' } +] +``` + +これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{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.join()")}} などを使用しています。 + +```js +var dateString = formatter.formatToParts(date).map(({type, value}) => { + switch (type) { + case 'dayPeriod': return `<b>${value}</b>`; + default : return value; + } +}).join(''); +``` + +これにより、 `formatToParts()` メソッドを使用する際に、日の部分が太字になります。 + +```js +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 <b>AM</b>" +``` + +### 名前付きの年と混合カレンダー + +名前付きの年を使用している暦もあります。例えば、中国やチベットの暦では、 60 年周期の[干支](https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF)を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 `formatToParts()` の結果は、通常は年が存在するはずなのに、年の項目ではなく、 4 桁のグレゴリオ暦の年を含む `relatedYear` の項目を含むことになります。バッグの中の項目を (任意の値で) `year` に設定すると、年と `yearName` グレゴリオ暦の `relatedYear` の両方が得られます。 + +```js +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' } +] +``` + +`year` オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には `relatedYear` のみが含まれます。 + +```js +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' } +] +``` + +`year` を出力したい場合は、 `.format()` は一般的にこれらを並べて表示することができます。 + +```js +let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"}); +df.format(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// 返値 +2012壬辰年 +``` + +これにより、ロケールとカレンダーを両方の `format` で混在させることも可能になります。 + +```js +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) +``` + +および `formatToParts` の場合 + +```js +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' } +] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} 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 deleted file mode 100644 index 9b18a60a81..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Intl.DateTimeFormat -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -tags: - - Class - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Localization - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -browser-compat: javascript.builtins.Intl.DateTimeFormat ---- -<div>{{JSRef}}</div> - -<p><strong><code>Intl.DateTimeFormat</code></strong> オブジェクトは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのコンストラクターです。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div> - -<h2 id="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}</dt> - <dd>新しい <code>DateTimeFormat</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Static_methods">静的メソッド</h2> - -<dl> - <dt>{{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt> - <dd>指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。</dd> -</dl> - -<h2 id="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}</dt> - <dd>ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> - <dd>オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> - <dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。</dd> - <dt>{{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt> - <dd>このメソッドは 2 つの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。</dd> - <dt>{{jsxref("Intl/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">例</h2> - -<h3 id="Using_DateTimeFormat">DateTimeFormat の使用</h3> - -<p>基本的に、ロケールを指定せずに使用すると、 <code>DateTimeFormat</code> は既定のロケールとオプションを使用します。</p> - -<pre class="brush: js">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">locales の使用</h3> - -<p>この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 <code>locales</code> 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。</p> - -<pre class="brush: js">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">options の使用</h3> - -<p>日付と時刻の書式は <code>options</code> 引数を使用してカスタマイズできます。</p> - -<pre class="brush: js">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; //number digits for fraction-of-seconds -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">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="Polyfill">ポリフィル</h2> - -<p><a href="https://formatjs.io/docs/polyfills/intl-datetimeformat">formatjs Intl.DateTimeFormat polyfill</a></p> - -<h2 id="Specifications">仕様書</h2> - -{{Specifications}} - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat}}</div> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Intl")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md new file mode 100644 index 0000000000..95faa9574f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -0,0 +1,179 @@ +--- +title: Intl.DateTimeFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +tags: + - Class + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +browser-compat: javascript.builtins.Intl.DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat`** オブジェクトは、言語に応じた日付と時刻の書式化を可能にします。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}} + + +## コンストラクター + +- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}} + - : 新しい `DateTimeFormat` オブジェクトを生成します。 + +## 静的メソッド + +- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}} + - : 指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。 + +## インスタンスメソッド + +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} + - : ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。 +- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}} + - : オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。 +- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}} + - : ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。 +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} + - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。 +- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}} + - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。 + +## 例 + +### DateTimeFormat の使用 + +基本的に、ロケールを指定せずに使用すると、 `DateTimeFormat` は既定のロケールとオプションを使用します。 + +```js +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) +``` + +### locales の使用 + +この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 `locales` 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。 + +```js +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)); +// → "١٩/١٢/٢٠١٢" + +// 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" +``` + +### options の使用 + +日付と時刻の書式は `options` 引数を使用してカスタマイズできます。 + +```js +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; //number digits for fraction-of-seconds +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 +``` + +The used calendar and numbering formats can also be set independently via `options` arguments: + +```js +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) +``` + +## ポリフィル + +[formatjs Intl.DateTimeFormat polyfill](https://formatjs.io/docs/polyfills/intl-datetimeformat) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl")}} 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 deleted file mode 100644 index c59e62e79c..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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> -<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/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md new file mode 100644 index 0000000000..6ceb4c773f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md @@ -0,0 +1,75 @@ +--- +title: Intl.DateTimeFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.resolvedOptions +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.resolvedOptions()`** メソッドは、この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールや日付と時刻の整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}} + + +## 構文 + +```js +resolvedOptions() +``` + +### 返値 + +この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。 + +## 解説 + +返されるオブジェクトには以下のプロパティがあります。 + +- `locale` + - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。 +- `calendar` + - : 例: "gregory" +- `numberingSystem` + - : Unicode 拡張キーの `"ca"` および `"nu"` で要求された値、または既定値が入ります。 +- `timeZone` + - : `options` 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。 +- `hour12` + - : `options` 引数の同名のプロパティで要求された値、または既定値が入ります。 +- `weekday`, `era`, `year`, `month`, `day`, `hour`, `minute`, `second`, `timeZoneName` + - : `options` 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。 + +## 例 + +### resolvedOptions メソッドの使用 + +```js +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" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} 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 deleted file mode 100644 index 0108a95679..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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}}</div> - -<p><strong><code>Intl.DateTimeFormat.supportedLocalesOf()</code></strong> メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}}</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">Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>locales</var></code></dt> - <dd>BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 <code>locales</code> 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。</dd> - <dt><code><var>options</var></code></dt> - <dd> - <p>省略可能です。以下のプロパティを持つことがあるオブジェクトです。</p> - - <dl> - <dt><code>localeMatcher</code></dt> - <dd>使用するロケールの一致アルゴリズムです。指定可能な値は <code>lookup</code> および <code>best fit</code> で、既定値は <code>best fit</code> です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。</dd> - </dl> - </dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>locales</code> で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_supportedLocalesOf" name="Using_supportedLocalesOf">supportedLocalesOf() の使用</h3> - -<p>日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 <code>supportedLocalesOf</code> はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの <code>lookup</code> アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 <code>best fit</code> のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。</p> - -<pre class="brush: js notranslate">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="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.supportedlocalesof', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}</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.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md new file mode 100644 index 0000000000..4c5e19d610 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md @@ -0,0 +1,71 @@ +--- +title: Intl.DateTimeFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +--- +{{JSRef}} + +**`Intl.DateTimeFormat.supportedLocalesOf()`** メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}} + + +## 構文 + +```js +Intl.DateTimeFormat.supportedLocalesOf(locales) +Intl.DateTimeFormat.supportedLocalesOf(locales, options) +``` + +### 引数 + +- `locales` + - : BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 `locales` 引数の一般的な形式については、 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページを参照してください。 +- `options` {{optional_inline}} + + - : 省略可能です。以下のプロパティを持つことがあるオブジェクトです。 + + - `localeMatcher` + - : 使用するロケールの一致アルゴリズムです。指定可能な値は `lookup` および `best fit` で、既定値は `best fit` です。このオプションの詳細は、 {{jsxref("Intl", "Intl", "#Locale_negotiation", 1)}} のページを参照してください。 + +### 返値 + +指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。 + +## 解説 + +`locales` で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。 + +## 例 + +### supportedLocalesOf() の使用 + +日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 `supportedLocalesOf` はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの `lookup` アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 `best fit` のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。 + +```js +const locales = ['ban', 'id-u-co-pinyin', 'de-ID']; +const options = { localeMatcher: 'lookup' }; +console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', ')); +// → "id-u-co-pinyin, de-ID" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md new file mode 100644 index 0000000000..1e52948607 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md @@ -0,0 +1,71 @@ +--- +title: Intl.ListFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions +tags: + - Internationalization + - Intl + - JavaScript + - ListFormat + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.ListFormat.resolvedOptions +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions +--- +{{JSRef}} + +**`Intl.ListFormat.prototype.resolvedOptions()`** メソッドは、現在の {{jsxref("Intl.ListFormat")}} オブジェクトの構築時に計算されたロケールとスタイル整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +## 構文 + +```js +listFormat.resolvedOptions() +``` + +### 返値 + +指定された {{jsxref("Intl.ListFormat")}} オブジェクトの構築時に計算されたロケールと整形オプションを反映したプロパティを持つオブジェクトです。 + +## 解説 + +`resolvedOptions()` から返されるオブジェクトには、以下のプロパティがあります。 + +- `locale` + - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。 +- `style` + - : コンストラクターの `options` 引数の中でこのプロパティに指定された値、または既定値 ("`long`") がです。この値は、"`long`"、"`short`"、"`narrow`" のいずれかです。 +- `type` + - : コンストラクターの `options` 引数の中でこのプロパティに指定された値、または既定値 ("`conjunction`") がです。この値は、"`conjunction`"、"`disjunction`"、"`unit`" のいずれかです。 + +## 例 + +## resolvedOptions の使用 + +```js +const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" }); + +const usedOptions = de.resolvedOptions(); +console.log(usedOptions.locale); // "de-DE" +console.log(usedOptions.style); // "short" +console.log(usedOptions.type); // "conjunction" (the default value) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.ListFormat")}} +- {{jsxref("Intl/NumberFormat/resolvedOptions", + "Intl.NumberFormat.prototype.resolvedOptions()")}} +- {{jsxref("Intl/Collator/resolvedOptions", + "Intl.Collator.prototype.resolvedOptions()")}} +- {{jsxref("Intl/DateTimeFormat/resolvedOptions", + "Intl.DateTimeFormat.prototype.resolvedOptions()")}} +- {{jsxref("Intl/PluralRules/resolvedOptions", + "Intl.PluralRules.prototype.resolvedOptions()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html deleted file mode 100644 index 1d7cad466a..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Intl.Locale.prototype.maximize() -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize -tags: - - Internationaliztion - - Intl - - JavaScript - - Method - - Prototype - - Reference - - メソッド - - 国際化 -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.maximize()</code></strong> メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.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"><code><em>locale</em>.maximize()</code></pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>{{jsxref("Locale", "Locale")}} インスタンスで、 <code>baseName</code> プロパティが、 <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Add Likely Subtags</a> アルゴリズムが <em>{{jsxref("Locale/baseName", "locale.baseName")}}</em> に対して実行された結果になったものを返します。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 <code>maximize()</code> メソッドを介して JavaScript プログラマーに提供されています。 <code>maximize()</code> は、<a href="https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions" rel="noopener">言語識別子</a>を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 <code>maximize()</code> メソッドの影響を受けません。これらのサブタグの例としては、 {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}}, {{jsxref("Locale/numeric", "Locale.numeric")}} などがあります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">let myLocale = new Intl.Locale("ja", {hourCycle: "h24", calendar: "gregory"}); -console.log(myLocale.baseName); // "ja" と表示 -console.log(myLocale.toString()); // "ja-u-ca-gregory-hc-h24" と表示 -let myLocMaximized = myLocale.maximize(); - -// "ja-Jpan-JP"。 "Jpan" と "JP" タグが追加されます。 -// これは、日本語が主に漢字かな交じり文 (Jpan) で書かれ、また主に日本 (JP) で話されているためです。 -console.log(myLocMaximized.baseName); - -// "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示します。 -// なお、拡張タグ ("-u" 以降) はそのまま残ります。 -console.log(myLocMaximized.toString()); </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.Locale.prototype.maximize')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.maximize")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - <li>{{jsxref("Locale/baseName", "Locale.baseName")}}</li> - <li><a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Unicode's Likely Subtags spec</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md new file mode 100644 index 0000000000..aae9be3eca --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/maximize/index.md @@ -0,0 +1,68 @@ +--- +title: Intl.Locale.prototype.maximize() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize +tags: + - 国際化 + - Intl + - JavaScript + - Locale + - メソッド + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.Locale.maximize +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize +--- +{{JSRef}} + +**`Intl.Locale.prototype.maximize()`** メソッドは、既存の値に基づいてロケールの言語、表記法、地域の最も可能性の近い値を取得します。 + +{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}} + + +## 構文 + +```js +maximize() +``` + +### 返値 + +{{jsxref("Intl/Locale", "Locale")}} インスタンスのうち、 `baseName` プロパティが [Add Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) アルゴリズムを _{{jsxref("Intl/Locale/baseName", "locale.baseName")}}_.に対して実行した結果になっているものを返します。 + +## 解説 + +不完全な言語識別子をもとに、最も可能性の高いロケール言語識別子サブタグを識別できると便利な場合があります。 Add Likely Subtags アルゴリズムはこの機能を提供してくれます。例えば、言語識別子 "en" が与えられた場合、アルゴリズムは "en-Latn-US" を返すことになります。英語はラテン文字でしか書けませんし、世界最大の英語圏の国であるアメリカで使われている可能性が高いからです。この機能は、 `maximize()` メソッドを介して JavaScript プログラマーに提供されています。 `maximize()` は、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグのうち言語サブ、表記法、地域の各サブタグにのみ影響を与えます。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `maximize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。</p> + +## 例 + +### maximize の使用 + +```js +let myLocale = new Intl.Locale("ja", {hourCycle: "h24", calendar: "gregory"}); +console.log(myLocale.baseName); // "ja" と表示 +console.log(myLocale.toString()); // "ja-u-ca-gregory-hc-h24" と表示 +let myLocMaximized = myLocale.maximize(); + +// "ja-Jpan-JP"。 "Jpan" と "JP" タグが追加されます。 +// これは、日本語が主に漢字かな交じり文 (Jpan) で書かれ、また主に日本 (JP) で話されているためです。 +console.log(myLocMaximized.baseName); + +// "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示します。 +// なお、拡張タグ ("-u" 以降) はそのまま残ります。 +console.log(myLocMaximized.toString()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Locale")}} +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}} +- [Unicode's Likely + Subtags spec](https://www.unicode.org/reports/tr35/#Likely_Subtags) diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html deleted file mode 100644 index b83e495348..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Intl.Locale.prototype.minimize() -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize -tags: - - Internationalization - - Intl - - JavaScript - - Method - - Prototype - - Reference - - 国際化 -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.minimize()</code></strong> メソッドは、 {{jsxref("Locale/maximize", "Locale.maximize()")}} を呼び出したことで追加されるロケールに関する情報を削除しようとします。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.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"><code><em>locale</em>.minimize()</code></pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>{{jsxref("Locale", "Locale")}} インスタンスで、 <code>baseName</code> プロパティが、 <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Remove Likely Subtags</a> アルゴリズムが <code><em>locale.baseName</em></code> に対して実行された結果になったものを返します。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>このメソッドは {{jsxref("Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には <code>baseName</code> の内容) から言語、文字体系、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の文字体系だからです。 <code>minimize()</code> が影響を与えるのは、<a href="https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions">言語識別子</a>を構成する主要なサブタグである言語、文字体系、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 <code>minimize()</code> メソッドの影響を受けません。これらのサブタグの例としては、 {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}}, {{jsxref("Locale/numeric", "Locale.numeric")}} などがあります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); -console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 -console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 - -let myLocMinimized = myLocale.minimize(); - -// "ja" のみを表示します。日本語は主に漢字かな交じり文 (Jpan) で -// 表記され、またほとんど日本で話されているためです。 -console.log(myLocMinimized.baseName); - -// "ja-u-ca-gregory-hc-h24" と表示します。 -// なお、拡張タグ ("-u" 以降) はそのまま残ります。 -console.log(myLocMinimized.toString());</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.Locale.prototype.minimize')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.minimize")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md new file mode 100644 index 0000000000..db7cd28fd1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/minimize/index.md @@ -0,0 +1,66 @@ +--- +title: Intl.Locale.prototype.minimize() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize +tags: + - 国際化 + - Intl + - JavaScript + - メソッド + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.Locale.minimize +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize +--- +{{JSRef}} + +**`Intl.Locale.prototype.minimize()`** メソッドは、 {{jsxref("Intl/Locale/maximize", "Locale.maximize()")}} を呼び出したことで追加されるロケールに関する情報を削除しようとします。 + +{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html", "taller")}} + + +## 構文 + +```js +minimize() +``` + +### 返値 + +{{jsxref("Intl/Locale", "Locale")}} インスタンスで、 `baseName` プロパティが、 [Remove Likely Subtags](https://www.unicode.org/reports/tr35/#Likely_Subtags) アルゴリズムを _{{jsxref("Intl/Locale/baseName", "locale.baseName")}}_ に対して実行された結果になったものを返します。 + +## 解説 + +このメソッドは {{jsxref("Intl/Locale/maximize", "maximize()")}} の逆の処理を行い、ロケールの言語識別子 (基本的には `baseName` の内容) から言語、表記法、地域のサブタグをすべて削除します。これは、言語識別子の中に余分なサブタグがある場合に便利です。例えば "en-Latn" は "en" に簡略化できます。英語では "Latn" が書き言葉に使われる唯一の表記法だからです。 `minimize()` が影響を与えるのは、[言語識別子](https://www.unicode.org/reports/tr35/#Language_Locale_Field_Definitions)を構成する主要なサブタグである言語、表記法、地域の各サブタグのみです。ロケール識別子の "-u" の後にあるその他のサブタグは拡張サブタグと呼ばれ、 `minimize()` メソッドの影響を受けません。これらのサブタグの例としては、{{jsxref("Intl/Locale/hourCycle", "Locale.hourCycle")}}、{{jsxref("Intl/Locale/calendar", "Locale.calendar")}}、{{jsxref("Intl/Locale/numeric", "Locale.numeric")}} などがあります。 + +## 例 + +### minimize の使用 + +```js +let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); +console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 +console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 + +let myLocMinimized = myLocale.minimize(); + +// "ja" のみを表示します。日本語は主に漢字かな交じり文 (Jpan) で +// 表記され、またほとんど日本で話されているためです。 +console.log(myLocMinimized.baseName); + +// "ja-u-ca-gregory-hc-h24" と表示します。 +// なお、拡張タグ ("-u" 以降) はそのまま残ります。 +console.log(myLocMinimized.toString()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Locale")}} +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html deleted file mode 100644 index 4fdc4acec8..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Intl.Locale.prototype.toString() -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString -tags: - - Intl - - JavaScript - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.toString()</code></strong> は、このロケールの完全な<a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">ロケール識別子文字列</a>を返します。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.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"><code><em>locale</em>.toString()</code></pre> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>この<em>ロケール</em>の Unicode ロケール識別子文字列です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Locale</code> オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、文字体系、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 <code>Locale</code> オブジェクトが JavaScript に導入されました。 Locale オブジェクトの <code>toString</code> メソッドをコールすると、そのロケールの識別子文字列を返します。 <code>toString</code> メソッドを使用すると、 <code>Locale</code> のインスタンスが既存の <code>Intl</code> のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<pre class="brush: js">let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); -console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 -console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 -</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.Locale.prototype.toString')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale.toString")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Locale", "Intl.Locale")}}</li> - <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md new file mode 100644 index 0000000000..f62794a64c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/tostring/index.md @@ -0,0 +1,58 @@ +--- +title: Intl.Locale.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString +tags: + - Internationalization + - Intl + - JavaScript + - Locale + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.Locale.toString +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString +--- +{{JSRef}} + +**`Intl.Locale.prototype.toString()`** は、このロケールの完全な[ロケール識別子文字列](https://www.unicode.org/reports/tr35/#Unicode_locale_identifier)を返します。 + +{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}} + +<!-- The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. --> + +## 構文 + +```js +toString() +``` + +### 返値 + +この*ロケール*の Unicode ロケール識別子文字列です。 + +## 解説 + +`Locale` オブジェクトは、概念的な Unicode ロケール識別子を JavaScript で表現したものです。特定のロケールに関する情報 (言語、表記法、カレンダーの種類など) を、ロケール識別子文字列で符号化することができます。これらのロケール識別子をより簡単に扱えるようにするために、 `Locale` オブジェクトが JavaScript に導入されました。 Locale オブジェクトの `toString` メソッドをコールすると、そのロケールの識別子文字列を返します。 `toString` メソッドを使用すると、 `Locale` のインスタンスが既存の `Intl` のコンストラクターへの引数ととして JSON におけるシリアライズにおいて、またはその他のコンテキストで正確な文字列表現が有用な場合に提供することができます。 + +## 例 + +### toString の使用 + +```js +let myLocale = new Intl.Locale("ja-Jpan-JP", {hourCycle: "h24", calendar: "gregory"}); +console.log(myLocale.baseName); // "ja-Jpan-JP" と表示 +console.log(myLocale.toString()); // "ja-Jpan-JP-u-ca-gregory-hc-h24" と表示 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.Locale")}} +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.baseName")}} diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html deleted file mode 100644 index d2d7ba68e7..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Object.prototype.propertyIsEnumerable() -slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable -tags: - - JavaScript - - Method - - Object - - Prototype - - プロトタイプ - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable ---- -<div>{{JSRef}}</div> - -<p> <code><strong>propertyIsEnumerable()</strong></code> メソッドは、指定されたプロパティが列挙可能で、オブジェクト自身のプロパティであることを示す Boolean を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.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"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>prop</code></dt> - <dd>調べたいプロパティの名前。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定されたプロパティが列挙可能であり、かつオブジェクト自体のプロパティであるかどうかを示す {{jsxref("Boolean")}} 。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>すべてのオブジェクトは <code>propertyIsEnumerable</code> メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは <code>false</code> を返します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="A_basic_use_of_propertyIsEnumerable" name="A_basic_use_of_propertyIsEnumerable"><code>propertyIsEnumerable</code> の基本的な使い方</h3> - -<p>以下の例はオブジェクトと配列での <code>propertyIsEnumerable</code> の使い方を示しています。</p> - -<pre class="brush: js">var o = {}; -var a = []; -o.prop = 'is enumerable'; -a[0] = 'is enumerable'; - -o.propertyIsEnumerable('prop'); // true を返す -a.propertyIsEnumerable(0); // true を返す -</pre> - -<h3 id="User-defined_vs._built-in_objects" name="User-defined_vs._built-in_objects">ユーザー定義オブジェクトと組み込みオブジェクト</h3> - -<p>以下の例はユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。</p> - -<pre class="brush: js">var a = ['is enumerable']; - -a.propertyIsEnumerable(0); // true を返す -a.propertyIsEnumerable('length'); // false を返す - -Math.propertyIsEnumerable('random'); // false を返す -this.propertyIsEnumerable('Math'); // false を返す -</pre> - -<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3> - -<pre class="brush: js">var a = []; -a.propertyIsEnumerable('constructor'); // false を返す - -function firstConstructor() { - this.property = 'is not enumerable'; -} - -firstConstructor.prototype.firstMethod = function() {}; - -function secondConstructor() { - this.method = function method() { return 'is enumerable'; }; -} - -secondConstructor.prototype = new firstConstructor; -secondConstructor.prototype.constructor = secondConstructor; - -var o = new secondConstructor(); -o.arbitraryProperty = 'is enumerable'; - -o.propertyIsEnumerable('arbitraryProperty'); // true を返す -o.propertyIsEnumerable('method'); // true を返す -o.propertyIsEnumerable('property'); // false を返す - -o.property = 'is enumerable'; - -o.propertyIsEnumerable('property'); // true を返す - -// これらはすべて false を返します。これは、 (最後の2つは for-in で -// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない -// プロトタイプであるためです。 -o.propertyIsEnumerable('prototype'); // false を返す (as of JS 1.8.1/FF3.6) -o.propertyIsEnumerable('constructor'); // false を返す -o.propertyIsEnumerable('firstMethod'); // false を返す -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">列挙可能性とプロパティの所有権</a></li> - <li>{{jsxref("Statements/for...in", "for...in")}}</li> - <li>{{jsxref("Object.keys()")}}</li> - <li>{{jsxref("Object.defineProperty()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md new file mode 100644 index 0000000000..c2b09a9921 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/propertyisenumerable/index.md @@ -0,0 +1,120 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +tags: + - JavaScript + - メソッド + - Object + - プロトタイプ +browser-compat: javascript.builtins.Object.propertyIsEnumerable +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +{{JSRef}} + +**`propertyIsEnumerable()`** メソッドは、指定されたプロパティが列挙可能で、かつオブジェクト自身のプロパティであるかどうかを示す論理値を返します。 + +{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html", "taller")}} + +## 構文 + +```js +propertyIsEnumerable(prop) +``` + +### 引数 + +- `prop` + - : 調べたいプロパティの名前です。 + +### 返値 + +`true` または `false` の値で、指定されたプロパティが列挙可能であり、かつオブジェクト自身のプロパティであるかどうかを示します。 + +## 解説 + +すべてのオブジェクトは `propertyIsEnumerable` メソッドを持っています。このメソッドはあるオブジェクトのプロパティが、プロトタイプチェーンを通じて継承されたプロパティを除いて {{jsxref("Statements/for...in", "for...in")}} ループで列挙可能かどうかを特定することができます。もしオブジェクトが指定されたプロパティを持っていない場合、このメソッドは `false` を返します。 + +> **Note:** 列挙可能なプロパティは {{jsxref("Statements/for...in", "for...in")}} ループで反復処理されますが、 {{jsxref("Global_Objects/Symbol", "Symbol")}} は含まれないことに留意してください。 + +## 例 + +### `propertyIsEnumerable` の基本的な使い方 + +以下の例はオブジェクトと配列での `propertyIsEnumerable` の使い方を示しています。 + +```js +var o = {}; +var a = []; +o.prop = 'is enumerable'; +a[0] = 'is enumerable'; + +o.propertyIsEnumerable('prop'); // true を返す +a.propertyIsEnumerable(0); // true を返す +``` + +### ユーザー定義オブジェクトと組み込みオブジェクト + +以下の例は、ユーザー定義プロパティと組み込みプロパティの列挙可能性を実証しています。 + +```js +var a = ['is enumerable']; + +a.propertyIsEnumerable(0); // true を返す +a.propertyIsEnumerable('length'); // false を返す + +Math.propertyIsEnumerable('random'); // false を返す +this.propertyIsEnumerable('Math'); // false を返す +``` + +<h3 id="Direct_versus_inherited_properties" name="Direct_versus_inherited_properties">直接のプロパティと継承されたプロパティ</h3> + +```js +var a = []; +a.propertyIsEnumerable('constructor'); // false を返す + +function firstConstructor() { + this.property = 'is not enumerable'; +} + +firstConstructor.prototype.firstMethod = function() {}; + +function secondConstructor() { + this.method = function() { return 'is enumerable'; }; +} + +secondConstructor.prototype = new firstConstructor; +secondConstructor.prototype.constructor = secondConstructor; + +var o = new secondConstructor(); +o.arbitraryProperty = 'is enumerable'; + +o.propertyIsEnumerable('arbitraryProperty'); // true を返す +o.propertyIsEnumerable('method'); // true を返す +o.propertyIsEnumerable('property'); // false を返す + +o.property = 'is enumerable'; + +o.propertyIsEnumerable('property'); // true を返す + +// これらはすべて false を返します。これは、 (最後の 2 つは for-in で +// 反復処理可能であるにもかかわらず) propertyIsEnumerable が考慮しない +// プロトタイプであるためです。 +o.propertyIsEnumerable('prototype'); // false を返す (as of JS 1.8.1/FF3.6) +o.propertyIsEnumerable('constructor'); // false を返す +o.propertyIsEnumerable('firstMethod'); // false を返す +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [列挙可能性とプロパティの所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- {{jsxref("Statements/for...in", "for...in")}} +- {{jsxref("Object.keys()")}} +- {{jsxref("Object.defineProperty()")}} diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html deleted file mode 100644 index 117abc02c9..0000000000 --- a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Promise.allSettled() -slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled -tags: - - JavaScript - - Method - - Promise - - Reference - - allSettled - - asynchronous - - プロミス - - メソッド - - 非同期 -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled ---- -<div>{{JSRef}}</div> - -<p><code><strong>Promise.allSettled()</strong></code> メソッドは、与えられたすべてのプロミスが満足したか拒否された後に、それぞれのプロミスの結果を記述した配列オブジェクトで解決されるプロミスを返します。</p> - -<p>一般的には、複数の非同期タスクがあり、お互いに依存せずに正常に完了する場合や、各プロミスの結果を常に知りたい場合に使用されます。</p> - -<p>これと比較して、 {{jsxref("Promise.all()")}} で返されるプロミスは、タスクがお互いに依存している場合や、タスクのいずれかが拒否されたときにすぐに拒否したい場合にはより適切かもしれません。</p> - -<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><var>Promise</var>.allSettled(<var>iterable</var>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>iterable</var></code></dt> - <dd>{{jsxref("Array")}} などの<a href="/ja/docs/Web/JavaScript/Guide/iterable">反復可能</a>オブジェクトで、それぞれの要素が <code>Promise</code> であるものです。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><strong>待ち状態</strong>の {{jsxref("Promise")}} で、指定されたプロミスの集合に含まれるすべてのプロミスが、正常に解決されるか拒否されるかのどちらかで完了すると、<strong>非同期に</strong>解決されます。その際、返されたプロミスのハンドラーには、元のプロミスの集合に含まれるの各プロミスの結果を含む配列が入力として渡されます。</p> - -<p>ただし、空の反復可能オブジェクトが引数として渡された<strong>場合に限り</strong>、 <code>Promise.allSettled()</code> は空の配列として<strong>解決済みの</strong> <code>Promise</code> オブジェクトを返します。</p> - -<p>出力されるそれぞれのオブジェクトには、 <code>status</code> の文字列が存在します。 status が <code>fulfilled</code> であれば、 <code>value</code> が存在します。 status が <code>rejected</code> であれば、 <code>reason</code> が存在します。 value (または reason) はそれぞれのプロミスがどの値で解決 (または拒否) されたかを反映します。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Promise.allSettled" name="Using_Promise.allSettled">Promise.allSettled の使用</h3> - -<pre class="brush: js notranslate">Promise.allSettled([ - Promise.resolve(33), - new Promise(resolve => setTimeout(() => resolve(66), 0)), - 99, - Promise.reject(new Error('an error')) -]) -.then(values => console.log(values)); - -// [ -// {status: "fulfilled", value: 33}, -// {status: "fulfilled", value: 66}, -// {status: "fulfilled", value: 99}, -// {status: "rejected", reason: Error: an error} -// ] -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.allsettled', 'Promise.allSettled')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Archive/Add-ons/Techniques/Promises">プロミス</a></li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Using_promises">プロミスの使用</a></li> - <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">プロミスを使った行儀のよい非同期のプログラミング</a></li> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Promise.all()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md new file mode 100644 index 0000000000..e96b5fe08e --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/promise/allsettled/index.md @@ -0,0 +1,99 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +tags: + - JavaScript + - メソッド + - プロミス + - Reference + - allSettled + - 非同期 + - Polyfill +browser-compat: javascript.builtins.Promise.allSettled +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +{{JSRef}} + +**`Promise.allSettled()`** メソッドは、与えられたすべてのプロミスが履行されたか拒否された後に、それぞれのプロミスの結果を記述した配列オブジェクトで解決されるプロミスを返します。 + +一般的には、複数の非同期タスクがあり、お互いに依存せずに正常に完了する場合や、各プロミスの結果を常に知りたい場合に使用されます。 + +これに対して、 {{jsxref("Promise.all()")}} で返されるプロミスは、タスクがお互いに依存している場合や、タスクのいずれかが拒否されたときにすぐに拒否したい場合にはより適切かもしれません。 + +{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}} + +## 構文 + +```js +Promise.allSettled(iterable); +``` + +### 引数 + +- `iterable` + - : {{jsxref("Array")}} などの[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)オブジェクトで、それぞれの要素が `Promise` であるものです。 + +### 返値 + +**待ち状態**の {{jsxref("Promise")}} で、指定されたプロミスの集合に含まれるすべてのプロミスが、正常に履行されるか拒否されるかのどちらかで完了すると、**非同期に**解決されます。その際、返されたプロミスのハンドラーには、元のプロミスの集合に含まれるの各プロミスの結果を含む配列が入力として渡されます。 + +ただし、空の反復可能オブジェクトが引数として渡された**場合に限り**、 `Promise.allSettled()` は空の配列として**解決済みの** `Promise` オブジェクトを返します。 + +出力されるそれぞれのオブジェクトには、 `status` の文字列が存在します。 status が `fulfilled` (履行) であれば、 `value` が存在します。 status が `rejected` (拒否) であれば、 `reason` が存在します。 value (または reason) はそれぞれのプロミスがどの値で履行 (または拒否) されたかを反映します。 + +## 例 + +### Promise.allSettled の使用 + +#### {{JSxRef("Promise.then", "Promise.prototype.then()")}} +```js +Promise.allSettled([ + Promise.resolve(33), + new Promise(resolve => setTimeout(() => resolve(66), 0)), + 99, + Promise.reject(new Error('an error')) +]) +.then(values => console.log(values)); + +// [ +// {status: "fulfilled", value: 33}, +// {status: "fulfilled", value: 66}, +// {status: "fulfilled", value: 99}, +// {status: "rejected", reason: Error: an error} +// ] +``` + +#### {{jsxref("Operators/await", "await")}} +```js +const values = await Promise.allSettled([ + Promise.resolve(33), + new Promise(resolve => setTimeout(() => resolve(66), 0)), + 99, + Promise.reject(new Error('an error')) +]) +console.log(values) + +// [ +// {status: "fulfilled", value: 33}, +// {status: "fulfilled", value: 66}, +// {status: "fulfilled", value: 99}, +// {status: "rejected", reason: Error: an error} +// ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Promise.allSettled` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-promise) で利用できます +- [Promises](/ja/docs/Archive/Add-ons/Techniques/Promises) +- [プロミスの使用](/ja/docs/Web/JavaScript/Guide/Using_promises) +- [プロミスを使った行儀のよい非同期のプログラミング](/ja/docs/Learn/JavaScript/Asynchronous/Promises) +- {{jsxref("Promise")}} +- {{jsxref("Promise.all()")}} diff --git a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html deleted file mode 100644 index 9bfefa49e2..0000000000 --- a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Reflect.construct() -slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Reference - - Reflect - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct ---- -<div>{{JSRef}}</div> - -<p>静的な <code><strong>Reflect.construct()</strong></code> メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは <code>new target(...args)</code> の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。</p> - -<div>{{EmbedInteractiveExample("pages/js/reflect-construct.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 class="syntaxbox">Reflect.construct(<var>target</var>, <var>argumentsList</var>[, <var>newTarget</var>]) -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>target</var></code></dt> - <dd>呼び出し対象の関数。</dd> - <dt><code><var>argumentsList</var></code></dt> - <dd>配列風オブジェクトで、 <code><var>target</var></code> の呼び出しの引数を指定する。</dd> - <dt><code><var>newTarget</var></code> {{optional_inline}}</dt> - <dd>プロトタイプを使用するコンストラクター。 <a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a> も参照してください。 <code><var>newTarget</var></code> が存在しない場合は、既定値は <code><var>target</var></code> になります。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><code><var>target</var></code> (または、もしあれば <code><var>newTarget</var></code>) の新しいインスタンスで、 <code><var>target</var></code> に <code><var>argumentsList</var></code> を渡してコンストラクターとして呼び出すことで初期化します。</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<p>{{jsxref("TypeError")}}: <code><var>target</var></code> または <code><var>newTarget</var></code> がコンストラクターではない場合。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>Reflect.construct()</code> によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは <a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax">スプレッド構文と<a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 演算子</a> を組み合わせて使用することでも可能です。)</p> - -<pre class="brush: js">let obj = new Foo(...<var>args</var>) -let obj = Reflect.construct(Foo, <var>args</var>) -</pre> - -<h3 id="Reflect.construct_vs_Object.create" name="Reflect.construct_vs_Object.create"><code>Reflect.construct()</code> と <code>Object.create()</code></h3> - -<p><code>Reflect</code> が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。</p> - -<pre class="brush: js">function OneClass() { - this.name = 'one' -} - -function OtherClass() { - this.name = 'other' -} - -// この呼び出しは、 -let obj1 = Reflect.construct(OneClass, <var>args</var>, OtherClass) - -// ...これと同じ結果をもたらします。 -let obj2 = Object.create(OtherClass.prototype) -OneClass.apply(obj2, <var>args</var>) - -console.log(obj1.name) // 'one' -console.log(obj2.name) // 'one' - -console.log(obj1 instanceof OneClass) // false -console.log(obj2 instanceof OneClass) // false - -console.log(obj1 instanceof OtherClass) // true -console.log(obj2 instanceof OtherClass) // true -</pre> - -<p>この2つの手法の最終結果は同じですが、その過程に重要な違いがあります。 <code>Object.create()</code> と {{jsxref("Function.prototype.apply()")}} を使用する場合、 <code>new.target</code> 演算子はコンストラクター内で <code>undefined</code> を返します。これは、 <code>new</code> 演算子を用いないためです。</p> - -<p>一方、 <code>Reflect.construct()</code> を呼び出す場合は、 <code>new.target</code> 演算子は、提供されていれば <code><var>newTarget</var></code> を指し、そうでなければ <code>target</code> を指します。</p> - -<pre class="brush: js">function OneClass() { - console.log('OneClass') - console.log(new.target) -} -function OtherClass() { - console.log('OtherClass') - console.log(new.target) -} - -let obj1 = Reflect.construct(OneClass, <var>args</var>) -// Output: -// OneClass -// function OneClass { ... } - -let obj2 = Reflect.construct(OneClass, <var>args</var>, OtherClass) -// Output: -// OneClass -// function OtherClass { ... } - -let obj3 = Object.create(OtherClass.prototype); -OneClass.apply(obj3, <var>args</var>) -// Output: -// OneClass -// undefined -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_Reflect.construct" name="Using_Reflect.construct"><code>Reflect.construct()</code> の使用</h3> - -<pre class="brush: js">let d = Reflect.construct(Date, [1776, 6, 4]) -d instanceof Date // true -d.getFullYear() // 1776 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Reflect.construct")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Reflect")}}</li> - <li>{{jsxref("Operators/new", "new")}}</li> - <li><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md new file mode 100644 index 0000000000..5cc425fa6d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/reflect/construct/index.md @@ -0,0 +1,148 @@ +--- +title: Reflect.construct() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Reference + - Reflect + - Polyfill +browser-compat: javascript.builtins.Reflect.construct +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct +--- +{{JSRef}} + +静的な **`Reflect.construct()`** メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは `new target(...args)` の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。 + +{{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}} + +## 構文 + +```js +Reflect.construct(target, argumentsList) +Reflect.construct(target, argumentsList, newTarget) +``` + +### 引数 + +- `target` + - : 呼び出し対象の関数。 +- `argumentsList` + - : 配列風オブジェクトで、 `target` の呼び出しの引数を指定する。 +- `newTarget` {{optional_inline}} + - : プロトタイプを使用するコンストラクター。 [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) も参照してください。 `newTarget` が存在しない場合は、既定値は `target` になります。 + +### 返値 + +`target` (または、もしあれば `newTarget`) の新しいインスタンスで、 `target` に `argumentsList` を渡してコンストラクターとして呼び出すことで初期化します。 + +### 例外 + +{{jsxref("TypeError")}}: `target` または `newTarget` がコンストラクターではない場合。 + +## 解説 + +`Reflect.construct()` によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)と[`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を組み合わせて使用することでも可能です。) + +```js +let obj = new Foo(...args) +let obj = Reflect.construct(Foo, args) +``` + +### `Reflect.construct()` と `Object.create()` + +`Reflect` が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。 + + function OneClass() { + this.name = 'one' + } + + function OtherClass() { + this.name = 'other' + } + + // Calling this: + let obj1 = Reflect.construct(OneClass, args, OtherClass) + + // ...has the same result as this: + let obj2 = Object.create(OtherClass.prototype) + OneClass.apply(obj2, args) + + console.log(obj1.name) // 'one' + console.log(obj2.name) // 'one' + + console.log(obj1 instanceof OneClass) // false + console.log(obj2 instanceof OneClass) // false + + console.log(obj1 instanceof OtherClass) // true + console.log(obj2 instanceof OtherClass) // true + + //Another example to demonstrate below: + + function func1(a, b, c, d) { + console.log(arguments[3]); + } + + function func2(d, e, f, g) { + console.log(arguments[3]); + } + + let obj1 = Reflect.construct(func1, ['I', 'Love', 'my', 'India']) + obj1 + +この 2 つの手法の最終結果は同じですが、その過程に重要な違いがあります。 `Object.create()` と {{jsxref("Function.prototype.apply()")}} を使用する場合、 `new.target` 演算子はコンストラクター内で `undefined` を返します。これは、 `new` 演算子を用いないためです。 + +一方、 `Reflect.construct()` を呼び出す場合は、 `new.target` 演算子は、提供されていれば `newTarget` を指し、そうでなければ `target` を指します。 + +```js +function OneClass() { + console.log('OneClass') + console.log(new.target) +} +function OtherClass() { + console.log('OtherClass') + console.log(new.target) +} + +let obj1 = Reflect.construct(OneClass, args) +// Output: +// OneClass +// function OneClass { ... } + +let obj2 = Reflect.construct(OneClass, args, OtherClass) +// Output: +// OneClass +// function OtherClass { ... } + +let obj3 = Object.create(OtherClass.prototype); +OneClass.apply(obj3, args) +// Output: +// OneClass +// undefined +``` + +## 例 + +### `Reflect.construct()` の使用 + +```js +let d = Reflect.construct(Date, [1776, 6, 4]) +d instanceof Date // true +d.getFullYear() // 1776 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Reflect.construct` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-reflect) にあります +- {{jsxref("Reflect")}} +- {{jsxref("Operators/new", "new")}} +- [`new.target`](/ja/docs/Web/JavaScript/Reference/Operators/new.target) diff --git a/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md b/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md new file mode 100644 index 0000000000..6b8788a480 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/regexp/hasindices/index.md @@ -0,0 +1,70 @@ +--- +title: RegExp.prototype.hasIndices +slug: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices +tags: + - Draft + - JavaScript + - Property + - Prototype + - Reference + - RegExp + - Regular Expressions +browser-compat: javascript.builtins.RegExp.hasIndices +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/hasIndices +--- +{{JSRef}} + +**`hasIndices`** プロパティは、その正規表現で "`d`" フラグが使用されたかどうかを示します。 `hasIndices` はそれぞれの正規表現インスタンスの読み取り専用プロパティです。 + +{{EmbedInteractiveExample("pages/js/regexp-prototype-hasindices.html")}} + +{{JS_Property_Attributes(0, 0, 1)}} + +## 解説 + +`hasIndices` の値は論理型であり、 "`d`" フラグが使用された場合は `true` になります。それ以外の場合は `false` になります。 "`d`" フラグは正規表現による一致の結果に、各キャプチャグループの部分文字列の開始と終了の位置を含めることを示します。 + +このプロパティを直接変更することはできません。 + +## 例 + +### `hasIndices` の使用 + +```js +const str1 = 'foo bar foo'; + +const regex1 = new RegExp('foo', 'gd'); + +console.log(regex1.hasIndices); // 出力: true + +console.log(regex1.exec(str1).indices[0]); // 出力: Array [0, 3] +console.log(regex1.exec(str1).indices[0]); // 出力: Array [8, 11] + +const str2 = 'foo bar foo'; + +const regex2 = new RegExp('foo'); + +console.log(regex2.hasIndices); // 出力: false + +console.log(regex2.exec(str2).indices); // 出力: undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{JSxRef("RegExp.lastIndex")}} +- {{JSxRef("RegExp.prototype.exec()")}} +- {{JSxRef("RegExp.prototype.dotAll")}} +- {{JSxRef("RegExp.prototype.global")}} +- {{JSxRef("RegExp.prototype.ignoreCase")}} +- {{JSxRef("RegExp.prototype.multiline")}} +- {{JSxRef("RegExp.prototype.source")}} +- {{JSxRef("RegExp.prototype.sticky")}} +- {{JSxRef("RegExp.prototype.unicode")}} diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html deleted file mode 100644 index ce94abd766..0000000000 --- a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: RegExp.lastIndex -slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex -tags: - - JavaScript - - Property - - Reference - - RegExp - - Regular Expression -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex ---- -<div>{{JSRef}}</div> - -<p><strong><code>lastIndex</code></strong> は正規表現インスタンスの読み書き可能なプロパティで、次の一致を開始する位置を指定します。</p> - -<div>{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}</div> - -<div>{{js_property_attributes(1, 0, 0)}}</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><code><var>regExpObj</var>.lastIndex</code></pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>このプロパティは、正規表現インスタンスがグローバル検索を示すために <code>g</code> フラグを使用した場合、または粘着的検索を示すために <code>y</code> フラグを使用した場合にのみ設定されます。以下の規則が適用されます。</p> - -<ul> - <li><code>lastIndex</code> が文字列の長さよりも大きければ、 {{jsxref("RegExp.prototype.test()", "test()")}} および {{jsxref("RegExp.prototype.exec()", "exec()")}} は失敗し、<code>lastIndex</code> は 0 にセットされます。</li> - <li><code>lastIndex</code> が文字列の長さ以下で、かつ正規表現が空文字列に一致する場合には、正規表現は <code>lastIndex</code> から始まる入力に一致します。</li> - <li><code>lastIndex</code> が文字列の長さと等しく、かつ、正規表現が空文字列に一致しない場合、正規表現は入力に一致せず、 <code>lastIndex</code> は 0 にリセットされます。</li> - <li>それ以外の場合は、 <code>lastIndex</code> は直近の一致に続く次の位置に設定されます。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="lastIndex_の使用">lastIndex の使用</h3> - -<p>例えば、以下の連続した処理を考えてみてください。:</p> - -<pre class="brush: js">var re = /(hi)?/g; -</pre> - -<p>空文字列に一致します。</p> - -<pre class="brush: js">console.log(re.exec('hi')); -console.log(re.lastIndex); -</pre> - -<p><code>lastIndex</code> が 2 になり<code>["hi", "hi"]</code> が返ります。</p> - -<pre class="brush: js">console.log(re.exec('hi')); -console.log(re.lastIndex); -</pre> - -<p>ゼロ番目の要素が一致した文字列なので、 <code>["", undefined]</code> という空配列が返ります。この場合、 <code>lastIndex</code> が 2 であったときに (そして 2 のままである)、 <code>hi</code> の長さが 2 であるので、空文字列になります。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.RegExp.lastIndex")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li> - <li>{{jsxref("RegExp.prototype.global")}}</li> - <li>{{jsxref("RegExp.prototype.multiline")}}</li> - <li>{{jsxref("RegExp.prototype.source")}}</li> - <li>{{jsxref("RegExp.prototype.sticky")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md new file mode 100644 index 0000000000..5416149a87 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/regexp/lastindex/index.md @@ -0,0 +1,74 @@ +--- +title: 'RegExp: lastIndex' +slug: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex +tags: + - JavaScript + - Property + - Reference + - RegExp + - 正規表現 +browser-compat: javascript.builtins.RegExp.lastIndex +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex +--- +{{JSRef}} + +**`lastIndex`** は {{jsXref("RegExp")}} インスタンスの読み書き可能なプロパティで、次の一致を開始する位置を指定します。 + +なお、 `lastIndex` は {{jsXref("RegExp")}} プロトタイプのプロパティではありませんが、 {{jsXref("RegExp")}} インスタンスからのみ公開されます。 + +{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}{{js_property_attributes(1, 0, 0)}} + +## 解説 + +このプロパティは、正規表現インスタンスがグローバル検索を示すために `g` フラグを使用した場合、または粘着的検索を示すために `y` フラグを使用した場合にのみ設定されます。 {{jsxref("RegExp.prototype.test()", "test()")}} および {{jsxref("RegExp.prototype.exec()", "exec()")}} が指定された入力に対して呼び出されたとき、以下の規則が適用されます。 + +- `lastIndex` が入力の長さよりも大きい場合、 `exec()` または `test()` は一致するものを見つけられず、 `lastIndex` は 0 に設定されます。 +- `lastIndex` が入力の長さ以下であった場合、 `exec()` または `test()` は `lastIndex` から一致するものを探そうとします。 + + - `exec()` または `test()` が一致するものを見つけた場合 `lastIndex` は入力の中の一致する文字列の末尾の位置に設定されます。 + - `exec()` または `test()` が一致するものを見つけられなかった場合、 `lastIndex` は 0 に設定されます。 + +## 例 + +### lastIndex の使用 + +例えば、以下の一連の処理を考えてみてください。 + +```js +var re = /(hi)?/g; +``` + +空文字列に一致します。 + +```js +console.log(re.exec('hi')); +console.log(re.lastIndex); +``` + +`["hi", "hi"]` を返し、 `lastIndex` は 2 になります。 + +```js +console.log(re.exec('hi')); +console.log(re.lastIndex); +``` + +返値は `["", undefined]` で、 0 番目の要素が一致文字列となる空の配列です。この場合、 `lastIndex` が 2 (現在も 2) であり、`hi` の長さが 2 であるため、空の文字列となります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{JSxRef("RegExp.prototype.dotAll")}} +- {{JSxRef("RegExp.prototype.global")}} +- {{JSxRef("RegExp.prototype.hasIndices")}} +- {{JSxRef("RegExp.prototype.ignoreCase")}} +- {{JSxRef("RegExp.prototype.multiline")}} +- {{JSxRef("RegExp.prototype.source")}} +- {{JSxRef("RegExp.prototype.sticky")}} +- {{JSxRef("RegExp.prototype.unicode")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/substr/index.html b/files/ja/web/javascript/reference/global_objects/string/substr/index.html deleted file mode 100644 index 725bc665df..0000000000 --- a/files/ja/web/javascript/reference/global_objects/string/substr/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: String.prototype.substr() -slug: Web/JavaScript/Reference/Global_Objects/String/substr -tags: - - Deprecated - - JavaScript - - Method - - Prototype - - Reference - - String - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/String/substr ---- -<div>{{JSRef}}</div> - -<p class="seoSummary"><strong><code>substr()</code></strong> メソッドは、文字列の一部を、指定した位置から後方向指定した文字数だけ返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/string-substr.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>str</var>.substr(<var>start</var>[, <var>length</var>])</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>start</var></code></dt> - <dd>返却する部分文字列に含まれる最初の文字の位置です。</dd> - <dt><code><var>length</var></code></dt> - <dd>任意です。取り出す文字の数です。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>指定された文字列の指定された部分が入った新しい文字列です。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p><code>substr()</code> は、 <code><var>str</var></code> のうち <code><var>length</var></code> 文字分を、 <code><var>start</var></code> の位置から数えて抽出します。</p> - -<ul> - <li><code><var>start</var></code> が正の数である場合、文字列の先頭から数えた位置になります。この値は <code><var>str</var>.length</code> が上限になります。</li> - <li><code><var>start</var></code> が負の数である場合、文字列の末尾から数えた位置になります。この値は <code>-<var>str</var>.length</code> が下限になります。</li> - <li>注: Microsoft の JScript では、 <code><var>start</var></code> の引数が負の数であっても文字列の末尾からの位置にはなりません。</li> - <li><code><var>length</var></code> が省略された場合、 <code>substr()</code> は文字列の末尾までの文字を抽出します。</li> - <li><code><var>length</var></code> が {{jsxref("undefined")}} である場合、 <code>substr()</code> は文字列の末尾までの文字を抽出します。</li> - <li><code><var>length</var></code> が負の数である場合、 <code>0</code> として扱われます。</li> - <li><code><var>start</var></code> および <code><var>length</var></code> において、 {{jsxref("NaN")}} は <code>0</code> として扱われます。</li> -</ul> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>Microsoft の JScript は start の位置として負の数に対応していません。この機能を使用したい場合は、このバグを回避するために、次の互換コードを使用することができます。</p> - -<pre class="brush: js notranslate">// only run when the substr() function is broken -if ('ab'.substr(-1) != 'b') { - /** - * Get the substring of a string - * @param {integer} start where to start the substring - * @param {integer} length how many characters to return - * @return {string} - */ - String.prototype.substr = function(substr) { - return function(start, length) { - // call the original method - return substr.call(this, - // did we get a negative start, calculate how much it is from the beginning of the string - // adjust the start parameter for negative value - start < 0 ? this.length + start : start, - length) - } - }(String.prototype.substr); -} -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_substr" name="Using_substr">substr() の使用</h3> - -<pre class="brush: js notranslate">var aString = 'Mozilla'; - -console.log(aString.substr(0, 1)); // 'M' -console.log(aString.substr(1, 0)); // '' -console.log(aString.substr(-1, 1)); // 'a' -console.log(aString.substr(1, -1)); // '' -console.log(aString.substr(-3)); // 'lla' -console.log(aString.substr(1)); // 'ozilla' -console.log(aString.substr(-20, 2)); // 'Mo' -console.log(aString.substr(20, 2)); // '' -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.String.substr")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("String.prototype.slice()")}}</li> - <li>{{jsxref("String.prototype.substring()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/string/substr/index.md b/files/ja/web/javascript/reference/global_objects/string/substr/index.md new file mode 100644 index 0000000000..a7d7dcc40f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/string/substr/index.md @@ -0,0 +1,105 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Reference/Global_Objects/String/substr +tags: + - Deprecated + - JavaScript + - Method + - Prototype + - Reference + - String + - メソッド +browser-compat: javascript.builtins.String.substr +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +{{JSRef}} + +**`substr()`** メソッドは、文字列の一部を、指定した位置から後方向に指定した文字数だけ返します。 + +{{EmbedInteractiveExample("pages/js/string-substr.html")}} + +## 構文 + +```js +substr(start) +substr(start, length) +``` + +### 引数 + +- `start` + - : 返却する部分文字列に含まれる最初の文字の位置です。 +- `length` + - : オプションです。取り出す文字の数です。 + +### 返値 + +指定された文字列の指定された部分が入った新しい文字列です。 + +## 解説 + +`substr()` は、 `str` のうち `start` の位置から `length` 文字分を数えて抽出します。 + +- `start` が正の数である場合、文字列の先頭から数えた位置になります。この値は `str.length` が上限になります。 +- `start` が負の数である場合、文字列の末尾から数えた位置になります。この値は `-str.length` が下限になります。 +- メモ: Microsoft の JScript では、 `start` の引数が負の数であっても文字列の末尾からの位置にはなりません。 +- `length` が省略された場合、 `substr()` は文字列の末尾までの文字を抽出します。 +- `length` が {{jsxref("undefined")}} である場合、 `substr()` は文字列の末尾までの文字を抽出します。 +- `length` が負の数である場合、 `0` として扱われます。 +- `start` および `length` において、 {{jsxref("NaN")}} は `0` として扱われます。 + +## ポリフィル + +Microsoft の JScript は start の位置として負の数に対応していません。この機能を JScript で使用する場合は、以下のコードを使用することができます。 + +```js +// only run when the substr() function is broken +if ('ab'.substr(-1) != 'b') { + /** + * Get the substring of a string + * @param {integer} start where to start the substring + * @param {integer} length how many characters to return + * @return {string} + */ + String.prototype.substr = function(substr) { + return function(start, length) { + // call the original method + return substr.call(this, + // did we get a negative start, calculate how much it is from the beginning of the string + // adjust the start parameter for negative value + start < 0 ? this.length + start : start, + length) + } + }(String.prototype.substr); +} +``` + +## 例 + +### substr() の使用 + +```js +var aString = 'Mozilla'; + +console.log(aString.substr(0, 1)); // 'M' +console.log(aString.substr(1, 0)); // '' +console.log(aString.substr(-1, 1)); // 'a' +console.log(aString.substr(1, -1)); // '' +console.log(aString.substr(-3)); // 'lla' +console.log(aString.substr(1)); // 'ozilla' +console.log(aString.substr(-20, 2)); // 'Mo' +console.log(aString.substr(20, 2)); // '' +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("String.prototype.slice()")}} +- {{jsxref("String.prototype.substring()")}} diff --git a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html deleted file mode 100644 index b538566db1..0000000000 --- a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: WeakMap.prototype.clear() -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear -tags: - - JavaScript - - Method - - Obsolete - - Prototype - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear ---- -<div>{{JSRef}} {{obsolete_header}}</div> - -<p><code><strong>clear()</strong></code> メソッドは、<code>WeakMap</code> オブジェクトからすべての要素を削除するために使用されていましたが、もはや ECMAScript とその実装に含まれていません。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox"><code><em>wm</em>.clear();</code></pre> - -<h2 id="例">例</h2> - -<h3 id="clear_メソッドを使う"><code>clear</code> メソッドを使う</h3> - -<pre class="brush: js;highlight:[10] example-bad">var wm = new WeakMap(); -var obj = {}; - -wm.set(obj, "foo"); -wm.set(window, "bar"); - -wm.has(obj); // true -wm.has(window); // true - -wm.clear(); - -wm.has(obj) // false -wm.has(window) // false -</pre> - -<h2 id="仕様">仕様</h2> - -<p>すべての現在の仕様やドラフトでサポートされていません。このメソッドは、リビジョン 28 (October 14, 2014 のバージョン)まで ECMAScript 第 6 版ドラフトでサポートされていました。しかし、最新バージョンのドラフトで削除されました。最終仕様では、サポートされていません。</p> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{jsxref("WeakMap")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md new file mode 100644 index 0000000000..18f7ab622b --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/weakmap/clear/index.md @@ -0,0 +1,53 @@ +--- +title: WeakMap.prototype.clear() +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/clear +tags: + - JavaScript + - Method + - Deprecated + - Prototype + - WeakMap +browser-compat: javascript.builtins.WeakMap.clear +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear +--- +{{JSRef}} {{deprecated_header}} + +**`clear()`** メソッドは、 `WeakMap` オブジェクトからすべての要素を削除するために使用されていましたが、もはや ECMAScript とその実装に含まれていません。 + +## 構文 + +```js +clear() +``` + +## 例 + +### `clear` メソッドの使用 + +```js example-bad +var wm = new WeakMap(); +var obj = {}; + +wm.set(obj, 'foo'); +wm.set(window, 'bar'); + +wm.has(obj); // true +wm.has(window); // true + +wm.clear(); + +wm.has(obj) // false +wm.has(window) // false +``` + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("WeakMap")}} diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html deleted file mode 100644 index fb3ba701c1..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: WebAssembly.instantiateStreaming() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.instantiateStreaming()</code></strong> 関数はソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">Promise<ResultObject> WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>source</em></dt> - <dd>コンパイルしてインスタンス化する .wasm モジュールのソースを表す {{domxref("Response")}} オブジェクトか、それをfulfillするプロミス。</dd> - <dt><em>importObject</em> {{optional_inline}}</dt> - <dd>関数や {{jsxref("WebAssembly.Module")}} オブジェクトなどの新しく生成される <code>Instance</code> にインポートされる値を持つオブジェクト。モジュール内で宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、{{jsxref("WebAssembly.LinkError")}} がスローされます。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>解決時に次の2つのフィールドを持つ <code>ResultObject</code> を渡す <code>Promise</code>:</p> - -<ul> - <li><code>module</code>: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この <code>Module</code> は再度インスタンス化することや、<a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a> 経由で共有したり、<a href="/en-US/docs/WebAssembly/Caching_modules">IndexedDBにキャッシュ</a>することができます。</li> - <li><code>instance</code>: 全ての <a href="/en-US/docs/WebAssembly/Exported_functions">エクスポートされたWebAssembly関数</a> を含む {{jsxref("WebAssembly.Instance")}} オブジェクト。</li> -</ul> - -<h3 id="例外">例外</h3> - -<ul> - <li>いずれかのパラメータが正しい型、または構造でない場合、{{jsxref("TypeError")}} がスローされます。</li> - <li>失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}、{{jsxref("WebAssembly.LinkError")}} または {{jsxref("WebAssembly.RuntimeError")}} を持って棄却されます。</li> -</ul> - -<h2 id="例">例</h2> - -<p>次の例 (Github上のデモ <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> と、 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">動作例</a> を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。プロミスは <code>ResultObject</code> で fulfill されます。<code>instantiateStreaming()</code> 関数は {{domxref("Response")}} オブジェクトを渡すプロミスを受け取るので、直接 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 呼び出し結果を渡すことができます。</p> - -<pre class="brush: js">var importObject = { imports: { imported_func: arg => console.log(arg) } }; - -WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) -.then(obj => obj.instance.exports.exported_func());</pre> - -<p>最後に <code>ResultObject</code> が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td> - <td>{{Spec2('WebAssembly Embedding')}}</td> - <td>初回ドラフト定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div> - - -<p>{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md new file mode 100644 index 0000000000..d157a5c651 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md @@ -0,0 +1,73 @@ +--- +title: WebAssembly.instantiateStreaming() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +tags: + - API + - JavaScript + - Method + - Object + - Reference + - WebAssembly + - instantiate + - instantiateStreaming + - streaming +browser-compat: javascript.builtins.WebAssembly.instantiateStreaming +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +--- +{{JSRef}} + +**`WebAssembly.instantiateStreaming()`** 関数は、ソースのストリームから直接 WebAssembly モジュールをコンパイルしてインスタンス化します。これは、 wasm コードをロードするための最も効率的で最適な方法です。 + +```js +WebAssembly.instantiateStreaming(source, importObject) +``` + +### 引数 + +- _source_ + - : [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェースで、リクエストに対するレスポンスを表します。") オブジェクト、またはそれで解決するプロミスで、コンパイルしてインスタンス化する .wasm モジュールのソースを表します。 +- _importObject_ {{optional_inline}} + - : 関数や {{jsxref("WebAssembly.Memory")}} オブジェクトなど、新しく生成される `Instance` にインポートされる値を持つオブジェクト。コンパイルされたモジュールの宣言されたインポートそれぞれに対応するプロパティが存在する必要があります。そうでない場合、[`WebAssembly.LinkError`](/ja/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError) が発生します。 + +### 返値 + +`Promise` で、次の 2 つのフィールドを持つ `ResultObject` で解決します。 + +- `module`: コンパイルされた {{jsxref("WebAssembly.Module")}} オブジェクト。この `Module` は再度インスタンス化することや、[postMessage()](/ja/docs/Web/API/Worker/postMessage) 経由で共有することができます。 +- `instance`: {{jsxref("WebAssembly.Instance")}} オブジェクトで、すべての[エクスポートされた WebAssembly 関数](/ja/docs/WebAssembly/Exported_functions)を含みます。 + +### 例外 + +- いずれかの引数が正しい型または構造でない場合、{{jsxref("TypeError")}} が発生します。 +- 失敗した場合、プロミスは失敗の原因に応じて {{jsxref("WebAssembly.CompileError")}}、{{jsxref("WebAssembly.LinkError")}}、{{jsxref("WebAssembly.RuntimeError")}} をもって拒否されます。 + +## 例 + +### ストリーミングのインスタンス化 + +次の例 (Github上のデモ [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) と、[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)を参照してください) では、ソースから .wasm モジュールを直接コンパイルしてインスタンス化しています。プロミスは `ResultObject` で充足されます。`instantiateStreaming()` 関数は [`Response`](/ja/docs/Web/API/Response "Response は Fetch API のインターフェースで、リクエストに対するレスポンスを表します。") オブジェクトを渡すプロミスを受け取るので、直接 [`WindowOrWorkerGlobalScope.fetch()`](/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch "WindowOrWorkerGlobalScope ミックスインの fetch() メソッドは、ネットワークからリソースをフェッチするプロセスを開始し、レスポンスが利用可能になると履行される約束を返します。") 呼び出し結果を渡すことができます。 + +```js +var importObject = { imports: { imported_func: arg => console.log(arg) } }; + +WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) +.then(obj => obj.instance.exports.exported_func()); +``` + +最後に `ResultObject` が持つ instance メンバーにアクセスして、エクスポートされた関数を実行しています。 + +> **Note:** これを動作するようにするには、サーバが `.wasm` ファイルを `application/wasm` の MIME タイプで返す必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html index 9c93cf21cc..4064df7666 100644 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory <dt><code>Memory.prototype.constructor</code></dt> <dd>このオブジェクトのインスタンスを生成した関数を返します。既定では {{jsxref("WebAssembly.Memory()")}} コンストラクターです。</dd> <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> - <dd>メモリに格納されているバッファーを返すアクセサープロパティです。/dd></dd> + <dd>メモリに格納されているバッファーを返すアクセサープロパティです。</dd> </dl> <h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html deleted file mode 100644 index 14a9631831..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.validate() -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate ---- -<div>{{JSRef}} {{SeeCompatTable}}</div> - -<p><strong><code>WebAssembly.validate()</code></strong> 関数は WebAssembly バイナリコードを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> をバリデーションし、バイト列が有効な wasm モジュール (<code>true</code>) か、そうでないか (<code>false</code>) を返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntax">WebAssembly.validate(bufferSource);</pre> - -<h3 id="パラメータ">パラメータ</h3> - -<dl> - <dt><em>bufferSource</em></dt> - <dd>バリデーションする WebAssembly バイナリコードを含む <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> 。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>有効な wasm モジュール (<code>true</code>) か、そうでないか (<code>false</code>) を示す boolean 値。</p> - -<h3 id="例外">例外</h3> - -<p><code>bufferSource</code> が <a href="/ja/docs/Web/JavaScript/Typed_arrays">型付き配列</a> か <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a> でない場合、{{jsxref("TypeError")}} がスローされます。</p> - -<h2 id="例">例</h2> - -<p>以下の例 (validate.html の <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">ソースコード</a> と <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">動作例</a> をご確認ください) は .wasm モジュールをフェッチして型付き配列に変換します。次に、 <code>validate()</code> メソッドを使用してモジュールが有効かどうかをチェックします。</p> - -<pre class="brush: js">fetch('simple.wasm').then(response => - response.arrayBuffer() -).then(function(bytes) { - var valid = WebAssembly.validate(bytes); - console.log("The given bytes are " - + (valid ? "" : "not ") + "a valid wasm module"); -}); -</pre> - -<h2 id="仕様">仕様</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('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}</td> - <td>{{Spec2('WebAssembly JS')}}</td> - <td>初回ドラフト定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("javascript.builtins.WebAssembly.validate")}}</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> - <li><a href="/ja/docs/WebAssembly/Concepts">WebAssembly のコンセプト</a></li> - <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md new file mode 100644 index 0000000000..5f979a4411 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/webassembly/validate/index.md @@ -0,0 +1,66 @@ +--- +title: WebAssembly.validate() +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +tags: + - API + - JavaScript + - Method + - Object + - Reference + - WebAssembly + - validate +browser-compat: javascript.builtins.WebAssembly.validate +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +--- +{{JSRef}} + +**`WebAssembly.validate()`** 関数は WebAssembly バイナリーコードの[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)を検証し、そのバイト列が有効な wasm モジュールか (`true`)、そうでないか (`false`) を返します。 + +## 構文 + +```js +WebAssembly.validate(bufferSource) +``` + +### 引数 + +- `bufferSource` + - : 検証する WebAssembly バイナリーコードを含む[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)。 + +### 返値 + +有効な wasm モジュールであるか (`true`)、そうでないか (`false`) を示す論理値です。 + +### 例外 + +`bufferSource` が[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)または [`ArrayBuffer`](/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) でない場合、{{jsxref("TypeError")}} が発生します。 + +## 例 + +### validate の使用 + +以下の例 (`validate.html` の[ソースコード](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html)と[動作例](https://mdn.github.io/webassembly-examples/js-api-examples/validate.html) をご確認ください) は .wasm モジュールを読み取って型付き配列に変換します。次に、 `validate()` メソッドを使用してモジュールが有効かどうかをチェックします。</p> + +```js +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(function(bytes) { + var valid = WebAssembly.validate(bytes); + console.log("The given bytes are " + + (valid ? "" : "not ") + "a valid wasm module"); +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebAssembly](/ja/docs/WebAssembly) 概要ページ +- [WebAssembly の概念](/ja/docs/WebAssembly/Concepts) +- [WebAssembly JavaScript API の使用](/ja/docs/WebAssembly/Using_the_JavaScript_API) |