diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-08-17 11:37:07 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-17 11:37:07 +0900 |
| commit | 98a7793a51bdbdeefb172842e677dca22eb779e5 (patch) | |
| tree | f07cde27678193afe366832bd58c958657fadc6c /files/ja/web | |
| parent | 6c30dec8016abec2fba8caf0bd07d0e145c37caf (diff) | |
| parent | a28f6c8632ced6d91d311614d96ab643e5ef7058 (diff) | |
| download | translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.tar.gz translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.tar.bz2 translated-content-98a7793a51bdbdeefb172842e677dca22eb779e5.zip | |
Merge branch 'mdn:main' into 20210811-orphaned/Web/API/NavigatorLanguage
Diffstat (limited to 'files/ja/web')
30 files changed, 2078 insertions, 1053 deletions
diff --git a/files/ja/web/api/element/before/index.html b/files/ja/web/api/element/before/index.html new file mode 100644 index 0000000000..652f38c95f --- /dev/null +++ b/files/ja/web/api/element/before/index.html @@ -0,0 +1,91 @@ +--- +title: Element.before() +slug: Web/API/Element/before +tags: + - API + - DOM + - Method + - Node + - Reference +browser-compat: api.Element.before +translation_of: Web/API/Element/before +original_slug: Web/API/ChildNode/before +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">before(... nodes)</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Inserting_an_element">要素の挿入</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.before(span); + +console.log(container.outerHTML); +// "<div><span></span><p></p></div>" +</pre> + +<h3 id="Inserting_text">テキストの挿入</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); + +p.before("Text"); + +console.log(container.outerHTML); +// "<div>Text<p></p></div>"</pre> + +<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3> + +<pre class="brush: js">let container = document.createElement("div"); +let p = document.createElement("p"); +container.appendChild(p); +let span = document.createElement("span"); + +p.before(span, "Text"); + +console.log(container.outerHTML); +// "<div><span></span>Text<p></p></div>"</pre> + + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.after()")}}</li> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/replacewith/index.html b/files/ja/web/api/element/replacewith/index.html new file mode 100644 index 0000000000..ad9420f041 --- /dev/null +++ b/files/ja/web/api/element/replacewith/index.html @@ -0,0 +1,73 @@ +--- +title: Element.replaceWith() +slug: Web/API/Element/replaceWith +tags: + - API + - DOM + - Method + - Element + - Reference +browser-compat: api.Element.replaceWith +translation_of: Web/API/Element/replaceWith +original_slug: Web/API/ChildNode/replaceWith +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.replaceWith()</strong></code> メソッドは、この <code>Element</code> を親の子リストの中で一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">replaceWith(...nodes)</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置換します。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にはノードを挿入できません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Using_replaceWith"><code>replaceWith()</code> の使用</h3> + +<pre class="brush: js">const div = document.createElement("div"); +const p = document.createElement("p"); +div.appendChild(p); +const span = document.createElement("span"); + +p.replaceWith(span); + +console.log(div.outerHTML); +// "<div><span></span></div>" +</pre> + +<h3 id="replaceWith_is_unscopable"><code>replaceWith()</code> はスコーピングに非対応</h3> + +<p><code>replaceWith()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">with(node) { + replaceWith("foo"); +} +// ReferenceError: replaceWith is not defined </pre> + +<h2 id="Specification">仕様書</h2> + +<p>{{Specifications}} + +</p> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/fetch_api/index.html b/files/ja/web/api/fetch_api/index.html index 7f1f35da9b..2eaad2cd9d 100644 --- a/files/ja/web/api/fetch_api/index.html +++ b/files/ja/web/api/fetch_api/index.html @@ -3,7 +3,6 @@ title: Fetch API slug: Web/API/Fetch_API tags: - API - - Experimental - Fetch - Landing - Reference @@ -14,101 +13,89 @@ translation_of: Web/API/Fetch_API --- <div>{{DefaultAPISidebar("Fetch API")}}</div> -<p>Fetch API には (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスが定義されています。{{domxref("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</p> +<p class="summary"><span class="seoSummary">Fetch API は (ネットワーク越しの通信を含む) リソース取得のためのインターフェイスを提供しています。 {{DOMxRef("XMLHttpRequest")}} と似たものではありますが、より強力で柔軟な操作が可能です。</span></p> -<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2> +<p>{{AvailableInWorkers}}</p> -<p>Fetch では {{domxref("Request")}} と {{domxref("Response")}} が一般的な形で定義されています。またネットワークリクエストに関連する様々なものも定義されています。これらは service worker や Cache API といったリクエストとレスポンスを扱う API や、独自のリクエストを発生させる場面でも利用できるようになるでしょう。</p> +<h2 id="Concepts_and_usage">概念と利用方法</h2> -<p>また CORS や HTTP オリジンヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p> +<p>Fetch は {{DOMxRef("Request")}} と {{DOMxRef("Response")}} オブジェクト (およびネットワークリクエストに関わるその他のもの) の汎用的な定義が提供されています。これにより、サービスワーカー、キャッシュ API、リクエストやレスポンスを処理または変更するその他の類似のもの、またはプログラム的にレスポンスを生成する (つまり、コンピュータプログラムまたはパーソナルプログラミング命令を使用する) 必要があるあらゆる種類の利用法など、将来的に必要とされるあらゆる場所で使用できるようになります。</p> -<p>リソースを取得するためのリクエストは、 {{domxref("GlobalFetch.fetch")}} メソッドを呼ぶことで作成できます。このメソッドは {{domxref("Window")}} や {{domxref("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p> +<p>また CORS や HTTP の Origin ヘッダーの振る舞いといった関連した概念についても定義されています。この定義は、現行の分散している個別の定義を置き換えるものです。</p> -<p><code>fetch()</code> メソッドは必須の引数を1つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{domxref("Response")}} に解決できる {{domxref("Promise")}} を返します。第2引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。（{{domxref("Request")}} をご覧ください）。</p> +<p>リソースを取得するためのリクエストは、 {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} メソッドを呼ぶことで作成できます。このメソッドは {{DOMxRef("Window")}} や {{DOMxRef("WorkerGlobalScope")}} といったインターフェイスによって実装されています。その結果、リソース取得を必要とする様々な場面での利用が可能です。</p> -<p>{{domxref("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります（{{domxref("Body")}} をご覧ください）。</p> +<p><code>fetch()</code> メソッドは必須の引数を 1 つ取り、取得したいリソースのパスを指定します。成功か失敗かに関わらず、リクエストに対する {{DOMxRef("Response")}} に解決できる {{JSxRef("Promise")}} を返します。第 2 引数は任意で、 <code>init</code> オプションオブジェクトを渡すことができます。({{DOMxRef("Request")}} を参照してください。)</p> -<p>{{domxref("Request.Request","Request()")}} および {{domxref("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{domxref("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p> +<p>{{DOMxRef("Response")}} を受け取ると、レスポンスに含まれるコンテンツ本体と、その処理方法を定義するための多数のメソッドが利用できるようになります。</p> -<h3 id="jQueryとの違い">jQueryとの違い</h3> +<p>{{DOMxRef("Request.Request","Request()")}} および {{DOMxRef("Response.Response","Response()")}} を利用することで、リクエストとレスポンスを直接作成できます。ただしこれらのオブジェクトは、{{DOMxRef("FetchEvent.respondWith")}} のような他の API 呼び出しの結果として取得されるべきもので、直接作成しないほうが良いでしょう。</p> -<p><code>fetch</code> は主に3つの点で <code>jQuery.ajax()</code> と異なります。</p> +<h3 id="Differences_from_jQuery">jQueryとの違い</h3> + +<p><code>fetch</code> は主に 3 つの点で <code>jQuery.ajax()</code> と異なります。</p> <ul> - <li><code>fetch()</code> から返された Promise は、応答が HTTP <code>404</code> または <code>500</code> であっても、<strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され（<code>ok</code> ステータスが <code>false</code> に設定されます）、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li> - <li><code>fetch()</code> は <strong>クロスサイト Cookie</strong> を受信<s>できません</s>。フェッチを使用してクロスサイトセッションを確立することは<s>できません</s>。<s>他のサイトの <code>Set-Cookie</code> ヘッダーは黙って無視されます。</s></li> - <li><code>認証情報: 'same-origin'</code> を設定しない限り、<code>fetch()</code> は <strong>Cookie を送信しません</strong>。 + <li><code>fetch()</code> から返された Promise は、レスポンスが HTTP <code>404</code> または <code>500</code> であっても、 <strong>HTTP エラーステータスで拒否されません</strong>。代わりに、正常に解決され (<code>ok</code> ステータスが <code>false</code> に設定されます)、ネットワーク障害が発生した場合、または要求の完了が妨げられた場合にのみ拒否されます。</li> + <li><code>fetch()</code> は<em>認証情報</em>の<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters">初期化オプション</a>を (<code>include</code> に) 設定しない限り、<strong>オリジンをまたいだ Cookie を送信しません</strong>。 <ul> - <li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2017年8月</a>、仕様によりデフォルトの認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が以下のブラウザのバージョンで更新されました。 - <ul> - <li>Firefox バージョン 61.0b13</li> - <li>Safari バージョン 12</li> - <li>Chrome バージョン 68</li> - </ul> - </li> - <li>これらのブラウザより古いバージョンをターゲットにしている場合は、Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init オプション</a> の認証情報を必ず含めてください。</li> + <li><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">2018 年 4 月</a>、に仕様が既定の認証情報ポリシーが <code>'same-origin'</code> に変更され、古いネイティブ fetch が Firefox 61.0b13, Safari 12, Chrome 68 のバージョンのブラウザーで更新されました。</li> + <li>これらのブラウザより古いバージョンをターゲットにしている場合は、 Cookie/ユーザーログイン状態の影響を受ける可能性のあるすべての API リクエストに <code>'same-origin'</code> <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters">init オプション</a> の認証情報を必ず含めてください。</li> </ul> </li> </ul> <div class="note"> -<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a> を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a> では、Fetch API の基本概念が解説されています。</p> +<p><strong>注</strong>: Fetch API の詳しい利用方法は <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch の使用</a>を参照してください。また <a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch の基本概念</a>では、Fetch API の基本概念が解説されています。</p> </div> -<h3 id="Aborting_a_fetch" name="Aborting_a_fetch">フェッチを中止する</h3> +<h3 id="Aborting_a_fetch">フェッチの中止</h3> -<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{domxref("AbortController")}} および {{domxref("AbortSignal")}} インターフェイス（つまり Abort API）に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p> +<p>ブラウザーは Fetch や XHR などの操作を完了前に中止させることができる {{DOMxRef("AbortController")}} および {{DOMxRef("AbortSignal")}} インターフェイス (つまり Abort API) に実験的に対応し始めています。詳しくはインターフェイスのページを参照してください。</p> -<h2 id="Fetch_Interfaces" name="Fetch_Interfaces">Fetch インターフェイス</h2> +<h2 id="Fetch_Interfaces">Fetch インターフェイス</h2> <dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt> <dd><code>fetch()</code> メソッドはリソース取得のために使用されます。</dd> - <dt>{{domxref("Headers")}}</dt> + <dt>{{DOMxRef("Headers")}}</dt> <dd>リクエストとレスポンスのヘッダーを表現しています。ヘッダー情報への問い合わせや、結果による振る舞いの選択が可能です。</dd> - <dt>{{domxref("Request")}}</dt> + <dt>{{DOMxRef("Request")}}</dt> <dd>リソースのリクエストを表します。</dd> - <dt>{{domxref("Response")}}</dt> + <dt>{{DOMxRef("Response")}}</dt> <dd>リクエストに対するレスポンスを表します。</dd> </dl> -<h2 id="Fetch_mixin" name="Fetch_mixin">Fetch ミックスイン</h2> - -<dl> - <dt>{{domxref("Body")}}</dt> - <dd>レスポンスとリクエストの本体に関係するメソッドが定義されています。これらを利用することで、コンテントタイプ自身と、コンテントタイプごとの処理を定めることが可能になります。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> - <tbody> + <thead> <tr> <th scope="col">仕様書</th> <th scope="col">状態</th> <th scope="col">備考</th> </tr> + </thead> + <tbody> <tr> - <td>{{SpecName('Fetch')}}</td> - <td>{{Spec2('Fetch')}}</td> + <td>{{SpecName("Fetch")}}</td> + <td>{{Spec2("Fetch")}}</td> <td>初回定義</td> </tr> </tbody> </table> -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> <p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> -<h2 id="関連情報">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> - <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/docs/Web/HTTP">HTTP</a></li> - <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> - <li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> + <li><a href="https://github.com/github/fetch">Fetch のポリフィル</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Basic_concepts">Fetch の基本概念</a></li> </ul> diff --git a/files/ja/web/api/push_api/index.html b/files/ja/web/api/push_api/index.html index 15c7aa781c..295bb675dd 100644 --- a/files/ja/web/api/push_api/index.html +++ b/files/ja/web/api/push_api/index.html @@ -12,66 +12,49 @@ tags: - プッシュ通知 translation_of: Web/API/Push_API --- -<div>{{DefaultAPISidebar("Push API")}}</div> +<div>{{ApiRef("Push API")}}</div> -<p class="summary"><ruby><strong>Push API</strong><rp> (</rp><rt>プッシュ通知 API</rt><rp>) </rp></ruby>は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。</p> +<p class="summary"><strong>Push API</strong> は、ウェブアプリケーションがサーバーからメッセージ (プッシュ通知) を受信できるようにします。ウェブアプリケーションがフォアグランド状態かどうか、読み込まれているかどうかに関わらず利用できます。開発者は、オプトインしたユーザーへ非同期の通知と更新を届けることができ、タイムリーな新着コンテンツによってユーザーの関心を得られるでしょう。</p> -<h2 id="Push_concepts_and_usage" name="Push_concepts_and_usage">プッシュ通知の概念と使い方</h2> +<h2 id="Push_concepts_and_usage">プッシュ通知の概念と使い方</h2> <div class="warning"> -<p>PushManager への加入を実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。</p> +<p>PushManager へのサブスクリプションを実装する場合、アプリで CSRF/XSRF 問題を起こさないように保護することが非常に重要です。詳しくは以下の記事を参照してください。</p> <ul> - <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li> + <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li> <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li> </ul> </div> -<p>アプリがプッシュ通知メッセージを受信するために、アプリで<a href="/ja/docs/Web/API/ServiceWorker_API">サービスワーカー</a>が動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。</p> - -<p>これはボタンのクリックなどといったユーザーの操作への応答として行います。例えば以下のようにします。</p> - -<pre class="brush: js">btn.addEventListener('click', function() { - serviceWorkerRegistration.pushManager.subscribe(options) - .then(function(pushSubscription) { - // handle subscription - }); -})</pre> - -<p>これは単なるベストプラクティスではありません — ユーザーが同意していない通知によってユーザーにスパムを送るべきではありません — が、ブラウザーはユーザーの操作への応答以外で起動される通知を明確に許可しなくなってきています。例えば Firefox は、すでにこれをバージョン72で行っています。</p> +<p>アプリがプッシュ通知メッセージを受信するために、アプリで<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>が動作している必要があります。サービスワーカーが動作している時に、 {{domxref("PushManager.subscribe()")}} を利用してプッシュ通知に加入することができます。</p> <p>返値の {{domxref("PushSubscription")}} には、プッシュ通知メッセージの配信に必要な情報であるエンドポイントとデータ送信用の暗号キーがすべて含まれています。</p> <p>プッシュ通知メッセージを受信すると、そのメッセージを扱うためのサービスワーカーが起動します。これは、 {{domxref("ServiceWorkerGlobalScope.onpush")}} イベントハンドラーへ配信されます。これにより、例えば ({{domxref("ServiceWorkerRegistration.showNotification()")}} を使用して) 受信した通知を表示するなど、アプリケーションがプッシュ通知の受信に応じた動作ができます。</p> -<p>各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の <a href="http://www.w3.org/TR/capability-urls/">capability URL</a> です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。</p> +<p>各サブスクリプションは、サービスワーカーに対して固有です。サブスクリプションのエンドポイントは、固有の <a href="https://www.w3.org/TR/capability-urls/">capability URL</a> です。サブスクリプションのエンドポイント URL はアプリケーションにメッセージを送るために不可欠な情報です。エンドポイント URL は秘密にしておく必要があります。さもないと、他のアプリケーションがあなたのアプリケーションにプッシュ通知メッセージを送ることができてしまいます。</p> <p>プッシュ通知メッセージの配信のためにサービスワーカーを動作させると、特にバッテリーなどのリソースを消費します。これを扱う方式はブラウザーごとに異なっており、現在標準となる仕組みはありません。 Firefox も Chrome も通知を生成するプッシュ通知メッセージの数に制限を設けていません。 Firefox は通知を表示しないアプリケーションに送信されるプッシュ通知メッセージの数に制限 (クォータ) を設けていますが、 Chrome には制限がありません。この制限数は、ウェブサイトを訪れるたびに更新されます。</p> -<div class="note"> -<p><strong>メモ</strong>: Gecko 44 以降では、通知の表示中に別のプッシュ通知メッセージが発行された場合、アプリケーションごとのプッシュ通知メッセージ数の上限は、3秒経つまで加算されません。これは、大量のプッシュ通知メッセージを受け取り、そのすべてが表示される通知を生成するわけではない場合に有効です。</p> -</div> - -<div class="note"> -<p><strong>メモ</strong>: Chrome バージョン 52 より前のバージョンでは、プッシュ通知メッセージの配信のために <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> にプロジェクトを作成する必要があり、そのプロジェクト番号と紐付いた API キーをプッシュ通知の配信に利用していました。また、このサービスを利用するには、アプリマニフェストに特別な値を設定する必要があります。</p> -</div> - -<h2 id="Interfaces" name="Interfaces">インターフェイス</h2> +<h2 id="Interfaces">インターフェイス</h2> <dl> <dt>{{domxref("PushEvent")}}</dt> - <dd>{{domxref("ServiceWorker")}} の<a href="/docs/Web/API/ServiceWorkerGlobalScope">グローバルスコープ</a> に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。</dd> + <dd>{{domxref("ServiceWorker")}} の<a href="/ja/docs/Web/API/ServiceWorkerGlobalScope">グローバルスコープ</a> に送られるプッシュアクションを表します。これは、アプリケーションから {{domxref("PushSubscription")}} へ送られる情報を含んでいます。</dd> <dt>{{domxref("PushManager")}}</dt> - <dd>プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。このインターフェイスは、非推奨になった {{domxref("PushRegistrationManager")}} インターフェイスの機能を置き換えるものです。</dd> + <dd>プッシュ通知のリクエスト URL といった、サードパーティのサーバーからプッシュ通知を受け取るための手段を提供します。</dd> <dt>{{domxref("PushMessageData")}}</dt> <dd>サーバーから送られたプッシュ情報にアクセスする手段を提供し、受信したデータを操作するメソッドを含みます。</dd> <dt>{{domxref("PushSubscription")}}</dt> <dd>サブスクリプションのエンドポイント URL を提供し、プッシュサービスから購読を解除できるようにします。</dd> + <dt>{{domxref("PushSubscriptionOptions")}}</dt> + <dd>プッシュサブスクリプションに関連付けられたオプションを表します。</dd> </dl> -<h2 id="Service_worker_additions" name="Service_worker_additions">サービスワーカーへの追加機能</h2> +<h2 id="Service_worker_additions">サービスワーカーへの追加機能</h2> -<p>以下の <a href="/docs/Web/API/Service_Worker_API">Service Worker API</a> への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。</p> +<p>以下の <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> への追加機能は、 Push API 仕様に含まれています。これらは、プッシュ通知メッセージを使用するためのエントリーポイントを提供するため、および、プッシュとサブスクリプション変更イベントの監視と応答のための追加です。</p> <dl> <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> @@ -82,11 +65,11 @@ translation_of: Web/API/Push_API <dd>{{Event("pushsubscriptionchange")}} イベントが発生する度に発動するイベントハンドラです。例えば、プッシュサブスクリプションが無効になったり、無効になりつつある時 (即ち、プッシュサーバーが有効期限を設定している場合) です。</dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <p>Mozilla の <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> は便利なプッシュ通知の例をたくさん揃えています。</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -105,23 +88,17 @@ translation_of: Web/API/Push_API </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<div> <h3 id="PushEvent"><code>PushEvent</code></h3> -<div> <p>{{Compat("api.PushEvent")}}</p> <h3 id="PushMessageData"><code>PushMessageData</code></h3> -<div> <p>{{Compat("api.PushMessageData")}}</p> -</div> -</div> -</div> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li> diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html index 3eb39c4f7a..b7d8f9f250 100644 --- a/files/ja/web/api/request/index.html +++ b/files/ja/web/api/request/index.html @@ -60,7 +60,7 @@ browser-compat: api.Request <dl> <dt>{{domxref("Request.arrayBuffer()")}}</dt> - <dd>リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> + <dd>リクエスト本体を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Request.blob()")}}</dt> <dd>リクエスト本体を表す {{domxref("Blob")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Request.clone()")}}</dt> diff --git a/files/ja/web/api/response/arraybuffer/index.html b/files/ja/web/api/response/arraybuffer/index.html new file mode 100644 index 0000000000..444a450415 --- /dev/null +++ b/files/ja/web/api/response/arraybuffer/index.html @@ -0,0 +1,95 @@ +--- +title: Response.arrayBuffer() +slug: Web/API/Response/arrayBuffer +tags: + - API + - ArrayBuffer + - Fetch + - Method + - Reference + - Response +translation_of: Web/API/Response/arrayBuffer +original_slug: Web/API/Body/arrayBuffer +browser-compat: api.Response.arrayBuffer +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>arrayBuffer()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、リクエストの本文を読み取り、 {{jsxref("ArrayBuffer")}} で解決されるプロミスを返します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.arrayBuffer().then(function(<em>buffer</em>) { + // buffer を使用した何らかの処理 +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>{{jsxref("ArrayBuffer")}} で解決されるプロミス。</p> + +<h2 id="Examples">例</h2> + +<h3 id="Playing_music">音楽の演奏</h3> + +<p><a href="https://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer のライブ</a>では、Play ボタンを配置して、押下されると <code>getData()</code> 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。ダウンロード中に演奏を開始したい (つまりストリーム再生したい) 場合は、次のように {{domxref("HTMLAudioElement")}} を使いましょう。</p> + +<pre class="brush: js">new Audio("music.ogg").play(); +</pre> + +<p><code>getData()</code> 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックを読み取ります。 また、{{domxref("BaseAudioContext/createBufferSource", "AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 読み取りが成功したら、<code>arrayBuffer()</code> を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、 {{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（<code>source.buffer</code>）として設定し、それから {{domxref("BaseAudioContext/destination", "AudioContext.destination")}} にソースを接続します。</p> + +<p><code>getData()</code> の実行が完了すると、<code>start(0)</code> で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。</p> + +<pre class="brush: js">function getData() { + source = audioCtx.createBufferSource(); + + var myRequest = new Request('viper.ogg'); + + fetch(myRequest).then(function(response) { + return response.arrayBuffer(); + }).then(function(buffer) { + audioCtx.decodeAudioData(buffer, function(decodedData) { + source.buffer = decodedData; + source.connect(audioCtx.destination); + }); + }); +}; + +// wire up buttons to stop and play audio + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +}</pre> + +<h3 id="Reading_files">ファイルを読む</h3> + +<p>{{domxref("Response.Response","Response()")}} コンストラクターは、 {{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、 {{domxref("File")}} を他の形式に読み込むために使用することができます。</p> + +<pre class="brush: js">function readFile(file) { + return new Response(file).arrayBuffer(); +} +</pre> + +<pre + class="brush: html"><input type="file" onchange="readFile(this.files[0])"></pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/blob/index.html b/files/ja/web/api/response/blob/index.html new file mode 100644 index 0000000000..4709a8d364 --- /dev/null +++ b/files/ja/web/api/response/blob/index.html @@ -0,0 +1,65 @@ +--- +title: Response.blob() +slug: Web/API/Response/blob +tags: + - API + - Blob + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.blob +translation_of: Web/API/Response/blob +original_slug: Web/API/Body/blob +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>blob()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{domxref("Blob")}} で解決するプロミスを返します。</span></p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.blob().then(function(<em>myBlob</em>) { + // do something with myBlob +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<div class="note"><strong>注:</strong> {{domxref("Response")}} の {{domxref("Response.type")}} が <code>"opaque"</code> の場合、結果の {{domxref("Blob")}} の {{domxref("Blob.size")}} は <code>0</code>、{{domxref("Blob.type")}} は空文字列 <code>""</code> になり、{{domxref("URL.createObjectURL")}} のようなメソッドでは<em>役に立たなく</em>なります。</div> + +<h3 id="Return_value">返値</h3> + +<p>{{domxref("Blob")}} で解決するプロミスです。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">fetch request の例</a> (<a href="https://mdn.github.io/fetch-examples/fetch-request/">fetch request をライブで</a>実行) では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、それを {{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に入れ、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest) +.then(response => response.blob()) +.then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; +}); +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/body/index.html b/files/ja/web/api/response/body/index.html new file mode 100644 index 0000000000..8d78608350 --- /dev/null +++ b/files/ja/web/api/response/body/index.html @@ -0,0 +1,80 @@ +--- +title: Response.body +slug: Web/API/Response/body +tags: + - API + - Fetch + - Property + - Reference + - Streams + - Response +browser-compat: api.Response.body +translation_of: Web/API/Response/body +original_slug: Web/API/Body/body +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>body</code></strong> は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文コンテンツの {{domxref("ReadableStream")}} です。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">response.body;</pre> + +<h3 id="Value">値</h3> + +<p>{{domxref("ReadableStream")}} です。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://mdn.github.io/dom-examples/streams/simple-pump/">単純なストリームポンプ</a>の例では、画像を読み取り、<code>response.body</code> を使用してレスポンスのストリームを公開し、{{domxref("ReadableStream.getReader()", "ReadableStream.getReader()")}} を使用してリーダーを作成し、そのストリームのチャンクを2番目のカスタム読み取り可能なストリームのキューに入れます — 画像の同一コピーを効果的に作成します。</p> + +<pre class="brush: js">const image = document.getElementById('target'); + +// 元の画像をフェッチ +fetch('./tortoise.png') +// その body を ReadableStream として取得 +.then(response => response.body) +.then(body => { + const reader = body.getReader(); + + return new ReadableStream({ + start(controller) { + return pump(); + + function pump() { + return reader.read().then(({ done, value }) => { + // データを消費する必要がなくなったら、ストリームを閉じます + if (done) { + controller.close(); + return; + } + + // 次のデータチャンクを対象のストリームのキューに入れます + controller.enqueue(value); + return pump(); + }); + } + } + }) +}) +.then(stream => new Response(stream)) +.then(response => response.blob()) +.then(blob => URL.createObjectURL(blob)) +.then(url => console.log(image.src = url)) +.catch(err => console.error(err));</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/ja/docs/Web/API/Streams_API">Streams API</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> +</ul> diff --git a/files/ja/web/api/response/bodyused/index.html b/files/ja/web/api/response/bodyused/index.html new file mode 100644 index 0000000000..75c0ca3d1d --- /dev/null +++ b/files/ja/web/api/response/bodyused/index.html @@ -0,0 +1,67 @@ +--- +title: Response.bodyUsed +slug: Web/API/Response/bodyUsed +tags: + - API + - Fetch + - Property + - Reference + - bodyUsed + - Response +translation_of: Web/API/Response/bodyUsed +original_slug: Web/API/Body/bodyUsed +browser-compat: api.Response.bodyUsed +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>bodyUsed</code></strong> は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本文が読取済みであるかどうかを示す論理値です。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">response.bodyUsed;</pre> + +<h3 id="Value">値</h3> + +<p>論理値。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch リクエストの例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch リクエストをライブで</a>実行）では、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、<code>blob()</code> を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。</p> + +<p><code>response.bodyUsed</code> を <code>response.blob()</code> の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では <code>false</code> を返し、その後では <code>true</code> を返します。</p> + +<h3 id="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> +</pre> + +<h3 id="JS_Content">JS コンテンツ</h3> + +<pre class="brush: js">var myImage = document.querySelector('.my-image'); +fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { + console.log(response.bodyUsed); + var res = response.blob(); + console.log(response.bodyUsed); + return res; +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/formdata/index.html b/files/ja/web/api/response/formdata/index.html new file mode 100644 index 0000000000..00e18dd12d --- /dev/null +++ b/files/ja/web/api/response/formdata/index.html @@ -0,0 +1,58 @@ +--- +title: Response.formData() +slug: Web/API/Response/formData +tags: + - API + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference + - Response +translation_of: Web/API/Response/formData +original_slug: Web/API/Body/formData +browser-compat: api.Response.formData +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>formData()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} のストリームを取得して完全に読み取ります。 {{domxref("FormData")}} オブジェクトで解決されるプロミスを返します。</p> + +<div class="note"> + <p><strong>メモ</strong>: これは主に<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>に関連しています。 ユーザーがフォームを送信し、サービスワーカーがリクエストに介入した場合を考えてみましょう。 例えば、キーと値のマップを取得するために <code>formData()</code> を呼び出し、一部のフィールドを修正した後、フォームをサーバー側に送信 (またはローカルで使用) することができます。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.formData() +.then(function(<em>formdata</em>) { + // formdata を使った何らかの処理 +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>{{domxref("FormData")}} オブジェクトで解決される {{jsxref("Promise")}}。</p> + +<h2 id="Example">例</h2> + +<p>TBD.</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/index.html b/files/ja/web/api/response/index.html index 3884020535..3fb9af40df 100644 --- a/files/ja/web/api/response/index.html +++ b/files/ja/web/api/response/index.html @@ -9,120 +9,121 @@ tags: - Interface - Reference - Response +browser-compat: api.Response translation_of: Web/API/Response --- <div>{{APIRef("Fetch API")}}</div> -<p><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> の <strong><code>Response</code></strong> インターフェイスは、リクエストのレスポンスを表します。</p> +<p><span class="seoSummary"><strong><code>Response</code></strong> は <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> のインターフェイスで、リクエストのレスポンスを表します。</span></p> -<p>{{domxref("Response.Response()")}} コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の {{domxref("Fetchevent.respondWith")}} や {{domxref("GlobalFetch.fetch()")}} などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。</p> +<p><code>Response</code> オブジェクトは {{domxref("Response.Response()")}} コンストラクターを用いて生成することができますが、他の API 操作の結果として返される <code>Response</code> オブジェクトに出会う可能性が高いでしょう。例えば、サービスワーカーの {{domxref("Fetchevent.respondWith")}} や、単純な {{domxref("WindowOrWorkerGlobalScope.fetch()")}} などです。</p> -<h2 id="コンストラクタ">コンストラクタ</h2> +<h2 id="Constructor">コンストラクター</h2> <dl> <dt>{{domxref("Response.Response","Response()")}}</dt> <dd>新しい <code>Response</code> オブジェクトを返します。</dd> </dl> -<h2 id="プロパティ">プロパティ</h2> +<h2 id="Properties">プロパティ</h2> <dl> + <dt>{{domxref("Response.body")}} {{readonlyInline}}</dt> + <dd>本文のコンテンツの {{domxref("ReadableStream")}} です。</dd> + <dt>{{domxref("Response.bodyUsed")}} {{readonlyInline}}</dt> + <dd>本文がレスポンスで使用されたかどうかを定義する論理値が格納されます。</dd> <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt> - <dd>レスポンスに関連した {{domxref("Headers")}} オブジェクトを含む。</dd> + <dd>レスポンスに関連した {{domxref("Headers")}} オブジェクトが入ります。</dd> <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt> - <dd>レスポンスが成功（200-299 の範囲のステータス）したか否かを通知する boolean 値を含む。</dd> + <dd>レスポンスが成功 (<code>200</code>–<code>299</code> の範囲のステータス) したか否かを通知する論理値が入ります。</dd> <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt> - <dd>レスポンスがリダイレクトの結果であるかどうかを示します。 つまり、その URL リストには複数のエントリーがあります。</dd> + <dd>レスポンスがリダイレクトの結果である (つまり、その URL リストには複数のエントリーがある) かどうかを示します。</dd> <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt> - <dd>HTTPステータスコードを返す。(例：200 成功)</dd> + <dd>このレスポンスのステータスコードを返します (成功ならば <code>200</code> になります)。</dd> <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt> - <dd>ステータスコードに対応したステータスメッセージを含む（たとえば、200 で OK）。</dd> + <dd>ステータスコードに対応したステータスメッセージが入ります (たとえば <code>200</code> ならば <code>OK</code>)。</dd> + <dt>{{domxref("Response.trailers")}}</dt> + <dd>{{jsxref("Promise")}} であり、 {{domxref("Headers")}} オブジェクトを返します。これは {{domxref("Response.headers")}} にある HTTP の {{HTTPHeader("Trailer")}} ヘッダーの値です。</dd> <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt> - <dd>レスポンスのタイプを示す。(例：basic,cors)</dd> + <dd>レスポンスの種類です。 (例えば <code>basic</code>, <code>cors</code>)</dd> <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt> - <dd>レスポンスのURLを返す。</dd> - <dt>{{domxref("Response.useFinalURL")}}</dt> - <dd>レスポンスの最後の URL かどうかを通知する boolean 値を含む。</dd> + <dd>レスポンスのURLを返します。</dd> </dl> -<p><code>Response</code> は {{domxref("Body")}} を実装しているため、次のプロパティも使用可能です:</p> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>コンテンツのボディを示す {{domxref("ReadableStream")}} の単純なゲッターです。</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>レスポンスで body が既に使用されているかどうかを示す {{domxref("Boolean")}} 値を保持する。</dd> -</dl> - -<h2 id="メソッド">メソッド</h2> +<h2 id="Methods">メソッド</h2> <dl> + <dt>{{domxref("Response.arrayBuffer()")}}</dt> + <dd>レスポンスの本文を表す {{jsxref("ArrayBuffer")}} で解決するプロミスを返します。</dd> + <dt>{{domxref("Response.blob()")}}</dt> + <dd>レスポンスの本文を表す {{domxref("Blob")}} で解決するプロミスを返します。</dd> <dt>{{domxref("Response.clone()")}}</dt> - <dd><code>Response</code> オブジェクトのクローンを生成する。</dd> + <dd><code>Response</code> オブジェクトの複製を生成します。</dd> <dt>{{domxref("Response.error()")}}</dt> - <dd>ネットワークエラーに関連した新しい <code>Response</code> オブジェクトを返す。</dd> + <dd>ネットワークエラーに関連した新しい <code>Response</code> オブジェクトを返します。</dd> + <dt>{{domxref("Response.formData()")}}</dt> + <dd>レスポンスの本文を表す {{domxref("FormData")}} で解決するプロミスを返します。</dd> + <dt>{{domxref("Response.json()")}}</dt> + <dd>レスポンスの本文のテキストを {{jsxref("JSON")}} として解釈した結果で解決するプロミスを返します。</dd> + <dt>{{domxref("Response.redirect()")}}</dt> - <dd>異なる URL で新しい response を生成する</dd> + <dd>異なる URL で新しい response を生成します。</dd> + <dt>{{domxref("Response.text()")}}</dt> + <dd>レスポンスの本文のテキスト表現で解決するプロミスを返します。</dd> </dl> -<p><code>Response</code> は {{domxref("Body")}} を実装しているため、次のメソッドも使用可能です:</p> -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("ArrayBuffer")}} で解決する promise を返す。</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("Blob")}} で解決する promise を返す。</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{domxref("FormData")}} オブジェクトで解決する promise を返す。</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、 {{jsxref("JSON")}} オブジェクトで解決する promise を返す。</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>{{domxref("Response")}} ストリームを取得し、それを完全に読み込む。これは、{{domxref("USVString")}} （text）で解決する promise を返す。</dd> -</dl> +<h2 id="Examples">例</h2> + +<h3 id="Fetching_an_image">画像のフェッチ</h3> -<h2 id="例">例</h2> +<p><a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">basic fetch example</a> (<a href="https://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) では image を取得するために単純な <code>fetch()</code> を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。<code>fetch()</code> はプロミスを返し、これはこのリソースフェッチ捜査に関連付けられた <code>Response</code> オブジェクトで解決します。</p> -<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">basic fetch example</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">run example live</a>) では image を取得するために単純な <code>fetch()</code> を使用し、それを {{htmlelement("img")}} タグの中に入れて表示しています。<code>fetch()</code> はプロミスを返し、then の引数として Response オブジェクトを渡します。image をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Body.blob")}}（{{domxref("Response")}} は body を実装しています）を実行する必要があることに注意してください。</p> +<p>画像をリクエストするとき、レスポンスに正しい MIME タイプを設定するために、{{domxref("Response.blob")}} を実行する必要があることに注意してください。</p> -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('flowers.jpg').then(function(response) { - return response.blob(); -}).then(function(blob) { - var objectURL = URL.createObjectURL(blob); - myImage.src = objectURL; +<pre class="brush: js">const image = document.querySelector('.my-image'); +fetch('flowers.jpg') +.then(response => response.blob()) +.then(blob => { + const objectURL = URL.createObjectURL(blob); + image.src = objectURL; });</pre> -<p>カスタム <code>Response</code> オブジェクトを生成するために、{{domxref("Response.Response()")}} コンストラクタを使用することもできます：</p> +<p>{{domxref("Response.Response()")}} コンストラクターを使用して、独自の <code>Response</code> オブジェクトを生成することもできます。</p> + +<pre class="brush: js">const response = new Response();</pre> + +<h3 id="An_Ajax_Call">Ajax 呼び出し</h3> -<pre class="brush: js">var myResponse = new Response();</pre> +<p>ここで JSON 文字列を生成する PHP のプログラムファイルを呼び出し、結果として JSON の値を表示します。簡単なエラーハンドリングも含んでいます。</p> -<h2 id="仕様">仕様</h2> +<pre class="brush: js">// Function to do an Ajax call +const doAjax = async () => { + const response = await fetch('Ajax.php'); // Generate the Response object + if (response.ok) { + const jsonValue = await response.json(); // Get JSON value from the response body + return Promise.resolve(jsonValue); + } else { + return Promise.reject('*** PHP file not found'); + } +} -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#response-class','Response')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +// Call the function and output value or error message to console +doAjax().then(console.log).catch(console.log); +</pre> -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> +<h2 id="Specifications">仕様書</h2> +{{Specifications}} +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.Response")}}</p> +<p>{{Compat}}</p> -<h2 id="関連項目">関連項目</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> </ul> diff --git a/files/ja/web/api/response/json/index.html b/files/ja/web/api/response/json/index.html new file mode 100644 index 0000000000..f59b3f4313 --- /dev/null +++ b/files/ja/web/api/response/json/index.html @@ -0,0 +1,78 @@ +--- +title: Response.json() +slug: Web/API/Response/json +tags: + - API + - Fetch + - JSON + - Method + - Reference + - メソッド + - Response +translation_of: Web/API/Response/json +original_slug: Web/API/Body/json +browser-compat: api.Response.json +--- +<div>{{APIRef("Fetch API")}}</div> + +<p><strong><code>json()</code></strong> は {{DOMxRef("Response")}} インターフェイスのメソッドで、 {{DOMxRef("Response")}} のストリームを取得して完全に読み取ります。本文のテキストを {{JSxRef("JSON")}} として解釈した結果で解決するプロミスを返します。</p> + +<p>なお、このメソッドは <code>json()</code> という名前であるにもかかわらず、結果は JSON ではありません。入力として JSON を取って解釈し、 JavaScript のオブジェクトを生成します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>response</em>.json().then(<em>data</em> => { + // data を使用した処理を実行する +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>JavaScript オブジェクトに解決される {{jsxref("Promise")}}。 このオブジェクトは、オブジェクト、配列、文字列、数値など、JSON で表現できるものであれば何でもなります。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json の例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-json/">fetch json をライブで</a>実行）では、 {{DOMxRef("Request.Request", "Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して <code>.json</code> ファイルを読み取ります。読み取りに成功したら、<code>json()</code> を使用してデータを読み取り、解析し、結果のオブジェクトから期待通りに値を読み出し、それらの値をリスト項目に追加して商品データとして表示します。</p> + +<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); +const myRequest = new Request('products.json'); + +fetch(myRequest) + .then(response => response.json()) + .then(data => { + for (const product of data.products) { + let listItem = document.createElement('li'); + listItem.appendChild( + document.createElement('strong') + ).textContent = product.Name; + listItem.append( + ` can be found in ${ + product.Location + }. Cost: ` + ); + listItem.appendChild( + document.createElement('strong') + ).textContent = `£${product.Price}`; + myList.appendChild(listItem); + } + }) + .catch(console.error);</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/response/text/index.html b/files/ja/web/api/response/text/index.html new file mode 100644 index 0000000000..26aafdcfe7 --- /dev/null +++ b/files/ja/web/api/response/text/index.html @@ -0,0 +1,74 @@ +--- +title: Response.text() +slug: Web/API/Response/text +tags: + - API + - Fetch + - Method + - Reference + - Text + - Response +translation_of: Web/API/Response/text +original_slug: Web/API/Body/text +browser-compat: api.Response.text +--- +<div>{{APIRef("Fetch")}}</div> + +<p><strong><code>text()</code></strong> は {{domxref("Response")}} インターフェイスのメソッドで、 {{domxref("Response")}} ストリームを取得して完全に読み込みます。 {{jsxref("String")}} で解決するプロミスを返します。 レスポンスは<em>常に</em> UTF-8 としてデコードされます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><var>response</var>.text().then(function (<var>text</var>) { + // text レスポンスを使用して何か実行する。 +});</pre> + +<h3 id="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value">返値</h3> + +<p>{{jsxref("String")}} で解決するプロミスです。</p> + +<h2 id="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">fetch text の例</a>（<a href="https://mdn.github.io/fetch-examples/fetch-text/">fetch text をライブで</a>実行）には、{{htmlelement("article")}} 要素と 3 つのリンク（<code>myLinks</code> 配列に格納されています）があります。 最初に、リンクのすべてをループし、それぞれのリンクに、その 1 つをクリックしたとき、 <code>getData()</code> 関数がリンクの <code>data-page</code> 識別子を引数として実行されるように、<code>onclick</code> イベントハンドラーを設定します。</p> + +<p><code>getData()</code> が実行されると、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して特定の <code>.txt</code> ファイルをフェッチします。 フェッチが成功したら、<code>text()</code> を使用してレスポンスから {{domxref("USVString")}} (テキスト) オブジェクトを読み取り、{{htmlelement("article")}} 要素の {{domxref("Element.innerHTML","innerHTML")}} にテキストオブジェクトの値を設定します。</p> + +<pre class="brush: js">let myArticle = document.querySelector('article'); +let myLinks = document.querySelectorAll('ul a'); + +for(let i = 0; i <= myLinks.length-1; i++) { + myLinks[i].onclick = function(e) { + e.preventDefault(); + let linkData = e.target.getAttribute('data-page'); + getData(linkData); + } +}; + +function getData(pageId) { + console.log(pageId); + var myRequest = new Request(pageId + '.txt'); + fetch(myRequest).then(function(response) { + return response.text().then(function(text) { + myArticle.innerHTML = text; + }); + }); +}</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御 (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html index 531e02d875..13be6a4506 100644 --- a/files/ja/web/css/caret-color/index.html +++ b/files/ja/web/css/caret-color/index.html @@ -3,68 +3,81 @@ title: caret-color slug: Web/CSS/caret-color tags: - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - HTML 整形 - - HTML 色 + - CSS Property + - CSS User Interface + - Editing + - HTML Colors + - Input - Reference + - Styling HTML + - Text Editing + - caret + - caret-color - contenteditable - - テキスト編集 - - 入力 - - 編集 + - 'recipe:css-property' +browser-compat: css.properties.caret-color translation_of: Web/CSS/caret-color --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">CSS の <strong><code>caret-color</code></strong> プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。</span>キャレットは {{HTMLElement("input")}} 要素や {{htmlattrxref("contenteditable")}} 属性が付いた要素に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p> +<p><strong><code>caret-color</code></strong> は CSS のプロパティで、次に入力された文字が挿入される位置を示す可視マーカーである<strong>入力キャレット</strong>の色を設定します。これは<strong>テキスト入力カーソル</strong>と呼ばれることもあります。キャレットは {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p> <div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p>なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 {{cssxref("cursor")}} プロパティが <code>auto</code> のときにテキスト上に移動した場合や、 <code>cursor</code> プロパティが <code>text</code> または <code>vertical-text</code> の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush: css no-line-numbers">/* キーワード値 */ caret-color: auto; caret-color: transparent; -caret-color: currentColor; +caret-color: currentcolor; /* <color> 値 */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8); -</pre> -<h3 id="Values" name="Values">値</h3> +/* グローバル値 */ +caret-color: inherit; +caret-color: initial; +caret-color: revert; +caret-color: unset;</pre> + +<h3 id="Values">値</h3> <dl> <dt><code>auto</code></dt> - <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 + <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("<color>","currentcolor","#currentcolor_keyword")}} ですが、視認性や周囲のコンテンツとのコントラストを高めるために、ユーザーエージェントが <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。 <div class="note"> - <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションで補完されません。</p> + <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションでは補完されません。</p> </div> </dd> <dt>{{cssxref("<color>")}}</dt> <dd>キャレットの色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<h3 id="HTML">HTML</h3> +<h3 id="Setting_a_custom_caret_color">独自のキャレット色の設定</h3> -<pre class="brush: html"><input value="この入力欄は既定のキャレットを使用します。" size="64"/> -<input class="custom" value="キャレットが独自の色です！" size="64"/> +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input value="このフィールドは既定のキャレットを使用します。" size="64"/> +<input class="custom" value="キャレットが独自の色になります！" size="64"/> <p contenteditable class="custom">この段落は編集可能であり、 同様にキャレットが独自の色です！</p></pre> -<h3 id="CSS">CSS</h3> +<h4 id="CSS">CSS</h4> <pre class="brush: css">input { caret-color: auto; @@ -76,47 +89,29 @@ input.custom { caret-color: red; } - p.custom { caret-color: green; }</pre> -<h3 id="結果">結果</h3> - -<p>{{EmbedLiveSample('Example', 500, 200)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td> - <td>{{Spec2("CSS3 UI")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h4 id="Result">結果</h4> -<p>{{cssinfo}}</p> +<p>{{EmbedLiveSample('Setting_a_custom_caret_color', 500, 200)}}</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.caret-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>{{HTMLElement("input")}} 要素</li> <li>要素のテキストを編集可能にする HTML の {{htmlattrxref("contenteditable")}} 属性</li> - <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li> - <li><a href="/ja/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">内容を編集可能にする</a></li> + <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li> <li>{{cssxref("<color>")}} データ型</li> <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> </ul> diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html index cc1879d559..768c36a8d8 100644 --- a/files/ja/web/css/column-rule/index.html +++ b/files/ja/web/css/column-rule/index.html @@ -3,16 +3,11 @@ title: column-rule slug: Web/CSS/column-rule tags: - CSS + - CSS Multi-column Layout - CSS Property - - CSS プロパティ - - CSS 段組みレイアウト - - column-rule - - column-rule-color - - column-rule-style - - column-rule-width - - リファレンス - - 一括指定プロパティ - - 段組み + - Reference + - 'recipe:css-property' +browser-compat: css.properties.column-rule translation_of: Web/CSS/column-rule --- <div>{{CSSRef}}</div> @@ -21,15 +16,13 @@ translation_of: Web/CSS/column-rule <div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p>これは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>であり、一回の便利な宣言で個別の <code>column-rule-*</code> プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。</p> <div class="note"> <p><strong>メモ:</strong> 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">column-rule: dotted; column-rule: solid 8px; @@ -39,43 +32,48 @@ column-rule: thick inset blue; /* グローバル値 */ column-rule: inherit; column-rule: initial; +column-rule: revert; column-rule: unset; </pre> -<p><code>column-rule</code> プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。</p> +<p><code>column-rule</code> プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。</p> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code><'column-rule-width'></code></dt> - <dd>{{cssxref("<length>")}} または3つのキーワード、 <code>thin</code>, <code>medium</code>, <code>thick</code> のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd> + <dd>{{cssxref("<length>")}} または 3 つのキーワード、 <code>thin</code>、<code>medium</code>、<code>thick</code> のうちの 1 つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd> <dt><code><'column-rule-style'></code></dt> <dd>有効な値と詳細は {{cssxref("border-style")}} を参照してください。</dd> <dt><code><'column-rule-color'></code></dt> <dd>{{cssxref("<color>")}} 値です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="Example_1" name="Example_1">例1</h3> +<h3 id="Example_1">例 1</h3> -<pre class="brush: css">/* "medium dotted currentColor" と同じ */ +<pre class="brush: css">/* "medium dotted currentcolor" と同じ */ p.foo { column-rule: dotted; } /* "medium solid blue" と同じ */ p.bar { column-rule: solid blue; } -/* "8px solid currentColor" と同じ */ +/* "8px solid currentcolor" と同じ */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; } </pre> -<h3 id="Example_2" name="Example_2">例2</h3> +<h3 id="Example_2">例 2</h3> <h4 id="HTML">HTML</h4> @@ -97,31 +95,23 @@ p.abc { column-rule: thick inset blue; } } </pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample('Example_2')}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td> - <td>{{Spec2('CSS3 Multicol')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="See_also">関連情報</h2> -<p>{{Compat("css.properties.column-rule")}}</p> +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li>{{CSSXref("column-rule-style")}}</li> + <li>{{CSSXref("column-rule-width")}}</li> + <li>{{CSSXref("column-rule-color")}}</li> +</ul> diff --git a/files/ja/web/html/attributes/rel/index.html b/files/ja/web/html/attributes/rel/index.html new file mode 100644 index 0000000000..9a3da3d8be --- /dev/null +++ b/files/ja/web/html/attributes/rel/index.html @@ -0,0 +1,419 @@ +--- +title: 'HTML attribute: rel' +slug: Web/HTML/Attributes/rel +tags: + - Attribute + - Attributes + - Constraint validation + - Link + - form + - rel +translation_of: Web/HTML/Attributes/rel +--- +<p>{{HTMLSidebar}}{{draft}}</p> + +<p class="summary"><strong><code>rel</code></strong> 属性は、リンク先のリソースと現在の文書との関係を定義します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}}、{{htmlelement('form')}} で有効で、対応する値は属性が見つかった要素に依存します。</p> + +<p>関係の種類は <code>rel</code> 属性の値によって決まりますが、 <code>rel</code> 属性が存在する場合は、一連の固有のキーワードが順不同で空白で区切られたものであることが必要です。意味を表現しないクラス名とは異なり、 <code>rel</code> 属性は機械と人間の両方にとって意味のあるトークンを表現しなければなりません。現在、 <code>rel</code> 属性の値として登録されているのは、 <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">IANA link relation registry</a>、<a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes">HTML Living Standard</a>、そして Living Standard が<a href="https://html.spec.whatwg.org/multipage/links.html#other-link-types">提案している</a> microformats wiki の自由に編集可能な <a href="https://microformats.org/wiki/existing-rel-values">existing-rel-values page</a> ページです。上記の 3 つの情報源のいずれにも存在しない <code>rel</code> 属性が使用された場合、 HTML バリデーター (<a href="https://validator.w3.org/">W3C Markup Validation Service</a> など) によっては警告を生成します。</p> + +<p>次の表は、既存のキーワードの中でも特に重要なものです。空白で区切られた値の中のすべてのキーワードは、その値の中で一意でなければなりません。</p> + +<table class="standard-table"> + <caption><code>rel</code> 属性の値と、それぞれが関連する要素</caption> + <thead> + <tr> + <th><code>rel</code> の値</th> + <th>説明</th> + <th><code>{{htmlelement('link')}}</code></th> + <th><code>{{htmlelement('a')}}</code> および <code>{{htmlelement('area')}}</code></th> + <th><code>{{htmlelement('form')}}</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("attr-alternate", "alternate")}}</code></td> + <td>現在の文書の別な表現。</td> + <td>リンク</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-author", "author")}}</code></td> + <td>現在の文書や記事の著者。</td> + <td>リンク</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-bookmark", "bookmark")}}</code></td> + <td>直近の祖先の章に対するパーマリンク。</td> + <td class="not-allowed">不許可</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-canonical", "canonical")}}</code></td> + <td>現在の文書の推奨 URL。</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/dns-prefetch">dns-prefetch</a></code></td> + <td>宛先リソースのオリジンに対する DNS 解決を先取りして行うようブラウザーに指示する</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-external", "external")}}</code></td> + <td>参照先の文書は、現在の文書と同じサイトの一部ではありません。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-help", "help")}}</code></td> + <td>コンテンツに応じたヘルプにリンクします。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-icon", "icon")}}</code></td> + <td>現在の文書を表すアイコンです。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-license", "license")}}</code></td> + <td>現在の文書のメインコンテンツが、参照先の文書で説明されている著作権ライセンスによってカバーされていることを示す。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/manifest">manifest</a></code></td> + <td>ウェブアプリマニフェスト</td> + <td>リンク</td> + <td>不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/modulepreload">modulepreload</a></code></td> + <td>スクリプトを先取りして取得し、後で評価できるようにこの文書のモジュールマップに保存するようブラウザーに指示します。オプションで、モジュールの依存関係も読み取ることができます。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-next", "next")}}</code></td> + <td>現在の文書が一連の文書の一部であり、その中の次の文書が参照先の文書であることを示します。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-nofollow", "nofollow")}}</code></td> + <td>現在の文書の原著者または発行者が、参照先の文書を支持していないことを示します。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/noopener">noopener</a></code></td> + <td>ハイパーリンクが補助的な閲覧コンテキストのいずれかを生成する (つまり、適切な <code>target</code> 属性値を持つ) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを生成します。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-noreferrer", "noreferrer")}}</code></td> + <td><code>Referer</code> ヘッダーを含めません。さらに、 <code>noopener</code> と同じ効果もあります。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-opener", "opener")}}</code></td> + <td>ハイパーリンクによって、補助閲覧コンテキストではない最上位の閲覧コンテキストが生成される場合 (すなわち、 <code>target</code> 属性の値が "<code>_blank</code>" である場合)、補助閲覧コンテキストを生成します。</td> + <td class="not-allowed">不許可</td> + <td>注釈</td> + <td>注釈</td> + </tr> + <tr> + <td><code>{{anch("attr-pingback", "pingback")}}</code></td> + <td>現在の文書へのピンバックを処理するピンバックサーバーのアドレスを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/preconnect">preconnect</a></code></td> + <td>ユーザーエージェントが対象となるリソースのオリジンへの接続を先読みすることを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/prefetch">prefetch</a></code></td> + <td>ユーザーエージェントが、後続のナビゲーションに必要となる可能性の高いターゲットリソースを先取りしてキャッシュすることを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/preload">preload</a></code></td> + <td><code><a href="as">as</a></code> 属性で指定された潜在的な距離 (および対応する距離に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュしなければならないことを指定する。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/prerender">prerender</a></code></td> + <td>ユーザーエージェントが、対象となるリソースを先取りして取得し、将来的に高速なレスポンスを実現するための処理を行うことを指定します。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-prev", "prev")}}</code></td> + <td>現在の文書が一連の文書の一部であり、その中の前の文書が参照先の文書であることを示します。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-search", "search")}}</code></td> + <td>現在の文書とその関連ページを検索するのに使用できるリソースへのリンクを提供します。</td> + <td>リンク</td> + <td>リンク</td> + <td>リンク</td> + </tr> + <tr> + <td><code>{{anch("attr-stylesheet", "stylesheet")}}</code></td> + <td>スタイルシートをインポートします。</td> + <td>外部リソース</td> + <td class="not-allowed">不許可</td> + <td class="not-allowed">不許可</td> + </tr> + <tr> + <td><code>{{anch("attr-tag", "tag")}}</code></td> + <td>現在の文書に適用される (与えられたアドレスで識別される) タグを与えます。</td> + <td class="not-allowed">不許可</td> + <td>リンク</td> + <td class="not-allowed">不許可</td> + </tr> + </tbody> +</table> + +<p><code>rel</code> 属性は {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}}、{{htmlelement('form')}} の各要素に関連していますが、これらの要素のサブセットにのみ関連する値もあります。他の HTML キーワード属性の値と同様に、これらの値は大文字小文字の区別がありません。</p> + +<p><code>rel</code> rel属性には既定値がありません。属性が省略された場合や、属性の値がいずれも対応されていない場合、文書は宛先のリソースとの間にハイパーリンクがあるということ以外には、特に関係を持ちません。この場合、 {{htmlelement('link')}} と {{htmlelement('form')}} では、 <code>rel</code> 属性がない場合、キーワードがない場合、または上記のスペースで区切られたキーワードのうち 1 つ以上がない場合、その要素はいかなるリンクも生成しません。 {{htmlelement('a')}} と {{htmlelement('area')}} はリンクを生成しますが、関係は定義されません。</p> + +<h2 id="Values">値</h2> + +<dl> + <dt>{{htmlattrdef("alternate")}}</dt> + <dd>現在の文書の代替表現を示します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}} で有効であり、意味は他の属性の値に依存します。 + <ul> + <li><code>{{anch('stylesheet')}}</code> キーワードと共に <code><link></code> で使用された場合は、代替スタイルシートを生成します。 + <pre class="brush:html"><!-- 常設スタイルシート --> +<link rel="stylesheet" href="default.css"> +<!-- 代替スタイルシート --> +<link rel="alternate stylesheet" href="highcontrast.css" title="High contrast"></pre> + </li> + <li>この文書の言語と異なる <a href="hreflang">hreflang</a> 属性と共に使用された場合は、翻訳版を表します。</li> + <li><a href="type">type</a> 属性と共に使用された場合は、属性によって、参照先の文書が異なるファイル形式のの同じコンテンツであることを示します。例えば、 <code>type="application/rss+xml"</code> とすると、シンジケーションフィードを参照するハイパーリンクが生成されます。 + <pre class="brush:html"><link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog"></pre> + </li> + <li><a href="hreflang">hreflang</a> と <a href="type">type</a> の両属性と共に使用された場合は、この文書の別の言語、他のメディア向けの別なファイル形式の版へのリンクを指定します。 + <pre class="brush:html"><link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> +<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF"></pre> + </li> + </ul> + <p class="note">メモ: 廃止された <code>rev="made"</code> は <code>rel="alternate"</code> として扱われます。</p> + </dd> + <dt>{{htmlattrdef("author")}}</dt> + <dd>現在の文書や記事の著者を示します。 {{htmlelement('link')}}、{{htmlelement('a')}}、{{htmlelement('area')}} 要素で使用された場合、 <code>author</code> キーワードはハイパーリンクを生成します。 {{htmlelement('a')}} と {{htmlelement('area')}} では、リンクされた文書 (または<code>mailto:</code>) が、最も近い祖先の {{htmlelement('article')}} があればその祖先の著者に関する情報を提供することを示し、そうでなければ文書全体を示します。 {{htmlelement('link')}} の場合は、文書全体の著者を表します。</dd> + <dt>{{htmlattrdef("bookmark")}}</dt> + <dd>{{htmlelement('a')}} および {{htmlelement('area')}} の <code>rel</code> 属性の値として使用されると、このブックマークは祖先のセクションに対して、 1 つ以上あれば最も近い祖先の {{htmlelement('article')}} または {{htmlelement('section')}} を、そうでなければ最も近い見出しの兄弟または祖先の子孫・・・というようにパーマリンクを提供します。</dd> + <dt>{{htmlattrdef("canonical")}}</dt> + <dd>{{htmlelement('link')}} で有効であり、現在の文書で推奨される URL を示します。検索エンジンで有用です。</dd> + <dt>{{htmlattrdef("dns-prefetch")}}</dt> + <dd>{{htmlelement('link')}} 要素が {{htmlelement('body')}} と {{htmlelement('head')}} の両方の中にある場合に関連し、ターゲットとなるリソースのオリジンに対する DNS 解決を先取りして実行するようブラウザーに指示します。ユーザーが必要とする可能性の高いリソースに有効で、ユーザーがリソースにアクセスする際に、ブラウザーが指定されたリソースのオリジンに対する DNS 解決を先取りして実行するため、待ち時間を短縮してパフォーマンスを向上させることができます。リソースヒントにある <a href="/ja/docs/Web/Performance/dns-prefetch">dns-prefetch</a> を参照してください。</dd> + <dt>{{htmlattrdef("external")}}</dt> + <dd>{{htmlelement('form')}}、{{htmlelement('a')}}、{{htmlelement('area')}} に関連し、参照先の文書が現在のサイトの一部ではないことを示します。属性セレクターと一緒に使うことで、外部リンクを現在のサイトから離れることをユーザーに示すようなスタイルにすることができます。</dd> + <dt>{{htmlattrdef("help")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}} に関連し、 <code>help</code> キーワードは、リンク先のコンテンツがコンテキスト依存のヘルプを提供することを示し、ハイパーリンクを定義している要素の親とその子のための情報を提供します。 <code><link></code> 内で使用された場合、ヘルプは文書全体を対象とします。 {{htmlelement('a')}} および {{htmlelement('area')}} に含まれていて対応している場合、既定のカーソルが <code>pointer</code> ではなく <code>help</code> になります。</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd> + <p>{{htmlelement('link')}} と共に有効で、リンクされたリソースは、現在の文書の、ユーザーインターフェースでページを表現するためのリソースであるアイコンを表します。</p> + + <p><code>icon</code> の値の最も一般的な用途はファビコンです。</p> + + <pre class="brush: html"><link rel="icon" href="favicon.ico"></pre> + + <p>複数の <code><link rel="icon"></code> があった場合、ブラウザーはそれぞれの <a href="media"><code>media</code></a> 属性、<a href="type"><code>type</code></a> 属性、 <a href="sizes"><code>sizes</code></a> 属性を使って、最も適切なアイコンを選択します。複数のアイコンが同じように適切である場合は、最後のアイコンが使用されます。最も適切なアイコンが、対応していないファイル形式を使用しているなどの理由で不適切であることが後に判明した場合、ブラウザーは次に適切なアイコンを選択します。</p> + + <div class="notecard note"> + <p>Firefox 83 以前は <a href="/ja/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> 属性が <code>rel="icon"</code> で対応していませんでしたが、 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">Chrome でも未解決の問題があります</a>。</p> + </div> + + <p><strong>メモ:</strong> Apple の iOS では、他のモバイルブラウザーのように、ウェブクリップやスタートアップのプレースホルダー用のウェブページのアイコンを選択するために、このリンク種別や <a href="sizes"><code>sizes</code></a> 属性を使用していません。代わりに、標準外の <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> および <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> をそれぞれ使用しています。</p> + + <p class="note"><code>shortcut</code> リンク種別が <code>icon</code> の前に見られることが良くありますが、このリンク種別は適合するものではなく、無視されるので<strong>使用しないでください</strong>。</p> + </dd> + <dt>{{htmlattrdef("license")}}</dt> + <dd> + <p>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}} の各要素で有効である <code>license</code> の値は、ハイパーリンクがライセンス情報を記述した文書につながること、現在の文書のメインコンテンツが、参照された文書で記述された著作権ライセンスによってカバーされていることを示します。 {{HTMLElement("head")}} 要素内にない場合、規格では、文書の特定の部分に適用されるハイパーリンクか、文書全体に適用されるハイパーリンクかを区別していません。ページ上のデータのみがこれを示すことができます。</p> + + <pre class="brush: html"><link rel="license" href="#license"></pre> + + <p><strong>メモ:</strong> 認識はされているものの、同義語の <code>copyright</code> は正しくないため使用しないでください。</p> + </dd> + <dt>{{htmlattrdef("manifest")}}</dt> + <dd><a href="/ja/docs/Web/Manifest">ウェブアプリマニフェスト</a>です。オリジンをまたいだ読み取りのための CORS プロトコルの使用に必要です。</dd> + <dt>{{htmlattrdef("modulepreload")}}</dt> + <dd>パフォーマンスの向上に役立ちます。文書内の {{htmlelement('link')}} に関連して、 <code>rel="modulepreload"</code> を設定すると、ブラウザーはスクリプト (および依存関係) を先取りして取得し、文書のモジュールマップに保存して後で評価するようになります。 <code>modulepreload</code> リンクは、モジュールが必ずしも必要になる前に、モジュールマップに準備された (評価されていない) モジュールでネットワークの取得を確実に行うことができます。<a href="/ja/docs/Web/HTML/Link_types/modulepreload">link types: <code>modulepreload</code></a> も参照してください。</dd> + <dt>{{htmlattrdef("next")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する <code>next</code> の値は、現在の文書が一連の文書の一部であり、次の文書が参照先の文書であることを示します。 <code><link></code> に含まれている場合、ブラウザーはその文書が次に取得されると仮定し、リソースのヒントとして扱うことができます。</dd> + <dt>{{htmlattrdef("nofollow")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する <code>nofollow</code> キーワードは、サーチエンジンスパイダーにリンク関係を無視するよう指示します。 nofollow の関係は、現在の文書の所有者が、参照先の文書を支持していないことを示す場合があります。このキーワードは、検索エンジンオプティマイザーが、リンクファームがスパムページではないことを示すために使用します。</dd> + <dt>{{htmlattrdef("noopener")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連するもので、ハイパーリンクがそもそもこれらのいずれかを作成する (つまり、適切な <code>target</code> 属性値を持っている) 場合、補助的な閲覧コンテキストではない最上位の閲覧コンテキストを作成します。言い換えれば、 <code><a href="/ja/docs/Web/API/Window/opener">window.opener</a></code> が null で <code><a href="target">target</a>="_parent"</code> が設定されているかのようにリンクを動作させます。<br> + <br> + これは {{anch("opener")}} の逆です。</dd> + <dt>{{htmlattrdef("noreferrer")}}</dt> + <dd>{{htmlelement('form')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連するもので、この値を含めると、リファラーを不明とし (<code>Referer</code> ヘッダーが含まれません)、あたかも <code>noopener</code> も設定されているかのように、最上位のの閲覧コンテキストが生成されます。</dd> + <dt>{{htmlattrdef("opener")}}</dt> + <dd>ハイパーリンクが最上位の閲覧コンテキストを生成し、それが補助的な閲覧コンテキストでない場合 (すなわち "<code>_blank</code>" が <code>target</code> 属性の値として設定されている場合)、補助的な閲覧コンテキストを生成します。事実上、 {{anch("noopener")}} の逆です。</dd> + <dt>{{htmlattrdef("pingback")}}</dt> + <dd>現在の文書へのピンバックを処理するピンバックサーバーのアドレスを与えます。</dd> + <dt>{{htmlattrdef("preconnect")}}</dt> + <dd>ユーザーエージェントが対象リソースのオリジンに先回りして接続することを指定します。</dd> + <dt>{{htmlattrdef("prefetch")}}</dt> + <dd>ユーザーエージェントが、後続のナビゲーションに必要となる可能性のあるターゲットリソースを先取りして取得し、キャッシュすることを指定します。</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd><code><a href="as">as</a></code> 属性で指定された潜在的な方向 (および対応する方向に関連する優先度) に従って、ユーザーエージェントが現在のナビゲーションのためにターゲットリソースを先取りしてキャッシュする必要があることを指定します。</dd> + <dt>{{htmlattrdef("prerender")}}</dt> + <dd>ユーザーエージェントが先取りしてターゲットリソースを取得し、将来のより速いレスポンスに役立つ方法で処理することを指定します。</dd> + <dt>{{htmlattrdef("prev")}}</dt> + <dd> + <p>{{anch("next")}} キーワードと同様に、{{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} に関連する <code>prev</code> の値は、現在の文書が一連の文書の一部であり、このリンクが一連の文書内の直前の文書を参照していることを示します。</p> + + <p>メモ: 別名である <code>previous</code> は正しくないため使用しないでください。</p> + </dd> + <dt>{{htmlattrdef("search")}}</dt> + <dd> + <p>Relevant to {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}} の各要素に関連する <code>search</code> キーワードは、ハイパーリンクが、現在の文書、サイト、および関連リソースでの検索のために特別に設計されたインターフェイスを持つ文書を参照していることを示し、検索に使用できるリソースへのリンクを提供します。</p> + + <p><code><a href="type">type</a></code> 属性が <code>application/opensearchdescription+xml</code> に設定されている場合、そのリソースは、Firefox や Internet Explorer などの一部のブラウザーのインターフェイスに簡単に追加できる <a href="/ja/docs/Web/OpenSearch">OpenSearch</a> プラグインです。</p> + </dd> + <dt>{{htmlattrdef("stylesheet")}}</dt> + <dd> + <p>{{htmlelement('link')}} 要素で有効で、スタイルシートとして使われる外部リソースをインポートします。 <code><a href="type">type</a></code> 属性は <code>text/css</code> スタイルシートの場合は既定値となっているので必要ありません。 <code>text/css</code> 種類のスタイルシートでない場合は、 type を宣言するのがベストです。</p> + + <p>この属性は、リンクがスタイルシートであることを定義しますが、他の属性や rel 値内の他のキーワードとの相互作用は、スタイルシートがダウンロードされるかどうかや使用されるかどうかに影響します。</p> + + <p>{{anch('alternate')}} キーワードと一緒に使われると、代替のスタイルシートを定義します。この場合、空ではない <code><a href="type">title</a></code> を入れてください。</p> + + <p>メディアが <code><a href="media">media</a></code> 属性の値と一致しない場合、外部スタイルシートは使用されず、ダウンロードもされません。</p> + + <p>オリジンをまたいだ読み取りには CORS プロトコルが必要です。</p> + </dd> + <dt>{{htmlattrdef("tag")}}</dt> + <dd>{{htmlelement('a')}} と {{htmlelement('area')}} 要素で有効であり、現在の文書に適用される (指定されたアドレスで識別される) タグを与えます。タグの値は、リンク先の文書に適用されるタグを記述した文書を参照していることを示します。このリンク種別は、タグクラウド内のタグには適していません。タグクラウド内のタグは、複数のページに適用されるのに対し、 <code>rel</code> 属性の <code>tag</code> 値は単一の文書に適用されるからです。</dd> +</dl> + +<h3 id="Non-standard_values">標準外の値</h3> + +<dl> + <dt>apple-touch-icon-precomposed</dt> + <dd> + <pre class="brush: html"> <!-- third-generation iPad with high-resolution Retina display: --> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png"> + <!-- iPhone with high-resolution Retina display: --> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png"> + <!-- first- and second-generation iPad: --> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png"> + <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> + <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png"> + <!-- basic favicon --> + <link rel="icon" href="/static/img/favicon32.7f3da72dcea1.png"></pre> + </dd> +</dl> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat("html.elements.attributes.rel")}}</p> + +<h2 id="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>opener</code> を追加。<code>noopener</code> を <code>target="_blank"</code> の既定値とした。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>tag</code>、<code>search</code>、<code>prefetch</code>、<code>noreferrer</code>、<code>nofollow</code>、<code>icon</code>、<code>author</code> を追加。<br> + <code>copyright</code> を <code>license</code> に改名。<br> + <code>start</code>、<code>chapter</code>、<code>section</code>、<code>subsection</code>、<code>appendix</code> を削除。</td> + </tr> + <tr> + <td>{{SpecName("Preload", "#x2.link-type-preload", "preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td><code>preload</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td><code>dns-prefetch</code>、<code>preconnect</code>、<code>prerender</code> の値を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td><code>alternate</code>、<code>stylesheet</code>、<code>start</code>、<code>chapter</code>、<code>section</code>、<code>subsection</code>、<code>appendix</code>、<code>bookmark</code> を追加。<br> + <code>previous</code> を <code>prev</code> に改名。<br> + <code>top</code> と <code>search</code> を削除。</td> + </tr> + <tr> + <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> + <td> + <p>{{Spec2("HTML3.2")}}<span class="spec-Obsolete"> (廃止)</span></p> + </td> + <td><code>top</code>、<code>contents</code>、<code>index</code>、<code>glossary</code>、<code>copyright</code>、<code>next</code>、<code>previous</code>、<code>help</code>、<code>search</code> を追加。</td> + </tr> + <tr> + <td>{{RFC(1866, "HTML 2.0")}}</td> + <td>{{Spec2("HTML2.0")}}<span class="spec-Obsolete">(廃止)</span></td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_2">ブラウザーの互換性</h2> + +<p>{{Compat("html.elements.link.rel")}}</p> + +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLLinkElement.relList")}}</li> + <li>{{domxref("HTMLAnchorElement.relList")}}</li> + <li>{{domxref("HTMLAreaElement.relList")}}</li> +</ul> diff --git a/files/ja/web/html/element/input/date/index.html b/files/ja/web/html/element/input/date/index.html index 4cb803f548..80a78a36ff 100644 --- a/files/ja/web/html/element/input/date/index.html +++ b/files/ja/web/html/element/input/date/index.html @@ -234,7 +234,7 @@ input:valid+span::after { }</pre> <div class="warning"> -<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したいrすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> +<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> </div> <h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> diff --git a/files/ja/web/javascript/reference/errors/is_not_iterable/index.html b/files/ja/web/javascript/reference/errors/is_not_iterable/index.html deleted file mode 100644 index 665371733f..0000000000 --- a/files/ja/web/javascript/reference/errors/is_not_iterable/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: 'TypeError: ''x'' is not iterable' -slug: Web/JavaScript/Reference/Errors/is_not_iterable -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/is_not_iterable ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not iterable" は、 <a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> の右辺として与えられた値や、 {{jsxref("Promise.all")}} または {{jsxref("TypedArray.from")}} のような関数の引数として与えられた値が<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復可能オブジェクト</a>ではなかった場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: 'x' is not iterable (Firefox, Chrome) -TypeError: 'x' is not a function or its return value is not iterable (Chrome) -</pre> - -<h2 id="エラータイプ">エラータイプ</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> の右辺、 {{jsxref("Promise.all")}} や {{jsxref("TypedArray.from")}} などの引数として指定された値が<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols">反復可能オブジェクト</a>ではありません。反復可能なものは、 {{jsxref("Array")}}, {{jsxref("String")}}, {{jsxref("Map")}} 等のような組み込み反復可能型や、ジェネレーターの結果、<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復可能プロトコル</a>を実装しているオブジェクトが成ることができます。</p> - -<h2 id="例">例</h2> - -<h3 id="Iterating_over_Object_properties">オブジェクトのプロパティの反復処理</h3> - -<p>JavaScript では、 {{jsxref("Object")}} は<a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復処理プロトコル</a> を実装していない限り反復処理できません。したがって、オブジェクトのプロパティを反復処理するために <a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> を使用することはできません。</p> - -<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' }; -for (let p of obj) { // TypeError: obj is not iterable - // … -} -</pre> - -<p>代わりに、オブジェクトのプロパティを反復処理するためには {{jsxref("Object.keys")}} か {{jsxref("Object.entries")}} を使用してください。</p> - -<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' }; -// Iterate over the property names: -for (let country of Object.keys(obj)) { - var capital = obj[country]; - console.log(country, capital); -} - -for (const [country, capital] of Object.entries(obj)) - console.log(country, capital); - -</pre> - -<p>この使用例のそのほかの選択肢として、{{jsxref("Map")}} を使用することもできます。</p> - -<pre class="brush: js example-good">var map = new Map; -map.set('France', 'Paris'); -map.set('England', 'London'); -// Iterate over the property names: -for (let country of map.keys()) { - let capital = map[country]; - console.log(country, capital); -} - -for (let capital of map.values()) - console.log(capital); - -for (const [country, capital] of map.entries()) - console.log(country, capital); -</pre> - -<h3 id="Iterating_over_a_generator">ジェネレーターを反復処理する</h3> - -<p><a href="/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators">ジェネレーター</a> 反復可能オブジェクトを生成するために呼び出す関数です。</p> - -<pre class="brush: js example-bad">function* generate(a, b) { - yield a; - yield b; -} - -for (let x of generate) // TypeError: generate is not iterable - console.log(x); -</pre> - -<p>ジェネレーターを呼び出していないとき、ジェネレーターに対応した {{jsxref("Function")}} オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。</p> - -<pre class="brush: js example-good">function* generate(a, b) { - yield a; - yield b; -} - -for (let x of generate(1,2)) - console.log(x); -</pre> - -<h3 id="Iterating_over_a_custom_iterable">独自の反復可能オブジェクトでの反復処理</h3> - -<p>独自の反復可能オブジェクトは、 {{jsxref("Symbol.iterator")}} メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを持っている必要があります。 -</p> - -<pre class="brush: js example-bad">const myEmptyIterable = { - [Symbol.iterator]() { - return [] // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。 - } -} - -Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable -</pre> - -<p>こちらは正しい実装です。</p> - -<pre class="brush: js example-good">const myEmptyIterable = { - [Symbol.iterator]() { - return [][Symbol.iterator]() - } -} - -Array.from(myEmptyIterable); // [] -</pre> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">反復処理プロトコル</a></li> - <li>{{jsxref("Object.keys")}}</li> - <li>{{jsxref("Object.entries")}}</li> - <li>{{jsxref("Map")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators">ジェネレーター</a></li> - <li><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/is_not_iterable/index.md b/files/ja/web/javascript/reference/errors/is_not_iterable/index.md new file mode 100644 index 0000000000..3b3ffb43aa --- /dev/null +++ b/files/ja/web/javascript/reference/errors/is_not_iterable/index.md @@ -0,0 +1,136 @@ +--- +title: 'TypeError: ''x'' is not iterable' +slug: Web/JavaScript/Reference/Errors/is_not_iterable +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/is_not_iterable +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "is not iterable" は、 [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) の右辺として与えられた値や、 {{jsxref("Promise.all")}} または {{jsxref("TypedArray.from")}} のような関数の引数として与えられた値が[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)ではなかった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: 'x' is not iterable (Firefox, Chrome) +TypeError: 'x' is not a function or its return value is not iterable (Chrome) +``` + +## エラー種別 + +{{jsxref("TypeError")}} + +## エラーの原因 + +[for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) の右辺、 {{jsxref("Promise.all")}} や {{jsxref("TypedArray.from")}} などの引数として指定された値が[反復可能オブジェクト](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)ではありません。反復可能なものは、{{jsxref("Array")}}、{{jsxref("String")}}、{{jsxref("Map")}} 等のような組み込み反復可能型や、ジェネレーターの結果、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)を実装しているオブジェクトが成ることができます。</p> + +## 例 + +### オブジェクトのプロパティの反復処理 + +JavaScript では、 {{jsxref("Object")}} は[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol)を実装していない限り反復処理できません。したがって、オブジェクトのプロパティを反復処理するために [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) を使用することはできません。</p> + +```js example-bad +var obj = { 'France': 'Paris', 'England': 'London' }; +for (let p of obj) { // TypeError: obj is not iterable + // … +} +``` + +代わりに、オブジェクトのプロパティを反復処理するためには {{jsxref("Object.keys")}} か {{jsxref("Object.entries")}} を使用してください。 + +```js example-good +var obj = { 'France': 'Paris', 'England': 'London' }; +// Iterate over the property names: +for (let country of Object.keys(obj)) { + var capital = obj[country]; + console.log(country, capital); +} + +for (const [country, capital] of Object.entries(obj)) + console.log(country, capital); +``` + +この使用例のそのほかの選択肢として、{{jsxref("Map")}} を使用することもできます。 + +```js example-good +var map = new Map; +map.set('France', 'Paris'); +map.set('England', 'London'); +// Iterate over the property names: +for (let country of map.keys()) { + let capital = map[country]; + console.log(country, capital); +} + +for (let capital of map.values()) + console.log(capital); + +for (const [country, capital] of map.entries()) + console.log(country, capital); +``` + +### ジェネレーターの反復処理 + +[ジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators)は反復可能オブジェクトを生成するために呼び出す関数です。</p> + +```js example-bad +function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate) // TypeError: generate is not iterable + console.log(x); +``` + +ジェネレーターを呼び出していないとき、ジェネレーターに対応した {{jsxref("Function")}} オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。 + +```js example-good +function* generate(a, b) { + yield a; + yield b; +} + +for (let x of generate(1,2)) + console.log(x); +``` + +### 独自の反復可能オブジェクトでの反復処理 + +独自の反復可能オブジェクトは、 {{jsxref("Symbol.iterator")}} メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを返す必要があります。 + +```js example-bad +const myEmptyIterable = { + [Symbol.iterator]() { + return [] // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。 + } +} + +Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable +``` + +こちらは正しい実装です。 + +```js example-good +const myEmptyIterable = { + [Symbol.iterator]() { + return [][Symbol.iterator]() + } +} + +Array.from(myEmptyIterable); // [] +``` + +## 関連情報 + +- [反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) +- {{jsxref("Object.keys")}} +- {{jsxref("Object.entries")}} +- {{jsxref("Map")}} +- [ジェネレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators#generators) +- [for…of](/ja/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement) +</ul> diff --git a/files/ja/web/javascript/reference/errors/no_non-null_object/index.html b/files/ja/web/javascript/reference/errors/no_non-null_object/index.html deleted file mode 100644 index 93d167e25a..0000000000 --- a/files/ja/web/javascript/reference/errors/no_non-null_object/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'TypeError: "x" is not a non-null object' -slug: Web/JavaScript/Reference/Errors/No_non-null_object -tags: -- Error -- Errors -- JavaScript -- TypeError -translation_of: Web/JavaScript/Reference/Errors/No_non-null_object ---- -<div>{{JSSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not a non-null object" は、オブジェクトが何かを求めているのに提供されなかった場合に発生します。 {{jsxref("null")}} はオブジェクトではなく、動作しません。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Invalid descriptor for property {x} (Edge) -TypeError: "x" is not a non-null object (Firefox) -TypeError: Property description must be an object: "x" (Chrome) -TypeError: Invalid value used in weak set (Chrome) -</pre> - -<h2 id="エラータイプ">エラータイプ</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p>どこかでオブジェクトが期待されていますが、提供されませんでした。 {{jsxref("null")}} はオブジェクトではなく、動作しません。与えられた状況で適切なオブジェクトを提供しなければなりません。</p> - -<h2 id="例">例</h2> - -<h3 id="Property_descriptor_expected">プロパティディスクリプターが期待される場合</h3> - -<p>{{jsxref("Object.create()")}} メソッドや {{jsxref("Object.defineProperty()")}} メソッド、{{jsxref("Object.defineProperties()")}} メソッドを使用するとき、省略可能なディスクリプター引数として、プロパティディスクリプターオブジェクトが想定されます。 (ただの数値のように) オブジェクトを提供しないと、エラーが発生します。</p> - -<pre class="brush: js example-bad">Object.defineProperty({}, 'key', 1); -// TypeError: 1 is not a non-null object - -Object.defineProperty({}, 'key', null); -// TypeError: null is not a non-null object -</pre> - -<p>有効なプロパティディスクリプターはこのようになります。</p> - -<pre class="brush: js example-good">Object.defineProperty({}, 'key', { value: 'foo', writable: false }); -</pre> - -<h3 id="WeakMap_and_WeakSet_objects_require_object_keys"><code>WeakMap</code> オブジェクトと <code>WeakSet</code> オブジェクトはオブジェクトキーが必要</h3> - -<p>{{jsxref("WeakMap")}} オブジェクトと {{jsxref("WeakSet")}} オブジェクトはオブジェクトキーを保持します。そのほかの型をキーとして使用できません。</p> - -<pre class="brush: js example-bad">var ws = new WeakSet(); -ws.add('foo'); -// TypeError: "foo" is not a non-null object</pre> - -<p>代わりにオブジェクトを使用してください。</p> - -<pre class="brush: js example-good">ws.add({foo: 'bar'}); -ws.add(window); -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Object.create()")}}</li> - <li>{{jsxref("Object.defineProperty()")}}、{{jsxref("Object.defineProperties()")}}</li> - <li>{{jsxref("WeakMap")}}、{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/no_non-null_object/index.md b/files/ja/web/javascript/reference/errors/no_non-null_object/index.md new file mode 100644 index 0000000000..b548d38c6a --- /dev/null +++ b/files/ja/web/javascript/reference/errors/no_non-null_object/index.md @@ -0,0 +1,73 @@ +--- +title: 'TypeError: "x" is not a non-null object' +slug: Web/JavaScript/Reference/Errors/No_non-null_object +tags: +- Error +- Errors +- JavaScript +- TypeError +translation_of: Web/JavaScript/Reference/Errors/No_non-null_object +--- +{{JSSidebar("Errors")}} + +JavaScript の例外 "is not a non-null object" は、ある場所でオブジェクトが期待されているのに提供されなかった場合に発生します。 {{jsxref("null")}} はオブジェクトではなく、動作しません。 + +## エラーメッセージ + +```js +TypeError: Invalid descriptor for property {x} (Edge) +TypeError: "x" is not a non-null object (Firefox) +TypeError: Property description must be an object: "x" (Chrome) +TypeError: Invalid value used in weak set (Chrome) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +ある場所でオブジェクトが期待されていますが、提供されませんでした。 {{jsxref("null")}} はオブジェクトではなく、動作しません。与えられた状況で適切なオブジェクトを提供しなければなりません。 + +## 例 + +## プロパティ記述子が求められている場合 + +{{jsxref("Object.create()")}} メソッドや {{jsxref("Object.defineProperty()")}} メソッド、{{jsxref("Object.defineProperties()")}} メソッドを使用するとき、省略可能な記述子の引数として、プロパティ記述子オブジェクトが想定されます。 (ただの数値など) オブジェクト以外のものを提供すると、エラーが発生します。 + +```js example-bad +Object.defineProperty({}, 'key', 1); +// TypeError: 1 is not a non-null object + +Object.defineProperty({}, 'key', null); +// TypeError: null is not a non-null object +``` + +有効なプロパティ記述子はこのようになります。 + +```js example-good +Object.defineProperty({}, 'key', { value: 'foo', writable: false }); +``` + +## `WeakMap` および `WeakSet` オブジェクトにはオブジェクトキーが必要 + +{{jsxref("WeakMap")}} および {{jsxref("WeakSet")}} オブジェクトはオブジェクトをキーとして保持します。そのほかの型をキーとして使用できません。 + +```js example-bad +var ws = new WeakSet(); +ws.add('foo'); +// TypeError: "foo" is not a non-null object +``` + +代わりにオブジェクトを使用してください。 + +```js example-good +ws.add({foo: 'bar'}); +ws.add(window); +``` + +## 関連項目 + +- {{jsxref("Object.create()")}} +- {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}} +- {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} diff --git a/files/ja/web/javascript/reference/errors/not_a_constructor/index.html b/files/ja/web/javascript/reference/errors/not_a_constructor/index.html deleted file mode 100644 index b916bafd40..0000000000 --- a/files/ja/web/javascript/reference/errors/not_a_constructor/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'TypeError: "x" is not a constructor' -slug: Web/JavaScript/Reference/Errors/Not_a_constructor -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の例外 "is not a constructor" は、オブジェクトや変数をコンストラクターとして使用しようとしたものの、そのオブジェクトや変数がコンストラクターではなかった場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Object doesn't support this action (Edge) -TypeError: "x" is not a constructor - -TypeError: Math is not a constructor -TypeError: JSON is not a constructor -TypeError: Symbol is not a constructor -TypeError: Reflect is not a constructor -TypeError: Intl is not a constructor -TypeError: Atomics is not a constructor -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="What_went_wrong">エラーの原因</h2> - -<p>オブジェクト、または変数をコンストラクターとして使おうとしていますが、それらがコンストラクターではありません。コンストラクターとは何かについては、<a href="/ja/docs/Glossary/Constructor">コンストラクター</a>または <a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子を参照してください。</p> - -<p>{{jsxref("String")}} や {{jsxref("Array")}} のような、<code>new</code> を使用して生成できる数多くのグローバルオブジェクトがあります。しかし、いくつかのグローバルオブジェクトはそうではなく、 それらのプロパティやメソッドは静的です。次の JavaScript 標準組み込みオブジェクトのうち、 {{jsxref("Math")}}、{{jsxref("JSON")}}、{{jsxref("Symbol")}}、{{jsxref("Reflect")}}、{{jsxref("Intl")}}、{{jsxref("Atomics")}} はコンストラクターではありません:。</p> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/function*">function*</a> も、コンストラクターとして使用することはできません。</p> - -<h2 id="Examples">例</h2> - -<h3 id="Invalid_cases">無効な場合</h3> - -<pre class="brush: js example-bad">var Car = 1; -new Car(); -// TypeError: Car is not a constructor - -new Math(); -// TypeError: Math is not a constructor - -new Symbol(); -// TypeError: Symbol is not a constructor - -function* f() {}; -var obj = new f; -// TypeError: f is not a constructor -</pre> - -<h3 id="A_car_constructor">car コンストラクター</h3> - -<p>自動車のためのオブジェクト型を作成するとします。このオブジェクト型を <code>Car</code> と呼び、 make, model, year の各プロパティを持つようにしたいとします。これを実現するには、次のような関数を定義します。</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>次のようにして <code>mycar</code> というオブジェクトを生成できるようになりました。</p> - -<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre> - -<h3 id="In_Promises">プロミスの場合</h3> - -<p>直ちに解決するか拒否されるプロミスを返す場合は、 <em>new Promise(...)</em> を生成して操作する必要はありません。</p> - -<p>これは正しくなく (<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise">Promise コンストラクター</a>が正しく呼び出されません)、 <code>TypeError: this is not a constructor</code> 例外が発生します。</p> - -<pre class="brush: js example-bad">return new Promise.resolve(true); -</pre> - -<p>Instead, use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">static methods</a>:</p> - -<pre class="brush: js">// This is legal, but unnecessarily long: -return new Promise((resolve, reject) => { resolve(true); }) - -// Instead, return the static method: -return Promise.resolve(true); -return Promise.reject(false); -</pre> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Glossary/Constructor">コンストラクター</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/not_a_constructor/index.md b/files/ja/web/javascript/reference/errors/not_a_constructor/index.md new file mode 100644 index 0000000000..697342bae4 --- /dev/null +++ b/files/ja/web/javascript/reference/errors/not_a_constructor/index.md @@ -0,0 +1,105 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Errors/Not_a_constructor +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +{{jsSidebar("Errors")}} + +JavaScript の例外 "is not a constructor" は、オブジェクトや変数をコンストラクターとして使用しようとしたものの、そのオブジェクトや変数がコンストラクターではなかった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Object doesn't support this action (Edge) +TypeError: "x" is not a constructor + +TypeError: Math is not a constructor +TypeError: JSON is not a constructor +TypeError: Symbol is not a constructor +TypeError: Reflect is not a constructor +TypeError: Intl is not a constructor +TypeError: Atomics is not a constructor +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +オブジェクトや変数をコンストラクターとして使おうとしていますが、それらがコンストラクターではありません。コンストラクターとは何かについては、[コンストラクター](/ja/docs/Glossary/Constructor)または [`new` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/new)を参照してください。 + +{{jsxref("String")}} や {{jsxref("Array")}} のような、 `new` を使用して生成できる数多くのグローバルオブジェクトがあります。しかし、いくつかのグローバルオブジェクトはそうではなく、それらのプロパティやメソッドは静的です。次の JavaScript 標準組み込みオブジェクトのうち、 {{jsxref("Math")}}、{{jsxref("JSON")}}、{{jsxref("Symbol")}}、{{jsxref("Reflect")}}、{{jsxref("Intl")}}、{{jsxref("Atomics")}} はコンストラクターではありません。 + +[ジェネレーター関数](/ja/docs/Web/JavaScript/Reference/Statements/function*)も、コンストラクターとして使用することはできません。 + +## 例 + +### 無効な場合 + +```js example-bad +var Car = 1; +new Car(); +// TypeError: Car is not a constructor + +new Math(); +// TypeError: Math is not a constructor + +new Symbol(); +// TypeError: Symbol is not a constructor + +function* f() {}; +var obj = new f; +// TypeError: f is not a constructor +``` + +### car コンストラクター + +自動車のためのオブジェクト型を作成するとします。このオブジェクト型を `Car` と呼び、 make, model, year の各プロパティを持つようにしたいとします。これを実現するには、次のような関数を定義します。 + +```js +function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +``` + +次のようにして `mycar` というオブジェクトを生成できるようになりました。 + +```js +var mycar = new Car('Eagle', 'Talon TSi', 1993); +``` + +### プロミスの場合 + +ただちに解決するか拒否されるプロミスを返す場合は、 _new Promise(...)_ を生成して操作する必要はありません。 + +これは正しくなく ([Promise コンストラクター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)が正しく呼び出されません)、 `TypeError: this is not a constructor` 例外が発生します。</p> + +```js example-bad +return new Promise.resolve(true); +``` + +代わりに、 [Promise.resolve()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve) または +[Promise.reject()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) の[静的メソッド](<https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%A6)#%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89>)を使用してください。 + +<pre class="brush: js">// This is legal, but unnecessarily long: +return new Promise((resolve, reject) => { resolve(true); }) + +// Instead, return the static method: +return Promise.resolve(true); +return Promise.reject(false); +</pre> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Glossary/Constructor">コンストラクター</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a> 演算子</li> +</ul> diff --git a/files/ja/web/javascript/reference/errors/read-only/index.html b/files/ja/web/javascript/reference/errors/read-only/index.html deleted file mode 100644 index f3c6566eac..0000000000 --- a/files/ja/web/javascript/reference/errors/read-only/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'TypeError: "x" is read-only' -slug: Web/JavaScript/Reference/Errors/Read-only -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Read-only ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>The JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict - mode</a>-only exception "is read-only" occurs when a global variable or object - property that was assigned to is a read-only property.</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge) -TypeError: "x" is read-only (Firefox) -TypeError: 0 is read-only (Firefox) -TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) -TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p>値を割り当てようとしたグローバル変数、またはオブジェクトのプロパティが読み取り専用プロパティです。 (技術的には、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#writable_attribute">non-writable データプロパティ</a> です。)</p> - -<p>このエラーは、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モードコード</a> のときにだけ発生します。strict コードではない場合、割り当ては無視されるだけです。</p> - -<h2 id="例">例</h2> - -<h3 id="無効なケース">無効なケース</h3> - -<p>読み取り専用プロパティはさほど一般的ではありませんが、 {{jsxref("Object.defineProperty()")}}、または {{jsxref("Object.freeze()")}} を使用して生成できます。</p> - -<pre class="brush: js example-bad">'use strict'; -var obj = Object.freeze({name: 'Elsa', score: 157}); -obj.score = 0; // TypeError - -'use strict'; -Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); -LUNG_COUNT = 3; // TypeError - -'use strict'; -var frozenArray = Object.freeze([0, 1, 2]); -frozenArray[0]++; // TypeError -</pre> - -<p>JavaScript の組み込みにも、いくつか読み取り専用プロパティがあります。 Math の定数を再定義しようとしたとします。</p> - -<pre class="brush: js example-bad">'use strict'; -Math.PI = 4; // TypeError -</pre> - -<p>残念ながらできません。</p> - -<p>グローバル変数の <code>undefined</code> も読み取り専用のため、このようにすると悪名高い "undefined is not a function" エラーが発生します。</p> - -<pre class="brush: js example-bad">'use strict'; -undefined = function() {}; // TypeError: "undefined" is read-only -</pre> - -<h3 id="Valid_cases">有効な場合</h3> - -<pre class="brush: js example-good">'use strict'; -var obj = Object.freeze({name: 'Score', points: 157}); -obj = {name: obj.name, points: 0}; // 新しいオブジェクトで置き換える - -'use strict'; -var LUNG_COUNT = 2; // `var` が使われているので、読み取り専用ではない -LUNG_COUNT = 3; // ok （解剖学的にはおかしいけれども） -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Object.freeze()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/read-only/index.md b/files/ja/web/javascript/reference/errors/read-only/index.md new file mode 100644 index 0000000000..4e6ea7f36b --- /dev/null +++ b/files/ja/web/javascript/reference/errors/read-only/index.md @@ -0,0 +1,86 @@ +--- +title: 'TypeError: "x" is read-only' +slug: Web/JavaScript/Reference/Errors/Read-only +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +{{jsSidebar("Errors")}} + +JavaScript の [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)のみの例外 "is read-only" は、代入されたグローバル変数またはオブジェクトプロパティが読み取り専用プロパティであった場合に発生します。 + +## エラーメッセージ + +```js +TypeError: Assignment to read-only properties is not allowed in strict mode (Edge) +TypeError: "x" is read-only (Firefox) +TypeError: 0 is read-only (Firefox) +TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome) +TypeError: Cannot assign to read only property '0' of [object Array] (Chrome) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} + +## エラーの原因 + +代入しようとしたグローバル変数、またはオブジェクトのプロパティが読み取り専用プロパティです。 (技術的には、 [non-writable データプロパティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Writable_attribute)です。) + +このエラーは、 [strict モードのコード](/en-US/docs/Web/JavaScript/Reference/Strict_mode)にだけ発生します。 strict コードではない場合、割り当ては無視されるだけです。</p> + +## 例 + +### 無効な場合 + +<p>読み取り専用プロパティはさほど一般的ではありませんが、 {{jsxref("Object.defineProperty()")}}、または {{jsxref("Object.freeze()")}} を使用して生成することができます。</p> + +```js example-bad +'use strict'; +var obj = Object.freeze({name: 'Elsa', score: 157}); +obj.score = 0; // TypeError + +'use strict'; +Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false}); +LUNG_COUNT = 3; // TypeError + +'use strict'; +var frozenArray = Object.freeze([0, 1, 2]); +frozenArray[0]++; // TypeError +``` + +JavaScript の組み込みにも、いくつか読み取り専用プロパティがあります。数学的な定数を再定義しようとしたとします。 + +```js example-bad +'use strict'; +Math.PI = 4; // TypeError +``` + +残念ながらできません。 + +グローバル変数の `undefined` も読み取り専用のため、このようにすると悪名高い "undefined is not a function" エラーが発生します。 + +```js example-bad +'use strict'; +undefined = function() {}; // TypeError: "undefined" is read-only +``` + +### 有効な場合 + +```js example-good +'use strict'; +var obj = Object.freeze({name: 'Score', points: 157}); +obj = {name: obj.name, points: 0}; // 新しいオブジェクトで置き換える + +'use strict'; +var LUNG_COUNT = 2; // `var` が使われているので、読み取り専用ではない +LUNG_COUNT = 3; // ok (解剖学的にはおかしいけれども) +``` + +## 関連情報 + +- {{jsxref("Object.defineProperty()")}} +- {{jsxref("Object.freeze()")}} diff --git a/files/ja/web/javascript/reference/errors/var_hides_argument/index.html b/files/ja/web/javascript/reference/errors/var_hides_argument/index.html deleted file mode 100644 index a189e60963..0000000000 --- a/files/ja/web/javascript/reference/errors/var_hides_argument/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'TypeError: variable "x" redeclares argument' -slug: Web/JavaScript/Reference/Errors/Var_hides_argument -tags: -- Error -- Errors -- JavaScript -- Strict Mode -- TypeError -translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument ---- -<div>{{jsSidebar("Errors")}}</div> - -<p>JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a>固有の例外 "variable redeclares argument" は、関数の引数で使用された名前が、関数の本体で <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> の代入を使用して再宣言された場合に発生します。</p> - -<h2 id="Message">エラーメッセージ</h2> - -<pre class="brush: js">TypeError: variable "x" redeclares argument (Firefox) -</pre> - -<h2 id="Error_type">エラーの種類</h2> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モード</a> でのみ、{{jsxref("TypeError")}} の警告がでます。</p> - -<h2 id="何がうまくいかなかったのか？">何がうまくいかなかったのか？</h2> - -<p>関数の引数として使用されたものと同じ変数名が、関数の本体で <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> の代入を使用して再宣言されています。これは命名が競合する可能性があるため、JavaScript が警告を発します。</p> - -<p>このエラーは、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict モードのコード</a> でのみ発生します。非 strict モードでは、再宣言は暗黙裡に無視されます。</p> - -<h2 id="例">例</h2> - -<h3 id="無効なケース">無効なケース</h3> - -<p>このケースでは、変数 "arg" 引数を再宣言しています。</p> - -<pre class="brush: js example-bad">'use strict'; - -function f(arg) { - var arg = 'foo'; -} -</pre> - -<h3 id="Valid_cases">有効な場合</h3> - -<p><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 文を省略するだけで、この警告を修正できます。なぜなら、変数はすでに存在しているからです。そのほかの方法として、関数の引数または変数名の名前を変更することでも対応できます。</p> - -<pre class="brush: js example-good">'use strict'; - -function f(arg) { - arg = 'foo'; -} -</pre> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">Strict モード</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/errors/var_hides_argument/index.md b/files/ja/web/javascript/reference/errors/var_hides_argument/index.md new file mode 100644 index 0000000000..1bdc5a54f5 --- /dev/null +++ b/files/ja/web/javascript/reference/errors/var_hides_argument/index.md @@ -0,0 +1,60 @@ +--- +title: 'TypeError: variable "x" redeclares argument' +slug: Web/JavaScript/Reference/Errors/Var_hides_argument +tags: +- Error +- Errors +- JavaScript +- Strict Mode +- TypeError +translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument +--- +{{jsSidebar("Errors")}} + +JavaScript の [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)固有の例外 "variable redeclares argument" は、関数の引数で使用された名前が、関数の本体で [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) の代入を使用して再宣言された場合に発生します。 + +## エラーメッセージ + +```js +TypeError: variable "x" redeclares argument (Firefox) +``` + +## エラーの種類 + +{{jsxref("TypeError")}} の警告は [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)でのみ発生します。 + +## エラーの原因 + +関数の引数として使用されたものと同じ変数名が、関数の本体で [`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) の代入を使用して再宣言されています。これは命名が競合する可能性があるため、 JavaScript が警告を発します。 + +このエラーは、 [strict モードのコード](/ja/docs/Web/JavaScript/Reference/Strict_mode)でのみ発生します。 strict モード以外では、再宣言は暗黙裡に無視されます。</p> + +## 例 + +### 無効な場合 + +このケースでは、変数 "arg" 引数を再宣言しています。 + +```js example-bad +'use strict'; + +function f(arg) { + var arg = 'foo'; +} +``` + +### 有効な場合 + +[`var`](/ja/docs/Web/JavaScript/Reference/Statements/var) 文を省略するだけで、この警告を修正できます。なぜなら、変数はすでに存在しているからです。そのほかの方法として、関数の引数または変数名の名前を変更することでも対応できます。 + +```js example-good +'use strict'; + +function f(arg) { + arg = 'foo'; +} +``` + +## 関連情報 + +- [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.html b/files/ja/web/javascript/reference/functions/default_parameters/index.html deleted file mode 100644 index 6e362bd32b..0000000000 --- a/files/ja/web/javascript/reference/functions/default_parameters/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: デフォルト引数 -slug: Web/JavaScript/Reference/Functions/Default_parameters -tags: - - ECMAScript 2015 - - Functions - - JavaScript - - Language feature - - 言語機能 - - 関数 -translation_of: Web/JavaScript/Reference/Functions/Default_parameters ---- -<div>{{jsSidebar("Functions")}}</div> - -<p><span class="seoSummary"><strong>関数のデフォルト引数</strong> は、関数に値が渡されない場合や <code>undefined</code> が渡される場合に、デフォルト値で初期化される形式上の引数を指定できます。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</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">function [<var>name</var>]([<var>param1</var>[ = <var>defaultValue1</var> ][, ..., <var>paramN</var>[ = <var>defaultValueN</var> ]]]) { - <var>文</var> -} -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>JavaScript では、関数の引数は、指定しなければ {{jsxref("undefined")}} になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。</p> - -<p>以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、<code>undefined</code> であった場合に値を代入することでした。</p> - -<p>次の例では、<code><var>b</var></code> の値を指定せずに <code>multiply</code> を呼び出した場合、<code><var>a</var> * <var>b</var></code> を評価するときに <code><var>b</var></code> の値が <code>undefined</code> となり、<code>multiply</code> は <code>NaN</code> を返します。</p> - -<pre class="brush: js">function multiply(a, b) { - return a * b -} - -multiply(5, 2) // 10 -multiply(5) // NaN ! -</pre> - -<p>こうなることを防ぐためには、2行目で使われているように、<code>multiply</code> が 1 つだけの引数で呼び出された場合に <code><var>b</var></code> を <code>1</code> に設定します。</p> - -<pre class="brush: js">function multiply(a, b) { - b = (typeof b !== 'undefined') ? b : 1 - return a * b -} - -multiply(5, 2) // 10 -multiply(5) // 5 -</pre> - -<p>ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で <code>1</code> を <code><var>b</var></code> の既定値として設定するだけです。</p> - -<pre class="brush: js">function multiply(a, b = 1) { - return a * b -} - -multiply(5, 2) // 10 -multiply(5) // 5 -multiply(5, undefined) // 5 -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="undefined_とその他の_falsy_な値を渡した場合"><code>undefined</code> とその他の falsy な値を渡した場合</h3> - -<p>この例の 2番目の呼び出しでは、第1引数で明示的に (<code>null</code> やその他の {{glossary("falsy")}} な値ではなく) <code>undefined</code> を設定していても、<code><var>num</var></code> 引数の値は既定値のままになります</p> - -<pre class="brush: js">function test(num = 1) { - console.log(typeof num) -} - -test() // 'number' (num は 1 に設定) -test(undefined) // 'number' (こちらも num は 1 に設定) - -// 他の falsy な値での検査 -test('') // 'string' (num は '' に設定) -test(null) // 'object' (num は null に設定) -</pre> - -<h3 id="Evaluated_at_call_time" name="Evaluated_at_call_time">呼び出し時の評価</h3> - -<p>デフォルト引数は<em>呼び出し時</em>に評価されるので、Python などと異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。</p> - -<pre class="brush: js">function append(value, array = []) { - array.push(value) - return array -} - -append(1) //[1] -append(2) //[1, 2] ではなく [2] -</pre> - -<p>これは、関数と変数にも適用されます。</p> - -<pre class="brush: js">function callSomething(thing = something()) { - return thing -} - -let numberOfTimesCalled = 0 -function something() { - numberOfTimesCalled += 1 - return numberOfTimesCalled -} - -callSomething() // 1 -callSomething() // 2 -</pre> - -<h3 id="Earlier_parameters_are_available_to_later_default_parameters" name="Earlier_parameters_are_available_to_later_default_parameters">前の引数を後のデフォルト引数で利用可能</h3> - -<p>前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。</p> - -<pre class="brush: js">function greet(name, greeting, message = greeting + ' ' + name) { - return [name, greeting, message] -} - -greet('David', 'Hi') // ["David", "Hi", "Hi David"] -greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] -</pre> - -<p>この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。</p> - -<pre class="brush: js">function go() { - return ':P' -} - -function withDefaults(a, b = 5, c = b, d = go(), e = this, - f = arguments, g = this.value) { - return [a, b, c, d, e, f, g] -} - -function withoutDefaults(a, b, c, d, e, f, g) { - switch (arguments.length) { - case 0: - a; - case 1: - b = 5; - case 2: - c = b; - case 3: - d = go(); - case 4: - e = this; - case 5: - f = arguments; - case 6: - g = this.value; - default: - } - return [a, b, c, d, e, f, g]; -} - -withDefaults.call({value: '=^_^='}); -// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] - -withoutDefaults.call({value: '=^_^='}); -// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] -</pre> - -<h3 id="Functions_defined_inside_function_body" name="Functions_defined_inside_function_body">関数本体の内部で定義された関数</h3> - -<p>関数の本体の中で宣言された関数は、外側の関数のデフォルト引数の中で参照することができません。これを行おうとすると、{{jsxref("ReferenceError")}} が発生します。</p> - -<p>デフォルト引数は、常に最初に実行され、関数本体内の関数宣言は、その後に評価されるからです。</p> - -<pre class="brush: js">// 動作しません。ReferenceError が発生します。 -function f(a = go()) { - function go() { return ':P' } -} -</pre> - -<h3 id="Parameters_without_defaults_after_default_parameters" name="Parameters_without_defaults_after_default_parameters">デフォルト引数の後の既定値なしの引数</h3> - -<p>引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。</p> - -<pre class="brush: js">function f(x = 1, y) { - return [x, y] -} - -f() // [1, undefined] -f(2) // [2, undefined] -</pre> - -<h3 id="Destructured_parameter_with_default_value_assignment" name="Destructured_parameter_with_default_value_assignment">既定値のある分割代入の引数</h3> - -<p>既定値の代入を、{{jsxref("Operators/Destructuring_assignment", "分割代入", "", 1)}}表記で行うことができます。</p> - -<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { - return x + y + z -} - -f() // 6</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-function-definitions', 'Function Definitions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.functions.default_parameters")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external">Original proposal at ecmascript.org</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/functions/default_parameters/index.md b/files/ja/web/javascript/reference/functions/default_parameters/index.md new file mode 100644 index 0000000000..4d0833cd3b --- /dev/null +++ b/files/ja/web/javascript/reference/functions/default_parameters/index.md @@ -0,0 +1,229 @@ +--- +title: デフォルト引数 +slug: Web/JavaScript/Reference/Functions/Default_parameters +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Language feature + - 言語機能 + - 関数 +browser-compat: javascript.functions.default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +{{jsSidebar("Functions")}} + +**関数のデフォルト引数**は、関数に値が渡されない場合や `undefined` が渡された場合に、デフォルト値で初期化される形式上の引数を指定することができます。 + +{{EmbedInteractiveExample("pages/js/functions-default.html")}} + +## 構文 + +```js +function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... } +``` + +## 解説 + +JavaScript では、関数の引数は、指定しなければ {{jsxref("undefined")}} になります。しかし、別な既定値を設定すると有用な場合がよくあります。そのような場合に、デフォルト引数が役立ちます。 + +以前は、既定値を設定するための一般的な方法は、関数の本体で引数の値を検査し、`undefined` であった場合に値を代入することでした。 + +次の例では、`b` の値を指定せずに `multiply` を呼び出した場合、`a` * `b` を評価するときに `b` の値が `undefined` となり、`multiply` は `NaN` を返します。</p> + +```js +function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN ! +``` + +こうなることを防ぐためには、 2 行目で使われているように、`multiply` が 1 つだけの引数で呼び出された場合に `b` を `1` に設定します。</p> + +```js +function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +``` + +ES2015 のデフォルト引数を用いると、関数本体内のチェックはもはや必要なくなります。関数の先頭で `1` を `b` の既定値として設定するだけです。 + +```js +function multiply(a, b = 1) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +``` + +## 例 + +### `undefined` とその他の偽値を渡した場合 + +この例の 2 番目の呼び出しでは、第 1 引数で明示的に (`null` やその他の{{glossary("falsy", "偽値")}}ではなく) `undefined` を設定していても、`num` 引数の値は既定値のままになります。</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num は 1 に設定) +test(undefined) // 'number' (こちらも num は 1 に設定) + +// 他の偽値での検査 +test('') // 'string' (num は '' に設定) +test(null) // 'object' (num は null に設定) +</pre> + +### 呼び出し時の評価 + +デフォルト引数は*呼び出し時*に評価されるので、(例えば) Python などと異なり、関数が呼ばれる度に新しいオブジェクトが生成されます。 + +```js +function append(value, array = []) { + array.push(value) + return array +} + +append(1) // [1] +append(2) // [1, 2] ではなく [2] +``` + +これは、関数と変数にも適用されます。 + +```js +function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something() { + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +``` + +### 前の引数を後のデフォルト引数で利用可能 + +前に (左側で) 定義された引数は、その後のデフォルト引数で利用することができます。 + +```js +function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message] +} + +greet('David', 'Hi') // ["David", "Hi", "Hi David"] +greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] +``` + +この機能はこの、いくつもの極端な例を扱うデモに近いかもしれません。 + +```js +function go() { + return ':P' +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g] +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +``` + +### スコープの影響 + +デフォルト引数が 1 つ以上定義された場合、引数リスト内の識別子のみに対する[第二のスコープ](https://tc39.es/ecma262/#sec-functiondeclarationinstantiation) (Environment Record) が生成されます。このスコープは関数本体のために生成されたスコープの親になります。 + +すなわち、関数の本体で宣言された関数や変数は、デフォルト値の引数初期化子から参照することができません。これを行おうとすると、実行時に {{jsxref("ReferenceError")}} の例外が発生します。 + +また、関数の本体内で `var` を使用して宣言した変数は、同じ名前の引数をマスクするので、通常の `var` 宣言の重複に効果がないのとは異なります。 + +次の関数では、デフォルト引数が関数本体の子スコープにアクセスできないため、呼び出されると `ReferenceError` が発生します。T + +```js example-bad +function f(a = go()) { // `f` を呼び出すと `ReferenceError` が発生する。 + function go() { return ':P' } +} +``` + +...そしてこの関数は、変数 `var a` が (引数リストに作成された親スコープではなく) 関数本体に作成されたスコープの最上部にのみ巻き上げられているため、 `undefined` と表示されます。 + +```js example-bad +function f(a, b = () => console.log(a)) { + var a = 1 + b() // `undefined` と表示。デフォルト引数の値は独自のスコープにあるため +} +``` + +### デフォルト引数の後の既定値なしの引数 + +引数は左から右に設定され、後の引数に既定値がなくてもデフォルト引数を上書きします。 + +```js +function f(x = 1, y) { + return [x, y] +} + +f() // [1, undefined] +f(2) // [2, undefined] +``` + +### 既定値のある分割代入の引数 + +既定値の代入を、{{jsxref("Operators/Destructuring_assignment", "分割代入", "", 1)}}表記で行うことができます。 + +```js +function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ecmascript.org における元の提案](http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values) diff --git a/files/ja/web/tutorials/index.html b/files/ja/web/tutorials/index.html index 16f3ae2e10..4cd2d73e47 100644 --- a/files/ja/web/tutorials/index.html +++ b/files/ja/web/tutorials/index.html @@ -7,245 +7,196 @@ tags: - HTML - JavaScript - MDN - - Web 記事 - - Web 開発 + - ウェブ記事 + - ウェブ開発 - ガイド - コード - チュートリアル - - ブラウザ + - ブラウザー - 初心者 translation_of: Web/Tutorials --- -<p>このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これから始める初心者の方や基礎を勉強中の方、そして Web 開発のベテランの方にとっても、ベストプラクティスを学習するのに役に立つ教材が見つかります。</p> +<p>このページには、さまざまなチュートリアルとトレーニング用教材へのリンクがあります。これからウェブ開発を始めようとしている方、基礎を学ぼうとしている方、ウェブ開発に慣れている方など、ベストプラクティスを学習するのに役立つ教材をここで見つけることができます。</p> -<p>これらの教材は、オープン標準や Web 開発のベストプラクティスを支持する、将来を見据えた先見の明のある企業やWeb 開発者が、クリエティブ・コモンズなどのオープンコンテントライセンスに準じて作成したもので、翻訳物が提供されています。もしそうでない場合は、他の人が翻訳することが許可されています。</p> +<p>これらの教材は、先見の明のある企業やウェブ開発者が、オープン標準やウェブ開発のベストプラクティスを支持して、クリエティブ・コモンズなどのオープンコンテンツライセンスに準じて提供や翻訳を許可しています。</p> -<h2 id="For_complete_beginners_to_the_Web" name="For_complete_beginners_to_the_Web">Web について全くの初心者の人たちへ</h2> +<h2 id="For_complete_beginners_to_the_Web">ウェブについて全くの初心者の人たちへ</h2> <dl> - <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a></dt> - <dd><em>Web 入門</em>は、実用的な Web 開発の入門シリーズです。まずはじめに、簡単な Web ページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際に Web に公開します。</dd> + <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></dt> + <dd><em>ウェブ入門</em>は、実用的なウェブ開発の入門シリーズです。まずはじめに、簡単なウェブページを作るのに必要なツールを準備します。そして、簡単なコードを書いたら、それを実際にウェブに公開します。</dd> </dl> -<h2 class="Documentation" id="Documentation" name="Documentation">HTML チュートリアル</h2> +<h2 class="Documentation" id="HTML-Tutorials">HTML チュートリアル</h2> -<h3 id="Introductory_level" name="Introductory_level">入門レベル</h3> +<h3 id="Introductory_level">入門レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a></dt> - <dd>HTML とは何か、HTML がどのように動くか、HTML の簡単な歴史について、HTML ドキュメントの構造がどのようなものかを解説します。次に、HTML の構成部分をそれぞれ詳細に見ていきます。</dd> - <dt><strong><a href="/ja/docs/HTML/Element">MDN HTML 要素リファレンス</a></strong></dt> - <dd>HTML 要素の包括的なリファレンスです。ブラウザーごとのサポート状況も分かります。</dd> + <dd>HTML とは何か、HTML がどのように動くか、HTML の簡単な歴史について、HTML 文書の構造がどのようなものかを解説します。次に、HTML の構成部分をそれぞれ詳細に見ていきます。</dd> + <dt><strong><a href="/ja/docs/Web/HTML/Element">MDN HTML 要素リファレンス</a></strong></dt> + <dd>HTML 要素の包括的なリファレンスです。ブラウザーごとの対応状況も分かります。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">HTML を使用したシンプルなWeb ページの作成</a> (The Blog Starter)</strong></dt> - <dd>この HTML ガイドは、初心者向けに HTML5 タグを含めた、一般的なタグを紹介しています。また、段階ごとに基本的なWeb ページを作成するためのコード例を載せています。</dd> - <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML チャレンジ</a> (Wikiversity)</strong></dt> - <dd>問題に挑戦し HTML スキル (例: <h2> か <strong> のどちらをを使うべきか) を磨いて下さい。マークアップが意味のあるものになっているかがポイントです。</dd> + <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Creating a Simple Web Page with HTML</a> (英語)</strong></dt> + <dd>この HTML ガイドは、初心者向けに HTML5 タグを含めた、よくあるタグを紹介しています。また、段階ごとに基本的なウェブページを作成するためのコード例を載せています。</dd> + <dt><strong><a href="https://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Challenges</a> (英語)</strong></dt> + <dd>問題に挑戦し HTML のスキルを磨きましょう。マークアップが意味のあるものになっているか (例: <h2> か <strong> のどちらをを使うべきか) がポイントです。</dd> </dl> -</div> -</div> -<h3 id="Intermediate_level" name="Intermediate_level">中級レベル</h3> +<h3 id="Intermediate_level">中級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> - <dd>このモジュールでは、Web ページに、HTML をどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のWeb ページ全体を挿入するのかについても触れています。</dd> + <dd>このモジュールでは、ウェブページに、HTML をどのようにして用いればマルチメディアを含むことができるかについて学びます。また、画像を挿入するためのさまざまな方法や、どのようにして動画・音声、そして他のウェブページ全体を挿入するのかについても触れています。</dd> </dl> -</div> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/HTML/Tables">HTML 表</a></dt> - <dd>表の形のデータを Web ページにおいて、理解可能な形式、そしてアクセシビリティに配慮した形式で表現することは少し難しいでしょう。このモジュールは、基本的な table のマークアップ、そしてさらに複雑な機能(たとえば注や要約を付加したり)を扱います。</dd> + <dd>ウェブページにおいて、表の形のデータを理解可能な形、そしてアクセシビリティに配慮した形で表現することは少し難しいでしょう。このモジュールは、基本的な表のマークアップ、そしてさらに注や要約を付加など、もっと複雑な機能を扱います。</dd> </dl> -</div> -</div> -<h3 id="Advanced_level" name="Advanced_level">上級レベル</h3> +<h3 id="Advanced_level">上級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> - <dt><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></dt> - <dd>HTML フォームは、Web の重要な部品です。フォームは多くの機能を提供し、ユーザーが Web サイトとやり取りする際に必要なものとなっています。例えば登録、ログイン、フィードバックの送信、商品の購入、などなど。このモジュールではフォームのクライアント側の部分を作成するところから始めます。</dd> - <dt><a href="/ja/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">読み込みが速い HTML ページを作成するヒント</a></dt> - <dd>Web ページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。</dd> + <dt><a href="/ja/docs/Learn/Forms">HTML フォーム</a></dt> + <dd>HTML フォームは、ウェブの重要な部品です。フォームは多くの機能を提供し、ユーザーがウェブサイトとやり取りする際に必要なものとなっています。例えば登録、ログイン、フィードバックの送信、商品の購入、などなど。このモジュールではフォームのクライアント側の部分を作成するところから始めます。</dd> </dl> -</div> -</div> -<h2 class="Documentation" id="Documentation" name="Documentation">CSS チュートリアル</h2> +<dl> + <dt><strong><a href="/ja/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">読み込みが速い HTML ページを作成するヒント</a></strong></dt> + <dd>ウェブページを最適化することでサイト表示の待ち時間を短くし、サーバーとインターネット接続経路の負荷を軽減する方法を学ぶことができます。</dd> +</dl> -<h3 id="Introductory_level_2" name="Introductory_level_2">入門レベル</h3> +<h2 class="Documentation" id="CSS-Tutorials">CSS チュートリアル</h2> + +<h3 id="Introductory_level_2">入門レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></dt> - <dd>CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使って Web ページをどのように飾るのですか？</dd> - <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a></dt> - <dd>このモジュールで、CSS 習得の道のりを開始できます。セレクター、プロパティ、CSS の記述ルール、CSS を HTML に適用する方法、CSS で長さや色やその他の単位を指定する方法、カスケードと継承、ボックスモデルの基本、CSS のデバッグが含まれています。</dd> + <dd>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。CSS の基本ではあなたが始めるのに必要なものを紹介します。私たちは次のような質問に答えます：テキストを黒または赤にするにはどうすればいいですか？ そのような場所でコンテンツを画面に表示させるにはどうすればよいですか？ 背景画像と色を使ってウェブページをどのように飾るのですか？</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a></dt> + <dd>CSS (Cascading Style Sheets) は、ウェブページのスタイルづけやレイアウトに使用されます。例えば、コンテンツのフォント、色、サイズ、間隔を変更したり、複数の段に分割したり、アニメーションやその他の装飾機能を追加したりすることができます。このモジュールでは、 CSS がどのように機能するか、どのような構文になっているか、そして HTML にスタイルを追加するためにどのように使い始めるか、といった基本的な内容で、 CSS マスターへの道を順番に始めます。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスのスタイリング</a></dt> - <dd>次に、ボックスのスタイリングを見てみましょう。これは Web ページのレイアウトを行う基本的なステップの 1 つです。このモジュールでは、ボックスモデルの padding、border、margin の設定や、カスタム背景色や画像や柄、ボックスのフィルターや影を描くなどの装飾機能による、ボックスレイアウトの制御をおさらいします。</dd> - <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイリング</a></dt> - <dd>ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストスタイリングの基礎を確認します。あなたのページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。</dd> - <dt><a href="/ja/docs/Web/CSS/Common_CSS_Questions">CSS に関する一般的な質問</a></dt> - <dd>初心者から寄せられる一般的な質問とその回答です。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt> + <dd> + <p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>の続きです。言語とその構文に慣れ、基本的な使用方法を身につけたところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターの種類、単位、サイズ調整、背景や境界線のスタイル、デバッグなどについて学びます。</p> + + <p class="summary">このモジュールの目的は、有能な CSS を書くためのツールキットを提供し、<dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイル付け</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、すべての基本的な理論を理解してもらうことです。</p> + </dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイル付け</a></dt> + <dd>ここでは、フォント、太字、イタリック体、線、文字間隔、影、その他のテキストの機能の設定を含むテキストのスタイル付けの基礎を確認します。ページにカスタムフォントを適用し、リストとリンクにスタイルを適用することでこのモジュールを締めくくります。</dd> + <dt><a href="/ja/docs/Learn/CSS/Howto/CSS_FAQ">CSS に関するよくある質問</a></dt> + <dd>初心者から寄せられるよくある質問とその回答です。</dd> </dl> -</div> -</div> -<h3 id="Intermediate_level_2" name="Intermediate_level_2">中級レベル</h3> +<h3 id="Intermediate_level_2">中級レベル</h3> -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt> - <dd>この時点で、CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、CSS のレイアウト、様々なディスプレイ設定、float と positioning を含む従来のレイアウト方法、flexbox のような新しいレイアウトツールなどについて詳しく調べることができます。</dd> - <dt><strong><a href="/ja/docs/CSS/CSS_Reference">CSS リファレンス</a></strong></dt> - <dd>CSS の完全なリファレンス。Firefox やその他のブラウザーの対応の詳細もあります。</dd> + <dd>この時点で、 CSS の基本、テキストスタイルの設定方法、コンテンツが内部にあるボックスのスタイルと操作方法については説明を終えています。今度は、ボックスを表示領域に関連して適切な場所に配置する方法を見てみましょう。必要な堰堤条件についてはすでに終えているので、 CSS のレイアウト、様々な display の設定、浮動 (float) と位置指定 (positioning) を含む従来のレイアウト方法、フレックスボックスのような新しいレイアウトツールなどについて詳しく調べることができます。</dd> + <dt><strong><a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a></strong></dt> + <dd>CSS の完全なリファレンスです。Firefox やその他のブラウザーの対応の詳細もあります。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">流動グリッド</a> (A List Apart)</strong></dt> - <dd>前からある印刷用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。</dd> - <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS チャレンジ</a> (Wikiversity)</strong></dt> + <dt><strong><a href="https://www.alistapart.com/articles/fluidgrids/" rel="external">流動グリッド</a></strong></dt> + <dd>前からある植字用のグリッドを使いながら、ブラウザーのウィンドウに合わせて可変的にリサイズするレイアウトを設計することができます。</dd> + <dt><strong><a href="https://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Challenges</a> (英語)</strong></dt> <dd>CSS スキルを確認し、何を勉強すべきかを知ることができます。</dd> </dl> -</div> -</div> -<h3 id="Advanced_level_2" name="Advanced_level_2">上級レベル</h3> +<h3 id="Advanced_level_2">上級レベル</h3> -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> <dl> - <dt><a href="/ja/docs/CSS/Using_CSS_transforms">CSS による変形処理を使う</a></dt> + <dt><strong><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変換の使用</a></strong></dt> <dd>CSS を使って、回転、傾き、拡大、縮小、移動を行います。</dd> - <dt><a href="/ja/docs/CSS/CSS_transitions">CSS トランジション</a></dt> - <dd>CSS3 ドラフトの仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a></dt> + <dd>CSS3 草稿の仕様の一部である CSS トランジションでは、即時に変化させるのではなく、CSS のプロパティで時間的に連続して変化させることができます。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face による Web フォント指定のクイックガイド</a> (HTML5 Rocks)</dt> - <dd>CSS3 の @font-face 機能を使うとWeb 上にあるカスタム字体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。</dd> - <dt><a href="http://davidwalsh.name/starting-css" rel="external">CSS を書き初める</a> (David Walsh)</dt> + <dt><a href="https://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face によるウェブフォント指定のクイックガイド</a></dt> + <dd>CSS3 の @font-face 機能を使うと、ウェブ上にある独自の書体を使うことができます。使いやすく、フォントの操作、拡大縮小が可能です。</dd> + <dt><a href="https://davidwalsh.name/starting-css" rel="external">CSS を書き始める</a></dt> <dd>簡潔で保守が容易、スケーラブルな CSS を書くためのツールや方法論の紹介です。</dd> </dl> -</div> -</div> -<div class="section"> <dl> - <dt><a href="/ja/docs/Canvas_tutorial">Canvas チュートリアル</a></dt> + <dt><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas チュートリアル</a></dt> <dd>canvas 要素を使用するスクリプトを書いてグラフィックを描く方法を学ぶことができます。</dd> - <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt> + <dt><strong><a href="https://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt> <dd>HTML5 をすぐに使うための記事があります。</dd> </dl> -</div> -<h2 class="Documentation" id="Documentation" name="Documentation">Javascript チュートリアル</h2> +<h2 class="Documentation" id="JavaScript-Tutorials">Javascript チュートリアル</h2> -<h3 id="Introductory_level_3" name="Introductory_level_3">入門レベル</h3> +<h3 id="Introductory_level_3">入門レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></dt> <dd>最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な体験をしていただく前に「JavaScript とは何？」や「どのように見える？」や「何ができる？」といったような基本的な質問に答えます。その後 JavaScript を理解する重要な特徴、たとえば変数や文字列、数値、配列などについてお話します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></dt> - <dd><span id="result_box" lang="ja"><span>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。</span></span></dd> + <dd>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでの勉強で詰め込み、とおりすぎてしまっているかもしれませんが、ここではすべて明示的に説明を行います。</dd> </dl> -</div> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript を始める</a></dt> <dd>JavaScript とは何か? 何の役に立つのかを学べます。</dd> - <dt><a href="http://www.codecademy.com/">コードアカデミー</a> (Codecademy)</dt> + <dt><strong><a href="https://www.codecademy.com/">Codecademy</a> </strong> (英語)</dt> <dd>Codecademy では簡単に JavaScript コーディングの方法を学べます。対話形式で学習でき、友人と一緒に進めることができます。</dd> + <dt><a href="https://learn.freecodecamp.org/">freeCodeCamp</a> (英語)</dt> + <dd>では、ウェブ開発のための様々な言語やフレームワークを教えています。<a href="https://freecodecamp.org/forum">フォーラム</a>、<a href="https://coderadio.freecodecamp.org">インターネットラジオ局</a>、<a href="https://freecodecamp.org/news">ブログ</a>もあります。</dd> </dl> -</div> -</div> -<h3 id="Intermediate_level_3" name="Intermediate_level_3">中級レベル</h3> +<h3 id="Intermediate_level_3">中級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> <dt><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクトの紹介</a></dt> <dd>JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化する独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、このモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。</dd> <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアント側 Web API</a></dt> - <dd>Web サイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (異なるブラウザーやサイトを動かしている OS 、さらに他の Web サイトやサービスのデータを操作するインターフェイス) の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最も一般的な API の使い方を調べられます。</dd> + <dd>ウェブサイトやアプリケーションのためにクライアント側 JavaScript を書くとき、API (様々なブラウザーやサイトを動かしている OS 、さらに他のウェブサイトやサービスのデータを操作するインターフェイス) の使用が不可欠です。このモジュールでは、API とはどういったものかや開発の多くで使われる最もよくある API の使い方を調べられます。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="/ja/docs/A_re-introduction_to_JavaScript">JavaScript 再入門</a></strong></dt> + <dt><strong><a href="/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript 「再」入門</a></strong></dt> <dd>中級レベルの開発者向けの JavaScript プログラム言語復習用まとめです。</dd> - <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">表現力のある JavaScript</a></dt> - <dd>中級・上級 JavaScript 方法論への包括的ガイドです。</dd> - <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt> + <dt><strong><a href="https://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong> (英語)</dt> + <dd>JavaScript の中級・上級の方法論への包括的ガイドです。</dd> + <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (英語)</strong></dt> <dd>JavaScript の学習をすばやく正確に学びたいプログラマーや特定のトピックスを探したり、スキルを上げたいプログラマーのためのサイトです。</dd> - <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> + <dt><a href="https://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (英語)</dt> <dd>JavaScript デザイン パターンの真髄に触れてみましょう。</dd> </dl> -</div> -</div> -<h3 id="Advanced_level_3" name="Advanced_level_3">上級レベル</h3> +<h3 id="Advanced_level_3">上級レベル</h3> -<div class="row topicpage-table"> -<div class="section"> <dl> - <dt><a href="/ja/docs/JavaScript/Guide">JavaScript ガイド</a></dt> + <dt><a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a></dt> <dd>初心者から上級者まですべてのレベル向けの分かりやすい JavaScript ガイドです。定期的に更新されています。</dd> - <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt> + <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (英語)</strong></dt> <dd>このシリーズは、JavaScript のコアなメカニズムを深める本です。</dd> - <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt> + <dt><strong><a href="https://bonsaiden.github.io/JavaScript-Garden/" rel="external">JavaScript Garden</a> (英語)</strong></dt> <dd>JavaScript で最もはまりやすい部分をドキュメント化したものです。</dd> - <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Exploring ES6</a> (Dr. Axel Rauschmayer)</strong></dt> + <dt><strong><a href="https://exploringjs.com/es6/" rel="external">Exploring ES6</a> (英語)</strong></dt> <dd>ECMAScript 2015 の信頼できる詳しい情報元です。</dd> </dl> -</div> -<div class="section"> <dl> - <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">JavaScript Patterns</a></strong></dt> - <dd>Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、一般的なパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。</dd> - <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong></dt> + <dt><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">JavaScript Patterns</a> (英語)</strong></dt> + <dd>Javascript のパターンと不適切な例であるアンチパターンを集めたものです。関数パターン、jQuery パターン、jQuery プラグイン パターン、デザイン パターン、よくあるパターン、リテラルおよびコンストラクター パターン、オブジェクト生成パターン、コード再利用パターン、DOM をカバーしています。</dd> + <dt><strong><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How browsers work</a></strong> (英語)</dt> <dd>モダンブラウザーのエンジンやページレンダリングなどの違いが詳しく研究され、説明された論文です。</dd> <dt><a href="https://github.com/bolshchikov/js-must-watch">JavaScript Videos</a> (GitHub)</dt> <dd>見ておきたい JavaScript についての映像を集めたものです。</dd> </dl> -</div> -</div> -<h3 id="Extension_Development" name="Extension_Development">拡張機能の開発</h3> +<h3 id="Extension_Development">拡張機能の開発</h3> -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> <dl> <dt><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt> - <dd>WebExtensions は、ブラウザーのアドオンを開発するための、ブラウザー間互換システムです。このシステムの大半は Google Chrome や Opera でサポートされている <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> と互換性があります。これらのブラウザー用に書かれたアドオンは、大抵の場合、<a href="/ja/Add-ons/WebExtensions/Porting_from_Google_Chrome">ほんの少し変更を加えるだけで</a>、Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも動かすことができます。この API は<a href="/ja/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> とも完全な互換性があります。</dd> + <dd>WebExtensions は、ブラウザーのアドオンを開発するための、ブラウザー間互換システムです。多くの部分において、このシステムは Google Chrome や Opera が対応している<a class="external-icon external" href="https://developer.chrome.com/extensions">拡張機能 API</a> と大体において互換性があります。これらのブラウザー用に書かれたアドオンは大抵の場合、 Firefox や <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> でも <a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">ほんの少し変更を加えるだけで</a>、動かすことができます。この API は<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> とも完全な互換性があります。</dd> </dl> -</div> -</div> |