mdn · mfuji09 · Sep 23, 2022 · Sep 22, 2022 · Sep 22, 2022 · Sep 22, 2022
@@ -63,7 +63,7 @@ original_slug: Learn/JavaScript/Objects/Object-oriented_JS
 
 これは実に役立ちます。教師と生徒は名前、性別、年齢のように多数の共通機能を共有しており、これらの機能を一度だけ定義すればいいので便利です。異なるクラスで、同じ機能を分けて定義することもでき、その機能の各定義は異なる名前空間に置かれます。例えば、生徒の挨拶は "Yo, I'm \[firstName]" (例：_Yo, I'm Sam) という形式とし、一方の教師の挨拶は、より形式的に_ "Hello, my name is \[Prefix] \[lastName], and I teach \[Subject]." (例：_Hello, My name is Mr Griffiths, and I teach Chemistry) のように。_
 
-> **Note:** **注**: 同じ機能を複数のオブジェクトタイプが実装する能力のことを示す用語に、**ポリモーフィズム**があります。不思議に感じているかも知れないので念のため。
+> **Note:** 同じ機能を複数のオブジェクトタイプが実装する能力のことを示す用語に、**ポリモーフィズム**があります。不思議に感じているかも知れないので念のため。
 
 子クラスのオブジェクトインスタンスを生成しましょう。例：
 
@@ -222,7 +222,7 @@ person1.bio()
 
 加えて、 `bio()` メソッドにはいくつかの問題点があります。人物が女性である、あるいは他の優先される性別分類の場合でも、その出力には常に "He" という代名詞が含まれています。また、 bio は `interests` 配列により多くのものが列挙されていても、2 つの趣味しか含みません。このクラス定義 (コンストラクター) の問題を、あなたはどのように修正することができますか？コンストラクター内に任意のコード (恐らく、いくつかの条件分岐やループが必要となるでしょう) を入れてみてください。性別や、趣味の数が 1、2、あるいは 2 よりも多いかどうかによって、文がどのように構築されるべきか考えてみてください。
 
-> **Note:** **注**: もし行き詰まってしまった場合は、[GitHub に答えとなるリポジトリ](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([ライブ](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) があります。最初はあなた自身で書いてみてください！
+> **Note:** もし行き詰まってしまった場合は、[GitHub に答えとなるリポジトリ](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html) ([ライブ](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html)) があります。最初はあなた自身で書いてみてください！
 
 ## オブジェクトインスタンスを生成する他の方法
 

@@ -27,7 +27,7 @@ alert ロールは重要かつ一般に時間的制約のあるメッセージ
 - スクリーンリーダーは現在のアウトプット（音声または点字関係なく）を妨害し、直ちにアラートメッセージをアナウンスもしくは表示すことがあります。
 - 画面拡大鏡はアラートが起こったこと、およびアラートテキストが何であるかを視覚的に示すことがあります。
 
-> **Note:** **注釈:** 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。
+> **Note:** 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。
 
 ### 例
 

@@ -5,7 +5,7 @@ original_slug: Web/HTTP/Public_Key_Pinning
 ---
 {{HTTPSidebar}}{{deprecated_header}}
 
-> **Note:** **注:** Public Key Pinning の仕組みは [Certificate Transparency](/ja/docs/Web/Security/Certificate_Transparency) および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
+> **Note:** Public Key Pinning の仕組みは [Certificate Transparency](/ja/docs/Web/Security/Certificate_Transparency) および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
 
 **HTTP Public Key Pinning** ({{Glossary("HPKP")}}) は、ウェブクライアントに特定の公開鍵をあるウェブサーバーに関連付けさせることで、偽造された証明書による{{Glossary("MITM", "中間者攻撃")}}のリスクを減少させるためのセキュリティ機能でした。これは最近のブラウザーでは削除され、対応がなくなりました。
 
@@ -32,11 +32,11 @@ Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains]
 - `report-uri` {{optional_inline}}
   - : このパラメータは省略可能です。ピンの検証に失敗した際に、失敗した旨を報告する URL を指定します。
 
-> **Note:** **注**: 現在の仕様では、本番系で運用されていないバックアップ用の第 2 のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。
+> **Note:** 現在の仕様では、本番系で運用されていないバックアップ用の第 2 のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。
 
 ### Base64 エンコードされた公開鍵情報を抽出するには
 
-> **Note:** **注:** 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。
+> **Note:** 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。
 
 まずは証明書や鍵ファイルから公開鍵情報を抽出し、それを Base64 でエンコードする必要があります。
 
@@ -84,7 +84,7 @@ Public-Key-Pins:
 
 HPKP ヘッダーを送信するのに必要な具体的な手順はウェブサーバーによって異なります。
 
-> **Note:** **注:** 以下の例では、2 か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。
+> **Note:** 以下の例では、2 か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。
 
 > **Warning:** HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります！バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。
 

@@ -36,7 +36,7 @@ window.main = function () {
 main(); //メインループ開始
 ```
 
-> **Note:** **注**: ここで議論されている`main()` 関数はそれぞれ、ループコンテンツを行う前に新しい`requestAnimationFrame`をスケジュールしています。これは間違っているのではありませんし、ベストプラクティスを考慮しています。前もって次の `requestAnimationFrame` を呼び出すことはブラウザーが適宜それを正しい時に受け取ることを保証します。たとえあなたの現在のフレームが VSync window を見失ってしまったとしてもです。
+> **Note:** ここで議論されている`main()` 関数はそれぞれ、ループコンテンツを行う前に新しい`requestAnimationFrame`をスケジュールしています。これは間違っているのではありませんし、ベストプラクティスを考慮しています。前もって次の `requestAnimationFrame` を呼び出すことはブラウザーが適宜それを正しい時に受け取ることを保証します。たとえあなたの現在のフレームが VSync window を見失ってしまったとしてもです。
 
 上のコードは 2 つの宣言があります。 最初の宣言はある関数をグローバル変数として `main()` と呼ばれる関数を作成します。この関数はいくつかの仕事をして同時にブラウザーにそれ自身を `window.requestAnimationFrame()` を使って呼ぶように言います。ふたつ目の宣言は `main()` 関数 - それは最初の宣言で定義されたのですが、それを呼びます。`main()` は 2 つ目の宣言で一度だけ呼ばれて毎回それを呼ぶ度に次のフレームでやるべきことのキューに配置していくので、`main()` はあなたのフレームレートと同期します。
 
@@ -71,7 +71,7 @@ main(); //メインループ開始
 
 ブラウザーがこの IIFE に出くわすと、メインループを定義してすぐさま次のフレームにキューします。これで何のオブジェクトにもアタッチされなくなり、`main()` (もしくは `main()` のためのメソッド) は残りのアプリケーションで使用可能な未使用の名前になり、何か別に定義してもよくなりました。
 
-> **Note:** 注: 実際は、次の `requestAnimationFrame()` を if 構文で防ぐほうがより一般的で、`cancelAnimationFrame()` を呼ぶことはそれよりも一般的ではありません。
+> **Note:** 実際は、次の `requestAnimationFrame()` を if 構文で防ぐほうがより一般的で、`cancelAnimationFrame()` を呼ぶことはそれよりも一般的ではありません。
 
 2 つ目の問題 - つまり、メインループを止めるという問題に関しては、`main()` を `{{ domxref("window.cancelAnimationFrame()") }}` によって呼び出しをキャンセルする必要があるでしょう。あなたは一番最後に `requestAnimationFrame()` が呼ばれたときに `cancelAnimationFrame()` に `requestAnimationFrame()` で得た ID トークンを渡す必要があります。 こんな風な場合を想定してください - あなたのゲームの関数と変数が `MyGame` と呼ばれる名前空間に備え付けられています。先述の例を拡張すると、メインループはこんな風になります。
 
@@ -119,7 +119,7 @@ window.cancelAnimationFrame( MyGame.stopMain );
 
 限られた時間の中での話をしましたが、たくさんのウェブブラウザーには _High Resolution Time_ というツールがあります。{{ domxref("Date") }} オブジェクトはもはやタイミングオブジェクトとして認識されていません - なぜかというと、不正確でシステムクロックによって書き換えられてしまうからです。High Resolution Time は一方で `navigationStart` (前のドキュメントがアンロードされた時) からのミリ秒を数えます。この値は小数点値として誤差 1000 分の 1 ミリ秒の正確さで返ってきます。`{{ domxref("DOMHighResTimeStamp") }}` という風に馴染みが深いですが、実際は浮動小数点値として考えてください。
 
-> **Note:** **注**: いくつかのシステム(ハードウェアであれソフトウェアであれ)のうちマイクロ秒の正確さが担保されていないものは最低ミリ秒単位の正確さが許容されています。しかし、可能であれば 0.001 ミリ秒の正確さを提供します。
+> **Note:** いくつかのシステム(ハードウェアであれソフトウェアであれ)のうちマイクロ秒の正確さが担保されていないものは最低ミリ秒単位の正確さが許容されています。しかし、可能であれば 0.001 ミリ秒の正確さを提供します。
 
 この値はそれ自体ではとても有効ではありません。なぜなら、無用なイベントに対しての相対値だからです。しかし、他のタイムスタンプから引き算されることで正確にそれら 2 つのイベント間の時間がいくらなのか決定することができます。これらのタイムスタンプを習得するには`window.performance.now()` を呼んで、結果を変数として格納してください。
 
@@ -156,7 +156,7 @@ var tNow = window.performance.now();
 
 メインループに関しては難しい決断をしなくてはなりません。どんな決断かというとどうやって正確な時間の経過をシミュレーションしようかということです。もし毎フレームコントロールが必要なら、どれくらいの頻度であなたのゲームが更新され、描画されるかを決定しなければなりません。ひょっとしたら更新と描画を別の頻度でしたいとさえ考えるかもしれません。またもう一つ考えないといけないのは、あなたのゲームがユーザーのシステムがゲームの仕事量に及ばない場合にどうやったらいい感じに失敗するだろうかということです。こういう場合を考えてみましょう - ユーザーのインプットを扱ってゲームの状態を描画するたびに更新するとします。以下に展開していきましょう。
 
-> **Note:** **注**: メインループがどうやって時間を扱うかを変更することはデバッグ地獄です。どんな場合でも。要求を注意深く考慮してからメインループに取り掛かりましょう。
+> **Note:** メインループがどうやって時間を扱うかを変更することはデバッグ地獄です。どんな場合でも。要求を注意深く考慮してからメインループに取り掛かりましょう。
 
 ### ブラウザーゲームはほとんどの場合こんな感じになっているべきだ
 

@@ -41,7 +41,7 @@ CSS には、**ブロックボックス**と**インラインボックス**の 2
 
 ただし、`flex` などの `display` の値を使用して、内部の表示タイプを変更できます。要素に `display: flex;` を設定する場合、外側の表示タイプは `block` ですが、内側の表示タイプは `flex` に変更されます。このボックスの直接の子要素はすべてフレックスアイテムになり、[Flexbox](/ja/docs/Learn/CSS/CSS_layout/Flexbox) 仕様で規定されているルールに従ってレイアウトされます。これについては後で学習します。
 
-> **Note:** 注：ディスプレイの値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、[ブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)に関する MDN ガイドを参照してください。
+> **Note:** ディスプレイの値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、[ブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)に関する MDN ガイドを参照してください。
 
 CSS レイアウトについてさらに詳しく学習すると、`flex` や、例えば [`grid`](/ja/docs/Learn/CSS/CSS_layout/Grids) のようなボックスに設定できる他のさまざまな内部の値と出会うでしょう。
 

@@ -15,7 +15,7 @@ original_slug: Learn/CSS/First_steps/Using_your_new_knowledge
 
 下の Live エディタで試すこともできますし、[我々の Github リポジトリ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/)からサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、[CodePen](https://codepen.io/) や [jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) といったオンラインエディタを使うこともできます。
 
-> **Note:** 注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。
+> **Note:** もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。
 
 ## CSS を少し試してみよう
 

@@ -307,7 +307,7 @@ text-shadow: 4px 4px 5px red;
 3. ぼかし半径 — 値が大きいほど、影はより広く分散されます。 この値が含まれていない場合、デフォルトは 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の[長さとサイズの単位](/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size)を取ることができます。
 4. 影のベースカラー — 任意の [CSS カラー単位](/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors)を取ります。 含まれていない場合、デフォルトは `black` です。
 
-> **Note:** 注: 正のオフセット値は影を右下に移動させますが、`-1px -1px` のように負のオフセット値を使用して影を左上に移動させることもできます。
+> **Note:** 正のオフセット値は影を右下に移動させますが、`-1px -1px` のように負のオフセット値を使用して影を左上に移動させることもできます。
 
 #### 複数の影
 

@@ -186,7 +186,7 @@ button.onclick = function() {
 
 遭遇する可能性のある別のタイプの文字列構文は、**テンプレートリテラル**（テンプレート文字列と呼ばれることもあります）です。 これは、より柔軟で読みやすい文字列を提供する新しい構文です。
 
-> **Note:** 注: 以下の例をブラウザーの JavaScript コンソールに入力して、どのような結果が得られるかを確認してください。
+> **Note:** 以下の例をブラウザーの JavaScript コンソールに入力して、どのような結果が得られるかを確認してください。
 
 標準の文字列リテラルをテンプレートリテラルに変換するには、引用符 (`' '` または `" "`) をバッククォート文字 (`` ` ` ``) に置き換える必要があります。