diff --git a/files/ja/learn_web_development/core/scripting/a_first_splash/index.md b/files/ja/learn_web_development/core/scripting/a_first_splash/index.md index d63971dfc7af47..78c2bebfd165b0 100644 --- a/files/ja/learn_web_development/core/scripting/a_first_splash/index.md +++ b/files/ja/learn_web_development/core/scripting/a_first_splash/index.md @@ -1,27 +1,30 @@ --- title: JavaScript の最初の一歩 slug: Learn_web_development/Core/Scripting/A_first_splash -original_slug: Learn/JavaScript/First_steps/A_first_splash l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}} JavaScript の理論や何ができるかを学んだところで、実践的なチュートリアルをガイドすることで、単純な JavaScript プログラムを作成するプロセスがどのようなものなのかを解説します。ここでは単純な「数当てゲーム」を手順を追って作っていきます。 - - + - + @@ -143,7 +146,7 @@ let resetButton; - 最後の 2 つの変数は、プレイヤーが予想した回数を記録するため 1 を（プレイヤーが何回予想したかの回数を追跡します）、そしてまだ存在していない（あとで追加する）リセットボタンへの参照を保持します。 > [!NOTE] -> 変数や定数についてはこのコースの間、[必要な情報を保管する — 変数](/ja/docs/Learn/JavaScript/First_steps/Variables)を始めとして何度も出てきます。 +> 変数や定数についてはこのコースの間、[必要な情報を保管する — 変数](/ja/docs/Learn_web_development/Core/Scripting/Variables)を始めとして何度も出てきます。 ### 関数 @@ -159,22 +162,22 @@ function checkGuess() { 関数を実行したい場合には、関数の名前に続いて括弧を書きます。 -それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を開いてください。そして次のコードを実行します。 +それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。[開発者ツールの JavaScript コンソール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)を開いてください。そして次のコードを実行します。 ```js checkGuess(); ``` -Return/Enter を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。 +Return/Enter を押した後で、 "I am a placeholder" という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。 > [!NOTE] -> 関数については後の記事、[関数 — 再利用可能なコードブロック](/ja/docs/Learn/JavaScript/Building_blocks/Functions)で詳しく学びます。 +> 関数については後の記事、[関数 — 再利用可能なコードブロック](/ja/docs/Learn_web_development/Core/Scripting/Functions)で詳しく学びます。 ### 演算子 JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。 -コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、[開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 Return/Enter キーを押してください。結果が表示されるはずです。 +コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、[開発者ツールの JavaScript コンソール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 Return/Enter キーを押してください。結果が表示されるはずです。 まずは算術演算子の例を見てください。 @@ -332,11 +335,11 @@ function checkGuess() { - 次に、テンプレートリテラルを使用して、現在の `userGuess` 変数の値を空白と共に `guesses` の段落の末尾に追加しています。 - 次の部分には、確認すべきことがいくつかあります。 - - 最初の `if(){ }` は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した `randomNumber` 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する `setGameOver()` 関数を実行します。 - - 今度は `else if(){ }` という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザーの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。 - - このコードに連なる最後のブロック (`else { }`) は、前の二つの条件がどちらも真とならなかった場合にのみ実行されます。(つまり、プレイヤーは間違えてはいるものの、予想回数が残っている場合です。) この場合、プレイヤーに予想が間違っていることを伝え、入力された数字が大きいか小さいかを伝えるため、さらなる条件の確認を行います。 + - 最初の `if (){ }` は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した `randomNumber` 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する `setGameOver()` 関数を実行します。 + - 今度は `else if (){ }` という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザーの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。 + - このコードに連なる最後のブロック (`else { }`) は、前の二つの条件がどちらも真とならなかった場合にのみ実行されます（つまり、プレイヤーは間違えてはいるものの、予想回数が残っている場合です）。この場合、プレイヤーに予想が間違っていることを伝え、その後、予想が正解より高かったか低かったかを調べるために別の条件テストを行い、さらにメッセージを表示して、高かったか低かったかをプレイヤーに伝えます。 -- 最後の 3 行 (26 行目～ 28 行目) は、次の予想の入力を受け取るための準備です。`guessCount` 変数に 1 を加算して、プレイヤーの予想回数を数えます。(`++` はインクリメント演算子で、1 だけインクリメント(増加)します。) そして、入力フォームのテキストフィールドを空にしてからフォーカスを当て、プレイヤーの次の入力に備えます。 +- 最後の 3 行は、次の予想の入力を受け取るための準備です。`guessCount` 変数に 1 を加算して、プレイヤーの予想回数を数えます。(`++` はインクリメント演算子で、1 だけインクリメント(増加)します。) そして、入力フォームのテキストフィールドを空にしてからフォーカスを当て、プレイヤーの次の入力に備えます。 ### イベント @@ -412,7 +415,7 @@ function resetGame() { 上のコードでもう少し詳しく説明しなければならないのは、 [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。 -[ブラウザーの開発者ツールの JavaScript コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) をもう一度開いて次のコードを入力してみましょう。 +[ブラウザーの開発者ツールの JavaScript コンソール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) をもう一度開いて次のコードを入力してみましょう。 ```js const fruits = ["apples", "bananas", "cherries"]; @@ -423,7 +426,7 @@ for (const fruit of fruits) { どうなりましたか。 `'apples', 'bananas', 'cherries'` の文字列がコンソールに出力されましたね。 -これはループのためです。 `const fruits = ['apples', 'bananas', 'cherries'];` の行は配列を作成します。このモジュールの後半で、[配列の完全ガイド](/ja/docs/Learn/JavaScript/First_steps/Arrays)を読み終えてから作業しますが、とりあえず、配列は項目（この場合は文字列）の集合です。 +これはループのためです。 `const fruits = ['apples', 'bananas', 'cherries'];` の行は配列を作成します。このモジュールの後半で、[配列の完全ガイド](/ja/docs/Learn_web_development/Core/Scripting/Arrays)を読み終えてから作業しますが、とりあえず、配列は項目（この場合は文字列）の集合です。 `for...of` ループは配列でそれぞれの項目を取得し、それに対して JavaScript を実行する方法を提供します。 `for (const fruit of fruits)`という行は次のような意味です。 @@ -464,7 +467,7 @@ guessField.focus(); const guessField = document.querySelector(".guessField"); ``` -この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。`querySelector()` はある情報 (必要な要素を選択する [CSS セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)) を受け取ります。 +この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。`querySelector()` はある情報 (必要な要素を選択する [CSS セレクター](/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors)) を受け取ります。 `guessField` に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ（基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります）とメソッド（基本的にはオブジェクトの内部に保持されている関数のこと）にアクセスできるようになりました。ようやく input 要素のメソッドの一つである `focus()` メソッドを使ってテキストフィールドにフォーカスを当てられます。 @@ -479,7 +482,7 @@ guessField.focus(); 少しブラウザーが持っているオブジェクトで遊んでみましょう。 1. まずブラウザーでプログラムを開いてください -2. 次に[開発者ツール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)を開き、 JavaScript コンソールのタブが開いたのを確認します +2. 次に[開発者ツール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)を開き、 JavaScript コンソールのタブが開いたのを確認します 3. `guessField` と入力してみてください。するとコンソールに {{htmlelement("input")}} 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました! 4. さらに下のように入力してみてください。 @@ -515,8 +518,10 @@ guessField.focus(); ページ内に存在するすべての要素は `style` プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。 -## ここで一息 +## まとめ これで数当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。（最後のプログラムは[こちらでも遊べます](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)。）もし作ったプログラムが動かなければ、[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)と見比べてみてください。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} +次のレッスンも役立つかもしれません。そのレッスンでは、 JavaScript コードを記述する際に何が問題となるかを説明し、その過程で「数字当てゲーム」を参照しています。 + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/What_is_JavaScript", "Learn_web_development/Core/Scripting/What_went_wrong", "Learn_web_development/Core/Scripting")}} diff --git a/files/ja/learn_web_development/core/scripting/arrays/index.md b/files/ja/learn_web_development/core/scripting/arrays/index.md index 346de3faa1b670..630252d87d3883 100644 --- a/files/ja/learn_web_development/core/scripting/arrays/index.md +++ b/files/ja/learn_web_development/core/scripting/arrays/index.md @@ -1,27 +1,33 @@ --- title: 配列 slug: Learn_web_development/Core/Scripting/Arrays -original_slug: Learn/JavaScript/First_steps/Arrays l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} このモジュールの最後に、配列について見ていきましょう。配列は 1 つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。
前提条件: - HTML と CSS の基本的な理解、 JavaScript とは何かを理解していること。 + 前提知識:HTMLおよびCSS の基礎を理解していること。
目標:学習成果: - JavaScript を書く最初の経験をし、少なくとも JavaScript プログラムを書くことの基本的な理解を得ること。 +
    +
  • プログラマーのように考えられるようになること。
    • +
  • JavaScript で書くことがどんなものかという体験。
    • +
- - + - + @@ -33,7 +39,7 @@ l10n: もし配列がなかったとしたら、別々の変数にそれぞれの値を格納しなければならず、各変数を表示するのと計算するので別々に呼び出さなければならなかったでしょう。こうなると、書き出すのがとても長く、非効率的でエラーを起こしやすいプログラムとなるでしょう。例えば、10 個の項目を請求書に出すだけでも最悪ですが、それが 100 個や 1000 個だったらどうでしょう。この記事の最後に実例としてやってみましょう。 -前回までの記事と同様に、JavaScript コンソールに配列の基礎となるコード例を[ブラウザーの開発者コンソール](/ja/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)に入力しながら学びましょう。 +前回までの記事と同様に、JavaScript コンソールに配列の基礎となるコード例を[ブラウザーの開発者コンソール](/ja/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)に入力しながら学びましょう。 ## 配列の作成 @@ -66,7 +72,7 @@ console.log(shopping.length); // 5 ## 配列の項目を取得し変更する -配列の項目には 0 から始まる番号が振られます。この番号は項目のインデックス（添字）と呼ばれます。つまり、最初の項目はインデックス 0、2 番目の項目はインデックス 1、のようになります。配列の各項目は、角括弧 (`[]`) を使用してその項目のインデックスを与えることで、[文字列中の文字を取得するときのように](/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#文字列の特定の文字を受け取る)取得することができます。 +配列の項目には 0 から始まる番号が振られます。この番号は項目のインデックス（添字）と呼ばれます。つまり、最初の項目はインデックス 0、2 番目の項目はインデックス 1、のようになります。配列の各項目は、角括弧 (`[]`) を使用してその項目のインデックスを与えることで、[文字列中の文字を取得するときのように](/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods#文字列の特定の文字を受け取る)取得することができます。 1. 次のコードをコンソールに入力してください。 @@ -228,7 +234,7 @@ console.log(longer); // [ "名古屋", "鹿児島" ] データが長い長い文字列の中に含まれていて、それを使いやすい形に分割して操作したいときがあります。例えばデータを表形式で表示するというようなときです。それには{{jsxref("String.prototype.split()","split()")}} メソッドが使用できます。このメソッドは文字列を分割するのに使用する文字を引数として取り、文字列をその文字で区切った部分文字列の配列に分割します。 > [!NOTE] -> 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。 +> 厳密には、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。 1. それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。 @@ -266,15 +272,15 @@ console.log(longer); // [ "名古屋", "鹿児島" ] dogNames.toString(); //ポチ,ハチ,タロウ,モコ ``` -## アクティブラーニング: 商品を印字しよう！ +## アクティブラーニング: 商品を印字する -商品の名前と価格、合計金額を請求書に印字するという最初の話に戻りましょう。以下に示す編集可能なコードのコメントの中に数字が書かれています。この数字はコードを書くべき場所を示しています。各数字の場所に次のようなコードを書いてください。次のようにします。 +先ほど記述した例に戻りましょう。請求書に製品名と価格を印刷し、価格を合計して下部に印刷します。下記に記述されている編集可能な例には、数字を含むコメントがあります。これらのコメントは、コードに何かを追加しなければならない場所を示しています。次のようにします。 1. `// No.1` というコメントの下に、商品の名前と価格をコロン (:) で繋げた、いくつか文字列が並んでいます。これを `products` という名前の配列にしてください。 2. `// No.2` というコメントの下で、 `for...of()` ループを始めて `products` 配列のすべての項目を繰り返すようにしてください。 -3. `// No.3` のコメントの下に 1 行で、現在の配列の項目 (`name:price`) を 2 つに分割するコードを書いてください。一方は商品の名前、もう一方は価格です。もしどうすればいいのかわからなければ、[便利な文字列のメソッド](/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods)の記事を参照してください。さらに[文字列と配列を相互に変換する](#文字列と配列を相互に変換する)も役に立つでしょう。 -4. 上記のコードの一部として、価格を文字列から数値に変換する必要もあるでしょう。どのようにすべきか思い出せなければ、[文字列の最初の記事](/ja/docs/Learn/JavaScript/First_steps/Strings#数値と文字列)を確認してみましょう。 -5. コードの先頭に `total` という名前の変数が宣言されて、0 で初期化されています。ループの中で (`// No.4` *の*下) 繰り返している現在の項目の価格を `total` 変数に加算するコードを一行で書いてください。そうすれば、コードの最後で正しい合計が請求書に印字されます。恐らく[代入演算子](/ja/docs/Learn/JavaScript/First_steps/Math#代入演算子)が役に立つでしょう。 +3. `// No.3` のコメントの下に 1 行で、現在の配列の項目 (`name:price`) を 2 つに分割するコードを書いてください。一方は商品の名前、もう一方は価格です。もしどうすればいいのかわからなければ、[便利な文字列のメソッド](/ja/docs/Learn_web_development/Core/Scripting/Useful_string_methods)の記事を参照してください。さらに[文字列と配列を相互に変換する](#文字列と配列を相互に変換する)も役に立つでしょう。 +4. 上記のコードの一部として、価格を文字列から数値に変換する必要もあるでしょう。どのようにすべきか思い出せなければ、[文字列の最初の記事](/ja/docs/Learn_web_development/Core/Scripting/Strings#数値と文字列)を確認してみましょう。 +5. コードの先頭に `total` という名前の変数が宣言されて、0 で初期化されています。ループの中で (`// No.4` *の*下) 繰り返している現在の項目の価格を `total` 変数に加算するコードを一行で書いてください。そうすれば、コードの最後で正しい合計が請求書に印字されます。恐らく[代入演算子](/ja/docs/Learn_web_development/Core/Scripting/Math#代入演算子)が役に立つでしょう。 6. `// No.5` のコメントの直下のコードを `itemText` 変数が「現在の項目の商品名 — $現在の項目の価格」となるように変更してください。「靴 — $23.99」という感じです。そうすれば正しい情報が請求書に印字されます。これはもう慣れたはずの単純な文字列結合で実現できます。 7. 最後に、 `// No.6` のコメントの下に、 `}` を追加して `for...of()` ループの最後を示す必要があるでしょう。 @@ -297,8 +303,8 @@ console.log(longer); // [ "名古屋", "鹿児島" ] const list = document.querySelector('.output ul'); const totalBox = document.querySelector('.output p'); let total = 0; -list.innerHTML = ''; -totalBox.textContent = ''; +list.textContent = ""; +totalBox.textContent = ""; // No.1 'パンツ:6.99' '靴下:5.99' @@ -363,8 +369,8 @@ solution.addEventListener("click", () => { const jsSolution = `const list = document.querySelector('.output ul'); const totalBox = document.querySelector('.output p'); let total = 0; -list.innerHTML = ''; -totalBox.textContent = ''; +list.textContent = ""; +totalBox.textContent = ""; const products = [ 'パンツ:6.99', @@ -395,15 +401,12 @@ window.addEventListener("load", updateCode); // タブキーでテキストエリアから抜けてしまうのを防ぎ、 // 代わりにカーソル位置にタブ文字を挿入する -const KEY_TAB = 9; -const KEY_ESC = 27; - textarea.onkeydown = (event) => { - if (event.keyCode === KEY_TAB) { + if (event.code === "Tab") { event.preventDefault(); insertAtCaret("\t"); } - if (event.keyCode === KEY_ESC) { + if (event.code === "Escape") { textarea.blur(); } }; @@ -467,12 +470,12 @@ body { {{jsxref("Array.prototype.push()","push()")}} や{{jsxref("Array.prototype.pop()","pop()")}} といったメソッドを使用するよい例は、ウェブアプリでデータの中で有効な項目だけを抜き出して維持したいときなどです。例えば、アニメーションのあるシーンで、現在表示中の背景イメージを保持している配列があり、一度に表示するイメージをパフォーマンスなどの理由で 50 に制限したいとします。その際、新しいオブジェクトを配列に追加したと同時に、古いオブジェクトを削除して配列を希望のサイズに維持します。 -次の例では、もう少し単純に、検索ボックスのある、ダミーの検索サイトを用意しました。検索ボックスに文字が入力されたら、直前 5 つの検索語がリストに表示されます。検索された語が 5 を超えたら最後の検索語が削除されるようになります。新しい検索語が先頭に追加されるので、常に 5 つの検索語が表示されます。 +この例では、よりシンプルな使用方法を示します。ここでは、検索ボックスを備えた模擬の検索サイトを提供します。検索ボックスに語句が入力されると、過去 5 回分の検索語句がリストに表示されるという仕組みです。 時間経過に伴う検索語句の数が 5 つを超えると、新しい語句をリストの一番上に追加するたびに、最後の語句が削除されます。これにより、常に過去 5 回分の検索語句がリストに表示されます。 > [!NOTE] -> 本当の検索アプリでは、前回の検索語をクリックすることでその検索に戻れて、実際に検索結果が表示されることでしょう！ただし、今は単純にしておきましょう。 +> 実際の検索アプリでは、以前の検索語をクリックすることができ、そうすれば実際の検索結果が表示されるでしょう。今のところは単純にしておきましょう。 -アプリを完成させるには... +アプリを完成させるには、次のようにする必要があります。 1. `// No.1` コメントの下に、検索ボックスに入力された検索語を配列の先頭に追加するコードを書いてください。検索語は `searchInput.value` と書いて取得します。 2. `// No.2` コメントの下に、配列の最後の項目を削除するコードを書いてください。 @@ -591,7 +594,7 @@ const jsSolution = `const list = document.querySelector('.output ul'); const searchInput = document.querySelector('.output input'); const searchBtn = document.querySelector('.output button'); -list.innerHTML = ''; +list.textContent = ""; const myHistory = []; const MAX_HISTORY = 5; @@ -603,7 +606,7 @@ searchBtn.onclick = () => { // 表示中の一覧を空にして、同じ項目が表示されないようにして、 // 結果は検索語が入力される度に毎回作り直される - list.innerHTML = ''; + list.textContent = ""; // 配列をループして、リスト内の全ての検索語を表示する for (const itemText of myHistory) { @@ -630,15 +633,12 @@ window.addEventListener("load", updateCode); // タブキーでテキストエリアから抜けてしまうのを防ぎ、 // 代わりにカーソル位置にタブ文字を挿入する -const KEY_TAB = 9; -const KEY_ESC = 27; - textarea.onkeydown = (event) => { - if (event.keyCode === KEY_TAB) { + if (event.code === "Tab") { event.preventDefault(); insertAtCaret("\t"); } - if (event.keyCode === KEY_ESC) { + if (event.code === "Escape") { textarea.blur(); } }; @@ -678,7 +678,7 @@ textarea.onkeyup = () => { ## スキルテスト -この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 配列](/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays)を見てください。 +この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 配列](/ja/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Arrays)を見てください。 ## 結論 @@ -690,5 +690,7 @@ textarea.onkeyup = () => { - [インデックス付きコレクション](/ja/docs/Web/JavaScript/Guide/Indexed_collections) — 配列とそのいとこにあたる型付き配列についての高度なガイドです。 - {{jsxref("Array")}} — `Array` オブジェクトのリファレンスページです。詳細なガイドと機能については、このリファレンスページで紹介されています。 +- [Aside: Intro to arrays](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~06e?via=mdn), Scrimba _MDN カリキュラムパートナー_ + - : 配列の入門として提供された対話形式のレッスン。 -{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Useful_string_methods", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}} diff --git a/files/ja/learn_web_development/core/scripting/build_your_own_function/index.md b/files/ja/learn_web_development/core/scripting/build_your_own_function/index.md index 56ea92b76137ac..fcaac0e7647423 100644 --- a/files/ja/learn_web_development/core/scripting/build_your_own_function/index.md +++ b/files/ja/learn_web_development/core/scripting/build_your_own_function/index.md @@ -1,12 +1,13 @@ --- title: 独自の関数を作る slug: Learn_web_development/Core/Scripting/Build_your_own_function -original_slug: Learn/JavaScript/Building_blocks/Build_your_own_function l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Functions","Learn_web_development/Core/Scripting/Return_values", "Learn_web_development/Core/Scripting")}} 前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。 @@ -14,19 +15,17 @@ l10n: - - + @@ -52,7 +51,7 @@ alert("これはメッセージです"); 最初に、基本的な関数を組み立てていきましょう。 > [!NOTE] -> 関数に名前を付ける方針としては、[変数の名前付けのルール](/ja/docs/Learn/JavaScript/First_steps/Variables#変数の名前付けのルール)と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです。関数ならすぐ後に括弧が付きますが、変数には付きません。 +> 関数に名前を付ける方針としては、[変数の名前付けのルール](/ja/docs/Learn_web_development/Core/Scripting/Variables#変数の名前付けのルール)と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです。関数ならすぐ後に括弧が付きますが、変数には付きません。 1. [function-start.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/functions/function-start.html) ファイルにアクセスして、ローカルコピーを作成するところから始めます。HTML は単純です。 body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。 2. 次に、` + - - - ``` - -4. 元の {{htmlelement("script")}} の中に、以下のコードを追加します。 - - ```js - const myImage = document.querySelector(".my-image"); - - fetch("flowers.jpg").then((response) => { - response.blob().then((myBlob) => { - const objectURL = URL.createObjectURL(myBlob); - myImage.src = objectURL; - }); - }); - ``` - -5. [フェッチ](/ja/docs/Web/API/Window/fetch)に対応していないブラウザーで読み込んでも、花の画像が現れるはずです。 - ![Fetch basic example という見出しと紫の花の写真](fetch-image.jpg) - -> [!NOTE] -> 完成版は [fetch-polyfill-finished.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) にあります（[ソースコード](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)も参照してください）。 - -> [!NOTE] -> 繰り返しになりますが、これから出会う様々なポリフィルを使用する方法はたくさんあります - それぞれのポリフィルのドキュメントを参照してください。 - -「なぜポリフィルは必要がなくても、常にコードを読み込むべきなのか」と思うかもしれません。これは良い点です。サイトが複雑になり、より多くのライブラリーやポリフィルなどを使用するようになると、多くの余分なコードを読み込むようになり、特に性能の低い端末ではパフォーマンスに影響を及ぼし始める可能性があります。必要なファイルだけを読み込むのが意味あることです。 - -これを行うには、 JavaScript で特別な設定を要求されます。使用しようとしている機能をブラウザーが対応しているかどうかを検出する、何らかの機能検出テストが必要です。 - -```js -if (browserSupportsAllFeatures()) { - main(); -} else { - loadScript("polyfills.js", main); -} - -function main(err) { - // actual app code goes in here -} -``` - -そこで最初に、関数 `browserSupportsAllFeatures()` が `true` を返すかどうかを調べる条件を実行します。もし `true` を返したら、アプリのコードをすべて格納する `main()` 関数を実行します。 `browserSupportsAllFeatures()` は次のようになります。 - -```js -function browserSupportsAllFeatures() { - return window.Promise && window.fetch; -} -``` - -ここでは、[`Promise`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) オブジェクトと [`fetch()`](/ja/docs/Web/API/Window/fetch) 関数がブラウザーで存在するかどうかをテストしています。両方が存在する場合、関数は `true` を返します。もし関数が `false` を返したら、条件分岐の2つ目の部分のコードを実行します。これは `loadScript()` と呼ばれる関数を実行し、ポリフィルをページに読み込み、読み込み完了後に `main()` を実行します。 `loadScript()` は次のようになります。 - -```js -function loadScript(src, done) { - const js = document.createElement("script"); - js.src = src; - js.onload = () => { - done(); - }; - js.onerror = () => { - done(new Error(`Failed to load script ${src}`)); - }; - document.head.appendChild(js); -} -``` - -この関数は新しい `` 要素を、閉じ `` タグのすぐ上に追加して下さい。 3. DOM の中の要素を操作するため、まず DOM を選びだしてこれへの参照を変数に保存する必要があります。script 要素の中に、次の行を追加して下さい。 @@ -99,7 +104,7 @@ DOM 操作の学習を始めるにあたり、まずは実践的な例から始 const link = document.querySelector("a"); ``` -4. 要素への参照を変数に保存したので、これが備えているプロパティとメソッドを使って DOM の操作を始められます (利用できるプロパティとメソッドは、たとえば {{htmlelement("a")}} 要素であれば {{domxref("HTMLAnchorElement")}} インターフェイス、さらにその汎化した親のインターフェイス {{domxref("HTMLElement")}} や {{domxref("Node")}} — これは DOM の全てノードが相当します — で定義されています)。まずは、リンクの中のテキストを、{{domxref("Node.textContent")}} プロパティを更新する事で変更してみましょう。上で書いた行の下に、次の行を追加して下さい。 +4. 要素への参照を変数に保存したので、これが備えているプロパティとメソッドを使って DOM の操作を始められます（利用できるプロパティとメソッドは、たとえば {{htmlelement("a")}} 要素であれば {{domxref("HTMLAnchorElement")}} インターフェイス、さらにその汎化した親のインターフェイス {{domxref("HTMLElement")}} や {{domxref("Node")}} — これは DOM の全てノードが相当します — で定義されています）。まずは、リンクの中のテキストを、{{domxref("Node.textContent")}} プロパティを更新する事で変更してみましょう。上で書いた行の下に、次の行を追加して下さい。 ```js link.textContent = "Mozilla Developer Network"; @@ -111,14 +116,14 @@ DOM 操作の学習を始めるにあたり、まずは実践的な例から始 link.href = "https://developer.mozilla.org"; ``` -JavaScript でよくあることですが、要素を選択し、その参照を変数に格納する方法はたくさんあることに注意してください。{{domxref("Document.querySelector()")}} は、現代の手法として推奨されています。CSS のセレクターを使用して要素を選択することができるので便利です。上記の `querySelector()` 呼び出しは、文書内に最初に現れる {{htmlelement("a")}} 要素を選択します。もし、複数の要素を選択して何かをしたいのであれば、 {{domxref("Document.querySelectorAll()")}} を使用することができます。これはセレクターに一致する文書内のすべての要素を選択し、それらへの参照を[配列](/ja/docs/Learn/JavaScript/First_steps/Arrays)風のオブジェクトである {{domxref("NodeList")}} に格納します。 +JavaScript でよくあることですが、要素を選択し、その参照を変数に格納する方法はたくさんあることに注意してください。{{domxref("Document.querySelector()")}} は、現代の手法として推奨されています。CSS のセレクターを使用して要素を選択することができるので便利です。上記の `querySelector()` 呼び出しは、文書内に最初に現れる {{htmlelement("a")}} 要素を選択します。もし、複数の要素を選択して何かをしたいのであれば、 {{domxref("Document.querySelectorAll()")}} を使用することができます。これはセレクターに一致する文書内のすべての要素を選択し、それらへの参照を[配列](/ja/docs/Learn_web_development/Core/Scripting/Arrays)風のオブジェクトである {{domxref("NodeList")}} に格納します。 要素への参照を得るためには、次のような古いやり方もあります。 - {{domxref("Document.getElementById()")}} は、指定された `id` 属性値を持つ要素を選択します。例えば `

My paragraph

` の場合、この関数に引数として ID を渡します。すなわち、 `const elementRef = document.getElementById('myId')` とします。 - {{domxref("Document.getElementsByTagName()")}} は、指定した種類の全ての要素を配列風のオブジェクトに入れて返します、例えばすべての `

`、すべての `` などです。要素の型をこの関数に引数として渡します。すなわち、 `const elementRefArray = document.getElementsByTagName('p')` のようにします。 -この 2 つは、 `querySelector()` のような現代のメソッドよりも古いブラウザーでうまく動作しますが、それほど便利なものではありません。他にどんなものがあるか、探してみてください。 +この 2 つは、古いブラウザーでは `querySelector()` のような現代のメソッドよりもうまく動作しますが、それほど便利なものではありません。他にどんなものがあるか、探してみてください。 ### 新しいノードの作成と配置 @@ -158,11 +163,11 @@ JavaScript でよくあることですが、要素を選択し、その参照を linkPara.appendChild(text); ``` -DOMにノードを追加するために必要なものは、これでほとんど揃いました。動的なインターフェイスを構築する際には、これらのメソッドを多く使用することになるでしょう（後でいくつかの例を見てみましょう）。 +DOM にノードを追加するために必要なものは、これでほとんど揃いました。動的なインターフェイスを構築する際には、これらのメソッドを多く使用することになるでしょう（後でいくつかの例を見てみましょう）。 -### 要素の移動や削除 +### 要素の移動や除去 -ノードを移動させたり、 DOM から完全に削除したい場合があります。これは完全に可能です。 +ノードを移動させたり、 DOM から完全に除去したい場合があります。これは完全に可能です。 リンクが含まれる段落を節の一番下に移動させたい場合は、このようにします。 @@ -170,7 +175,7 @@ DOMにノードを追加するために必要なものは、これでほとん sect.appendChild(linkPara); ``` -これは段落をセクションの一番下に移動させます。2つ目のコピーができると思ったかもしれませんが、そうではありません。 `linkPara` は、その段落の唯一のコピーを参照するものなのです。もしコピーを作成してそれも追加したい場合は、代わりに {{domxref("Node.cloneNode()")}} を使用する必要があります。 +これは段落をセクションの一番下に移動させます。 2 つ目のコピーができると思ったかもしれませんが、そうではありません。 `linkPara` は、その段落の唯一のコピーを参照するものなのです。もしコピーを作成してそれも追加したい場合は、代わりに {{domxref("Node.cloneNode()")}} を使用する必要があります。 ノードの削除も、少なくとも削除するノードとその親への参照がある場合は、とても簡単です。今回の例では、以下のように {{domxref("Node.removeChild()")}} を使用するだけです。 @@ -220,7 +225,7 @@ linkPara.parentNode.removeChild(linkPara); ``` > [!NOTE] -> JavaScript のプロパティ版では、 CSS スタイルが小文字のキャメルケースで書かれているのに対し、 CSS 版はハイフン区切りで書かれていることに注意してください（例: `backgroundColor` と `background-color`）。これらを混合しないように注意してください。さもなければ、これは動作しません。 +> JavaScript のプロパティ版では、 CSS スタイルが小文字のキャメルケースで書かれているのに対し、 CSS 版はハイフン区切りで書かれていることに注意してください（`backgroundColor` や `background-color` など）。これらを混合しないように注意してください。さもなければ、これは動作しません。 ドキュメントのスタイルを動的にいじる際によく使われる別のやり方をこれから見ていきましょう。 @@ -247,9 +252,9 @@ linkPara.parentNode.removeChild(linkPara); 4. ページを更新すると、何も変化がないことがわかります。CSS は引き続き段落に適用されていますが、今回はインライン CSS スタイルではなく、CSS ルールによって選択されたクラスが与えられています。 -どちらの方法を選ぶかは、あなた次第です。どちらも長所と短所があります。最初の方法は設定が少なくて済み、単純な使用に適しています。一方、2番目の方法はより純粋主義的です（CSS と JavaScript を混合しない、悪しき習慣とされるインラインスタイルも使用しない）。より大規模で複雑なアプリを作り始めると、おそらく2つ目の方法をより多く使用するようになるでしょうが、それは実にあなた次第です。 +どちらの方法を選ぶかは、あなた次第です。どちらも長所と短所があります。最初の方法は設定が少なくて済み、単純な使用に適しています。一方、 2 番目の方法はより純粋主義的です（CSS と JavaScript を混合しない、悪しき習慣とされるインラインスタイルも使用しない）。より大規模で複雑なアプリを作り始めると、おそらく 2 つ目の方法をより多く使用するようになるでしょうが、それは実にあなた次第です。 -この点で、我々は実際に有用なことは何もしていません! 静的コンテンツを作成するためにJavaScript を使用する意味はありません。JavaScript を使用せず、HTML に記述したほうがよいでしょう。HTMLよりも複雑ですし、JavaScriptでコンテンツを作成することには他にも付随する問題があります（検索エンジンに読み取られないなど）。 +この点で、我々は実際に有用なことは何もしていません! 静的コンテンツを作成するために JavaScript を使用する意味はありません。 JavaScript を使用せず、 HTML に記述したほうがよいでしょう。 HTML よりも複雑ですし、 JavaScript でコンテンツを作成することには他にも付随する問題があります（検索エンジンに読み取られないなど）。 次の節では、 DOM API をより有用に使用する方法を見ていきます。 @@ -272,10 +277,10 @@ linkPara.parentNode.removeChild(linkPara); 1. まず私たちが用意した [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) 初期ファイルをダウンロードしてローカルコピーをどこかに作成してください。最小限の CSS、ラベルのついたリスト、input とボタン、空のリストと {{htmlelement("script")}} 要素が書いてあるはずです。この先書き足していくものは全部 script の中に書きます。 2. ({{htmlelement("ul")}}) と {{htmlelement("input")}} と {{htmlelement("button")}} 要素への参照を保持する 3 つの変数を作成します。 -3. ボタンがクリックされた時の応答として走らせる[関数](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を作成します。 +3. ボタンがクリックされた時の応答として走らせる[関数](/ja/docs/Learn_web_development/Core/Scripting/Functions)を作成します。 4. 関数本体は、input 要素の現在の[値](/ja/docs/Web/API/HTMLInputElement#プロパティ)を変数に保存するところから始めます。 5. 次に、input 要素の値に空文字列 (`''`) を代入して、 input 要素を空にします。 -6. 3 つの要素を作成します — リスト項目({{htmlelement('li')}}) と {{htmlelement('span')}} と {{htmlelement('button')}} で、これらを変数に保存します。 +6. 3 つの要素を作成します — リスト項目 ({{htmlelement('li')}}) と {{htmlelement('span')}} と {{htmlelement('button')}} で、これらを変数に保存します。 7. span と button をリスト項目の子に追加します。 8. span のテキストに、先ほど保存した input 要素の値を代入し、ボタンのテキストを「削除」にします。 9. できたリスト項目をリストの子に追加します。 @@ -300,4 +305,4 @@ linkPara.parentNode.removeChild(linkPara); （私たちの [Web API の索引](/ja/docs/Web/API) で、 MDN で文書化されている Web API の全リストを参照できます。） -{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Object_basics","Learn_web_development/Core/Scripting/Network_requests", "Learn_web_development/Core/Scripting")}} diff --git a/files/ja/learn_web_development/core/scripting/event_bubbling/index.md b/files/ja/learn_web_development/core/scripting/event_bubbling/index.md index 1bcc64ac86798f..a8715bc737383e 100644 --- a/files/ja/learn_web_development/core/scripting/event_bubbling/index.md +++ b/files/ja/learn_web_development/core/scripting/event_bubbling/index.md @@ -1,20 +1,42 @@ --- title: イベントのバブリング slug: Learn_web_development/Core/Scripting/Event_bubbling -original_slug: Learn/JavaScript/Building_blocks/Event_bubbling l10n: - sourceCommit: c20c12fab32381b983b4148d712fda227d34e2bd + sourceCommit: eb20babb96149f98bcbf7817b58e305c5297f2e1 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn_web_development/Core/Scripting/Image_gallery", "Learn_web_development/Core/Scripting")}} ウェブページは見出し、テキストの段落、画像、ボタンなどの「要素」で構成されており、これらの要素に発生するイベントを待ち受けすることができることを見てきました。例えば、ボタンにリスナーを追加すると、ユーザーがボタンをクリックしたときに実行することができます。 また、これらの要素は他の要素の中に「入れ子」にすることができます。例えば、{{htmlelement("button")}} は {{htmlelement("div")}} 要素の中に置くことができます。この場合、 `

` 要素を親要素、 `
前提条件: - HTML と CSS への基本的な理解、JavaScript についての理解。 + 前提知識:HTMLおよびCSS の基礎を理解していること。
目的:学習成果: - JavaScript において、配列とは何か、どのように操作するのかを理解すること。 +
    +
  • 配列とは何か。それは、変数のリストを保持する構造です。
    • +
  • 配列の構文 — [a, b, c] およびアクセサー構文、myArray[x]。
    • +
  • 配列の値の変更。
    • +
  • length、push()、pop()、join()、split() などの一般的なプロパティやメソッドを使用した配列操作。
    • +
  • forEach()、map()、filter() などの高度な配列メソッド。
    • +
前提知識: - 基本的な HTML と CSS、それに - JavaScript の第一歩の理解。関数 — 再利用可能なコードブロック。 + HTMLおよびCSS の基礎を理解し、これまでのレッスンで説明した JavaScript を把握していること。
目標:学習成果: - カスタム関数を構築するための練習を提供し、関連する有益な詳細をいくつか説明します。 +
    +
  • 自分自身でカスタム関数を作成する経験。
    • +
  • 関数に引数を追加すること。
    • +
  • 自分の関数を呼び出すこと。
    • +
+ + + + + + + + + + +
前提知識:HTMLおよびCSS の基礎を理解し、これまでのレッスンで説明した JavaScript を把握していること。
学習成果: +
    +
  • イベントの委譲は、イベントバブリングまたはイベントキャプチャによって実現されること。
    • +
  • イベントの移譲を stopPropagation() で止めること。
    • +
  • イベントオブジェクトからイベント対象にアクセスすること。
    • +
+
+ +## イベントのバブリング入門 + +イベントのバブリングについて、例を挙げて紹介し、定義してみましょう。 ### 親要素へのリスナーの設定 @@ -80,7 +102,7 @@ button.addEventListener("click", handleClick); {{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }} -ユーザーがボタンをクリックすると、3つの要素すべてでクリックイベントが発行されることが分かります。 +ユーザーがボタンをクリックすると、 3 つの要素すべてでクリックイベントが発行されることが分かります。 ```plain BUTTON 要素をクリックしました @@ -175,7 +197,7 @@ box.addEventListener("click", () => box.classList.add("hidden")); ボタンをクリックすると、ボックスとコンテナーそのものが表示されます。しかし、動画をクリックすると、動画の再生は始まりますが、ボックスは再び非表示になります。 -動画は `
` の中にあり、その一部なので、動画をクリックすると両方のイベント ハンドラーが実行され、このような動作が発生します。 +動画は `
` の中にあり、その一部なので、動画をクリックすると両方のイベントハンドラーが実行され、このような動作が発生します。 ### stopPropagation() でこの問題を修正する @@ -315,10 +337,10 @@ BUTTON 要素をクリックしました タイルのサイズと位置を設定するために、ちょっとした CSS を設定します。 ```css -.tile { - height: 100px; - width: 25%; - float: left; +#container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; } ``` @@ -375,8 +397,8 @@ JavaScript はほとんど同じですが、`target` と `currentTarget` の両 ```js const output = document.querySelector("#output"); function handleClick(e) { - const logTarget = `Target: ${e.target.tagName}`; - const logCurrentTarget = `Current target: ${e.currentTarget.tagName}`; + const logTarget = `target: ${e.target.tagName}`; + const logCurrentTarget = `currentTarget: ${e.currentTarget.tagName}`; output.textContent += `${logTarget}, ${logCurrentTarget}\n`; } @@ -396,7 +418,7 @@ button.addEventListener("click", handleClick); ## スキルテスト -この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: イベント](/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)を参照してください。 +この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: イベント](/ja/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Events)を参照してください。 ## まとめ @@ -406,8 +428,7 @@ button.addEventListener("click", handleClick); また、JavaScript が使用されるさまざまなコンテキストには、異なるイベントモデルがあることを理解することが重要です。Web API から、ブラウザーの WebExtensions や Node.js (サーバーサイド JavaScript) などの他の領域までです。 これでこれらの領域をすべて理解できるとは思っていませんが、ウェブ開発を学習していく上で、イベントの基本を理解しておくことはとても役に立ちます。 -> [!NOTE] -> 行き詰まった場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)のいずれかに連絡してください。 +次に、ここ数トピックの理解度を検査する問題を探します。 ## 関連情報 @@ -415,4 +436,4 @@ button.addEventListener("click", handleClick); - [イベントリファレンス](/ja/docs/Web/Events) - [Event order](https://www.quirksmode.org/js/events_order.html) （キャプチャとバブリングの議論） — Peter-Paul Koch による素晴らしい作品です。 -{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} diff --git a/files/ja/learn_web_development/core/scripting/events/index.md b/files/ja/learn_web_development/core/scripting/events/index.md index 6a6b7b6381f284..b38b460395fc81 100644 --- a/files/ja/learn_web_development/core/scripting/events/index.md +++ b/files/ja/learn_web_development/core/scripting/events/index.md @@ -1,32 +1,34 @@ --- title: イベント入門 slug: Learn_web_development/Core/Scripting/Events -original_slug: Learn/JavaScript/Building_blocks/Events l10n: - sourceCommit: f7c186696980fee97e72261370d7b5a8c1cd9302 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}} +{{LearnSidebar}} -イベントは、あなたがプログラミングしているシステムで起こることで、あなたのコードがそれらに反応できるようにシステムがあなたに伝えるものです。 +{{PreviousMenuNext("Learn_web_development/Core/Scripting/Return_values","Learn_web_development/Core/Scripting/Event_bubbling", "Learn_web_development/Core/Scripting")}} -例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。 +イベントは、プログラミングしているシステムで発生するもので、コードがそれらに反応できるようにシステムが伝えるものです。 +例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。 - - + - + @@ -144,7 +146,7 @@ btn.addEventListener("click", changeBackground); 一部のイベント、たとえば `click` などは、ほぼすべての要素で利用できます。他のイベントはより具体的で、特定の状況でのみ使用することができます。例えば、[`play`](/ja/docs/Web/API/HTMLMediaElement/play_event) イベントは {{htmlelement("video")}} のようないくつかの要素でのみ利用することができます。 -### リスナーの除去 +### リスナーの除去方法 `addEventListener()` を用いてイベントハンドラーを追加した場合、[`removeEventListener()`](/ja/docs/Web/API/EventTarget/removeEventListener) メソッドを用いて再び除去することができます。例えば、この例では `changeBackground()` イベントハンドラーが除去されます。 @@ -187,12 +189,6 @@ myElement.addEventListener("click", functionB); これで要素がクリックされると両方の関数が実行されるようになりました。 -### さらに学ぶ - -他にも `addEventListener()` で利用できる強力な機能やオプションがあります。 - -これらはこの記事の範囲からは少し外れますが、もし読みたければ、 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) と [`removeEventListener()`](/ja/docs/Web/API/EventTarget/removeEventListener) のリファレンスページを参照してください。 - ## イベントリスナーの他の機構 イベントハンドラーの登録には `addEventListener()` を使用することを推奨します。これは最も強力なメソッドで、より複雑なプログラムで最も有効に機能します。しかし、イベントハンドラーを登録する方法として、他にも 2 種類あります。イベントハンドラープロパティとインラインイベントハンドラーです。 @@ -202,7 +198,7 @@ myElement.addEventListener("click", functionB); イベントを発行することができるオブジェクト（ボタンなど）は通常、 `on` にイベント名が続くプロパティを持っています。例えば、要素には `onclick` というプロパティがあります。 これは、イベントハンドラープロパティと呼ばれます。イベントを待ち受けるには、ハンドラー関数をプロパティに割り当てることで実現できます。 -例えば、ランダムカラーの例を次のように書き換えることができます。 +例えば、ランダムな色の例を次のように書き換えることができます。 ```js const btn = document.querySelector("button"); @@ -253,7 +249,7 @@ element.onclick = function2; あなたのコードにもこのようなパターンがあるかもしれません。 ```html - + ``` ```js @@ -263,16 +259,16 @@ function bgChange() { } ``` -イベントハンドラーを登録するための最も初期の方法は、 [HTML のイベントハンドラー属性](/ja/docs/Web/HTML/Attributes#event_handler_attributes)（またはインラインイベントハンドラー）を使うものでした。属性の値は、文字通り、イベントが発生したときに実行したい JavaScript コードです。 +イベントハンドラーを登録するための最も初期の方法は、 [HTML のイベントハンドラー属性](/ja/docs/Web/HTML/Attributes#イベントハンドラー属性)（またはインラインイベントハンドラー）を使うものでした。属性の値は、文字通り、イベントが発生したときに実行したい JavaScript コードです。 上記の例では、同じページの {{htmlelement("script")}} 要素の中で定義した関数を呼び出していますが、例えば次のように、属性の中に直接 JavaScript を挿入することもできます。 ```html - ``` -イベント ハンドラー プロパティの多くに対応する HTML 属性が見つかりますが、これらを使用すべきではありません。これらは悪い習慣と見なされています。 +イベントハンドラープロパティの多くに対応する HTML 属性が見つかりますが、これらを使用すべきではありません。これらは悪い習慣と見なされています。 イベントハンドラー属性を使用することは、実に素早く何かを行う場合には簡単に思えるかもしれませんが、すぐに手に負えなくなり、非効率的になります。 まず、 HTML と JavaScript を混在させるのは良い考えとは言えません。 JavaScript を分けておくことは良い習慣です。 JavaScript を別のファイルにすれば、複数の HTML 文書に適用することができます。 @@ -289,9 +285,9 @@ for (const button of buttons) { } ``` -最後に、多くの一般的なサーバー設定は、セキュリティ対策としてインラインJavaScriptを許可しません。 +最後に、多くの一般的なサーバー設定は、セキュリティ対策としてインライン JavaScript を許可しません。 -**HTMLのイベントハンドラー属性を使用しないようにしましょう**。これらは時代遅れで、使用するのは悪い習慣です。 +**HTML のイベントハンドラー属性を使用しないようにしましょう**。これらは時代遅れで、使用するのは悪い習慣です。 ## イベントオブジェクト @@ -322,9 +318,6 @@ btn.addEventListener("click", bgChange); イベントオブジェクトの `target` プロパティは、常にイベントが生じた要素への参照となっています。 ですから、この例ではページではなく、ボタンの背景色がランダムに変わります。 -> [!NOTE] -> 下記の[イベントの移譲](#イベントの移譲)の節で、 `event.target` を使用している例があります。 - > [!NOTE] > イベントオブジェクトには好きな名前が使えます。イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。 > `e`/`evt`/`event` が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。 @@ -365,7 +358,8 @@ div { 最も一般的な例は、例えばカスタム登録フォームのようなウェブフォームです。 詳細を入力して送信ボタンをクリックすると、データは処理のためにサーバー上の指定したページに送信され、ブラウザーは何らかの「成功メッセージ」ページ（または別のページが指定されていない場合は同じページ）にリダイレクトされるのが自然な動作です。 -ユーザーが適切なデータを送信しなかった場合に問題が発生します。開発者として、サーバーへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自動検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。 +ユーザーが適切なデータを送信しなかった場合に問題が発生します。開発者として、サーバーへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。 +ブラウザーの中にはフォームデータの自動検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。 まず、姓と名を入力させる単純な HTML フォームです。 @@ -417,357 +411,14 @@ form.addEventListener("submit", (e) => { > [!NOTE] > ソースコード全体については、 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/preventdefault-validation.html) を（および[ライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)も）ご覧ください。 -## イベントのバブリング - -イベントのバブリングは、ブラウザーが入れ子になった要素を対象とするイベントをどのように処理するかを記述しています。 - -### 親要素にリスナーを設定 - -次の様なウェブページがあったとします。 - -```html -
- -
-

-```
-
-ここではボタンは別の要素 {{HTMLElement("div")}} の中にあります。ここでは、 `
` 要素が、内包する要素の**親**であるといいます。親要素にクリックイベントハンドラーを追加し、ボタンをクリックするとどうなるでしょうか？
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
-}
-
-const container = document.querySelector("#container");
-container.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('Setting a listener on a parent element', '100%', 200, "", "") }}
-
-ユーザーがボタンをクリックすると、親がクリックイベントを発生させることがわかります。
-
-```plain
-DIV 要素をクリックしました
-```
-
-これは意味があります。ボタンは `
` の中にあるので、ボタンをクリックすると、その中にある要素も暗黙のうちにクリックしたことになります。
-
-### バブリングの例
-
-ボタンと親にイベントリスナーを追加したらどうなるでしょうか？
-
-```html
-
-  

-    
-  

-  

-
-```
-
-ボタンとその親 (`
`)、そしてどちらも内包する {{HTMLElement("body")}} 要素にクリックイベントハンドラーを追加してみましょう。
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
-}
-
-const container = document.querySelector("#container");
-const button = document.querySelector("button");
-
-document.body.addEventListener("click", handleClick);
-container.addEventListener("click", handleClick);
-button.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }}
-
-ユーザーがボタンをクリックすると、 3 つの要素すべてがクリックイベントを発行することがわかります。
-
-```plain
-BUTTON 要素をクリックしました
-DIV 要素をクリックしました
-BODY 要素をクリックしました
-```
-
-この場合、次のようになります。
-
-- 最初にボタン上で click が発生します
-- 続いて click が親（`
` 要素）で発生します
-- 続いて `
` 要素の親（`` 要素）で発生します
-
-これを、クリックされた最も内側の要素からイベントが**バブルアップ**すると言います。
-
-この動作は有益なこともあれば、予期せぬ問題を発生させることもあります。次の節では、この動作が発生させる問題を見て、解決策を探ります。
-
-### 動画プレイヤーの例
-
-この例では、最初は非表示になっている動画と、"動画を表示" とラベル付けされたボタンがページに表示されています。私たちは以下のような操作をしたいと思います。
-
-- ユーザーが「動画を表示」ボタンをクリックしたら、動画を格納したボックスを表示させますが、動画の再生はまだ始めません。
-- ユーザーが動画をクリックしたら、動画の再生を始めます。
-- ユーザーが動画外のボックスのどこかをクリックしたら、ボックスを非表示にします。
-
-HTML は次のようになります。
-
-```html
-
-
-
-```
-
-これには以下のものが含まれます。
-
-- `
-
-
-```
-
-```css hidden
-div {
-  width: 100%;
-  height: 100%;
-  background-color: #eee;
-}
-
-.hidden {
-  display: none;
-}
-
-div video {
-  padding: 40px;
-  display: block;
-  width: 400px;
-  margin: 40px auto;
-}
-```
-
-### イベントのキャプチャ
-
-イベントの伝播の別の形式として、イベントキャプチャがあります。これはイベントバブリングと似ていますが、順序が逆になります。つまり、イベントは対象となる最も内側の要素で最初に発生し、その後、入れ子が浅くなる要素に向けて発生するのではなく、入れ子の最も浅い要素で最初に発生し、その後、対象とする要素に到達するまで、入れ子が深い要素に向けて発生します。
-
-イベントのキャプチャは既定では無効です。有効にするには `addEventListener()` で `capture` オプションを渡す必要があります。
-
-この例は、 `capture` オプションを使用していることを除けば、先ほど見た[バブリングの例](#バブリングの例)と同じです。
-
-```html
-
-  

-    
-  

-  

-
-```
-
-```js
-const output = document.querySelector("#output");
-function handleClick(e) {
-  output.textContent += `${e.currentTarget.tagName} 要素をクリックしました\n`;
-}
-
-const container = document.querySelector("#container");
-const button = document.querySelector("button");
-
-document.body.addEventListener("click", handleClick, { capture: true });
-container.addEventListener("click", handleClick, { capture: true });
-button.addEventListener("click", handleClick);
-```
-
-{{ EmbedLiveSample('Event capture', '100%', 200, "", "") }}
-
-この場合、メッセージの順番は逆になります。 `` のイベントハンドラーが最初に発生し、続いて `
` のイベントハンドラーが発生し、続いて `

-      
-      
+      
@@ -34,7 +40,7 @@ l10n:
 
 JavaScript の中で、関数はあらゆるところに見つかるでしょう。実際、これまでのところすべての場面で関数を使用してきました。これについてはあまり触れてきませんでした。しかし、今こそ明確に関数について話し始め、本当に構文を探索する時期です。
 
-括弧のペアを特徴とする JavaScript の構造を使用するほとんどの場合、そして [for ループ](/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#標準的な_for_ループ)、[while と do...while ループ](/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_と_do...while)、または [if...else 文](/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if...else_文)のような一般的な組み込みの言語構造を使用**していない**場合、関数を使用していることになります。
+括弧のペアを特徴とする JavaScript の構造を使用するほとんどの場合、そして [for ループ](/ja/docs/Learn_web_development/Core/Scripting/Loops#標準的な_for_ループ)、[while と do...while ループ](/ja/docs/Learn_web_development/Core/Scripting/Loops#while_と_do...while)、または [if...else 文](/ja/docs/Learn_web_development/Core/Scripting/Conditionals#if...else_文)のような一般的な組み込みの言語構造を使用**していない**場合、関数を使用していることになります。
 
 ## ブラウザー組み込み関数
 
@@ -75,17 +81,17 @@ const myNumber = Math.random();
 > [!NOTE]
 > これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。
 
-JavaScript 言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動（走らせたり実行する事の別の言い方）するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは、背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。
+JavaScript 言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動（走らせたり実行する事の別の言い方）するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは、背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++ のような低レベルのシステム言語で書かれています。
 
-ブラウザー関数のいくつかは JavaScript 言語のコアに含まれないことを心に留めておいてください。いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています（詳しくは[私たちのコースのこの以前の節](/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#実際に何ができるのか)を見てください）。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。
+ブラウザー関数のいくつかは JavaScript 言語のコアに含まれないことを心に留めておいてください。いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべく既定の言語の上で構築されています（詳しくは[私たちのコースのこの以前の節](/ja/docs/Learn_web_development/Core/Scripting/What_is_JavaScript#実際に何ができるのか)を見てください）。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。
 
 ## 関数とメソッド
 
-**関数**のうち、オブジェクトの一部であるものは**メソッド**と呼ばれます。構成された JavaScript オブジェクト内部の働きについては、まだ知る必要はありません。この後のモジュールで、オブジェクト内部の働きや自分でオブジェクトを作る方法について教える段階になってから覚えれば大丈夫です。今のところは、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在している事があるとわかってもらいたいだけです。
+**関数**のうち、オブジェクトの一部であるものは**メソッド**と呼ばれます。オブジェクトについては、このモジュールの後半で学びます。 ここでは、メソッドと関数について可能な限り混乱を解消したいと思います。ウェブ上で利用できる関連のリソースを見ていくと、どちらの用語にも出会う可能性が高いでしょう。
 
 これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を[こちらで](/ja/docs/Web/JavaScript/Reference/Global_Objects)確認できます。
 
-このコースのここまででもたくさんのカスタム関数を見てきました。ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているということです。[ループの記事](/ja/docs/Learn/JavaScript/Building_blocks/Looping_code)で出てきた [random-canvas-circles.html](https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) の例（[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/random-canvas-circles.html)はこちら）には、独自に作った `draw()` 関数が含まれていました。次のようなものです。
+このコースのここまででもたくさんのカスタム関数を見てきました。ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているということです。[ループの記事](/ja/docs/Learn_web_development/Core/Scripting/Loops)で出てきた [random-canvas-circles.html](https://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) の例（[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/random-canvas-circles.html)はこちら）には、独自に作った `draw()` 関数が含まれていました。次のようなものです。
 
 ```js
 function draw() {
@@ -99,7 +105,7 @@ function draw() {
 }
 ```
 
-この関数は、{{htmlelement("canvas")}} 要素の内にランダムな円を 100 描きます。同じことをやりたい時には、いつでも次のように関数を起動するだけです。
+この関数は、{{htmlelement("canvas")}} 要素の中に 100 個のランダムな円を描きます。同じことをやりたい時には、いつでも次のように関数を起動するだけです。
 
 ```js
 draw();
@@ -113,7 +119,7 @@ function random(number) {
 }
 ```
 
-ブラウザー組み込みの [Math.random()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) は 0 から 1 までの間の 10 進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。
+ブラウザー組み込みの [`Math.random()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) は 0 から 1 までの間の 10 進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。
 
 ## 関数の呼び出し
 
@@ -138,13 +144,13 @@ myFunction();
 > [!NOTE]
 > 引数はパラメーター、プロパティ、属性などと呼ばれることもあります。
 
-例えば、ブラウザー内蔵の [Math.random()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 関数は引数を要求しません。呼び出されると、常に 0 から 1 の間の乱数を返します。
+例えば、ブラウザー内蔵の [`Math.random()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 関数は引数を要求しません。呼び出されると、常に 0 から 1 までの間の乱数を返します。
 
 ```js
 const myNumber = Math.random();
 ```
 
-しかし、ブラウザー内蔵の文字列の [replace()](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) 関数は、主たる文字列で探す部分文字列と、その文字列を置き換える部分文字列の 2 つの引数を必要とします。
+しかし、ブラウザー内蔵の文字列の [`replace()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) 関数は、主たる文字列で探す部分文字列と、その文字列を置き換える部分文字列の 2 つの引数を必要とします。
 
 ```js
 const myText = "I am a string";
@@ -156,7 +162,7 @@ const newString = myText.replace("string", "sausage");
 
 ### オプション引数
 
-引数によっては、省略可能で指定する必要がないこともあります。指定しない場合、関数は通常何らかの既定の動作をします。例えば、配列の [join()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 関数の引数はオプションです。
+引数によっては、省略可能で指定する必要がないこともあります。指定しない場合、関数は通常何らかの既定の動作をします。例えば、配列の [`join()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 関数の引数はオプションです。
 
 ```js
 const myArray = ["I", "love", "chocolate", "frogs"];
@@ -361,7 +367,7 @@ function greeting() {
 
 これは動物園に似ています。ライオン、シマウマ、トラ、ペンギンはそれぞれの檻の中にいて、それぞれの檻の中のものにしか触れられません。関数のスコープと同じことです。もし彼らが他の檻の中に侵入できたら問題が起きることでしょう。良くて、知らない住人に囲まれて気まずい思いをします。寒くて水だらけのペンギンの檻に入ったライオンやトラは酷い気分になるでしょう。最悪の場合、ライオンやトラはペンギンを食べてみようとするかもしれません。
 
-![動物園でそれぞれの生息地に囲まれた 4 匹の動物](MDN-mozilla-zoo.png)
+![動物園でそれぞれの生息地に囲まれた 4 匹の動物](mdn-mozilla-zoo.png)
 
 動物園の飼育係はグローバルスコープのようなものです。彼らはすべての檻にアクセスする鍵を持っており、餌を補充したり、病気の動物の世話をしたりします。
 
@@ -464,7 +470,7 @@ function greeting() {
 
 ## スキルテスト
 
-この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 関数](/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions)を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: 関数](/ja/docs/Learn_web_development/Core/Scripting/Test_your_skills:_Functions)を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。
 
 ## まとめ
 
@@ -474,6 +480,7 @@ function greeting() {
 
 - [関数の詳細ガイド](/ja/docs/Web/JavaScript/Guide/Functions) — ここに含まれていないいくつかの高度な機能について説明します。
 - [関数](/ja/docs/Web/JavaScript/Reference/Functions)
-- [デフォルト引数](/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters), [アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions) — 高度な概念リファレンス
+- [Using functions to write less code](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~04g?via=mdn), Scrimba _MDN カリキュラムパートナー_
+  - : An interactive lesson providing a useful functions introduction.
 
-{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Loops","Learn_web_development/Core/Scripting/Build_your_own_function", "Learn_web_development/Core/Scripting")}}
diff --git a/files/ja/learn_web_development/core/scripting/image_gallery/index.md b/files/ja/learn_web_development/core/scripting/image_gallery/index.md
index 1a23ae4dee5e0b..88c32ff74f566f 100644
--- a/files/ja/learn_web_development/core/scripting/image_gallery/index.md
+++ b/files/ja/learn_web_development/core/scripting/image_gallery/index.md
@@ -1,31 +1,15 @@
 ---
-title: イメージギャラリー
+title: "課題: イメージギャラリー"
 slug: Learn_web_development/Core/Scripting/Image_gallery
-original_slug: Learn/JavaScript/Building_blocks/Image_gallery
 l10n:
-  sourceCommit: 289d6314f3368aa3e28524e7d090f6e9c704e3b1
+  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
 ---
 
-{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+{{LearnSidebar}}
 
-JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Event_bubbling","Learn_web_development/Core/Scripting/Object_basics", "Learn_web_development/Core/Scripting")}}
 
-

   
     
前提条件:
-        基本的な HTML および CSS、および
-        JavaScript の第一歩について理解していること。
+      前提知識:HTMLおよびCSS の基礎を理解し、これまでのレッスンで説明した JavaScript を把握していること。
+      
       
     

     
目的:学習成果:
       
-        イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。
+        
    
+          
  • イベントとは、何か重要なことが起こった際にブラウザーから発行されるシグナルであり、開発者はレスポンスとしてコードを実行することができること。
    • 
+          
  • イベントハンドラーを設定するには、 addEventListener() （および removeEventListener() ）やイベントハンドラープロパティを使用すること。/li>
+          
  • インラインイベントハンドラー属性、およびそれらを使用すべきではない理由。
    • 
+          
  • イベントオブジェクト。
    • 
+        

       		
     

   
     

       前提知識:
-        HTML と CSS への基本的な理解、
-        JavaScript の第一歩
+      HTMLおよびCSS の基礎を理解し、これまでのレッスンで説明した JavaScript を把握していること。
       
     

     
目標:学習成果:
       
-        JavaScript の関数についての基礎を理解すること。
+        
    
+          
  • 関数の目的。再利用可能なコードブロックを作成し、必要に応じてどこからでも呼び出せるようにすることです。
    • 
+          
  • JavaScript で関数は至る所で使用されており、一部はブラウザーに組み込まれており、一部はユーザーが定義したものであること。
    • 
+          
  • 関数とメソッドの違い。
    • 
+          
  • 関数の呼び出し。
    • 
+          
  • 無名関数とアロー関数。
    • 
+          
  • 関数の引数を定義し、引数を渡して関数を呼び出すこと。
    • 
+          
  • グローバルスコープと関数/ブロックスコープ。
    • 
+          
  • コールバック関数とは何かを理解すること。
    • 
+        

       		
     

   

-  
-    
-      
-      
-    
-    
-      
-      
-    
-  
-
前提条件:
-        この評価に挑戦する前に、このモジュールの記事をすべて読み終えている必要があります。
-      
目的:
-        JavaScript のループ、関数、条件、イベントの理解度をテストします。
-      

+JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。
 
 ## 出発点
 
@@ -47,7 +31,7 @@ HTML、CSS と画像および数行の JavaScript のコードが提供されて
   Closeup of a blue human eye
+    alt="人間の青い目の拡大" />
   

   
 

@@ -117,4 +101,4 @@ overlay.style.backgroundColor = xxx;
 
 - HTML と CSS は全く編集する必要はありません。
 
-{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Event_bubbling","Learn_web_development/Core/Scripting/Object_basics", "Learn_web_development/Core/Scripting")}}
diff --git a/files/ja/learn_web_development/core/scripting/json/index.md b/files/ja/learn_web_development/core/scripting/json/index.md
index f82c889380177f..b0fe7b81acd1a9 100644
--- a/files/ja/learn_web_development/core/scripting/json/index.md
+++ b/files/ja/learn_web_development/core/scripting/json/index.md
@@ -1,12 +1,13 @@
 ---
 title: JSON の操作
 slug: Learn_web_development/Core/Scripting/JSON
-original_slug: Learn/JavaScript/Objects/JSON
 l10n:
-  sourceCommit: 4def230f85756724b59660e3cd9de363db724ef8
+  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Classes_in_JavaScript", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}}
 
 JavaScript Object Notation (JSON) は、構造化データを表現するための標準のテキストベースの形式で、 JavaScript のオブジェクト構文に基づいています。ウェブアプリケーションでデータを転送する場合によく使われます（例えば、複数のデータをサーバーからクライアントへ送信して、ウェブページ上に表示する場合などで、その逆もあります）。頻繁に見かけるデータ形式ですので、この記事では JavaScript を使用して JSON を扱うのに必要なすべてのこと、例えば JSON を解釈してその中のデータにアクセスしたり、 JSON を作成したりする方法を説明します。
 
@@ -14,13 +15,18 @@ JavaScript Object Notation (JSON) は、構造化データを表現するため
   
     
       前提知識:
-      
-        基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解（JavaScript の第一歩と JavaScript の構成要素を参照）とオブジェクト指向 JavaScript の基本（JavaScript オブジェクトの基本を参照）。
+      HTMLおよびCSS の基礎を理解し、これまでのレッスンで説明した JavaScript を把握していること。
     
     
-      目標:
+      学習成果:
       
-        JSON に格納されたデータを扱う方法、JSON 文字列の生成方法について理解すること。
+        
       
     
   
@@ -28,9 +34,12 @@ JavaScript Object Notation (JSON) は、構造化データを表現するため
 
 ## JSON とは何か
 
-{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのデータ形式で、[Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford) によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、 JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み取ったり（解釈したり）生成したりする機能があります。
+{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのデータ形式で、 [Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford) によって普及されました。
+JSON は JavaScript オブジェクトの構文に似ていますが、 JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み取ったり（解釈したり）生成したりする機能があります。
 
-JSON は文字列として存在します。ですので、ネットワークを通してデータを転送したい場合に便利です。 JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。 JavaScript にはこれらを相互に変換できるメソッドを持った [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) というグローバルなオブジェクトがあるので、変換は難しくありません。
+JSON は文字列として存在します。ですので、ネットワークを通してデータを転送したい場合に便利です。
+JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。
+これは大きな問題ではありません。 JavaScript にはこれらを相互に変換できるメソッドを持った [JSON](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) というグローバルなオブジェクトがあるので、変換は難しくありません。
 
 > [!NOTE]
 > 文字列をネイティブオブジェクトへ変換することは「デシリアライズ」 (_deserialization_) と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは「シリアライズ」 (_serialization_) と呼ばれています。
@@ -39,7 +48,9 @@ JSON 文字列はそれ自身をファイルとして格納することもでき
 
 ### JSON の構造
 
-上で説明したように、JSON は JavaScript オブジェクトにとても似ている形式の文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型（文字列、数値、配列、論理型やその他のリテラル型）を使うことができます。これにより、以下のように階層的にデータを構成することができます。
+上で説明したように、JSON は JavaScript オブジェクトにとても似ている形式の文字列です。
+JSON では通常の JavaScript オブジェクトと同様な基本データ型（文字列、数値、配列、論理型やその他のリテラル型）を使うことができます。
+これにより、以下のように階層的にデータを構成することができます。
 
 ```json
 {
@@ -81,7 +92,8 @@ JSON 文字列はそれ自身をファイルとして格納することもでき
 }
 ```
 
-この文字列を JavaScript プログラムへ読み込むと（例えば、変数 `superHeroes` へ代入すると）と、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事で見たのと同様に、ドットや角括弧を使ってデータへアクセスすることができます。例えば次のようになります。
+この文字列を JavaScript プログラムへ読み込むと（例えば、変数 `superHeroes` へ代入すると）と、 [JavaScript オブジェクトの基本](/ja/docs/Learn_web_development/Core/Scripting/Object_basics)の記事で見たのと同様に、ドットや角括弧を使ってデータへアクセスすることができます。
+例えば次のようになります。
 
 ```js
 superHeroes.homeTown;
@@ -101,11 +113,13 @@ superHeroes["members"][1]["powers"][2];
 5. `powers` プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3 番目が欲しいので、 `[2]` と記述します。
 
 > [!NOTE]
-> 上記の JSON は [JSONTest.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) で参照することができます（ページ内の[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/JSONTest.html)を参照してください）。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。
+> 上記の JSON は [JSONTest.html](https://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) で参照することができます（ページ内の[ソースコード](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/JSONTest.html)を参照してください）。
+> ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。
 
 ## JSON の配列
 
-上記で、 JSON テキストは基本的に文字列に入った JavaScript オブジェクトのように見えることを説明しました。配列を JSON との間で変換することもできます。例えば、次のものも有効な JSON です。
+上記で、 JSON テキストは基本的に文字列に入った JavaScript オブジェクトのように見えることを説明しました。
+配列を JSON との間で変換することもできます。例えば、次のものも有効な JSON です。
 
 ```json
 [
@@ -133,9 +147,13 @@ superHeroes["members"][1]["powers"][2];
 ### その他の注意点
 
 - JSON は指定されたデータ形式の純粋な文字列です。プロパティのみを含むことができ、メソッドを含むことはできません。
-- JSON では文字列とプロパティ名を二重引用符で括る必要があります。単一引用符は、JSON 文字列全体を囲む以外では無効です。
-- カンマやコロンが 1 つ抜けるだけでも JSON ファイルは無効になり、動作しません。利用しようとしているデータを注意して確認してください（プログラムに問題がない限り、コンピューターが生成した JSON の方が、エラーが含まれる可能性が低くなります）。 [JSONLint](http://jsonlint.com/) のようなアプリケーションを使って妥当性を検証をすることもできます。
-- JSONは、配列やオブジェクトだけでなく、 JSON 内部に入れることができるあらゆるデータ型のデータだけでも有効なものになります。つまり、例えば、単一の文字列や数値も有効な JSON となります。
+- JSON では文字列とプロパティ名を二重引用符で括る必要があります。
+  単一引用符は、JSON 文字列全体を囲む以外では無効です。
+- カンマやコロンが 1 つ抜けるだけでも JSON ファイルは無効になり、動作しません。
+  利用しようとしているデータを注意して確認してください（プログラムに問題がない限り、コンピューターが生成した JSON の方が、エラーが含まれる可能性が低くなります）。
+  [JSONLint](https://jsonlint.com/) のようなアプリケーションを使って妥当性を検証をすることもできます。
+- JSONは、配列やオブジェクトだけでなく、 JSON 内部に入れることができるあらゆるデータ型のデータだけでも有効なものになります。
+  つまり、例えば、単一の文字列や数値も有効な JSON となります。
 - JavaScript コードではプロパティを引用符で括らなくても構いませんが、 JSON では、引用符でくくった文字列だけがプロパティとして扱われます。
 
 ## アクティブラーニング: JSON の例を操作してみる
@@ -144,14 +162,21 @@ superHeroes["members"][1]["powers"][2];
 
 ### はじめに
 
-まず、 [heroes.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes.html) と [style.css](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/style.css) のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な HTML です。加えて、{{HTMLElement("script")}} 要素で、この演習で書くJavaScriptコードを格納します。
+まず、 [heroes.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes.html) と [style.css](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/style.css) のコピーをローカルに作成してください。
+後者は例題ページをスタイリングするための CSS であり、前者は簡単な HTML です。加えて、{{HTMLElement("script")}} 要素で、この演習で書く JavaScript コードを格納します。
 
-```html
-

+```html-nolint
+

+...
+

 
-

+

+...
+

 
-
+
 ```
 
 JSON データは GitHub の  で利用できます。
@@ -185,10 +210,10 @@ JSON を取得するには、[フェッチ](/ja/docs/Web/API/Fetch_API)という
 
 - GitHub の URL を格納するために、`requestURL` という変数を宣言します。
 - URL を使用して新しい {{domxref("Request")}} オブジェクトを初期化します。
-- {{domxref("fetch", "fetch()")}} 関数を使用してネットワーク要求を行い、{{domxref("Response")}} オブジェクトを返します。
+- {{domxref("Window/fetch", "fetch()")}} 関数を使用してネットワーク要求を行い、{{domxref("Response")}} オブジェクトを返します。
 - レスポンスオブジェクトの {{domxref("Response/json", "json()")}} 関数を使用して、レスポンスを JSON で取得します。
 
-> **メモ:** `fetch()` API は**非同期**です。非同期関数については[次のモジュール](/ja/docs/Learn/JavaScript/Asynchronous)でたくさん学びますが、今は、フェッチ API を使用する関数名の前にキーワード {{jsxref("Statements/async_function", "async")}}、あらゆる非同期関数への呼び出し前にキーワード {{jsxref("Operators/await", "await")}} が必要だということだけ言っておきます。
+> **メモ:** `fetch()` API は**非同期**です。非同期関数については[次のモジュール](/ja/docs/Learn_web_development/Extensions/Async_JS)でたくさん学びますが、今は、フェッチ API を使用する関数名の前にキーワード {{jsxref("Statements/async_function", "async")}}、あらゆる非同期関数への呼び出し前にキーワード {{jsxref("Operators/await", "await")}} が必要だということだけ言っておきます。
 
 すべて完了すると、`superHeroes` 変数に JSON を基にした JavaScript オブジェクトが格納されます。最初のオブジェクトは `
` を正しいデータで満たし、2 つ目はチームの各ヒーローの情報カードを作成し、それを `
` に挿入しています。
 
@@ -253,7 +278,7 @@ function populateHeroes(obj) {
 
 始めに、JavaScript オブジェクトの `members` プロパティを新しい変数に保存します。この配列には複数のオブジェクトがあり、それぞれにヒーローについての情報が入ります。
 
-次に、[for...of ループ](/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#for...of_ループ)を使って配列のそれぞれのオブジェクトを反復処理します。それぞれの次のようなことを行います。
+次に、[for...of ループ](/ja/docs/Learn_web_development/Core/Scripting/Loops#for...of_ループ)を使って配列のそれぞれのオブジェクトを反復処理します。それぞれの次のようなことを行います。
 
 1. 新しい要素をいくつか作成します。`
` 1 つ、 `
` 1 つ、 `
` 3 つ、`
    ` 1 つです。
 2. `
    ` の中身を現在のヒーローの名前 (`name`) にします。
@@ -266,7 +291,8 @@ function populateHeroes(obj) {
 > 試してみるための例が上手く取得できなかった場合は、 [heroes-finished.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes-finished.html) ソースコードを参照してみてください（こちらで[ライブ実行](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)もできます）。
 
 > [!NOTE]
-> もし、 JavaScript オブジェクトへのアクセスに使用しているドット/ブラケット記法がよく分からない場合は、 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) を別のタブやテキストエディターで開き、それを参照しながら JavaScript を読んでみるとよいでしょう。また、ドットやブラケット記法の詳細については、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事を見返してみてください。
+> もし、 JavaScript オブジェクトへのアクセスに使用しているドット/ブラケット記法がよく分からない場合は、 [superheroes.json](https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) を別のタブやテキストエディターで開き、それを参照しながら JavaScript を読んでみるとよいでしょう。
+> また、ドット記法やブラケット記法の詳細については、 [JavaScript オブジェクトの基本](/ja/docs/Learn_web_development/Core/Scripting/Object_basics)の記事を見返してみてください。
 
 ### 最上位の関数の呼び出し
 
@@ -318,13 +344,13 @@ myString;
 
 ここでは、 JavaScript オブジェクトを作成してその中身を確認しています。次に `stringify()` を使って JSON 文字列に変換し、返値を新しい変数に保存し、その値も確認しています。
 
-## スキルをテストしてみましょう
+## スキルテスト
 
-この記事はここまでですが、最重要事項を覚えていますか？先に進む前に、これが身に付いているかどうかを確認するためのテストがいくつかあります。[スキルテスト: JSON](/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON)を参照してください。
+この記事の最後に達しましたが、最も大切な情報を覚えていますか？次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: JSON](/ja/docs/Learn_web_development/Core/Scripting/Test_your_skills:_JSON)を参照してください。
 
 ## まとめ
 
-この記事では、プログラム内で、JSON を生成する、JSON を解釈する、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の記事では、オブジェクト指向 JavaScript について見ていくことにします。
+この記事では、プログラム内で、JSON を生成する、JSON を解釈する、JSON データを参照するなど、 JSON を扱う方法について簡単に説明しました。次の記事では、オブジェクト指向 JavaScript について見ていくことにします。
 
 ## 関連情報
 
@@ -332,6 +358,5 @@ myString;
 - [フェッチ API の概要](/ja/docs/Web/API/Fetch_API)
 - [フェッチの使用](/ja/docs/Web/API/Fetch_API/Using_Fetch)
 - [HTTP リクエストメソッド](/ja/docs/Web/HTTP/Methods)
-- [ECMA のオフィシャル JSON ウェブサイト](https://json.org)
 
-{{PreviousMenuNext("Learn/JavaScript/Objects/Classes_in_JavaScript", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Network_requests","Learn_web_development/Core/Scripting/Debugging_JavaScript", "Learn_web_development/Core/Scripting")}}
diff --git a/files/ja/learn_web_development/core/scripting/loops/index.md b/files/ja/learn_web_development/core/scripting/loops/index.md
index a4fe46a353c1cc..28df50730ec5be 100644
--- a/files/ja/learn_web_development/core/scripting/loops/index.md
+++ b/files/ja/learn_web_development/core/scripting/loops/index.md
@@ -1,29 +1,33 @@
 ---
 title: ループするコード
 slug: Learn_web_development/Core/Scripting/Loops
-original_slug: Learn/JavaScript/Building_blocks/Looping_code
 l10n:
-  sourceCommit: b072a7e62002e4765626c52dfdac5159071938e0
+  sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
 ---
 
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Scripting/Conditionals","Learn_web_development/Core/Scripting/Functions", "Learn_web_development/Core/Scripting")}}
 
 プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。
 
 
-      
-      
+      
-      
-      
+      
+      
    
   
     
    前提条件:
-        HTML と CSS への理解、
-        JavaScript の第一歩
+      前提知識:HTMLおよびCSS の基礎を理解し、これまでのレッスンで説明した JavaScript を把握していること。
       
     
    
     
    目標:JavaScript でのループの使い方を理解する。学習成果:
+        
      
+          
    • ループの目的を理解すること。反復処理するごとに同じコードを繰り返すことなく、よく似た処理を何度も実行できるコード構造です。
      • 
+          
    • for や while などの一般的なループ型。
      • 
+          
    • for...of や map() のような構文を使用して、集合をループ処理すること。
      • 
+          
    • ループを抜け出したり続けたりすること。
      • 
+        
    
+          		
     
    
       
 
    
@@ -36,7 +40,7 @@ l10n:
 
 例えば、{{htmlelement("canvas")}} 要素に 100 個のランダムな円を描画したいとします（\[更新] ボタンを押すと、例を何度も実行して異なるランダムコレクションを見ることができます）。
 
-```html hidden
+```html hidden live-sample___looping_code_example
  
 ```
 
@@ -62,11 +66,11 @@ button {
 }
 ```
 
-{{ EmbedLiveSample('ループするコードの例', '100%', 400) }}
+{{ EmbedLiveSample('Looping_code_example', '100%', 400) }}
 
 こちらはこの例を実装している JavaScript コードです。
 
-```js
+```js live-sample___looping_code_example
 const btn = document.querySelector("button");
 const canvas = document.querySelector("canvas");
 const ctx = canvas.getContext("2d");
@@ -118,10 +122,8 @@ for (let i = 0; i < 100; i++) {
 }
 ```
 
-- `random(x)` は、コードの手前で定義されており、 `0` と `x-1` の間の実数を返します。
-
-基本的なことが分かると思います。ループを使用してこのコードを 100 回反復処理し、それぞれがページ上のランダムな位置に円を描画します。
-必要なコードの量は、100 個の円を描画する場合でも、1000 個の円を描画する場合でも、1 万個の円を描画する場合でも同じです。
+基本的な考え方は理解できるでしょう。ループを使用してこのコードを 100 回反復処理し、それぞれがページ上のランダムな位置に円を描画します。コードの冒頭で定義した `random(x)` は、`0` から `x-1` の間の整数を返します。
+100 個、1000 個、10,000 個の円を描画する場合でも、必要となるコードの量は同じです。
 変更しなければならないのは、たった一つの数字だけです。
 
 もしここでループを使用していなければ、描画したい円ごとに以下のコードを繰り返して書く必要があります。
@@ -139,13 +141,13 @@ ctx.arc(
 ctx.fill();
 ```
 
-これはとても退屈で、メンテナンスも大変でしょう。
+これはとても退屈で、保守も大変でしょう。
 
 ## コレクション内のループ処理
 
 ループを使用する場合のほとんどは、アイテムのコレクションがあって、すべてのアイテムに対して何かを行いたいときです。
 
-{{jsxref("Array")}} は、コレクションの一種です。このコースの[配列](/ja/docs/Learn/JavaScript/First_steps/Arrays)の章で紹介しました。
+{{jsxref("Array")}} は、コレクションの一種です。このコースの[配列](/ja/docs/Learn_web_development/Core/Scripting/Arrays)の章で紹介しました。
 しかし、JavaScript には他にも {{jsxref("Set")}} や {{jsxref("Map")}} などのコレクションがあります。
 
 ### for...of ループ
@@ -185,7 +187,7 @@ console.log(upperCats);
 // [ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ]
 ```
 
-ここでは、{{jsxref("Array.prototype.map()","cats.map()")}} に関数を渡すと、`map()` は配列内のそれぞれのアイテムにその関数を 1 回ずつ、そのアイテムを渡して呼び出します。そして、それぞれの関数呼び出しの返値を新しい配列に追加し、最後に新しい配列を返します。この場合、提供した関数はアイテムを大文字に変換するので、結果として得られる配列には、すべてのネコ科動物がが大文字で格納されます。
+ここでは、 {{jsxref("Array.prototype.map()","cats.map()")}} に関数を渡すと、`map()` は配列内のそれぞれのアイテムにその関数を 1 回ずつ、そのアイテムを渡して呼び出します。そして、それぞれの関数呼び出しの返値を新しい配列に追加し、最後に新しい配列を返します。この場合、提供した関数はアイテムを大文字に変換するので、結果として得られる配列には、すべてのネコ科動物がが大文字で格納されます。
 
 ```js-nolint
 [ "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION" ]
@@ -206,14 +208,14 @@ console.log(filtered);
 // [ "Leopard", "Lion" ]
 ```
 
-これは `map()` とよく似ていますが、渡す関数が[論理値](/ja/docs/Learn/JavaScript/First_steps/Variables#論理型)を返す点が異なります。 もし `true` を返すなら、アイテムは新しい配列に含まれます。
-この関数では、アイテムが文字「L」で始まるかどうかをテストするので、結果は名前が「L」で始まる猫だけを含む配列になります。
+これは `map()` とよく似ていますが、渡す関数が[論理値](/ja/docs/Learn_web_development/Core/Scripting/Variables#論理型)を返す点が異なります。 もし `true` を返すなら、アイテムは新しい配列に含まれます。
+この関数では、アイテムが文字 "L" で始まるかどうかをテストするので、結果は名前が "L" で始まる猫だけを含む配列になります。
 
 ```js-nolint
 [ "Leopard", "Lion" ]
 ```
 
-なお、`map()` と `filter()` は、どちらもよく関数式と一緒に使われます。これは[関数](/ja/docs/Learn/JavaScript/Building_blocks/Functions)モジュールで学びます。
+なお、`map()` と `filter()` は、どちらもよく関数式と一緒に使われます。これは[関数](/ja/docs/Learn_web_development/Core/Scripting/Functions)モジュールで学びます。
 関数式を使用すると、上の例をもっとコンパクトに書き直すことができます。
 
 ```js
@@ -381,7 +383,7 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 ## break でループを終了
 
 すべての反復処理が終了する前にループを終了したいときは、[break](/ja/docs/Web/JavaScript/Reference/Statements/break) 文を使用して終了させることができます。
-前回の記事の [switch 文](/ja/docs/Learn/JavaScript/Building_blocks/conditionals#switch_文)で、入力した値が switch 文の case に一致したとき、switch 文を抜け、それ以降のコードを実行するために `break` 文を使用しました。
+前回の記事の [switch 文](/ja/docs/Learn_web_development/Core/Scripting/Conditionals#switch_文)で、入力した値が switch 文の case に一致したとき、switch 文を抜け、それ以降のコードを実行するために `break` 文を使用しました。
 
 これはループでも同様で、`break` 文を使用することで即時にループを抜けて、ブラウザーに続きのコードを実行させることができます。
 
@@ -418,7 +420,7 @@ btn.addEventListener("click", () => {
   for (const contact of contacts) {
     const splitContact = contact.split(":");
     if (splitContact[0].toLowerCase() === searchName) {
-      para.textContent = `${splitContact[0]}の電話番号は${splitContact[1]}です。`;
+      para.textContent = `${splitContact[0]}の電話番号は ${splitContact[1]} です。`;
       break;
     }
   }
@@ -495,7 +497,7 @@ btn.addEventListener("click", () => {
 
 `for` は JavaScript で利用可能な唯一のループの種類ではありません。実際には多くのものがありますが、これらのすべてを理解する必要はありませんが、仕事の同じ機能をわずかに異なる方法で認識できるように、他のものの構造を見ておく価値があります。
 
-まず、[while](/ja/docs/Web/JavaScript/Reference/Statements/while) ループを見てみましょう。このループの構文は次のようになります。
+まず、[`while`](/ja/docs/Web/JavaScript/Reference/Statements/while) ループを見てみましょう。このループの構文は次のようになります。
 
 ```js-nolint
 初期化処理
@@ -579,7 +581,7 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
 > こちらも、これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)を見ることもできます）。
 
 > [!WARNING]
-> while と do...while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。
+> どの種類のループでも、初期化子が増加するか、場合によっては減少するようにして、最終的に条件が偽になるようにしなければなりません。
 > そうしなければループは永遠に進み、ブラウザーはそれ強制的に停止させるか、クラッシュします。これは**無限ループ**と呼ばれます。
 
 ## アクティブラーニング: 発射のカウントダウン
@@ -618,8 +620,8 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
   はタブ文字を挿入します）。