From fd1e2435671adf89d5a2718fc7d1454828f147ae Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 12 Jul 2021 10:11:30 +0900 Subject: remove wiki.developer.mozilla.org links --- .../accessibility/what_is_accessibility/index.html | 4 +- .../backgrounds_and_borders/index.html | 4 +- .../cascade_and_inheritance/index.html | 2 +- .../css/building_blocks/debugging_css/index.html | 2 +- .../handling_different_text_directions/index.html | 4 +- .../building_blocks/overflowing_content/index.html | 2 +- .../building_blocks/values_and_units/index.html | 2 +- files/ja/learn/css/css_layout/flexbox/index.html | 2 +- .../using_your_new_knowledge/index.html | 2 +- .../learn/forms/advanced_form_styling/index.html | 44 ++++++++-------- files/ja/learn/forms/form_validation/index.html | 58 +++++++++++----------- .../how_to_build_custom_form_controls/index.html | 12 ++--- files/ja/learn/forms/html5_input_types/index.html | 14 +++--- files/ja/learn/forms/index.html | 2 +- .../ja/learn/forms/other_form_controls/index.html | 14 +++--- .../index.html | 12 ++--- .../sending_and_retrieving_form_data/index.html | 28 +++++------ .../sending_forms_through_javascript/index.html | 12 ++--- files/ja/learn/forms/styling_web_forms/index.html | 50 +++++++++---------- files/ja/learn/forms/ui_pseudo-classes/index.html | 14 +++--- files/ja/learn/forms/your_first_form/index.html | 24 ++++----- .../build_your_own_function/index.html | 4 +- .../building_blocks/conditionals/index.html | 2 +- .../javascript/building_blocks/events/index.html | 6 +-- .../building_blocks/functions/index.html | 4 +- .../building_blocks/looping_code/index.html | 10 ++-- .../building_blocks/return_values/index.html | 2 +- .../first_steps/a_first_splash/index.html | 4 +- .../learn/javascript/first_steps/arrays/index.html | 2 +- .../learn/javascript/first_steps/math/index.html | 2 +- .../first_steps/useful_string_methods/index.html | 2 +- .../javascript/first_steps/variables/index.html | 4 +- files/ja/learn/javascript/index.html | 2 +- .../objects/object-oriented_js/index.html | 2 +- files/ja/learn/performance/index.html | 2 +- .../react_todo_list_beginning/index.html | 48 +++++++++--------- 36 files changed, 202 insertions(+), 202 deletions(-) (limited to 'files/ja/learn') diff --git a/files/ja/learn/accessibility/what_is_accessibility/index.html b/files/ja/learn/accessibility/what_is_accessibility/index.html index 8f4efd327a..e1edbafaee 100644 --- a/files/ja/learn/accessibility/what_is_accessibility/index.html +++ b/files/ja/learn/accessibility/what_is_accessibility/index.html @@ -122,8 +122,8 @@ translation_of: Learn/Accessibility/What_is_accessibility

注記

-

正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、正規表現ドキュメントを参照してください。

+

正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、正規表現ドキュメントを参照してください。

使用例を実装しましょう。HTML を更新して pattern 属性を追加しましょう:

@@ -215,12 +215,12 @@ input:valid {

この例では、{{HTMLElement("input")}} 要素は "banana"、"Banana"、"cherry" または "Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた"Aa"のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。

-

この時点で、pattern 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。

+

この時点で、pattern 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。

もし {{HTMLElement("input")}} の空ではない値が正規表現パターンに一致しなかった場合、この input は {{cssxref(':invalid')}} 疑似クラスに一致します。

-

メモ: {{HTMLElement("input")}} 要素の型によっては、検証のために pattern 属性が必要ないことがあります。例えば email 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 multiple 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。

+

メモ: {{HTMLElement("input")}} 要素の型によっては、検証のために pattern 属性が必要ないことがあります。例えば email 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 multiple 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。

@@ -235,7 +235,7 @@ input:valid {

入力欄の値に制約を加える

-

数値のフィールド (例えば <input type="number">) の場合、min 属性と max 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。

+

数値のフィールド (例えば <input type="number">) の場合、min 属性と max 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。

他の例を見てみましょう。fruit-start.html ファイルの新しいコピーを作成してください。

@@ -281,7 +281,7 @@ div {
-

注: <input type="number"> （及び range や date のような他の型）は step 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では step 属性を入れていませんので、既定値の 1 となります。つまり 3.2 のような浮動小数でも、不正になります。

+

注: <input type="number"> （及び range や date のような他の型）は step 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では step 属性を入れていませんので、既定値の 1 となります。つまり 3.2 のような浮動小数でも、不正になります。

サンプル全体

@@ -368,7 +368,7 @@ input:focus:invalid {

{{EmbedLiveSample("Full_example", "100%", 420)}}

-

入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、検証関連の属性を見てください。

+

入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、検証関連の属性を見てください。

注: GitHub の fruit-length.html でライブサンプルを見ることができます(ソースコードも見てください)

@@ -380,15 +380,15 @@ input:focus:invalid {

HTML5 の制約検証 API

-

多くのブラウザーが 制約検証API  に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。

+

多くのブラウザーが 制約検証API  に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。

制約検証 API には、上記の要素で利用できる、次のプロパティがあります。

@@ -413,7 +413,7 @@ input:focus:invalid {

制約検証 API には、上記の要素で利用できる、次のメソッドがあります。

@@ -430,7 +430,7 @@ input:focus:invalid {

Example of an error message with Firefox in French on an English page

-

これらのメッセージの外見やテキストを変更するには、制約検証 API の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。

+

これらのメッセージの外見やテキストを変更するには、制約検証 API の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。

いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、fruit-start.html を基礎としてもいいでしょう):

@@ -454,7 +454,7 @@ email.addEventListener("input", function (event) {

ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。

-

制約コードの中で、メールアドレス入力の validity.typeMismatch プロパティが trueかどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに setCustomValidity() を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。

+

制約コードの中で、メールアドレス入力の validity.typeMismatch プロパティが trueかどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに setCustomValidity() を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。

validity.typeMismatch が falseの場合、空文字で setCustomValidity() メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。

@@ -485,7 +485,7 @@ email.addEventListener("input", function (event) {

この簡単なフォームでは、ブラウザーの自動検証を無効にするために novalidate 属性を使用しています。これで、検証を制御するためにスクリプトを使用できます。ただし、これは制約検証 API の対応や CSS の疑似クラス {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}}, {{cssxref(":out-of-range")}} の適用を無効にするわけではありません。つまり、データを送信する前にブラウザーが自動的なフォームの妥当性確認を行わないとしても、あなた自身で確認を行って、フォームの状態に応じたスタイル設定ができます。

-

検証する入力は <input type="email">で、これは required(入力必須)で、8文字の minlength があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。

+

検証する入力は <input type="email">で、これは required(入力必須)で、8文字の minlength があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。

<span>要素の中にエラーメッセージを表示させようとしています。 <span>にセットされた aria-live 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。

@@ -608,7 +608,7 @@ function showError() { @@ -623,7 +623,7 @@ function showError() {

制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。

-

注: さらなる情報は、制約検証ガイドと制約検証 API リファレンスを見てください。

+

注: さらなる情報は、制約検証ガイドと制約検証 API リファレンスを見てください。

組み込み API を使用しないフォーム検証

@@ -817,7 +817,7 @@ addEvent(form, "submit", function () {
  • どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。
    • -

    フォームが正しく埋められたことをチェックしたら、送信することができます。次のデータ送信でカバーします。

    +

    フォームが正しく埋められたことをチェックしたら、送信することができます。次のデータ送信でカバーします。

    {{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

    @@ -827,11 +827,11 @@ addEvent(form, "submit", function () {
  • 初めてのフォーム
  • フォームの構築方法
  • ネイティブフォームウィジェット
    • -
  • The HTML5 input types
    • -
  • Other form controls
    • +
  • The HTML5 input types
    • +
  • Other form controls
  • フォームへのスタイル設定
  • フォームへの高度なスタイル設定
    • -
  • UI pseudo-classes
    • +
  • UI pseudo-classes
  • フォームデータの検証
  • フォームデータの送信
    • @@ -839,7 +839,7 @@ addEvent(form, "submit", function () {

    上級トピック

    diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html index 4034b1998b..f1250eb590 100644 --- a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html @@ -677,7 +677,7 @@ window.addEventListener('load', function () { }); }); -

    上記のコードで、tabIndex プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。

    +

    上記のコードで、tabIndex プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。

    これで完了です! 結果は以下のとおりです:

    @@ -894,9 +894,9 @@ window.addEventListener('load', function () {

    上級トピック

    diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html index c825e48653..d56da894aa 100644 --- a/files/ja/learn/forms/html5_input_types/index.html +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -257,7 +257,7 @@ price.addEventListener('input', function() {

    スキルをテストしましょう!

    -

    この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: HTML5 controls を見てください。

    +

    この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: HTML5 controls を見てください。

    まとめ

    @@ -271,11 +271,11 @@ price.addEventListener('input', function() {
  • 初めてのフォーム
  • フォームの構築方法
  • ネイティブフォームウィジェット
    • -
  • The HTML5 input types
    • -
  • Other form controls
    • +
  • The HTML5 input types
    • +
  • Other form controls
  • フォームへのスタイル設定
  • フォームへの高度なスタイル設定
    • -
  • UI pseudo-classes
    • +
  • UI pseudo-classes
  • フォームデータの検証
  • フォームデータの送信
    • @@ -283,7 +283,7 @@ price.addEventListener('input', function() {

    上級トピック

    diff --git a/files/ja/learn/forms/index.html b/files/ja/learn/forms/index.html index aa428b7db7..40e686438a 100644 --- a/files/ja/learn/forms/index.html +++ b/files/ja/learn/forms/index.html @@ -44,7 +44,7 @@ translation_of: Learn/Forms
    オリジナルの HTML {{htmlelement("input")}}タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。
    HTML5 入力タイプ
    ここでは <input> 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、{{htmlelement('output')}} 要素も見ます。
    -
    その他のフォームコントロール
    +
    その他のフォームコントロール
    次には<input> 以外のフォームコントロールと関連するツール、例えば {{htmlelement('select')}}、{{htmlelement('textarea')}}、{{htmlelement('meter')}}、{{htmlelement('progress')}} を見ていきます。
    diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html index 6c6f825de4..dd8b463ed4 100644 --- a/files/ja/learn/forms/other_form_controls/index.html +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -299,7 +299,7 @@ translation_of: Learn/Forms/Other_form_controls

    スキルをテストしよう!

    -

    この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Other controls を見てください。

    +

    この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Other controls を見てください。

    まとめ

    @@ -315,11 +315,11 @@ translation_of: Learn/Forms/Other_form_controls
  • 初めてのフォーム
  • フォームの構築方法
  • ネイティブフォームウィジェット
    • -
  • The HTML5 input types
    • -
  • Other form controls
    • +
  • The HTML5 input types
    • +
  • Other form controls
  • フォームへのスタイル設定
  • フォームへの高度なスタイル設定
    • -
  • UI pseudo-classes
    • +
  • UI pseudo-classes
  • フォームデータの検証
  • フォームデータの送信
    • @@ -327,7 +327,7 @@ translation_of: Learn/Forms/Other_form_controls

    上級トピック

    diff --git a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html index c24af4a732..ed70a2587b 100644 --- a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -1010,7 +1010,7 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls

    Datalist

    -

      {{htmlelement("datalist")}} and {{htmlelement("input")}} 要素と list 属性を見てください。

    +

      {{htmlelement("datalist")}} and {{htmlelement("input")}} 要素と list 属性を見てください。

    @@ -2009,9 +2009,9 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls

    上級トピック

    diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html index 7370945b88..deee070329 100644 --- a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data

    action 属性

    -

    action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。

    +

    action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。

    この例では、データを絶対 URL の http://example.com に送信します。

    @@ -74,13 +74,13 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data

    method 属性

    -

    method 属性は、どのようにデータを送信するかを定義します。HTTP プロトコルはリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは GET メソッドと POST メソッドです。

    +

    method 属性は、どのようにデータを送信するかを定義します。HTTP プロトコルはリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは GET メソッドと POST メソッドです。

    -

    これら2つのメソッドの違いを理解するために、一歩戻って HTTP の動作についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。

    +

    これら2つのメソッドの違いを理解するために、一歩戻って HTTP の動作についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。

    GET メソッド

    -

    GET メソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。

    +

    GET メソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。

    以下のフォームについて考えてみましょう。

    @@ -118,7 +118,7 @@ Host: foo.com

    POST メソッド

    -

    POST メソッドは少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。

    +

    POST メソッドは少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。

    例を見てみましょう。— これは前述の GET の節で見たものと同じフォームですが、{{htmlattrxref("method","form")}} 属性が post に設定されています。

    @@ -260,7 +260,7 @@ if __name__ == "__main__":

    例:

    @@ -283,7 +283,7 @@ if __name__ == "__main__":

    サーバーにデータを送信するたびに、セキュリティについて考える必要があります。HTML フォームはサーバーに対するもっともよくある攻撃の入口 (攻撃が行われる場所) になります。問題が HTML フォーム自身から発生することはありません — サーバーがどのようにデータを扱うかによります。

    -

    server-side の学習トピックの Website security の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。

    +

    server-side の学習トピックの Website security の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。

    疑い深くあれ: ユーザーを信用してはいけません

    @@ -292,7 +292,7 @@ if __name__ == "__main__":

    サーバーに来るすべてのデータを確認およびサニタイズしなければなりません。いつでもです。例外はありません。

    @@ -323,11 +323,11 @@ if __name__ == "__main__":
  • 初めてのフォーム
  • フォームの構築方法
  • ネイティブフォームウィジェット
    • -
  • The HTML5 input types
    • -
  • Other form controls
    • +
  • The HTML5 input types
    • +
  • Other form controls
  • フォームへのスタイル設定
  • フォームへの高度なスタイル設定
    • -
  • UI pseudo-classes
    • +
  • UI pseudo-classes
  • フォームデータの検証
  • フォームデータの送信
    • @@ -335,7 +335,7 @@ if __name__ == "__main__":

    上級トピック

    diff --git a/files/ja/learn/forms/sending_forms_through_javascript/index.html b/files/ja/learn/forms/sending_forms_through_javascript/index.html index 3b3ba71ce2..6643dad84b 100644 --- a/files/ja/learn/forms/sending_forms_through_javascript/index.html +++ b/files/ja/learn/forms/sending_forms_through_javascript/index.html @@ -37,7 +37,7 @@ translation_of: Learn/Forms/Sending_forms_through_JavaScript

    {{domxref("XMLHttpRequest")}} (XHR) DOM オブジェクトで HTTP リクエストを作成して送信し、結果を取得することができます。歴史的には、{{domxref("XMLHttpRequest")}} は交換フォーマットとして XML を取得して送信するように設計されていました。しかし、JSON は XML に取って代わっています。しかし、XML も JSON もフォームデータリクエストのエンコーディングには適合しません。フォームデータ (application/x-www-form-urlencoded) は、キーと値のペアの URL エンコードされたリストで構成されています。バイナリーデータを送信するために、HTTP リクエストは multipart/form-data に再形成されます。

    -

    注記: Fetch API は最近 XHR の代わりによく使われます — これは XHR のモダンで更新されたバージョンであり、同様に動作しますが利点もあります。この記事で見る大半の XHR コードは Fetch で置き換えられます。

    +

    注記: Fetch API は最近 XHR の代わりによく使われます — これは XHR のモダンで更新されたバージョンであり、同様に動作しますが利点もあります。この記事で見る大半の XHR コードは Fetch で置き換えられます。

    フロントエンド (ブラウザーで実行されるコード) とバックエンド (サーバーで実行されるコード) を制御すれば、JSON/XML を送信して必要に応じて処理することができます。

    @@ -388,9 +388,9 @@ window.addEventListener('load', function () {

    上級トピック

    diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index c64d5f4622..829b0d4604 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -14,14 +14,14 @@ original_slug: Learn/Forms/Styling_HTML_forms ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}

    -

    前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する CSS の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。

    +

    前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する CSS の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。

    @@ -50,7 +50,7 @@ original_slug: Learn/Forms/Styling_HTML_forms
    1. {{HTMLElement("form")}}
    2. {{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}
      3. -
    3. 単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <input type="search">を除く
      4. +
    4. 単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <input type="search">を除く
    5. 複数行の {{HTMLElement("textarea")}}
    6. ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)
    7. {{HTMLElement("label")}}
      8. @@ -63,7 +63,7 @@ original_slug: Learn/Forms/Styling_HTML_forms
      1. チェックボックスとラジオボタン
        2. -
      2. <input type="search">
        3. +
      3. <input type="search">

      これら特殊なケースをどのように扱うかについては、HTML フォームへの高度なスタイル設定の記事で見ていきます。

      @@ -73,10 +73,10 @@ original_slug: Learn/Forms/Styling_HTML_forms

      一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:

      @@ -95,7 +95,7 @@ original_slug: Learn/Forms/Styling_HTML_forms

      CSS でのスタイル設定が容易な要素は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。

      -

      上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、UI 疑似クラスで扱います。

      +

      上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、UI 疑似クラスで扱います。

      この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。

      @@ -266,7 +266,7 @@ form {   grid-template-rows : 10em 1em 1em 1em; } -

      注意として、フォームをレイアウトするのに CSS Grid と Flexbox を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:

      +

      注意として、フォームをレイアウトするのに CSS Grid と Flexbox を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:

      h1 {
   font : 1em "typewriter", monospace;
@@ -364,7 +364,7 @@ button:focus {
 
 
      スキルを試しましょう！​
      
 
-
      この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——スキルテスト：スタイリングの基本をご覧ください。
      
+
      この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——スキルテスト：スタイリングの基本をご覧ください。
      
 
 
      まとめ
      
 
@@ -374,27 +374,27 @@ button:focus {
 
 
      このモジュール
      
 
-
      E
      
+
      E
      
 
 
 
 
      上級トピック
      
 
-
      セクション
      
+
      セクション
      
 
 
diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html
index 36c83f9155..5c1bbda5cf 100644
--- a/files/ja/learn/forms/ui_pseudo-classes/index.html
+++ b/files/ja/learn/forms/ui_pseudo-classes/index.html
@@ -589,7 +589,7 @@ input:default ~ span::after {
 
 
      Test your skills!
      
 
-
      You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Advanced styling.
      
+
      You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Advanced styling.
      
 
 
      まとめ
      
 
@@ -603,11 +603,11 @@ input:default ~ span::after {
  
    8. 初めてのフォーム
      9. 
  
    9. フォームの構築方法
      10. 
  
    10. ネイティブフォームウィジェット
      11. 
- 
    11. The HTML5 input types
      12. 
- 
    12. Other form controls
      13. 
+ 
    13. The HTML5 input types
      14. 
+ 
    14. Other form controls
      15. 
  
    15. フォームへのスタイル設定
      16. 
  
    16. フォームへの高度なスタイル設定
      17. 
- 
    17. UI pseudo-classes
      18. 
+ 
    18. UI pseudo-classes
      19. 
  
    19. フォームデータの検証
      20. 
  
    20. フォームデータの送信
      21. 
 
@@ -615,7 +615,7 @@ input:default ~ span::after {
 
      上級トピック
      
 
 
diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html
index d3e646269f..eb4e028208 100644
--- a/files/ja/learn/forms/your_first_form/index.html
+++ b/files/ja/learn/forms/your_first_form/index.html
@@ -38,7 +38,7 @@ translation_of: Learn/Forms/Your_first_form
 
 
      ウェブフォームとは何か?
      
 
-
      ウェブフォームとは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半のサーバーにデータを送るを見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。
      
+
      ウェブフォームとは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半のサーバーにデータを送るを見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。
      
 
 
      ウェブフォームは 1 つ以上のフォームコントロール(ウィジェットともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく HTML フォームと呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。
      
 
@@ -75,7 +75,7 @@ translation_of: Learn/Forms/Your_first_form
 
 </form>
      -

      これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも action 属性と method属性は常に設定することがベストプラクティスであると考えられます。

      +

      これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも action 属性と method属性は常に設定することがベストプラクティスであると考えられます。

      • action 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します
        • @@ -119,7 +119,7 @@ translation_of: Learn/Forms/Your_first_form

        フォームのコードを上に見えるようなものに更新してください。

        -

        {{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての {{HTMLElement("label")}} 要素における、 for 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの id を参照します。

        +

        {{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての {{HTMLElement("label")}} 要素における、 for 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの id を参照します。

        これには利点があります — フォームコントロールにラベルを関連付けて、ユーザーがマウス、トラックパッド、タッチデバイスでラベルをクリックすると対応するウィジェットがアクティブになり、スクリーンリーダーのユーザーに読み上げられるアクセシブルな名前が提供されます。この属性の利点をさらに知りたいのでしたら、こちらの記事ですべてを詳しく説明しています: HTML フォームの構築方法.

        @@ -130,7 +130,7 @@ translation_of: Learn/Forms/Your_first_form
      • 2番目の input では、正しくフォーマットされた E メールアドレスのみを受け付ける単一行として定義された {{HTMLelement("input/email")}} という値を使用しています。この値はベーシックなテキストフィールドを、ユーザーによって入力されたデータをチェックするようにする "知的な" フィールドへと変化させます。またスマートフォンのように動的なキーボードのある端末で、E メールアドレスを入力するのにふさわしいキーボードレイアウト (例えばデフォルトで @ 記号があるもの) が表示されるようにします。フォームの検証について詳しく知りたい場合は、データフォームの検証 の記事をご覧ください。
      -

      大事なことを言い忘れましたが、<input> と <textarea></textarea> の構文に注意してください。これは HTML の変わったことの 1 つです。<input> タグは空要素です。つまり、終了タグは不要です。一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。{{HTMLElement("input")}} 要素のデフォルト値を定義するには、次のように value 属性を使う必要があります。

      +

      大事なことを言い忘れましたが、<input> と <textarea></textarea> の構文に注意してください。これは HTML の変わったことの 1 つです。<input> タグは空要素です。つまり、終了タグは不要です。一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。{{HTMLElement("input")}} 要素のデフォルト値を定義するには、次のように value 属性を使う必要があります。

      <input type="text" value="デフォルトではこの要素にはこの文章が挿入されます" />
      @@ -251,9 +251,9 @@ button {

      データをウェブサーバーに送信する

      -

      最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。{{HTMLElement("form")}} 要素は  action 属性と method 属性により、どこへどのようにデータを送信するかを定義できます。

      +

      最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。{{HTMLElement("form")}} 要素は  action 属性と method 属性により、どこへどのようにデータを送信するかを定義できます。

      -

      フォームコントロールに name をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。

      +

      フォームコントロールに name をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。

      データに名前をつけるために、各々のデータを集めるフォームウィジェットの name 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう:

      @@ -295,11 +295,11 @@ button {
    21. 初めてのフォーム
    22. フォームの構築方法
    23. ネイティブフォームウィジェット
      24. -
    24. The HTML5 input types
      25. -
    25. Other form controls
      26. +
    26. The HTML5 input types
      27. +
    27. Other form controls
    28. フォームへのスタイル設定
    29. フォームへの高度なスタイル設定
      30. -
    30. UI pseudo-classes
      31. +
    31. UI pseudo-classes
    32. フォームデータの検証
    33. フォームデータの送信
      34. @@ -307,7 +307,7 @@ button {

      上級トピック

      diff --git a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html index e12ce6f478..854ebec458 100644 --- a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html +++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html @@ -113,7 +113,7 @@ panel.appendChild(closeBtn);

      最後に、{{domxref("GlobalEventHandlers.onclick")}} イベントハンドラーを使用して、ボタンをクリックするとパネル全体をパネルから削除してメッセージボックスを閉じるようにします。

      - 簡単に説明すると、onclick ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後のイベントの記事で、これらについてさらに詳しく学びます。onclick ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <div> パネル) を削除することを指定します。

      + 簡単に説明すると、onclick ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後のイベントの記事で、これらについてさらに詳しく学びます。onclick ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <div> パネル) を削除することを指定します。

      closeBtn.onclick = function() {
   panel.parentNode.removeChild(panel);
@@ -238,7 +238,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');

      スキルをテストしよう!

      -

      この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。

      +

      この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。

      まとめ

      diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.html b/files/ja/learn/javascript/building_blocks/conditionals/index.html index 70d662df26..d54bee60ab 100644 --- a/files/ja/learn/javascript/building_blocks/conditionals/index.html +++ b/files/ja/learn/javascript/building_blocks/conditionals/index.html @@ -752,7 +752,7 @@ textarea.onkeyup = function(){

      スキルをテストしましょう!

      -

      この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Conditionals を見てください。

      +

      この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Conditionals を見てください。

      まとめ

      diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html index 7c40419c10..6f2d31df5f 100644 --- a/files/ja/learn/javascript/building_blocks/events/index.html +++ b/files/ja/learn/javascript/building_blocks/events/index.html @@ -80,7 +80,7 @@ btn.onclick = function() { document.body.style.backgroundColor = rndCol; } -

      このコードでは、btn という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。btn 変数は<button>要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclick イベントハンドラプロパティに、ランダムな RGB色を生成し <body> の background-color を設定するコードを抱えた匿名関数を代入する事で、click イベントが発火されるのを待ちかまえます。

      +

      このコードでは、btn という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。btn 変数は<button>要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclick イベントハンドラプロパティに、ランダムな RGB色を生成し <body> の background-color を設定するコードを抱えた匿名関数を代入する事で、click イベントが発火されるのを待ちかまえます。

      このコードは <button> 要素でクリックイベントが発火すれば常に実行されます、要はユーザーがクリックしたらいつでも。

      @@ -171,7 +171,7 @@ for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = bgChange; } -

      ここにある他のオプションは NodeList オブジェクトの組み込みメソッドの forEach() で使えることに注意してください:

      +

      ここにある他のオプションは NodeList オブジェクトの組み込みメソッドの forEach() で使えることに注意してください:

      buttons.forEach(function(button) {
   button.onclick = bgChange;
@@ -564,7 +564,7 @@ video.onclick = function() {
 
 
      スキルをテストしよう!
      
 
-
      この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — Test your skills: Events を見てください。
      
+
      この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — Test your skills: Events を見てください。
      
 
 
      結論
      
 
diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html
index 636278ee2e..a6901fcec8 100644
--- a/files/ja/learn/javascript/building_blocks/functions/index.html
+++ b/files/ja/learn/javascript/building_blocks/functions/index.html
@@ -312,7 +312,7 @@ function b() {
  
    34. 
   
      a();
 b();
      
-  今度は a() と b() の両方の呼び出しで、迷惑な "ReferenceError: variable name is not defined" エラーが返されます — これは output() 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
      35. 
+  今度は a() と b() の両方の呼び出しで、迷惑な "ReferenceError: variable name is not defined" エラーが返されます — これは output() 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
    @@ -375,7 +375,7 @@ function subFunction3(value) {

    スキルをテストしよう!

    -

    この記事の最後に来ましたが、最も大事な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Functions を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。

    +

    この記事の最後に来ましたが、最も大事な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Functions を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。

    まとめ

    diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html index dd5e724fca..f9ee6f813d 100644 --- a/files/ja/learn/javascript/building_blocks/looping_code/index.html +++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html @@ -383,12 +383,12 @@ btn.addEventListener('click', function() {
    1. コードの先頭で、いくつか変数を宣言しています。その中に、連絡先の情報を持った配列があり、各要素は名前と電話番号をコロンで区切った文字列となっています。
    2. 次に、ボタン (btn) にイベントリスナーを設定しています。ボタンが押されたときに検索結果が戻ってくるようになっています。
      3. -
    3. テキスト入力欄に入力された値を searchName という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に toLowerCase() を実行しているのに注意してください。
      4. +
    4. テキスト入力欄に入力された値を searchName という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に toLowerCase() を実行しているのに注意してください。
    5. ここからが本題の for ループです。
      1. カウンター変数を 0 から始め、contacts.length より小さくなくなるまで、ループの繰り返しの度に i を 1 増やしていきます。
      2. ループの内側では、まず現在の連絡先 (contacts[i]) をコロンの文字で分割し、splitContact という配列に格納します。
        3. -
      3. それから、条件文を用いて、splitContact[0] (連絡先の名前) が入力された searchName にまた toLowerCase() を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、break を使用してループを終了しています。
        4. +
      4. それから、条件文を用いて、splitContact[0] (連絡先の名前) が入力された searchName にまた toLowerCase() を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、break を使用してループを終了しています。
    6.   (contacts.length-1) 回目の繰り返しの後に、もし連絡先の名前が入力された検索語に一致しなければ、段落に「連絡先が見つかりません。」という文字列を表示し、条件が true では無くなるまでループを継続します。
      7. @@ -726,7 +726,7 @@ textarea.onkeyup = function(){
    7. admitted.textContent += — admitted.textContent の後に文字を連結する開始行
      8. -

      特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか？ヘルプのため便利な文字列メソッドの記事を見てみてください。
      +

      特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか？ヘルプのため便利な文字列メソッドの記事を見てみてください。

      間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。

      @@ -893,12 +893,12 @@ do {

      少なくとも最初は for から始めることをお勧めします。すべてを覚えておくことが簡単だからです。初期化処理、条件、最後の式をすべて括弧内にきちんと入れなければならないので、それらがどこにあるかや見落としていないことの確認が簡単です。

      -

      注: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度なループと反復処理ガイドをお読みください。

      +

      注: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度なループと反復処理ガイドをお読みください。

      スキルをテストしよう!

      -

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Loops を見てください。

      +

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Loops を見てください。

      まとめ

      diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html index e9a13429b5..b8d15d4144 100644 --- a/files/ja/learn/javascript/building_blocks/return_values/index.html +++ b/files/ja/learn/javascript/building_blocks/return_values/index.html @@ -171,7 +171,7 @@ function factorial(num) {

      スキルをテストしよう!

      -

      この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions を見てください。

      +

      この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions を見てください。

      まとめ

      diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.html b/files/ja/learn/javascript/first_steps/a_first_splash/index.html index 3281944f5b..3a76770630 100644 --- a/files/ja/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.html @@ -237,7 +237,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash let guessCount = 1; let resetButton; -

      上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 let (か var)  キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは以降の記事で見ます) 。定数は変更しない値を保持するのに、 const キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。

      +

      上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 let (か var)  キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは以降の記事で見ます) 。定数は変更しない値を保持するのに、 const キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。

      等号記号 ( = ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。

      @@ -282,7 +282,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash

      Return/Enter を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。

      -

      注記: 関数についてもこのコースの後の方で詳しく学びます。

      +

      注記: 関数についてもこのコースの後の方で詳しく学びます。

      演算子

      diff --git a/files/ja/learn/javascript/first_steps/arrays/index.html b/files/ja/learn/javascript/first_steps/arrays/index.html index 973a8511fa..fc68cb0928 100644 --- a/files/ja/learn/javascript/first_steps/arrays/index.html +++ b/files/ja/learn/javascript/first_steps/arrays/index.html @@ -536,7 +536,7 @@ textarea.onkeyup = function(){

      スキルをテストしよう!

      -

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Arrays を見てください。

      +

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Arrays を見てください。

      結論

      diff --git a/files/ja/learn/javascript/first_steps/math/index.html b/files/ja/learn/javascript/first_steps/math/index.html index bbdb6550b7..df0a2af55f 100644 --- a/files/ja/learn/javascript/first_steps/math/index.html +++ b/files/ja/learn/javascript/first_steps/math/index.html @@ -440,7 +440,7 @@ function updateBtn() {

      スキルをテストしよう!

      -

      この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — Test your skills: Math を見てください。

      +

      この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — Test your skills: Math を見てください。

      まとめ

      diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html index 0c2f22adfd..c18f846d20 100644 --- a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html +++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html @@ -657,7 +657,7 @@ textarea.onkeyup = function(){

      スキルをテストしよう!

      -

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているかを検証するテストを見ることができます— Test your skills: Strings を見てください。

      +

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているかを検証するテストを見ることができます— Test your skills: Strings を見てください。

      結論

      diff --git a/files/ja/learn/javascript/first_steps/variables/index.html b/files/ja/learn/javascript/first_steps/variables/index.html index 80c3c5af57..1ed288aa84 100644 --- a/files/ja/learn/javascript/first_steps/variables/index.html +++ b/files/ja/learn/javascript/first_steps/variables/index.html @@ -270,7 +270,7 @@ myNumberArray[2]; // 40 と表示されます

      角括弧で表示したい値の位置に応じたインデックス値を指定します。気づいたかもしれませんが JavaScript の配列は 0 始まりで、最初の要素のインデックスが 0 となります。

      -

      配列についても先の記事にて紹介します。

      +

      配列についても先の記事にて紹介します。

      オブジェクト

      @@ -319,7 +319,7 @@ daysInWeek = スキルをテストしよう! -

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を取得したかのテストを見ることができます — Test your skills: variables を見てください。

      +

      この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を取得したかのテストを見ることができます — Test your skills: variables を見てください。

      まとめ

      diff --git a/files/ja/learn/javascript/index.html b/files/ja/learn/javascript/index.html index 5f61ae9b76..2094a48052 100644 --- a/files/ja/learn/javascript/index.html +++ b/files/ja/learn/javascript/index.html @@ -54,7 +54,7 @@ translation_of: Learn/JavaScript
      このモジュールでは、条件文、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでにみたか、どこかで目にしたことでしょうが、ここではすべて明示的に説明を行います。
      JavaScript オブジェクト入門
      JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。 関連する関数や変数を効率的なパッケージにカプセル化して独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質は、言語に関する知識をさらに深め、より効率的なコードを書く場合に理解するために重要です。それゆえ、このモジュールを用意しました。 ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。
      -
      非同期 JavaScript
      +
      非同期 JavaScript

      このモジュールでは、非同期の JavaScript を見ていき、これがなぜ重要であるかや、サーバーからのリソース取得といった、ブロッキングの可能性のある操作を効率的に扱う方法を見ていきます。

      diff --git a/files/ja/learn/javascript/objects/object-oriented_js/index.html b/files/ja/learn/javascript/objects/object-oriented_js/index.html index 50ced468d5..387400f5b0 100644 --- a/files/ja/learn/javascript/objects/object-oriented_js/index.html +++ b/files/ja/learn/javascript/objects/object-oriented_js/index.html @@ -266,7 +266,7 @@ person2.greeting();

      あなたのスキルをテストしてみましょう!

      -

      この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。あなたのスキルをテストする: オブジェクト指向 JavaScript を参照してください。

      +

      この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。あなたのスキルをテストする: オブジェクト指向 JavaScript を参照してください。

      この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。

      diff --git a/files/ja/learn/performance/index.html b/files/ja/learn/performance/index.html index 070c09f1f1..abf9eef434 100644 --- a/files/ja/learn/performance/index.html +++ b/files/ja/learn/performance/index.html @@ -21,7 +21,7 @@ translation_of: Learn/Performance
      高度なモジュールでは、入門モジュールで概要を説明したトピックをさらに深く掘り下げ、パフォーマンスAPI、テストおよび分析ツール、パフォーマンスのボトルネックの概要を提供します。

      - このトピックに進む前に、「Web入門」を完了することをお勧めします。ただし、そうすることは必ずしも必要ではありません。

      + このトピックに進む前に、「Web入門」を完了することをお勧めします。ただし、そうすることは必ずしも必要ではありません。

      Introductory modules

      diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html index b163da36f3..6aefd2dc02 100644 --- a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html @@ -552,40 +552,40 @@ body {

      In this module

      -- cgit v1.2.3-54-g00ecf
    前提条件: -

    基本的なコンピューターリテラシーと、HTML と CSS の基本的な理解。

    +

    基本的なコンピューターリテラシーと、HTML と CSS の基本的な理解。