Web/CSS/Media_Queries/Testing_media_queries を更新

- 2021/01/19 時点の英語版に同期
- 用語を修正

1 files changed, 39 insertions, 30 deletions

diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html
index cce7bfcb84..6c6d4b73e2 100644
--- a/files/ja/web/css/media_queries/testing_media_queries/index.html
+++ b/files/ja/web/css/media_queries/testing_media_queries/index.html
@@ -1,5 +1,5 @@
 ---
-title: プログラムによるメディアクエリのテスト
+title: プログラムによるメディアクエリーのテスト
 slug: Web/CSS/Media_Queries/Testing_media_queries
 tags:
   - Advanced
@@ -7,29 +7,32 @@ tags:
   - DOM
   - Guide
   - JavaScript
+  - Media Queries
   - MediaQueryList
+  - Responsive Design
+  - Web
   - matchMedia
   - ウェブ
-  - メディアクエリ
+  - メディアクエリー
   - レスポンシブデザイン
 translation_of: Web/CSS/Media_Queries/Testing_media_queries
 ---
 <div>{{cssref}}</div>
 
-<p>{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。</p>
+<p>{{Glossary("DOM")}} では、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>の結果を {{domxref("MediaQueryList")}} インターフェイスおよびそのメソッドやプロパティを用いてプログラムからで調べることができる機能を備えています。 <code>MediaQueryList</code> オブジェクトを作成すると、クエリーの結果を確認したり、結果が変化したときに自動的に通知を受け取ったりすることができます。</p>
 
-<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">メディアクエリリストの作成</h2>
+<h2 id="Creating_a_media_query_list">メディアクエリーリストの作成</h2>
 
-<p>クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。</p>
+<p>クエリーの結果を評価できるようにするのに先立ち、メディアクエリーを示す  <code>MediaQueryList</code> オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia")}} メソッドを用います。</p>
 
-<p>例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:</p>
+<p>例えば、端末が横置きか縦置きかを調べるクエリーリストを設定したい場合は、以下のようにしてます。</p>
 
-<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
+<pre class="brush: js">const mediaQueryList = window.matchMedia("(orientation: portrait)");
 </pre>
 
-<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">クエリの結果の確認</h2>
+<h2 id="Checking_the_result_of_a_query">クエリーの結果の確認</h2>
 
-<p>メディアクエリリストが作成されると、その <code>matches</code> プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。</p>
+<p>メディアクエリーリストが作成されると、その <code>matches</code> プロパティの値を参照することで、クエリーの結果を確認することができます。このプロパティは、クエリーの結果を反映します。</p>
 
 <pre class="brush: js">if (mediaQueryList.matches) {
   /* 現在ビューポートが縦長である */
@@ -38,20 +41,28 @@ translation_of: Web/CSS/Media_Queries/Testing_media_queries
 }
 </pre>
 
-<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">クエリの通知の受信</h2>
+<h2 id="Receiving_query_notifications">クエリーの通知の受信</h2>
 
-<p>クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの <code>addListener()</code> メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が <code>true</code> から <code>false</code> へ移行した場合に) 呼び出されるコールバック関数を設定してください。</p>
+<p>クエリーの評価結果の変化を継続的に意識する必要がある場合は、クエリーの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録したことが効率的です。このためには、 <code>addListener()</code> メソッドを {{domxref("MediaQueryList")}} オブジェクトに対して呼び出し、メディアクエリーの状態が変化したとき (例えば、メディアクエリーの結果が <code>true</code> から <code>false</code> へ移行した場合) に呼び出されるコールバック関数を設定します。</p>
 
-<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
-function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
-mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
+<pre class="brush: js">// クエリーリストを作成する。
+const mediaQueryList = window.matchMedia("(orientation: portrait)");
 
-handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
+// イベントリスナーのコールバック関数を定義する。
+function handleOrientationChange(mql) {
+  // ...
+}
+
+// 向き変更時のハンドラーを一度実行する。
+handleOrientationChange(mediaQueryList);
+
+// コールバック関数をリスナーとしてクエリーリストに追加する。
+mediaQueryList.addListener(handleOrientationChange);
 </pre>
 
-<p>このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。</p>
+<p>このコードでは端末の向き (orientation) を評価するメディアクエリーリストを作成し、次にリスナーを追加しています。リスナーを定義した後、そのリスナーを直接一度呼び出しています。これにより、リスナーが現在の端末の向きを基にして初期状態の調整を行うことができます (そうしないと、コードでは端末の初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。</p>
 
-<p>次で実装する <code>handleOrientationChange()</code> メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。</p>
+<p>次の <code>handleOrientationChange()</code> メソッドで、クエリーの結果の確認や端末の向きが変わったときに必要な処理を行います。</p>
 
 <pre class="brush: js">function handleOrientationChange(evt) {
   if (evt.matches) {
@@ -62,30 +73,28 @@ handleOrientationChange(mediaQueryList); // 画面の向きが変更された時
 }
 </pre>
 
-<p>上記で、 <code>evt</code> — イベントオブジェクトの引数を定義しています。これは <a href="/ja/docs/Web/API/MediaQueryList#Browser_compatibility"><code>MediaQueryList</code> の新しい実装</a>を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の {{domxref("MediaQueryListListener")}} メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 {{domxref("MediaQueryListEvent")}} の<a href="/en-US/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p>
+<p>上記で、引数を <code>evt</code> — イベントオブジェクトとして定義しています。これは <a href="/ja/docs/Web/API/MediaQueryList#browser_compatibility"><code>MediaQueryList</code> の新しい実装</a>がイベントリスナーを標準の方法で扱うのでお分かりでしょう。標準外の {{domxref("MediaQueryListListener")}} の機構はもう使われませんが、標準のイベントリスナーの設定では、 {{domxref("MediaQueryListEvent")}} 型の<a href="/ja/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p>
 
-<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p>
+<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} および {{domxref("MediaQueryListEvent.matches","matches")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p>
 
-<h2 id="Ending_query_notifications" name="Ending_query_notifications">クエリの通知の終了</h2>
+<h2 id="Ending_query_notifications">クエリーの通知の終了</h2>
 
-<p>メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの <code>removeListener()</code> メソッドを呼び出してください。</p>
+<p>メディアクエリーの値の変化について通知を受ける必要がなくなったときは、 <code>removeListener()</code> メソッドを <code>MediaQueryList</code> オブジェクトに対して呼び出してください。</p>
 
 <pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
 </pre>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<h3 id="MediaQueryList_インターフェイス"><code>MediaQueryList</code> インターフェイス</h3>
+<h2 id="Browser_compatibility">ブラウザーの対応</h2>
 
-<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> インターフェイス</h3>
 
 <p>{{Compat("api.MediaQueryList")}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a></li>
- <li>{{domxref("window.matchMedia()") }}</li>
- <li>{{domxref("MediaQueryList") }}</li>
- <li>{{domxref("MediaQueryListEvent") }}</li>
+ <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリー</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
 </ul>