initial commit

8 files changed, 3380 insertions, 0 deletions

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
new file mode 100644
index 0000000000..e12ce6f478
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html
@@ -0,0 +1,262 @@
+---
+title: 独自の関数を作る
+slug: Learn/JavaScript/Building_blocks/Build_your_own_function
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Functions
+  - Guide
+  - JavaScript
+  - Learn
+  - Tutorial
+  - build
+  - invoke
+  - 'l10n:priority'
+  - parameters
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩 </a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Active_learning_Lets_build_a_function" name="Active_learning_Lets_build_a_function">Active learning: 関数を作ってみよう</h2>
+
+<p>これから作ってみる独自の関数を <code>displayMessage()</code>。これは独自のメッセージボックスをウェブページ上に表示し、ブラウザー組込みの <a href="/ja/docs/Web/API/Window/alert">alert()</a> 関数の特製の代替品として動作します。既に見たものですが、忘れた事にしましょう。以下をブラウザーの JavaScript コンソールから打ち込みます、どのページでも構いません:</p>
+
+<pre class="brush: js notranslate">alert('This is a message');</pre>
+
+<p><code>alert</code> 関数は引数を一つ取ります — アラートボックスに表示される文字列です。文字列を色々変えてメッセージを変化させてみて下さい。</p>
+
+<p><code>alert</code> 関数には制限があります: メッセージを変更することはできますが、色やアイコンなど、それ以外の部分を簡単には変えられません。もっと楽しくできるやつを作りましょう。</p>
+
+<div class="note">
+<p><strong>注記</strong>: この例題は全てのモダンブラウザー上で問題なく動くはずですが、古いブラウザーではちょっとおかしな見た目になるかもしれません。この課題は Firefox、Opera、Chrome のようなモダンなブラウザー上で行なうのが推奨です。</p>
+</div>
+
+<h2 id="The_basic_function" name="The_basic_function">基本的な関数</h2>
+
+<p>最初に、基本的な関数を組み立てていきましょう。</p>
+
+<div class="note">
+<p><strong>注記</strong>: 関数に名前を付ける方針としては、<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">変数名に名前をつける方針</a>と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです — 関数ならすぐ後に括弧が付きますが、変数には付きません。</p>
+</div>
+
+<ol>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> ファイルにアクセスして、ローカルコピーを作成するところから初めます。HTML は単純です — body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。</li>
+ <li>次に、<code>&lt;script&gt;</code> 要素の中に以下を追加して下さい:
+  <pre class="brush: js notranslate">function displayMessage() {
+
+}</pre>
+  キーワード <code>function</code> から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッ括弧の組、中括弧の組と続きます。関数に渡したい引数は括弧の中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。</li>
+ <li>最後に、以下のコードを中括弧の中に追加します:
+  <pre class="brush: js notranslate">const html = document.querySelector('html');
+
+const panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+const msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+const closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>これは見ていくにはそこそこの量のコードですから、一つ一ついっしょに進んでいく事にしましょう。</p>
+
+<p>最初の行では {{domxref("document.querySelector()")}} と呼ばれる DOM API 関数を使って {{htmlelement("html")}} 要素を選択し、<code>html</code> という名前の定数に要素への参照を保存したので、これを使っていろいろやっていきます:</p>
+
+<pre class="brush: js notranslate">const html = document.querySelector('html');</pre>
+
+<p>次の部分では別の DOM API 関数 {{domxref("document.createElement()")}} を使い、{{htmlelement("div")}} 要素を作成、これへの参照を <code>panel</code> という定数に保存しています。この要素は我々のメッセージボックスの外枠となっていきます。</p>
+
+<p>次にまた別の DOM API 関数 {{domxref("Element.setAttribute()")}} を使って、我々のパネルの <code>class</code> 属性とその値 <code>msgBox</code> を設定します。これは要素のスタイルを指定しやすくするためです — ページの CSS を見ると、メッセージボックスとその中身に適用するスタイルとして <code>.msgBox</code> クラスセレクターがあるのがわかるでしょう。</p>
+
+<p>最後に、前に保存した html 変数の DOM 関数 {{domxref("Node.appendChild()")}} を呼んでいますが、この関数は一つの要素を別の要素の子として組み入れる働きをします。panel という<code>&lt;div&gt;</code> 要素を子として、<code>&lt;html&gt;</code> 要素の中に追加したいのです。作成した要素は作成したページにぽんと現われたりはしません — どこに置くのかも指定しなければなりません。なのでこのようにする必要があります。</p>
+
+<pre class="brush: js notranslate">const panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>次の 2 つのセクションでは既に見た同じ <code>createElement()</code> と <code>appendChild()</code> 関数を使用して、2 つの新しい要素、つまり {{htmlelement("p")}} と {{htmlelement("button")}} を作成し、<code>&lt;div&gt;</code> パネルの子要素としてページに挿入します。段落の中にメッセージを挿入する {{domxref("Node.textContent")}} プロパティ (要素のテキスト内容を表す) とボタンの中に 'x' を使います。このボタンは、ユーザーがメッセージボックスを閉じるときにクリック/アクティブ化する必要があります。</p>
+
+<pre class="brush: js notranslate">const msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+const closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>最後に、{{domxref("GlobalEventHandlers.onclick")}} イベントハンドラーを使用して、ボタンをクリックするとパネル全体をパネルから削除してメッセージボックスを閉じるようにします。<br>
+ <br>
+ 簡単に説明すると、<code>onclick</code> ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの記事</a>で、これらについてさらに詳しく学びます。<code>onclick</code> ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <code>&lt;div&gt;</code> パネル) を削除することを指定します。</p>
+
+<pre class="brush: js notranslate">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>基本的には、このコードブロック全体が HTML のブロックを生成してページに挿入しています。</p>
+
+<pre class="brush: html notranslate">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>作業するコードがたくさんありました。今のところどのように動作しているか正確に覚えていないことをあまり心配しないでください！ ここでは、関数の構造と使用法を中心に説明しますが、この例では何か面白いことを示したかったのです。</p>
+
+<h2 id="Calling_the_function" name="Calling_the_function">関数の呼び出し</h2>
+
+<p>これで、<code>&lt;script&gt;</code> 要素に書かれた関数定義がうまくいきましたが、それは何もしません。</p>
+
+<ol>
+ <li>関数の下に次の行を含めて呼び出してみてください:
+  <pre class="brush: js notranslate">displayMessage();</pre>
+  この行は関数を呼び出し、すぐに実行させます。コードを保存してブラウザーを再読み込みすると、小さなメッセージボックスがすぐに 1 回だけ表示されます。それを一度呼ぶだけです。</li>
+ <li>
+  <p>サンプルページでブラウザーの開発者ツールを開き、JavaScript コンソールに移動してもう一度その行を入力すると、もう一度表示されます。これは楽しいことです - 私たちは今好きな時に呼び出すことができる再利用可能な関数を持っています。</p>
+
+  <p>しかし、ユーザーとシステムのアクションに応じて表示されるようにすることをお勧めします。実際のアプリケーションでは、このようなメッセージボックスは、新しいデータが利用可能であること、エラーが発生したこと、ユーザーがプロファイルを削除しようとしている (「これは本当ですか？」)、またはユーザーが 新しい連絡先や操作が正常に終了しました...などが起こったときに呼び出されるでしょう。</p>
+
+  <p>このデモでは、ユーザーがボタンをクリックするとメッセージボックスが表示されます。</p>
+ </li>
+ <li>追加した前の行を削除します。</li>
+ <li>次に、ボタンを選択し、そのボタンへの参照を定数に格納します。関数定義の上のコードに次の行を追加します:
+  <pre class="brush: js notranslate">const btn = document.querySelector('button');</pre>
+ </li>
+ <li>最後に、前の行の下に次の行を追加します:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  関数内の <code>closeBtn.onclick...</code> 行と同様に、ここではボタンがクリックされたことに応答してコードを呼び出します。しかしこの場合、コードを含む無名関数を呼び出す代わりに、関数名を直接呼び出しています。</li>
+ <li>ページを保存して再表示してみてください。ボタンをクリックするとメッセージボックスが表示されるはずです。</li>
+</ol>
+
+<p>関数名の後ろに括弧が含まれていないのはなぜでしょうか。これは、ボタンがクリックされた後にのみ、関数をすぐに呼びたくないからです。行を次の行に変更しようとすると</p>
+
+<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre>
+
+<p>保存して再読み込みすると、ボタンをクリックせずにメッセージボックスが表示されます。このコンテキストの括弧は「関数呼び出し演算子」と呼ばれることがあります。現在のスコープですぐに関数を実行する場合にのみ使用します。同様の点で、匿名関数内のコードは関数スコープ内にあるため、すぐには実行されません。<br>
+ <br>
+ 最後の実験を試した場合は、最後の変更を取り消してから実行してください。</p>
+
+<h2 id="Improving_the_function_with_parameters" name="Improving_the_function_with_parameters">パラメーターを使用して関数を改善する</h2>
+
+<p>その機能はそれほど便利ではありません — 毎回同じ既定のメッセージを表示したくはないのです。いくつかのパラメーターを追加して機能を改善し、いくつかの異なるオプションで呼び出すことができるようにしましょう。</p>
+
+<ol>
+ <li>まず、関数の最初の行を更新します。
+  <pre class="brush: js notranslate">function displayMessage() {</pre>
+
+  <div>このようになります:</div>
+
+  <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre>
+  関数を呼び出すと、括弧内に 2 つの変数値を指定して、メッセージボックスに表示するメッセージとそのメッセージのタイプを指定できます。</li>
+ <li>最初のパラメーターを使用するには、関数内の次の行を更新します:
+  <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre>
+
+  <div>このようになります</div>
+
+  <pre class="brush: js notranslate">msg.textContent = msgText;</pre>
+ </li>
+ <li>最後に関数呼び出しを更新して、更新されたメッセージテキストを追加する必要があります。次の行を変更します。
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+
+  <div>このブロックのようになります:</div>
+
+  <pre class="brush: js notranslate">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  私たちが呼び出している関数の括弧内にパラメーターを指定したい場合、直接呼び出すことはできません - 直接のスコープにないため、すぐに呼び出されないように無名関数の中に入れる必要があります。ボタンがクリックされるまで呼び出されません。</li>
+ <li>再読み込みしてコードをもう一度試してみてください。それでもパラメーター内のメッセージを変えてボックスに表示されるメッセージを変えることができます。</li>
+</ol>
+
+<h3 id="A_more_complex_parameter" name="A_more_complex_parameter">より複雑なパラメーター</h3>
+
+<p>次のパラメーターに移りましょう。これにはもう少し作業が必要です。<code>msgType</code> パラメーターの設定によって、別のアイコンと異なる背景色が表示されるように設定していきます。</p>
+
+<ol>
+ <li>まず始めに、この演習に必要なアイコン (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/warning.png">warning</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) を GitHub からダウンロードしてください。HTML ファイルと同じ場所にある <code>icons</code> という新しいフォルダーに保存します
+
+  <div class="note"><strong>メモ</strong>: <a href="https://www.iconfinder.com/">iconfinder.com</a> にある warning と chat のアイコンは <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a> によってデザインされたものです。ありがとう！ (実際のアイコンのページは移動か削除されています。)</div>
+ </li>
+ <li>次に、HTML ファイル内の CSS を探します。私たちは、アイコンの道を作るためにいくつかの変更を行います。まず <code>.msgBox</code> の幅を次のように更新します
+  <pre class="brush: css notranslate">width: 200px;</pre>
+  <span>このようにします</span>
+
+  <pre class="brush: css notranslate">width: 242px;</pre>
+ </li>
+ <li>次に、<code>.msgBox p { ... }</code> ルール内に次の行を追加します
+  <pre class="brush: css notranslate">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>これでアイコンの表示を処理するために、<code>displayMessage()</code> 関数にコードを追加する必要があります。関数の終了中括弧 (<code>}</code>) のすぐ上に次のブロックを追加します。
+  <pre class="brush: js notranslate">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+  ここで、<code>msgType</code> パラメーターが <code>'warning'</code> に設定されている場合、警告アイコンが表示され、パネルの背景色は赤に設定されます。<code>'chat'</code>に設定されている場合、チャットアイコンが表示され、パネルの背景色が青色に設定されます。<code>msgType</code> パラメーターがまったく設定されていない (または別のものに変更されている) 場合、コードの <code>else { ... }</code> 部分が有効になり、段落には単にデフォルトのパディングが与えられ、背景パネルの色もしくはアイコンのどちらかが未設定の状態となります。これは <code>msgType</code> パラメーターが指定されていない場合、省略可能なパラメーターであることを意味するデフォルトの状態を提供します。</li>
+ <li>更新された関数をテストしましょう。この <code>displayMessage()</code> 呼び出しを更新して：
+  <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre>
+  <span>これらのうちの 1 つにしましょう。</span>
+
+  <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  私たちの (今はそうではない) 小さな機能がどのように役立つかがわかります。</li>
+</ol>
+
+<div class="note">
+<p><strong>メモ</strong>: サンプルをうまく動作させることができない場合は、コードを <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub の完成バージョン</a>と比較して (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">see it running live</a> もみて) チェックしてください。もしくは私たちにヘルプを依頼してください。</p>
+</div>
+
+<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
+
+<p>この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>最後までたどり着きました。おめでとうございます！この記事では、実用的なカスタム関数を構築するプロセス全体を紹介しました。もう少し動けば、実際のプロジェクトに移植することができます。次の記事では、別の重要な関連概念である戻り値を説明して関数をまとめます。</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>
diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.html b/files/ja/learn/javascript/building_blocks/conditionals/index.html
new file mode 100644
index 0000000000..70d662df26
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/conditionals/index.html
@@ -0,0 +1,782 @@
+---
+title: コードでの意思決定 — 条件文
+slug: Learn/JavaScript/Building_blocks/conditionals
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Conditionals
+  - JavaScript
+  - Learn
+  - Switch
+  - conditions
+  - else
+  - if
+  - 'l10n:priority'
+  - ternary
+translation_of: Learn/JavaScript/Building_blocks/conditionals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>JavaScript における条件分岐構造をどのように使用するかを理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="You_can_have_it_on_one_condition..!" name="You_can_have_it_on_one_condition..!">すべては条件次第..</h2>
+
+<p>人類 (と他の動物たち)は 小さいもの (「クッキーを 1 つ食べるべきか、2 つ食べるべきか...。」) から大きいもの (「故郷に残って親父の農場を継ぐべきか、アメリカで宇宙物理学を学ぶべきか...。」) まで、生活に関わるすべての決定を下します。</p>
+
+<p>JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢 (例えば「クッキーを 1 つまたは 2 つ食べる」) からそれを選んだ場合の結果を導き出します (おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が空いている」という結果となるでしょうし、「2 つクッキーを食べる」を選んだら「お腹いっぱい。だけどクッキーを全部食べてママに怒られる」という結果となってしまうでしょう。)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0px auto;"></p>
+
+<h2 id="if_..._else_statements" name="if_..._else_statements">if ... else ステートメント</h2>
+
+<p>それでは、JavaScript で最もよく使われる条件文から始めましょう。それは <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else"> ステートメント</a>です。</p>
+
+<h3 id="Basic_if_..._else_syntax" name="Basic_if_..._else_syntax">if ... else の基本的な構文</h3>
+
+<p><code>if...else</code> の基本的な構文は以下の{{glossary("pseudocode", "擬似コード")}}のようになっています。</p>
+
+<pre class="notranslate">if (条件式) {
+  条件式が true の場合に実行されるコード
+} else {
+  それ以外の場合に実行されるコード
+}</pre>
+
+<p>ここでは...</p>
+
+<ol>
+ <li><code>if</code> キーワードの後ろに括弧が並んでいます。</li>
+ <li>判断に用いる条件式はその括弧の中にあります (たいていの場合は「この値はもう一方より大きい」や、「この値は存在する」などです)。この条件には、前回のモジュールで習った<a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">比較演算子</a>を使用し、<code>true</code> または <code>false</code> を返します。</li>
+ <li>中にコードが書いてある (実際のコードはどんなものでも構いません) 中括弧のペアは、条件式が <code>true</code> の場合に実行されます。</li>
+ <li>続いて <code>else</code> キーワードがあります。</li>
+ <li>さらに他のコードが書いてある (こちらもどんなコードでも構いません) 中括弧のペアは条件式が <code>true</code> ではない場合に実行されます。</li>
+</ol>
+
+<p>このコードは (英語を使う人には) とても読みやすいものになっています。このコードは「もし ( <strong>if</strong> ) 条件式 ( <strong>condition</strong> ) が <code>true</code> を返したら A のコードを実行し、それ以外ならば ( <strong>else</strong> ) B のコードを実行する」と読めます。</p>
+
+<p><code>else</code> とそれに続く中括弧は必ずしも書く必要がないことを覚えておきましょう。次のコードも全く問題のないコードです。</p>
+
+<pre class="notranslate">if (条件式) {
+  条件式が true の場合に実行されるコード
+}
+
+普通に実行されるコード</pre>
+
+<p>ここで注意しておかなければならないことがあります。それは 2 つ目のコードブロックは、条件分岐の管理下になく、条件式が <code>true</code> か <code>false</code> かに関係なく、<strong>常に</strong>実行されることです。これはまったく悪いことではないのですが、条件に応じてどちらか一方のみ動かしたいと思っている場合には、気を付けておかないと思った通りの動作をしないでしょう。</p>
+
+<p>最後の確認点として、<code>if...else</code> ステートメントが中括弧なしで書かれているのを見ることがあります。以下のような省略した書き方です。</p>
+
+<pre class="notranslate">if (条件式) 条件式が true の場合に実行されるコード
+else それ以外の場合に実行されるコード</pre>
+
+<p>これは正常なコードですが、あまり推奨されません。中括弧でコードブロックを分割して、複数の行とインデントを使って書いたほうが読みやすく、コードがどうなっているかを把握しやすいためです。</p>
+
+<h3 id="A_real_example" name="A_real_example">実際の例</h3>
+
+<p>構文をもっとよく理解するため、実際の例を考えてみましょう。例えば両親にお使いを頼まれた子供を想像してください。「欲しがってたおもちゃがあるよね。お使いを頼まれてくれたら、お小遣いを追加であげるよ。」と親が頼みます。JavaScript では以下のようなコードで表現できます。</p>
+
+<pre class="brush: js notranslate">let shoppingDone = false;
+
+if (shoppingDone === true) {
+  let childsAllowance = 10;
+} else {
+  let childsAllowance = 5;
+}</pre>
+
+<p>このコードは常に <code>shoppingDone</code> 変数が <code>false</code> なので、かわいそうな子供は追加のお小遣いを受け取れません。両親が子供がお使いを完了した場合に <code>shoppingDone</code> 変数を <code>true</code> にセットしてあげるかどうかはプログラム次第です (つまり私たち次第です。)</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">GitHub で上記のコードの完全なバージョン</a>が公開されています (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">ライブ実行</a>でも確認できます。)</p>
+</div>
+
+<h3 id="else_if" name="else_if">else if</h3>
+
+<p>先ほどの例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？</p>
+
+<p><code>else if</code> を使って、追加の選択肢を <code>if...else</code> に繋ぐ方法があります。追加の選択肢は <code>if() { ... }</code> と <code>else { ... }</code> の間に、コードブロックを続けて追加する必要があります。具体的な例として、天気予報のアプリケーションの一部を見てみましょう。</p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;今日の天気を選択してください: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--選択してください--&lt;/option&gt;
+  &lt;option value="sunny"&gt;晴れ&lt;/option&gt;
+  &lt;option value="rainy"&gt;雨&lt;/option&gt;
+  &lt;option value="snowing"&gt;雪&lt;/option&gt;
+  &lt;option value="overcast"&gt;曇り&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
+  } else if (choice === 'rainy') {
+    para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。';
+  } else if (choice === 'snowing') {
+    para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
+  } else if (choice === 'overcast') {
+    para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
+  } else {
+    para.textContent = '';
+  }
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>HTML に、天気を選ぶことが可能な {{htmlelement("select")}} 要素があり、1 つの段落がありますね。</li>
+ <li>JavaScript では、{{htmlelement("select")}} と {{htmlelement("p")}} の各要素について、参照を取得して保持し、<code>&lt;select&gt;</code> 要素にはイベントリスナーを設定しています。もし、要素の値が変わったら <code>setWeather()</code> 関数が動きます。</li>
+ <li>この関数が実行されると、まずは <code>choice</code> という変数に、<code>&lt;select&gt;</code> 要素の現在選択されている値を入れます。そして、条件文を使い、<code>choice</code> の値に応じた文字列が段落に設定されます。最初の <code>if() {...}</code> のブロックを除いて、どのように <code>else if() {...}</code> のブロックで判定しているか注目してください。</li>
+ <li>一番下の <code>else {...}</code> 選択肢は、「最後の手段」となるオプションで、この中のコードは、どの条件にも一致しなかった場合 (<code>true</code> とならなかった場合) に実行されます。今回の場合選択されていない場合に、段落を空にしています。何も選択されていない場合というのは、ユーザーが再度最初に表示されていた「--選択してください--」というオプションを選んだ場合です。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">GitHub で上記のコードの完全なバージョン</a>が公開されています (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">ライブ実行</a>でも確認できます。)</p>
+</div>
+
+<h3 id="A_note_on_comparison_operators" name="A_note_on_comparison_operators">比較演算子に関するメモ</h3>
+
+<p>比較演算子は条件文の中で使われます。<a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript での数学入門 — 数値と演算子について</a>で初めて出てきましたね。演算子には以下のようなものがありました。</p>
+
+<ul>
+ <li><code>===</code> と <code>!==</code> は、ある値がもう一方の値と等しいか、もしくは等しくないかを判定します。</li>
+ <li><code>&lt;</code> と <code>&gt;</code> は、ある値がもう一方の値より大きいか、より小さいかを判定します。</li>
+ <li><code>&lt;=</code> と <code>&gt;=</code> は、ある値がもう一方の値以上か、以下かを判定します。</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: もし記憶があいまいならば、上記のリンク先を見て復習しましょう。</p>
+</div>
+
+<p>真偽 (<code>true</code>/<code>false</code>) の値を判定する場合には少しの配慮が必要であることを付け加えさせてください。おそらく何度か躓くであろう、よくあるパターンです。<code>false</code>、<code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空文字列 (<code>''</code>) 以外の値は条件文で使った場合に <code>true</code> となります。ですから、その値が <code>true</code> であるか判定したい場合や、その値が存在するか (例えば、<code>undefined</code> ではないこと) 判定したい場合は単に変数名を使用するだけです。</p>
+
+<pre class="brush: js notranslate">let cheese = 'チェダー';
+
+if (cheese) {
+  console.log('やった！チーズトーストを作るチーズがあるよ。');
+} else {
+  console.log('今日はチーズトーストのチーズがないよ。');
+}</pre>
+
+<p>先ほどの子供のお使いの例に戻ると、以下のようにも書くことができます。</p>
+
+<pre class="brush: js notranslate">let shoppingDone = false;
+
+if (shoppingDone) { // '=== true' を明示的に指定する必要はありません
+  let childsAllowance = 10;
+} else {
+  let childsAllowance = 5;
+}</pre>
+
+<h3 id="Nesting_if_..._else" name="Nesting_if_..._else">入れ子の if ... else</h3>
+
+<p><code>if...else</code> ステートメントを入れ子にして、他の <code>if...else</code> ステートメントの中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。</p>
+
+<pre class="brush: js notranslate">if (choice === 'sunny') {
+  if (temperature &lt; 86) {
+    para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう';
+  } else if (temperature &gt;= 86) {
+    para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。';
+  }
+}</pre>
+
+<p>内側の <code>if...else</code> ステートメントは、外側の <code>if</code> ステートメントとは完全に独立して作用します。</p>
+
+<h3 id="Logical_operators_AND_OR_and_NOT" name="Logical_operators_AND_OR_and_NOT">論理演算子: AND と OR と NOT</h3>
+
+<p>複数の条件を入れ子の <code>if...else</code> ステートメントを書かずに判定したいなら、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators">論理演算子</a>の出番です。条件文の中で使用する場合、AND と OR は以下の作用をもたらすでしょう。</p>
+
+<ul>
+ <li><code>&amp;&amp;</code> — AND は 2 つ以上の式を一つに繋げ、それぞれの式を個別に評価して、すべて <code>true</code> になった場合、その式全体が <code>true</code> として返します。</li>
+ <li><code>||</code> — OR は 2 つ以上の式を 1 つに繋げ、それぞれの式を個別に評価し、最初に <code>true</code> になったところで、その式全体を <code>true</code> として返します。</li>
+</ul>
+
+<p>AND の例を示すため、先ほどのコードを書き直すと以下のようになります。</p>
+
+<pre class="brush: js notranslate">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+  para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう';
+} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+  para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。';
+}</pre>
+
+<p>例では、最初のブロックは <code>choice === 'sunny'</code> <em>と</em> <code>temperature &lt; 86</code> のどちらも <code>true</code> となった場合にのみ実行されます。</p>
+
+<p>今度は OR の例を見てみましょう。</p>
+
+<pre class="brush: js notranslate">if (iceCreamCarOutside || houseStatus === '火事') {
+  console.log('すぐに家から出ましょう。');
+} else {
+  console.log('それでは家にいましょう。');
+}</pre>
+
+<p>論理演算子の最後は NOT です。<code>!</code> 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。</p>
+
+<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === '火事')) {
+  console.log('それでは家にいましょう。');
+} else {
+  console.log('すぐに家から出ましょう。');
+}</pre>
+
+<p>このコード例では、OR ステートメントが <code>true</code> となれば、NOT 演算子がそれを否定します。そのため、式全体は <code>false</code> となります。</p>
+
+<p>論理ステートメントは思うがままに、いくつでも繋げることが可能です。次の例では両方の OR ステートメントが真を返した場合に AND ステートメントが真となり、<code>if</code> の中のコードが実行されます。</p>
+
+<pre class="brush: js notranslate">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'スティーブ')) {
+  // コードを実行
+}</pre>
+
+<p>論理 OR 演算子を使用するうえでよくある間違いは、判定しようとしている変数を一度だけ書いて、その後に判定したい値を <code>||</code> (OR) 演算子で区切って指定する誤りです。次のような例です。</p>
+
+<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) {
+  // コードを実行する
+}</pre>
+
+<p>この場合、<code>if(...)</code>  の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に <code>true</code> と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。</p>
+
+<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // コードを実行する
+}</pre>
+
+<h2 id="switch_statements" name="switch_statements">switch ステートメント</h2>
+
+<p><code>if...else</code> ステートメントは条件の判定を上手くこなしていましたが、欠点がないわけではありません。いくつかの選択肢しかない場合には申し分ないのですが、AND / OR の条件が複雑になるにつれて (例えば、複数の論理演算子を使ったりする場合など)、相当量のコードを書かなければなりません。ある選択肢に応じて値を変数に設定したり、特定の条件に応じて何かを表示したりするとき、選択肢がたくさんあると、<code>if...else</code> ステートメントを書くのは面倒です。</p>
+
+<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code> ステートメント</a>はそんなときの味方です。<code>switch</code> ステートメントは一つの式または値を受け取り、それに合致する値が見つかるまで選択肢を探します。そして合致した選択肢に対応するコードを実行します。まずは擬似コードを見て、雰囲気をつかみましょう。</p>
+
+<pre class="notranslate">switch ( 式 ) {
+  case 選択肢1:
+    このコードを実行する
+    break;
+
+  case 選択肢2:
+    代わりにこのコードを実行する
+    break;
+
+  // 以下に選択肢を好きなだけ並べる
+
+  default:
+    既定でこのコードを実行する
+}</pre>
+
+<p>上記のコードには...</p>
+
+<ol>
+ <li><code>switch</code> キーワードに続き、一組の括弧があります。</li>
+ <li>括弧の中には、式または値があります。</li>
+ <li><code>case</code> キーワードに続き、選択肢となる式または値、それにコロン (<code>:</code>) が並んでいます。</li>
+ <li>もしその選択肢にマッチすれば、コードが実行されます。</li>
+ <li><code>break</code> ステートメントとセミコロン (<code>;</code>) があります。もし前の選択肢にマッチして入ればブラウザーはコードの実行をここでやめ、switch ステートメントの後ろにあるコードに移動します。</li>
+ <li><code>case</code> 節 (上記 3. から 5. ) は好きなだけ書くことができます。</li>
+ <li>上記 3. から 5.の <code>case</code> 節と全く同じコードパターンで書かれている <code>default</code> キーワードがあります。違いは <code>default</code> の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには <code>break</code> ステートメントが必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 評価する式の値が不明な値にならないのであれば、<code>default</code> 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、<code>default</code> 節を書くことで対応が可能です。</p>
+</div>
+
+<h3 id="A_switch_example" name="A_switch_example">switch を使用する例</h3>
+
+<p>それでは実際の例を見てみましょう。先ほどの天気予報アプリを switch ステートメントを使用して書き直してみました。</p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;今日の天気を選択してください: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--選択してください--&lt;/option&gt;
+  &lt;option value="sunny"&gt;晴れ&lt;/option&gt;
+  &lt;option value="rainy"&gt;雨&lt;/option&gt;
+  &lt;option value="snowing"&gt;雪&lt;/option&gt;
+  &lt;option value="overcast"&gt;曇り&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  const choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
+      break;
+    case 'rainy':
+      para.textContent = '雨が降っています。レインコートと傘を忘れないようにしましょう。';
+      break;
+    case 'snowing':
+      para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
+      break;
+    case 'overcast':
+      para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
+      break;
+    default:
+      para.textContent = '';
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">このサンプルを GitHub で見る</a>ことができます。(<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">実行可能なデモ</a>もあります。)</p>
+</div>
+
+<h2 id="Ternary_operator" name="Ternary_operator">三項演算子</h2>
+
+<p>例題に進む前に、ちょっとした構文をご紹介しましょう。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">三項演算子 (もしくは条件演算子)</a> は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に <code>true</code>/<code>false</code> で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、<code>if...else</code> ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。</p>
+
+<pre class="notranslate">( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する</pre>
+
+<p>それでは実際に例を見て見ましょう。</p>
+
+<pre class="brush: js notranslate">let greeting = ( isBirthday ) ? 'スミスさん、誕生日おめでとうございます！良い一日を。' : 'スミスさんおはようございます。';</pre>
+
+<p>この例では <code>isBirthday</code> という変数があり、この変数が <code>true</code> の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。</p>
+
+<h3 id="Ternary_operator_example" name="Ternary_operator_example">三項演算子を使用する例</h3>
+
+<p>三項演算子を変数の代入にのみ使用する必要はありません。関数や、複数行に渡るコードを実行する場合にも (それ以外にも好きなように) 使用できます。次の例は三項演算子を使用してサイトにテーマを適用しています。</p>
+
+<pre class="brush: html notranslate">&lt;label for="theme"&gt;テーマを選んでください: &lt;/label&gt;
+&lt;select id="theme"&gt;
+  &lt;option value="white"&gt;白&lt;/option&gt;
+  &lt;option value="black"&gt;黒&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;h1&gt;私のウェブサイト&lt;/h1&gt;</pre>
+
+<pre class="brush: js notranslate">const select = document.querySelector('select');
+const html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>上記の例では、テーマ (黒または白) を選択することができる {{htmlelement('select')}} 要素と、サイトのタイトルが書かれた単純な {{htmlelement('h1')}} 要素があります。さらに <code>update()</code> という関数があり、その関数は引数 (入力値) として 2 つの色を取ります。この関数が呼ばれると、ウェブサイトの背景色は 1 つ目の引数に、文字の色は 2 つの目の引数に設定されます。</p>
+
+<p>さらに、三項演算子を含む <a href="/ja/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> イベントリスナーがあります。<code>select.value === 'black'</code> という条件式で始まっています。この式が <code>true</code> であるならば、<code>update()</code> 関数を引数に <code>'black'</code>、<code>'white'</code> を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が <code>false</code> であるならば、<code>update()</code> 関数を引数に <code>'white'</code>、<code>'black'</code> を指定して実行します (つまり、背景色を逆にします)。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">GitHub でも公開しています</a> (または、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">動くデモ</a>もあります。)</p>
+</div>
+
+<h2 id="Active_learning_A_simple_calendar" name="Active_learning_A_simple_calendar">アクティブ学習: 単純なカレンダー</h2>
+
+<p>この例では、単純なカレンダーアプリケーションの作成を手伝ってもらいます。現在、以下の内容がコードに書かれています。</p>
+
+<ul>
+ <li>ユーザーが月を選択できるように {{htmlelement("select")}} 要素があります。</li>
+ <li><code>&lt;select&gt;</code> メニューの選択内容が変更された場合に、イベントを補足できるように <code>onchange</code> イベントハンドラーが設定されています。</li>
+ <li>カレンダーを描画し、{{htmlelement("h1")}} 要素に適切な月を設定する <code>createCalendar()</code> と呼ばれる関数があります。</li>
+</ul>
+
+<p>あなたには、<code>onchange</code> ハンドラーの内部に条件式を書いてもらいます。<code>// 条件式をここに書く</code> というコメントのすぐ下に...</p>
+
+<ol>
+ <li>選択されている月を取得します (これは <code>choice</code> 変数に格納されています。この値は <code>&lt;select&gt;</code> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。)</li>
+ <li><code>days</code> という変数に、選択された月の日数を設定します。そのためには、1年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。</li>
+</ol>
+
+<p>ヒント:</p>
+
+<ul>
+ <li>ほとんどの月は日数が同じなので、複数の月を OR 演算子を用いて一つの条件式にまとめるのが良いでしょう。</li>
+ <li>どの月が最も多い日数なのか考えてください。そして、その日数をデフォルト値として使用しましょう。</li>
+</ul>
+
+<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;出力結果&lt;/h2&gt;
+&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
+  &lt;label for="month"&gt;月を選択してください: &lt;/label&gt;
+  &lt;select id="month"&gt;
+    &lt;option value="1"&gt;1 月&lt;/option&gt;
+    &lt;option value="2"&gt;2 月&lt;/option&gt;
+    &lt;option value="3"&gt;3 月&lt;/option&gt;
+    &lt;option value="4"&gt;4 月&lt;/option&gt;
+    &lt;option value="5"&gt;5 月&lt;/option&gt;
+    &lt;option value="6"&gt;6 月&lt;/option&gt;
+    &lt;option value="7"&gt;7 月&lt;/option&gt;
+    &lt;option value="8"&gt;8 月&lt;/option&gt;
+    &lt;option value="9"&gt;9 月&lt;/option&gt;
+    &lt;option value="10"&gt;10 月&lt;/option&gt;
+    &lt;option value="11"&gt;11 月&lt;/option&gt;
+    &lt;option value="12"&gt;12 月&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;&lt;/h1&gt;
+
+  &lt;ul&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;コードエディタ&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+const select = document.querySelector('select');
+const list = document.querySelector('ul');
+const h1 = document.querySelector('h1');
+
+select.onchange = function() {
+  const choice = select.value;
+
+  // 条件式をここに書く
+
+  createCalendar(days, choice + ' 月');
+}
+
+function createCalendar(days, choice) {
+  list.innerHTML = '';
+  h1.textContent = choice;
+  for (let i = 1; i &lt;= days; i++) {
+    const listItem = document.createElement('li');
+    listItem.textContent = i;
+    list.appendChild(listItem);
+  }
+}
+
+createCalendar(31,'1 月');
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="リセット"&gt;
+  &lt;input id="solution" type="button" value="答えを見る"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4A2DB6;
+  color: white;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = '答えを見る';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === '答えを見る') {
+    textarea.value = solutionEntry;
+    solution.value = '答えを隠す';
+  } else {
+    textarea.value = userEntry;
+    solution.value = '答えを見る';
+  }
+  updateCode();
+});
+
+const jsSolution = 'const select = document.querySelector(\'select\');\nconst list = document.querySelector(\'ul\');\nlet h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n let choice = select.value;\n let days = 31;\n if(choice === \'2\') {\n days = 28;\n } else if(choice === \'4\' || choice === \'6\' || choice === \'9\'|| choice === \'11\') {\n days = 30;\n }\n\n createCalendar(days, choice + \' 月\');\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(let i = 1; i &lt;= days; i++) {\n let listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'1 月\');';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// タブキーでテキストエリアから抜けてしまうのを防ぎ、
+// 代わりにカーソル位置にタブ文字を挿入する
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
+
+textarea.onkeyup = function(){
+  // ユーザーのコードが表示されているときのみ状態を保存し、
+  // 答えのコードでユーザーコードが上書きされないようにする
+  if(solution.value === '答えを見る') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Active_learning_More_color_choices!" name="Active_learning_More_color_choices!">アクティブ学習: もっとたくさんの色から選ぶ！</h2>
+
+<p>この例では、先ほどの三項演算子の例を switch ステートメントに変換し、単純なウェブサイトに、より多くの選択肢を与えます。{{htmlelement("select")}} 要素を見てください。今回は先ほどの 2 つではなく、5 つの選択肢があります。<code>// ここに SWITCH ステートメントを書く</code> というコメントの真下に switch ステートメントを追加してください。</p>
+
+<ul>
+ <li><code>choice</code> 変数を判定する式として使用します。</li>
+ <li>各ケース (case) で、<code>choice</code> 変数は選択可能な値 ('white'、'black'、'purple'、'yellow'、'psychedelic') のうちのどれかです。</li>
+ <li>各ケース (case) で、<code>update()</code> 関数が実行されるようにしてください。関数には 2 つの引数を指定します。1 つ目の引数は背景色、2 つ目の色は前景色です。色は文字列なので、忘れずに引用符で囲みましょう。</li>
+</ul>
+
+<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;出力結果&lt;/h2&gt;
+&lt;div class="output" style="height: 300px;"&gt;
+  &lt;label for="theme"&gt;テーマを選んでください: &lt;/label&gt;
+  &lt;select id="theme"&gt;
+    &lt;option value="white"&gt;白&lt;/option&gt;
+    &lt;option value="black"&gt;黒&lt;/option&gt;
+    &lt;option value="purple"&gt;紫&lt;/option&gt;
+    &lt;option value="yellow"&gt;黄&lt;/option&gt;
+    &lt;option value="psychedelic"&gt;サイケ&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;私のウェブサイト&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;コードエディタ&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 450px;width: 95%"&gt;
+const select = document.querySelector('select');
+const html = document.querySelector('.output');
+
+select.onchange = function() {
+  const choice = select.value;
+
+  // ここに SWITCH ステートメントを書く
+}
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="リセット"&gt;
+  &lt;input id="solution" type="button" value="答えを見る"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = '答えを見る';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === '答えを見る') {
+    textarea.value = solutionEntry;
+    solution.value = '答えを隠す';
+  } else {
+    textarea.value = userEntry;
+    solution.value = '答えを見る';
+  }
+  updateCode();
+});
+
+const jsSolution = 'const select = document.querySelector(\'select\');\nconst html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// タブキーでテキストエリアから抜けてしまうのを防ぎ、
+// 代わりにカーソル位置にタブ文字を挿入する
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
+
+textarea.onkeyup = function(){
+  // ユーザーのコードが表示されているときのみ状態を保存し、
+  // 答えのコードでユーザーコードが上書きされないようにする
+  if(solution.value === '答えを見る') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2>
+
+<p>この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Test your skills: Conditionals</a> を見てください。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>これで JavaScript での条件構造について今知っておくべきことはすべてです！簡単な例を通してそのコンセプトが理解できたと思います。もし理解できないことがあれば、何度も記事を読み返しましょう。<a href="/ja/Learn#Contact_us">私たちに連絡を</a>しても構いません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">比較演算子</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">条件式についての詳細</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if...else リファレンス</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">条件 (三項) 演算子リファレンス</a></li>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>
diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html
new file mode 100644
index 0000000000..7c40419c10
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/events/index.html
@@ -0,0 +1,597 @@
+---
+title: イベントへの入門
+slug: Learn/JavaScript/Building_blocks/Events
+tags:
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - イベント
+  - イベントハンドラー
+  - ガイド
+  - 学習
+  - 記事
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>コンピューターに関する基本的な知識があること。HTML と CSS について理解していて、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>の記事を理解していること。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A_series_of_fortunate_events" name="A_series_of_fortunate_events">運命的なイベントの連続</h2>
+
+<p>先ほど説明しましたが、<strong>イベント</strong>はあなたがプログラムしているシステムの中で生じた動作や出来事です。つまり、あるイベントが起きたときに、システムはある種の信号を発します。さらに、ある種のアクションが自動的に実行されるためのメカニズムも提供します。例えば、空港では、飛行機が離陸するために滑走路がクリアになった時に、信号がパイロットに送られます。その結果、パイロットは飛行機の操縦を開始します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p>ウェブの場合は、イベントは、ブラウザーのウィンドウの中で発火されます、そしてその中に属する特定の項目に紐付く傾向にあります — これは単一の要素、要素の集合、現在のタブでロードされた HTML 文書、ブラウザー画面全体といったものです。発生するイベントはたくさんの異なる種類があります。例をあげると。</p>
+
+<ul>
+ <li>ユーザーがある要素の上をマウスでクリックしたり、ある要素の上にカーソルを持ってくる</li>
+ <li>ユーザーがキーボードのキーを押す</li>
+ <li>ユーザーがブラウザー画面をリサイズしたり閉じたりする</li>
+ <li>ウェブページのロードの完了</li>
+ <li>フォームの送信</li>
+ <li>ビデオが再生中、停止中、再生が終わった</li>
+ <li>エラーの発生</li>
+</ul>
+
+<p>ここや MDN <a href="/ja/docs/Web/Events">Event リファレンス</a>を覗いてみれば、<strong>とてもたくさん</strong>の応答可能なイベントがあるのが判るでしょう。</p>
+
+<p>それぞれの利用可能なイベントには<strong>イベントハンドラー</strong>があり、これはイベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、<strong>イベントハンドラーを登録する</strong>と言います。イベントハンドラーは時に<strong>イベントリスナー</strong> と呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 大事な事ですがウェブのイベントは JavaScript 言語の主要部分の一部ではありません — ブラウザーに組み込まれた JavaScript API の一部として定義されたものです。</p>
+</div>
+
+<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3>
+
+<p>ここで何を言ってるのか説明するため、簡単な例を見てみましょう。このコースでこれまでに例の多くに使われているイベントやイベントハンドラーを見てきました、しかし、知識を固めるために整理をしましょう。続く例では、押すと背景色がランダムに変化する {{htmlelement("button")}} が一つあります:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">button { margin: 10px };</pre>
+</div>
+
+<p>JavaScript はこのようになります:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>このコードでは、<code>btn</code> という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。<code>btn</code> 変数は<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button">&lt;button&gt;</a></code>要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> イベントハンドラプロパティに、ランダムな RGB色を生成し <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/body">&lt;body&gt;</a></code> の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a></code> を設定するコードを抱えた匿名関数を代入する事で、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Element/click_event">click</a></code> イベントが発火されるのを待ちかまえます。</p>
+
+<p>このコードは <code>&lt;button&gt;</code> 要素でクリックイベントが発火すれば常に実行されます、要はユーザーがクリックしたらいつでも。</p>
+
+<p>この例の出力は以下のようになります:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Its_not_just_web_pages" name="It's_not_just_web_pages">ただのウェブページではありません</h3>
+
+<p>ここで言及しておくべき事は、イベントは JavaScript 固有のものではないという事です — ほとんどのプログラミング言語はいくつかのイベントモデルを持ち、その動作する方法はしばしは JavaScript の方式とは異なっています。実際、ウェブページの JavaScript のイベントモデルは他の環境で用いられている JavaScript のイベントモデルと異なっています。</p>
+
+<p>例えば、<a href="/ja/docs/Learn/Server-side/Express_Nodejs">Node.js</a> は開発者に JavaScript でネットワークとサーバーサイドのアプリケーションを構築することを可能にするとても有名な JavaScript ランタイムです。<a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> はイベントを待ち受けるリスナー、イベントを定期的に発生させるエミッターに依拠しています —たいして違ってないように聞こえますが、コードは極めて異なっていて、イベントリスナーを登録する <code>on()</code> や、一度実行したら登録を解除するイベントリスナーを登録するための <code>once() </code> のような関数を使っていきます。<a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> が使い方の良い例を教えてくれます。</p>
+
+<p>その他の例として、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> と呼ばれる技術を使って、クロスブラウザーアドオン (ブラウザーの機能拡張) を JavaScript で作成できます。イベントモデルは Web イベントモデルと似ていますが、ほんの少し違いがあります (イベントリスナーのプロパティはキャメルケース (例 <code>onmessage</code> でなく <code>onMessage</code>) で命名されていて、<code>addListener</code> 関数で結び付ける必要があります。例として <a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage#Examples"><code>runtime.onMessage</code> page</a> を確認してください。</p>
+
+<p>学習の今の段階で、そのような他の環境について何か理解する必要はありません。イベントは異なるプログラミング環境では異なることがあるとだけ認識してください。</p>
+
+<h2 id="Ways_of_using_web_events" name="Ways_of_using_web_events">ウェブイベントの使用方法</h2>
+
+<p>関連づけたいイベントが発火した時に走らせたいイベントリスナーコードを ウェブページに追加する方法はいろいろあります。このセクションでは様々なメカニズムを見ていき、どれを使うべきなのか議論していきます。</p>
+
+<h3 id="Event_handler_properties" name="Event_handler_properties">イベントハンドラープロパティ</h3>
+
+<p>イベントハンドラーコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば <code><a href="/ja/docs/Web/API/Node/textContent">btn.textContent</a></code> や <code><a href="/ja/docs/Web/API/HTMLElement/style">btn.style</a></code>)のうちの 1 プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。</p>
+
+<p>ハンドラープロパティには、名前付き関数の関数名 (<a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a> でみられるような) を設定することもできます。こう書いても動作は同じです:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>利用できるイベントハンドラープロパティにはとてもたくさんの種類があります。実験してみましょう。</p>
+
+<p>まずは、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a> のローカルコピーを作成し、ブラウザーで開いてくださいこれはこの記事ですでに遊んだ簡単なランダム色のサンプルです。さて、<code>btn.onclick</code> のところを以下の異なる値に変えてみて、結果を順に見てみてください:</p>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — ボタンがフォーカスされフォーカスが外れる(Tab キーをパチパチして、ボタンをフォーカスしたり外したりしてみて)と色が変わります。これらはフォームのフィールドがフォーカスされている時にフィールドに何を入れたらいいのか示したり、フィールドの入力が終った直後に入力として正しくない値が入っている際のエラーメッセージを表示するような場合によく使われます。</li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — ダブルクリックされた場合だけ色が変わります。</li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — キーボードのキーが押された時に色が変わります。<code>keypress</code> は普通のキー入力(ボタンを押して離して)を示しますが、<code>keydown</code> と <code>keyup</code> はキーストロークのうち押すだけ、離すだけの部分それぞれを指します。ボタンそのもののイベントハンドラーに登録しても上手く動かないことに注意してください — <a href="/ja/docs/Web/API/Window">window</a> オブジェクトに登録しなければならず、これはブラウザーのウィンドウ全体を表わしています。</li>
+ <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — マウスポインタがボタンの上に来たときとボタンの上から外れた時に色が変わります。</li>
+</ul>
+
+<p>いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay </a> は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。</p>
+
+<h3 id="インラインイベントハンドラー_—_使っちゃだめ">インラインイベントハンドラー — 使っちゃだめ</h3>
+
+<p>あなたのコードでこんな形を見た事があるかもしれません:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js notranslate">function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p>メモ: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">こちら</a>に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">こちら</a>で実際に動くところを見られます)。</p>
+</div>
+
+<p>Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のような<strong>イベントハンドラーHTML属性</strong>(<strong>インラインイベントハンドラー</strong>とも言う)があります — 属性値がイベント発生時に実行したい JavaScript コードそのものです。上の例では{{htmlelement("script")}}要素の中で定義された関数を起動していますが、直接JavsScript そのものを属性の中に入れる事もできます。例えば:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>多くのイベントハンドラープロパティと等価な HTML属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。</p>
+
+<p>そもそも、あなたの HTML と JavaScript を混在させると、読みにくくなってしまうため、良いアイデアではありません — あなたの JavaScript は一ヶ所にまとめる方が良いです。別の一つのファイルになっていれば、それを複数の HTML ドキュメントに適用できますから。</p>
+
+<p>(HTML と JavaScript が)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ボタン一つならいいですが、ボタンが 100 あったら? ファイルに 100 の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。JavaScript を使えば、ページにボタンがいくつあろうが、全部のボタンにイベントハンドラーを追加するのは簡単です、こんな具合です:</p>
+
+<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<p class="brush: js">ここにある他のオプションは <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/NodeList">NodeList</a></code> オブジェクトの組み込みメソッドの <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/NodeList/forEach">forEach()</a></code> で使えることに注意してください:</p>
+
+<pre class="brush: js notranslate">buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});</pre>
+
+<div class="note">
+<p><strong>注</strong>: プログラムロジックをコンテンツから分離しておくと、あなたのサイトはサーチエンジンにとってより好ましいものになります。</p>
+</div>
+
+<h3 id="addEventListener_と_removeEventListener">addEventListener() と removeEventListener()</h3>
+
+<p>最新のイベント機構は <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> 仕様で規定されていて、ブラウザーに新しい関数が追加されました — <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>です。この関数はイベントハンドラープロパティと同じ方向性ですが、文法は明確に異なります。ランダム色の例をこんな風に書き換える事ができます:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p>メモ: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">こちら</a>に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">こちら</a>で実際に動くところが見られます)。</p>
+</div>
+
+<p><code>addEventListener()</code> 関数のカッコの中で、二つの引数を指定しています — ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。匿名関数を使って、実行したいコードを全部 addEventListener() 関数の引数に書いてしまっても全く問題ありません。こんな具合です:</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。まず第一に、逆を行なう関数 <code><a href="/ja/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>があり、以前に追加したリスナーを削除できます。例えばこうすると、このセクションの最初のコード部で追加したリスナーを削除します:</p>
+
+<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre>
+
+<p>単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラーを除去しておくと効率が良くなります。さらに、これは例えば同じボタンに状況の違いによって異なる動作をさせる事ができるようになります — ただ適切なイベントハンドラーを追加したり削除するだけで良いのです。</p>
+
+<p>第二に、同じリスナーに複数のハンドラーを登録できます。<br>
+ 次では二つのハンドラの両方は適用されません:</p>
+
+<pre class="brush: js notranslate">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>二行目で最初に設定した <code>onclick</code> の値が上書きされるからです。<br>
+ ですがこれなら動きます:</p>
+
+<pre class="brush: js notranslate">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>要素がクリックされると、どちらの関数も走ります。</p>
+
+<p>さらには、この方式ではもっとたくさんのパワフルな機能やオプションが使えます。それらはこの記事の範疇を少しばかり超えているので、知りたければ <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> と <code><a href="/ja/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> のリファレンスページを見てください</p>
+
+<h3 id="What_mechanism_should_I_use" name="What_mechanism_should_I_use">どの方式を使えば良い?</h3>
+
+<p>三つの方式のうち、イベントハンドラーHTML属性は絶対使うべきではありません — 前に書いたように、時代遅れで悪いやり方です。</p>
+
+<p>他の二つはまあまあどっちでも良いです、少なくとも単純な用途では:</p>
+
+<ul>
+ <li>イベントハンドラープロパティは力とオプションに欠けますが、ブラウザー間での互換性が高いです(IE8 ですら動きます)。学習を始めるならここから始めるのが良いかもしれません。</li>
+ <li>DOM レベル 2 イベント(<code>addEventListener()</code>他)はもっとパワフルですが、もっと複雑でちょっと互換性に欠けます(IE9以降でサポート)。こちらも試していき、可能なところではこちらを使えるようになりましょう。</li>
+</ul>
+
+<p>三番目の方式の最大の利点は、必要なときに removeEventListener() 関数でイベントハンドラーコードを削除できる事、必要なときは要素に同種のリスナーを複数追加できる事です。例えば、ある要素に対して <code>addEventListener('click', function() { ... })</code> を別の関数を第二引数に指定して何回か呼ぶ事ができます。これはイベントハンドラープロパティでは、プロパティは後からセットした値で上書きされてしまうので、できません。e.g.:</p>
+
+<pre class="brush: js notranslate">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>注</strong>: もし仕事で IE8 より古いブラウザーをサポートするよう言われているなら、そのような古代のブラウザーは新しいものとは違ったイベントモデルを使っているため、困難にぶつかるかもしれません。でも怖がらないで。大半の JavaScript ライブラリ(例えば <code>jQuery</code>)には、ブラウザー間の差異をとっぱらえる関数が備わっています。勉強中のあなたがこの点について心配しすぎる必要はありません。</p>
+</div>
+
+<h2 id="Other_event_concepts" name="Other_event_concepts">その他、イベントに関する概念</h2>
+
+<p>このセクションでは、イベントに関連するより進んだ概念について軽くさらっていきます。今の時点で完全に理解する必要があるほど重要ではありませんが、ときどき見かけることになるであろうコードのパターンがなぜそうなっているのか、理解する助けになるかもしれません。</p>
+
+<h3 id="Event_objects" name="Event_objects">Event objects</h3>
+
+<p>ときどきイベントハンドラー関数内で <code>event</code>、evt、単に <code>e</code> などと名付けられた引数を見かけるかもしれません。<br>
+ これらは<strong>イベントオブジェクト</strong>と呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラーに自動的に渡されます。例えば、またランダム色の例をちょっと書き換えてみましょう:</p>
+
+<pre class="brush: js notranslate">function bgChange(e) {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">こちら</a> に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">こちら</a>で実際に動くところが見れらます)。</p>
+</div>
+
+<p>イベントオブジェクト <strong>e</strong> が関数に含まれていて、関数内で <code>e.target</code> — これはボタンそのもの — の背景色スタイルを設定しているのがわかるでしょう。イベントオブジェクトの <code>target</code> プロパティは、常にイベントが生じた要素への参照となっています。ですからこの例ではページではなくボタンの背景色がランダムに変わります。</p>
+
+<div class="note">
+<p><strong>注</strong>: イベントオブジェクトには好きな名前を使えます — イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。<code>e</code>/<code>evt</code>/<code>event</code> が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。標準に従うのはいつだって良いやり方です。</p>
+</div>
+
+<p>複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、<code>e.target</code> はとてつもなく有用なものです。複数の要素に同じイベントハンドラーを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。例えばクリックすると見えなくなるタイルが 16 個あるとします。<code>e.target</code> を使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。続く例では (完全なソースコードは <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> を見てください; ここで <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">ライブ実行</a> も見られます)、16 個の {{htmlelement("div")}} 要素を JavaScript で生成します。そしてこれらを全部 {{domxref("document.querySelectorAll()")}}を使って選択し、ループで一つ一つに <code>onclick</code> ハンドラを追加して、それぞれがクリックされた時にランダムな色が表われるようにしています:</p>
+
+<pre class="brush: js notranslate">const divs = document.querySelectorAll('div');
+
+for (let i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>結果はこうです(クリックして遊んでみてください):</p>
+
+<div class="hidden">
+<h6 id="Hidden_example" name="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        background-color: red;
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (let i = 1; i &lt;= 16; i++) {
+        const myDiv = document.createElement('div');
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      const divs = document.querySelectorAll('div');
+
+      for (let i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400) }}</p>
+
+<p>あなたが使うであろうイベントハンドラーのほとんどでは、イベントオブジェクトには標準的なプロパティと関数(メソッド)({{domxref("Event")}}を参照してください)だけがあります。もっと上級者向けハンドラーでは、動作に必要な追加データを保持するために特殊なプロパティを付与するものもあります。例えば <a href="/ja/docs/Web/API/MediaRecorder_API">Media Recorder API</a> には <code>dataavailable</code> イベントがあり、オーディオやビデオの録音や再生が終わって何か(保存したり再生したり)する準備ができたところで発火します。これに紐付く <a href="/ja/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> ハンドラーのイベントオブジェクトには録音・録画データを保持する data プロパティがあり、これを使って何かしらを行なえます。</p>
+
+<h3 id="Preventing_default_behavior" name="Preventing_default_behavior">標準の動作を抑制する</h3>
+
+<p>ときにはイベントに付随する標準動作を止めたい場合があるでしょう。一番よくあるのは、ウェブのフォーム、例えばカスタマイズした登録フォームです。詳細を入力し終えてサブミットボタンを押した時、普通の動作ではデータがサーバーの指定のページに送られて処理され、ブラウザーは"成功しました"ページ(や他に指定されていない場合、同様なページ)にリダイレクトされたりなんやらします。</p>
+
+<p>ユーザーが適切なデータを送信しなかった場合に問題が発生します — 開発者としてあなたはサーバーへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。</p>
+
+<p>まず、あなたにあなたの姓と名を入力させる単純な HTML フォームです。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p> さあちょっとした JavaScript です — ここでは <a href="/ja/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。もし空なら、イベントオブジェクトの <code><a href="/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 関数— これでフォームの送信を抑制します — を呼び、それからフォームの下にあるパラグラフに、何が問題なのかユーザーに伝えるためのエラーメッセージを表示します:</p>
+
+<pre class="brush: js notranslate">const form = document.querySelector('form');
+const fname = document.getElementById('fname');
+const lname = document.getElementById('lname');
+const para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>言うまでもなく弱っちいフォームの検証です — 例えばフォームに空白や数字が入っていても止められません — が、例としては十分です。結果はこうなります。</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>メモ</strong>: ソースコード全体については、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (及び <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ライブ実行</a>も) をご覧ください。</p>
+</div>
+
+<h3 id="Event_bubbling_and_capture" name="Event_bubbling_and_capture">イベントのバブリングとキャプチャリング</h3>
+
+<p>ここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。わかりやすくするために次の例を見てください — <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 例を新しいタブで開いてください (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">ソースコード</a> もまた別のタブに)。ライブでも下で見られます:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example" name="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      const btn = document.querySelector('button');
+      const videoBox = document.querySelector('div');
+      <span style="background-color: #000044; color: #ffffff;">const </span>video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>これは内に {{htmlelement("video")}} 要素を含む {{htmlelement("div")}} を表示したり隠したりするとても簡単な例です。</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>{{htmlelement("button")}} がクリックされると、<code>&lt;div&gt;</code> のクラス属性を <code>hidden</code> から <code>showing</code> に変更するので、ビデオが表示されます(例の CSS にこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。</p>
+
+<pre class="brush: js notranslate">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>では二つばかり <code>onclick</code> イベントハンドラーを追加します — 最初のは <code>&lt;div&gt;</code> に、二つ目は <code>&lt;video&gt;</code>にです。ビデオの外側の <code>&lt;div&gt;</code> 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。</p>
+
+<pre class="notranslate">videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>が、ここで問題が — 今度はビデオをクリックすると再生が始まりますが、それと同時に&lt;div&gt;が隠されるようになってしまいました。ビデオが <code>&lt;div&gt;</code> の中にあるので(ビデオは div の一部ですから)、ビデオのクリックは上に挙げた両方のイベントハンドラーを実際に動かします。</p>
+
+<h4 id="Bubbling_and_capturing_explained" name="Bubbling_and_capturing_explained">バブリングとキャプチャリングの説明</h4>
+
+<p>親要素を持つ要素 (このケースでは {{htmlelement("video")}} です) においてイベントが発火すると、モダンブラウザーは二つの異なる段階に分けて動作します — キャプチャリングする段階とバブリングする段階です。</p>
+
+<p><strong>キャプチャリング</strong>の段階で行われることは……</p>
+
+<ul>
+ <li>要素の最上位の親要素 ({{htmlelement("html")}} に <code>onclick</code> イベントハンドラーがキャプチャリング段階に登録されているか調べ、あればそれを実行します。</li>
+ <li>次に <code>&lt;html&gt;</code> 要素の内側の要素に移って同じ事をし、また次の内側の要素にと、実際にクリックされた要素に到達するまで繰り返されます。</li>
+</ul>
+
+<p><strong>バブリング</strong>の段階では、全く逆の事が起きます。</p>
+
+<ul>
+ <li>ブラウザーは実際にクリックされた要素の <code>onclick</code> イベントハンドラーがバブリング段階に登録されていれば、それを実行します。</li>
+ <li>次に直上の親要素に移動して同じ事をし、また次へ、<code>&lt;html&gt;</code> 要素に到達するまで繰り返します。</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(大きな図を見るにはクリックしてください)</p>
+
+<p>モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。ですのでこの例の場合では、ビデオをクリックするとクリックイベントは <code>&lt;video&gt;</code> 要素から外側の <code>&lt;html&gt;</code> 要素に進んで (バブリングして) いきます。従って:</p>
+
+<ul>
+ <li><code>video.onclick...</code> ハンドラーがあるので実行し、最初ビデオが始まります。</li>
+ <li><code>videoBox.onclick...</code> ハンドラーがあるので実行し、よってビデオも隠されます。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>記</strong>: 両方のイベントハンドラーが存在する場合バブリングとキャプチャリングでは、キャプチャフェーズが最初に走り、バブリングフェーズが続きます。</p>
+</div>
+
+<h4 id="Fixing_the_problem_with_stopPropagation" name="Fixing_the_problem_with_stopPropagation()">stopPropagation()で問題を解決する</h4>
+
+<p>困った動作ですが、解決する方法があります! 標準的なイベントオブジェクトには <code><a href="/ja/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>という関数があって、ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。</p>
+
+<p>よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:</p>
+
+<pre class="brush: js notranslate">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html ソースコード</a>のローカルコピーを作成してみて、自分で修正してみるか、修正された結果は <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> で見ることができます (こちらで<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">ソースコード</a>も見られます)。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: なんだってキャプチャリングとバブリングなんてあるのか? それはね、むかーしむかしの悪き時代、ブラウザーに今ほど互換性がなかった頃、ネットスケープはキャプチャリングだけを、IE はバブリングだけを使っていたのさ。W3C が動作について標準化と合意を作ろうと決めた時、結局どっちもシステムに入れることにし、モダンブラウザーはそのように実装されたのさ。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ</strong>: 上で述べたように、デフォルトでイベントハンドラーはバブリング段階に登録され、そしてほとんどの場合はこれが妥当です。もし本当にイベントをキャプチャリング段階の方に登録したいのであれば、<code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>を使って、省略可能な第三引数に <code>true</code> を指定すれば実現できます。</p>
+</div>
+
+<h4 id="Event_delegation" name="Event_delegation">イベントの移譲</h4>
+
+<p>バブリングでは<strong>イベント移譲</strong>という機能も活用できます — イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。</p>
+
+<p>良い例としては、一連のリストアイテムです — どれかがクリックされたらメッセージをポップアップさせたいときには、親の <code>&lt;ul&gt;</code> 要素の <code>click</code> イベントリスナーに設定すれば、イベントはリストアイテムからバブリングしてきます。</p>
+
+<p>この概念はより深く David Walsh のブログで、たくさんの例とともに解説されています。— <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a> を見てください</p>
+
+<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
+
+<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">Test your skills: Events</a> を見てください。</p>
+
+<h2 id="Conclusion" name="Conclusion">結論</h2>
+
+<p>ウェブイベントについて、今の学習初期段階で知るべき事は全部わかったはずです。上で述べたように、実のところイベントは JavaScript のコアには属しません — それらはブラウザーの Web API に属するものです。</p>
+
+<p>また重要な事は、JavaScript の使われ方によって異なるイベントモデルがありうる事も理解しておいてください — Web API とブラウザーの WebExtension や Node.js (サーバーサイド JavaScript) のような領域とでは。今あなたがそれらの領域について理解しなくてよいと思っていますが、ウェブ開発の事を学んでいくのにイベントの基礎を理解するのが役立つのは確かです。</p>
+
+<p>理解できない事があれば、気楽にまた記事を読み返したり、<a href="/ja/Learn#Contact_us">私達</a> に質問してください</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (キャプチャとバブリングの議論) — Peter-Paul Koch による非常に詳細な作品。</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (イベントオブジェクトに関する議論) — Peter-Paul Koch によるもう 1 つの非常に詳細な作品。</li>
+ <li><a href="/ja/docs/Web/Events">イベントリファレンス</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>
diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html
new file mode 100644
index 0000000000..636278ee2e
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/functions/index.html
@@ -0,0 +1,407 @@
+---
+title: 関数 — 再利用可能なコードブロック
+slug: Learn/JavaScript/Building_blocks/Functions
+tags:
+  - API
+  - Article
+  - Beginner
+  - Browser
+  - CodingScripting
+  - Custom
+  - Functions
+  - Guide
+  - JavaScript
+  - Learn
+  - Method
+  - anonymous
+  - invoke
+  - 'l10n:priority'
+  - parameters
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">コーディングにおいて、不可欠なコンセプトが<strong>関数</strong>です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提知識:</th>
+   <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>JavaScript の関数についての基礎を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Where_do_I_find_functions" name="Where_do_I_find_functions">関数はどこにありますか？</h2>
+
+<p>JavaScript の中で、関数はあらゆるところに見つかるでしょう。実際、これまでのところすべての場面で関数を使用してきました。これについてはあまり触れてきませんでした。しかし、今こそ明確に関数について話し始め、本当に構文を探索する時期です。</p>
+
+<p>一対のかっこ — <code>()</code> — の機能である JavaScript の構造を使用するほとんどの場合、そして <a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while と do ... while ループ</a>、または <a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if..else 文</a>のような一般的な組み込みの言語構造を使用<strong>していない</strong>場合、あなたは関数を使用していることになります。</p>
+
+<h2 id="Built-in_browser_functions" name="Built-in_browser_functions">ブラウザー組み込み関数</h2>
+
+<p>このコースではブラウザーに組込まれた関数をたくさん使ってきました。毎回テキスト文字列を操作したときには、こんな風に:</p>
+
+<pre class="brush: js notranslate">let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>あるいは毎回配列を操作したときには:</p>
+
+<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
+let madeAString = myArray.join(' ');
+console.log(madeAString);
+// the join() function takes an array, joins
+// all the array items together into a single
+// string, and returns this new string</pre>
+
+<p>また毎回乱数を作成したときには:</p>
+
+<pre class="brush: js notranslate">let myNumber = Math.random();
+// the random() function generates a random
+// number between 0 and 1, and returns that
+// number</pre>
+
+<p>...関数を使っていたのです!</p>
+
+<div class="note">
+<p><strong>メモ</strong>: これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。</p>
+</div>
+
+<p>JavaScript言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動(走らせたり実行する事の別の言い方)するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。</p>
+
+<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">私たちのコースのこの以前のセクション</a>を見てください)。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。</p>
+
+<h2 id="Functions_versus_methods" name="Functions_versus_methods">関数とメソッド</h2>
+
+<p>オブジェクトの<strong>メソッド</strong>の一部を、プログラマーは<strong>関数</strong>として呼び出します。構成された JavaScript オブジェクト内部の働きについては、まだ知る必要はありません — この後のモジュールで、オブジェクト内部の働きや自分でオブジェクトを作る方法について教える段階になってから覚えれば大丈夫です。今のところは、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在している事があるとわかってもらいたいだけです。</p>
+
+<p>これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects">こちらで</a>確認できます。</p>
+
+<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/docs/Learn/JavaScript/Building_blocks/Looping_code">繰返しの記事</a>で出てきた <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例(<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">ソースコード</a>はこちら)では、独自に作った <code>draw()</code> 関数が含まれていました。こんなやつです:</p>
+
+<pre class="brush: js notranslate">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (let i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>この関数は、{{htmlelement("canvas")}} 要素の内にランダムな円を 100描きます。同じ事をやりたい時には、いつでもこんな具合に関数を起動するだけです</p>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>繰り返しをする毎に何度も同じコードを書き上げるのではなく。関数にはあなたが書きたいどんなコードでも含められます — 関数の中から他の関数を呼ぶことだってできます。例に挙げた上の関数では、<code>random()</code>関数を 3 回呼んでいて、random関数は以下のコードで定義されています:</p>
+
+<pre class="brush: js notranslate">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>ブラウザー組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は 0 から 1 までの間の 10進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。</p>
+
+<h2 id="Invoking_functions" name="Invoking_functions">関数の呼び出し</h2>
+
+<p>もうよくご存知でしょう、でも念のため … 定義した後で実際に関数を使うには、関数を走らせ — あるいは起動し — なければなりません。これはコードのどこかに関数の名前、直後にカッコの組を書けばできます。</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}
+
+myFunction();
+// calls the function once</pre>
+
+<h2 id="Anonymous_functions" name="Anonymous_functions">匿名関数</h2>
+
+<p>ちょっと違う形式で定義されて起動される関数を見かける事があるでしょう。ここまでは関数をこのように作ってきました:</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>でも名前のない関数を作る事もできます:</p>
+
+<pre class="brush: js notranslate">function() {
+  alert('hello');
+}</pre>
+
+<p>これは<strong>匿名関数</strong>と呼ばれます — 名前がないんです! それだけでは何もしません。匿名関数はよくイベントハンドラで使われていて、例えば以下では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります:</p>
+
+<pre class="brush: js notranslate">const myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>上の例では、ページの中に選択してクリックするための{{htmlelement("button")}}要素が存在しなければならないでしょう。あなたはこのような例をここまでのコースで見てきましたし、ここから先の記事でもっと学習し、使い方を見ていく事になります。</p>
+
+<p>匿名関数を変数の値として代入する事もできます:</p>
+
+<pre class="brush: js notranslate">const myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>この関数は次のように起動できます:</p>
+
+<pre class="brush: js notranslate">myGreeting();
+</pre>
+
+<p>関数に名前をつけたような効果があります。また関数を複数の変数の値として代入する事もできます:</p>
+
+<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre>
+
+<p>結果、この関数はどちらの方法でも起動できます</p>
+
+<pre class="brush: js notranslate">myGreeting();
+anotherGreeting();</pre>
+
+<p>ですがこれは混乱するだけなので、やらないように! 関数を作成するときはこの形式でやった方が良いです:</p>
+
+<pre class="brush: js notranslate">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>匿名関数は主にイベント発火 — ボタンがクリックされたとか — のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われます。くりかえしですが、こんな具合です:</p>
+
+<pre class="brush: js notranslate">myButton.onclick = function() {
+  alert('hello');
+  // I can put as much code
+  // inside here as I want
+}</pre>
+
+<h2 id="Function_parameters" name="Function_parameters">関数の引数</h2>
+
+<p>関数には実行する時に<strong>引数</strong>が必要なものがあります — 関数のカッコとカッコの間に書かなければならない値で、関数が正しい仕事をするのに必要とされます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 引数は、パラメーター、プロパティ、アトリビュート（属性）などと呼ばれる場合もあります。</p>
+</div>
+
+<p>例えばブラウザー組込み関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は引数を必要としません。呼ばれるといつも 0 から 1 までの乱数を返します:</p>
+
+<pre class="brush: js notranslate">let myNumber = Math.random();</pre>
+
+<p>ですがブラウザー組込みの文字列関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:</p>
+
+<pre class="brush: js notranslate">let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 複数の引数を指定するときは、カンマで区切って書きます</p>
+</div>
+
+<p>引数には省略可能 — 書かなくても良い — なものもある事に触れておくべきでしょう。省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。例えば、配列の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 関数のパラメータは省略可能です:</p>
+
+<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
+let madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+let madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'</pre>
+
+<p>もし結合/区切り文字を指定する引数が省略された場合、デフォルトとしてカンマが使われます。</p>
+
+<h2 id="Function_scope_and_conflicts" name="Function_scope_and_conflicts">関数のスコープと競合</h2>
+
+<p>{{glossary("スコープ")}}という言葉について説明しておきましょう — 関数を扱う際にはとても大切な概念です。関数を作成するとき、関数の中で定義されている変数や関数は、内部でそれぞれ独自の<strong>スコープ</strong>というものを持ちます。これはそれぞれが独自の小部屋に閉じ込められていて、別の関数の内部から、あるいはこの関数の外部のコードから触れられくなる事を意味しています。</p>
+
+<p>あなたのすべての関数の外側、一番の外側を、<strong>グローバルスコープ</strong>と呼びます。グローバルスコープで定義された値はすべて、コードのどこからでもアクセスできます。</p>
+
+<p>JavaScript がこう作られているのにはいくつも理由があります — が、主な理由はセキュリティと組織化のためです。時には変数にコードのどこからでもアクセスされないようにしたい場合もあるでしょう — どこかから呼び込んだ外部スクリプトが、あなたのコードをおかしくして問題を起す場合があるかもしれません。別の場所でたまたま同じ名前の変数を使っていて、衝突していたために。これは悪意をもってわざとやっている場合や、単なる偶然の場合もあります。</p>
+
+<p>そうですね、例えばある HTML ファイルが二つの外部 JavaScript ファイルを呼び出しているとして、そのどちらも同じ名前の変数と関数を定義しているとします:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js notranslate">// first.js
+let name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}</pre>
+
+<pre class="brush: js notranslate">// second.js
+let name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}</pre>
+
+<p>あなたが呼び出したいのはどっちも <code>greeting()</code>関数ですが、あなたには <code>first.js</code> ファイルの <code>greeting()</code> 関数しかアクセスできません(2 つ目は無視されます)。加えて、<code>second.js</code> ファイルで <code>let</code> キーワードで <code>name</code> 変数に 2度目の定義をしようとするとエラーになります。</p>
+
+<div class="note">
+<p><strong>注</strong>: この例を <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub でライブ実行</a> できます(<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">ソースコード</a>はこちら).</p>
+</div>
+
+<p>あなたのコードの部品を関数の中に隔離するとこのような問題を避けられるので、これが一番良いやりかたと考えられています。</p>
+
+<p>これは動物園みたいなものです。ライオン、シマウマ、トラ、ペンギンはそれぞれの檻の中にいて、それぞれの檻の中のものにしか触れられません — 関数のスコープと同じ事です。もし彼等が他の檻の中に侵入できたら問題が起きることでしょう。良くて、知らない住人に囲まれて気まずい思いをする — 寒くて水だらけのペンギンの檻に入ったライオンやトラは酷い気分になるでしょう。最悪の場合、ライオンやトラはペンギンを食べてみようとするかも!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>動物園の管理人はグローバルスコープみたいなものです — 管理人はすべての檻の鍵を持っていて、エサを補充し、動物にうんざりし、などなど。</p>
+
+<h3 id="Active_learning_Playing_with_scope" name="Active_learning_Playing_with_scope">アクティブラーニング:  スコープで遊んでみよう</h3>
+
+<p>スコープを示すための実際の例を見てみましょう。</p>
+
+<ol>
+ <li>まず <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> の例のローカルコピーを作成します。これには <code>a()</code> と <code>b()</code> という 2 つの関数と、<code>x</code>、<code>y</code>、<code>z</code> の 3 つの変数が含まれます。これらの変数のうち 2 つは関数内で定義され、もう 1 つはグローバルスコープ内で定義されます。また <code>output()</code> という 3番目の関数も含まれています。この関数は単一のパラメータを取り、ページの段落に出力します</li>
+ <li>ブラウザーとテキストエディターでサンプルを開きます</li>
+ <li>ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。
+  <pre class="brush: js notranslate">output(x);</pre>
+  変数x の出力値が画面に表示されるはずです。</li>
+ <li>コンソールに次のように入力してみてください
+  <pre class="brush: js notranslate">output(y);
+output(z);</pre>
+  どちらも、"<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり <code>y</code> と <code>z</code> は <code>a()</code> と <code>b()</code> 関数の中でロックされているので、global スコープから呼び出されたときには <code>output()</code> はそれらにアクセスできません。</li>
+ <li>しかし、別の関数の中から呼び出されたときはどうでしょうか？ <code>a()</code> と <code>b()</code> を次のように編集してみてください：
+  <pre class="brush: js notranslate">function a() {
+  let y = 2;
+  output(y);
+}
+
+function b() {
+  let z = 3;
+  output(z);
+}</pre>
+  コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから <code>a()</code> と <code>b()</code> 関数を呼び出してみてください。
+
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  ページに <code>y</code> と <code>z</code> の値の出力が表示されます。<code>output()</code> 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。<code>output()</code> 自体はグローバルスコープで定義されているので、どこからでも利用できます。</li>
+ <li>今度は次のようにコードを更新してみてください：
+  <pre class="brush: js notranslate">function a() {
+  let y = 2;
+  output(x);
+}
+
+function b() {
+  let z = 3;
+  output(x);
+}</pre>
+  保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li>
+ <li>
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  <code>a()</code> と <code>b()</code> の両方の呼び出しは <code>x</code> の値、つまり 1 が出力されます。これは <code>x</code> がグローバル変数であり、すべてのコード内どこでも利用可能であるため、<code>output()</code> の呼び出しが <code>x</code> と同じスコープではなくてもうまく動きます。</li>
+ <li>最後に、次のようにコードを更新してみてください：
+  <pre class="brush: js notranslate">function a() {
+  let y = 2;
+  output(z);
+}
+
+function b() {
+  let z = 3;
+  output(y);
+}</pre>
+  保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li>
+ <li>
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  今度は <code>a()</code> と <code>b()</code> の両方の呼び出しで、迷惑な "<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: <em>variable name</em> is not defined</a>" エラーが返されます — これは <code>output()</code> 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 同じスコープルールはループ (<code>for() { ... }</code> など) と条件ブロック (<code>if() { ... }</code>など) には適用されません。それらは非常によく似ていますが、同じものではありません。混乱しないように注意してください。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="Functions_inside_functions" name="Functions_inside_functions">関数の中の関数</h3>
+
+<p>別の関数内であっても、どこからでも関数を呼び出すことができます。これは、コードをきれいにする方法としてよく使われます。大きな複雑な関数がある場合は、いくつかのサブ関数に分解すれば分かります。</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  let myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p>関数内で使用されている値が適切にスコープ内にあることを確認してください。上記の例では <code>ReferenceError: myValue is not defined</code> というエラーが発生します。<code>myValue</code>変数は関数呼び出しと同じスコープで定義されていますが、関数定義内では定義されていないためです。従って実際のコードは関数が呼び出されたときに実行されます。これを動くようにするには、次のように関数に値を渡す必要があります。</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  let myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
+
+<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>この記事では関数の背後にある基本的な概念を探り、次に実用的な方法を習得し、独自のカスタム関数を構築する手順を紹介しました。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/JavaScript/Guide/Functions">関数の詳細ガイド</a> — ここに含まれていないいくつかの高度な機能について説明します。</li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters">デフォルト引数</a>, <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> — 高度な概念リファレンス</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>
diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.html b/files/ja/learn/javascript/building_blocks/image_gallery/index.html
new file mode 100644
index 0000000000..2c8dc3c470
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.html
@@ -0,0 +1,142 @@
+---
+title: イメージギャラリー
+slug: Learn/JavaScript/Building_blocks/Image_gallery
+tags:
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Conditionals
+  - Event Handler
+  - JavaScript
+  - Learn
+  - Loops
+  - events
+translation_of: Learn/JavaScript/Building_blocks/Image_gallery
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>この評価を行う前に、このモジュールにある記事すべてを実施していること。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>JavaScript の繰り返し、関数、条件とイベントが理解できていることを確認する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point" name="Starting_point">出発点</h2>
+
+<p>この評価を始めるために、サンプルが入っているサイトから <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">ZIP ファイル</a> を取得して、コンピュータのどこかに展開しておきます。</p>
+
+<div class="note">
+<p><strong>注</strong>: 別の方法として, この評価を行うために <a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使うことができます。これらのオンラインエディターに HTML、CSS、JavaScript を貼り付けることができます。利用するオンラインエディターが JavaScript/CSS パネルに分かれていなければ、 HTML ページの中の <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> 要素にそれらを貼り付けてください 。</p>
+</div>
+
+<h2 id="Project_brief" name="Project_brief">プロジェクト概要</h2>
+
+<p>HTML、CSS と画像および数行の JavaScript のコードが提供されています。必要な JavaScript を書いて、これを動くプログラムにする必要があります。HTML のボディは次のようになっています:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+
+&lt;div class="full-img"&gt;
+  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
+  &lt;div class="overlay"&gt;&lt;/div&gt;
+  &lt;button class="dark"&gt;Darken&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="thumb-bar"&gt;
+
+&lt;/div&gt;</pre>
+
+<p>例ではこのように見えます:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>例にある CSS ファイルで最も興味深い部分:</p>
+
+<ul>
+ <li><code>full-img &lt;div&gt;</code> の内側に 3 つの要素が絶対位置指定されています ー <code>&lt;img&gt;</code> にはフルサイズの画像が表示されています。その上に <code>&lt;img&gt;</code> と同じサイズになるようにサイズ調整された空の<code>&lt;div&gt;</code> が置かれています (これは半透明の背景色で画像を暗くする効果に使われます)。そして <code>&lt;button&gt;</code> は暗くする効果をコントロールするために使われます。</li>
+ <li><code>thumb-bar &lt;div&gt;</code> (いわゆるサムネイル画像) 内の画像は幅を 20% に設定し、左側に浮かせて一行に並べています。</li>
+</ul>
+
+<p>JavaScriptに必要なもの:</p>
+
+<ul>
+ <li>すべての画像をループさせる際、<code>thumb-bar &lt;div&gt;</code> の中にその画像を埋め込む <code>&lt;img&gt;</code> 要素を挿入します。</li>
+ <li><code>onclick</code> ハンドラーを <code>thumb-bar &lt;div&gt;</code> の中の <code>&lt;img&gt;</code> それぞれにつけます。それをクリックしたときにその画像が <code>displayed-img &lt;img&gt;</code> 要素に表示されるようにします。</li>
+ <li><code>onclick</code> ハンドラーを <code>&lt;button&gt;</code> につけて、クリックされたらフルサイズ画像を暗くするようにします。再度クリックすると暗くする効果を外します。</li>
+</ul>
+
+<p>もっとアイデアを加えると、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">最終的な例</a> のようになります (ソースコードをのぞかないように！)</p>
+
+<h2 id="Steps_to_complete" name="Steps_to_complete">完成へのステップ</h2>
+
+<p>次のセクションですべきことを説明します。</p>
+
+<h3 id="Looping_through_the_images" name="Looping_through_the_images">画像をループさせる</h3>
+
+<p>すでに <code>thumbBar</code> という変数に <code>thumb-bar &lt;div&gt;</code> の参照を格納するようにしています。新しい <code>&lt;img&gt;</code> 要素を作って、その <code>src</code> 属性にプレースホルダーとして値 <code>xxx</code> をセットしてください。そして、新しい <code>&lt;img&gt;</code> 要素を <code>thumbBar</code> に追加してください。</p>
+
+<p>必要なこと:</p>
+
+<ol>
+ <li>"Looping through images" コメントの下のセクションのコードを全 5 画像をループする繰り返し処理のなかに置いて下さい — 各画像を表現する5つの数についてループするだけです。</li>
+ <li>各ループの反復で、プレースホルダー <code>xxx</code> の値を画像のパスに等しい文字列で置き換えてください。それぞれの場合で <code>src</code> 属性の値をこの値に設定します。いずれの場合も画像は画像ディレクトリーにあり、<code>pic1.jpg</code>、<code>pic2.jpg</code> というようなファイル名になっています。</li>
+</ol>
+
+<h3 id="onclick_ハンドラーをそれぞれのサムネール画像に追加する">onclick ハンドラーをそれぞれのサムネール画像に追加する</h3>
+
+<p>各ループの反復で、現在の <code>newImage</code> に <code>onclick</code> ハンドラーを追加する必要があります — このハンドラは現在の画像の <code>src</code> 属性の値を見つけます。<code>displayed-img &lt;img&gt;</code> の <code>src</code> 属性の値をパラメータとして渡されたものの <code>src</code> 値へ設定します。</p>
+
+<p>替わりに、サムネイルバーへ一つのイベントリスナーを追加することも出来ます。</p>
+
+<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image" name="Adding_an_onclick_handler_to_each_thumbnail_image">暗くする/明るくするボタンを処理するハンドラーを書く</h3>
+
+<p>暗くする/明るくする <code>&lt;button&gt;</code> が残っています。<code>btn</code> という変数に <code>&lt;button&gt;</code>  への参照を格納するコードはすでにご紹介しています。それらに <code>onclick</code> ハンドラーに追加する必要があります:</p>
+
+<ol>
+ <li><code>&lt;button&gt;</code> にセットされている現在のクラス名をチェックしますーこれもまた、<code>getAttribute()</code> を使えば取得できます。</li>
+ <li>クラス名が <code>"dark"</code> なら、<code>&lt;button&gt;</code> のクラスを (<code><a href="/ja/docs/Web/API/Element/setAttribute">setAttribute()</a></code> を使って) <code>"light"</code> に変更します。テキストも "Lighten" にします。そして、オーバーレイ<code> &lt;div&gt;</code> の {{cssxref("background-color")}} を <code> "rgba(0,0,0,0.5)"</code> にします。</li>
+ <li>クラス名が<code> "dark"</code> でなければ、<code>&lt;button&gt;</code> のクラスを <code>"dark"</code> に変更します。テキストを "Darken" に戻します。そしてオーバーレイ <code>&lt;div&gt;</code> の {{cssxref("background-color")}} を <code>"rgba(0,0,0,0)"</code> にします。</li>
+</ol>
+
+<p>次のコードは上記の 2 と 3 で示された変更を行う基本的なものです。</p>
+
+<pre class="brush: js notranslate">btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;</pre>
+
+<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2>
+
+<ul>
+ <li>HTML と CSS は全く編集する必要はありません。</li>
+</ul>
+
+<h2 id="Assessment" name="Assessment">課題</h2>
+
+<p>組織されたコースの一部としてこの評価を行う場合、採点のため先生/メンターにあなたの成果を提出してください。もし、自習なら、<a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">このエクササイズに関するディスカッションのスレッド</a> や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャネルで尋ねれば、採点ガイドが簡単に得られるでしょう。まずエクササイズに挑戦してください。ーごまかしても何も得られません！</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>
diff --git a/files/ja/learn/javascript/building_blocks/index.html b/files/ja/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..74ec4ff45f
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/index.html
@@ -0,0 +1,56 @@
+---
+title: JavaScript の構成要素
+slug: Learn/JavaScript/Building_blocks
+tags:
+  - Article
+  - Assesment
+  - Beginner
+  - CodingScripting
+  - Conditionals
+  - Functions
+  - Guide
+  - JavaScript
+  - Landing
+  - Loops
+  - Module
+  - events
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span id="result_box" lang="ja"><span>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。</span></span></p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提条件</h2>
+
+<p>このモジュールを始める前に、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> も終了させておくべきです。</p>
+
+<div class="note">
+<p><strong>注記 </strong>: もしあなたが作業しているコンピュータ・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コード内で決定を下す — 条件</a></dt>
+ <dd><span id="result_box" lang="ja"><span>どんなプログラミング言語でも、コードは異なる入力に応じて決定を下し、それに応じてアクションを実行する必要があります。</span></span>例えば、ゲームではもしプレイヤーのライフが 0 だった場合、ゲームオーバーになります。お天気アプリでは、朝に見た場合には朝日の画像を表示し、夜に見た場合には星と月を表示します。<span id="result_box" lang="ja"><span>この記事では、条件の構造が JavaScript でどのように機能するかを説明します。</span></span></dd>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></dt>
+ <dd><span id="result_box" lang="ja"><span>場合によっては、一度にタスクを</span></span><span lang="ja"><span>複数回実行しなければならないことがあります。</span> 例えば<span>名前のリスト全体を調べる場合です。</span><span>プログラミング時に、ループはこのような処理を非常にうまく実行します。</span><span>ここでは JavaScript のループ構造を見ていきます。</span></span></dd>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可なコードブロック</a></dt>
+ <dd><span id="result_box" lang="ja"><span>コーディングのもう一つの重要な概念は<strong>関数</strong>です。</span> <span><strong>関数</strong>を使用すると、定義されたブロック内に単一のタスクを実行するコードを格納し、同じコードを複数回入力するのではなく、単一の短いコマンドを使用して必要となる時にコードを呼び出すことができます。</span><span>この記事では、基本的な構文、関数、スコープ、パラメータを呼び出す方法と定義する方法など、関数の背後にある基本的な概念について説明します。</span></span></dd>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を構築する</a></dt>
+ <dd><span id="result_box" lang="ja"><span>前の記事で扱った必須の理論の多くを用いて、この記事では実用的な体験を提供しています。</span><span>ここでは、独自のカスタム関数を構築するための練習をします。</span> <span>また進むにつれ、関数を扱うためのさらに便利な詳細についても説明します。</span></span></dd>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></dt>
+ <dd><span id="result_box" lang="ja"><span>関数について知っておくべき最後の必須コンセプトは戻り値</span></span><span lang="ja"><span>です。一部の関数は完了後に意味のある値を返しませんが、他の関数は返します。</span><span>値が何であるか、コードでそれらを使用する方法、独自のカスタム関数で有用な値を返す方法を理解することが重要です。</span></span></dd>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントへの入門</a></dt>
+ <dd><span id="result_box" lang="ja"><span>イベントとは、プログラミング中のシステムで発生するアクションまたは事象</span></span><span lang="ja"><span>のことで、システムによって通知され、必要に応じて何らかの方法で応答できるようにするものです。</span>例えば<span>、ユーザが Web ページ上のボタンをクリックすると、情報ボックスを表示することでそのアクションに応答することができます。</span><span>この最後の記事では、イベントを取り巻くいくつかの重要な概念について説明し、それらがブラウザでどのように機能するかを見ていきます。</span></span></dd>
+</dl>
+
+<h2 id="Assessments" name="Assessments">評価</h2>
+
+<p><span class="short_text" id="result_box" lang="ja"><span>以下の評価は、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</span></span></p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></dt>
+ <dd><span id="result_box" lang="ja"><span>JavaScript の基本的な構成要素を見てきましたので、JavaScript で動く画像ギャラリーという、</span></span><span lang="ja"><span>多くの Web サイトで見ることができるかなり一般的なアイテムを構築することで、ループ、関数、条件文、イベントに関する知識をテストします</span></span>。</dd>
+</dl>
diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html
new file mode 100644
index 0000000000..dd5e724fca
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html
@@ -0,0 +1,933 @@
+---
+title: ループコード
+slug: Learn/JavaScript/Building_blocks/Looping_code
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - DO
+  - Guide
+  - JavaScript
+  - Learn
+  - Loop
+  - break
+  - continue
+  - for
+  - 'l10n:priority'
+  - while
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>JavaScript でループの使い方を理解する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Keep_me_in_the_loop" name="Keep_me_in_the_loop">ループの中にとどまる</h2>
+
+<p>ループ、ループ、ループ。<a href="https://en.wikipedia.org/wiki/Froot_Loops">朝食用シリアル</a>や、<a href="https://en.wikipedia.org/wiki/Vertical_loop">ジェットコースター</a>、<a href="https://en.wikipedia.org/wiki/Loop_(music)">音楽</a>でもおなじみですが、プログラミングにおいても、とても重要な概念です。プログラミングにおけるループとは同じことを何度も何度も繰り返すことで、<strong>反復</strong>や<strong>繰り返し</strong>とも言われます。</p>
+
+<p>それでは、農家のケースについて考えてみましょう。彼は家族を養うため十分な食料があるか確認しようとしています。それを実現するため、以下のようなループを使用するでしょう。</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0px auto;"></p>
+
+<p>ループにはたいてい以下のような機能があります。</p>
+
+<ul>
+ <li><strong>カウンター:</strong> ループの開始地点で、初期化される値です。(上記の絵の、"I have no food" [食料がない] の部分です)。</li>
+ <li><strong>条件:</strong> ループの実行を継続するか終了するかを決める true/false の判定です。たいていはカウンターがある値に達した場合に終了します。上記の絵の、"Do I have enough food?" [十分な食料があるか？] の部分です。例えば、家族に食べさせる 10 個の食料が必要である、というようなことです。</li>
+ <li><strong>イテレーター:</strong> これは一般的には条件が <code>true</code>. では無くなるまで、カウンターの値をループごとに少量ずつ増加させます。上記の絵には明示的には描いていませんが、農家が 1 時間に 2 つの食料を集めることができると考えるとします。この場合、1 時間ごとに 2 つずつ食料が増えていき、農家は十分な食料が集まったかを確認することができます。もし食料が 10 個になったら (条件が true では無くなったため、ループが終了するポイント)、集めるのをやめて家に帰ることができるでしょう。</li>
+</ul>
+
+<p>{{glossary("pseudocode", "疑似コード")}}では、以下のようになるでしょう。</p>
+
+<pre class="notranslate">loop(food = 0; foodNeeded = 10) {
+  if (food &gt;= foodNeeded) {
+    exit loop;
+    // 十分な食料が集まりました。家に帰りましょう
+  } else {
+    food += 2; // 1 時間経って 2 つの食料を集めました
+    // ループはさらに続きます
+  }
+}</pre>
+
+<p>最初に、必要な食料が 10 に設定され、農家が現在持っている食料は 0 に設定されます。ループの繰り返しごとに、農家の持っている食料が必要な食料の数に等しいかを調べています。もしそうであれば、ループを抜けられます。そうでなければ、農家は 1 時間ごとに 2 つの食料を集めるのを繰り返します。</p>
+
+<h3 id="Why_bother" name="Why_bother">どうしてこんなことをするの？</h3>
+
+<p>これで、恐らくループの背後にあるコンセプトが理解できたことでしょう。けれど、「それが JavaScript のコードを書くのにどう役立つの？」と思っているかもしれませんね。先ほど<strong>ループは同じことを繰り返すこと</strong>だと言いいましたが、それは<strong>素早く繰り返し同じ作業を完了させる</strong>のに最適なことなのです。</p>
+
+<p>たいてい、コードはループの連続する反復のたびごとにわずかに異なるものになります。つまり、似ているけれどわずかに異なる多数のタスク全体を完了出来るのです。もしたくさんの異なる計算をしなければならないとしたら、同じことを何度も何度もするのではなく、それぞれ異なることをしたいですよね。</p>
+
+<p>ループがどれだけ素晴らしいものかを説明する例を見てみましょう。100 個のランダムな円を {{htmlelement("canvas")}} 要素に描きたいとします (<em>更新</em>ボタンを押して、例を何度となく実行し、結果が異なることを見てみましょう。)</p>
+
+<div class="hidden">
+<h6 id="Hidden_code" name="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;キャンバスに描くランダムな円&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;更新&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+
+    &lt;script&gt;
+    const btn = document.querySelector('button');
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    let WIDTH = document.documentElement.clientWidth;
+    let HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random()*number);
+    }
+
+    function draw() {
+      ctx.clearRect(0,0,WIDTH,HEIGHT);
+      for (let i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    btn.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>今はコードをすべて理解する必要はありません。ですが、コードの一部で 100 個の円を実際に描いている箇所を見てみましょう。</p>
+
+<pre class="brush: js notranslate">for (let i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<ul>
+ <li><code>random(x)</code> はコードの前半で定義され、<code>0</code> から <code>x-1</code> までの整数を返します</li>
+ <li><code>WIDTH</code> と <code>HEIGHT</code> は、内側のブラウザーウィンドウの幅と高さです。</li>
+</ul>
+
+<p>基本的な考えがわかりましたか？このコードをループを使用して 100 回実行しますが、毎回ページ内のランダムな場所に円を描いています。必要なコードは 100 個の円を描くときも、1000 個でも 10,000 個でも同じです。1 か所だけ変更すればいいのです。</p>
+
+<p>ここでループを使用しないとすれば、次のコードを描きたい数だけ繰り返し書かなければなりません。</p>
+
+<pre class="brush: js notranslate">ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<p>これはとてもつまらなく、素早くメンテナンスするのが難しいコードです。ループが一番良いです。</p>
+
+<h2 id="The_standard_for_loop" name="The_standard_for_loop">標準的な for ループ</h2>
+
+<p>ここからは、具体的なループの構造を見ていきましょう。最初は、特によく使うことになるであろう <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループについてです。構文は以下の通りです。</p>
+
+<pre class="notranslate">for (初期化処理; 条件; 最後の式) {
+  // 実行するコード
+}</pre>
+
+<p>ここでは...</p>
+
+<ol>
+ <li><code>for</code> キーワードに続き括弧があります。</li>
+ <li>括弧の中にはセミコロンで区切られて以下の項目があります。
+  <ol>
+   <li><strong>初期化処理</strong>: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。この変数を<strong>カウンター変数</strong>と呼ぶことがあります。</li>
+   <li><strong>条件</strong>: 既に取り上げた通り、これはループが繰り返しをやめるべき条件を定義します。ほとんどの場合は比較演算子を伴って、終了条件を満たしているかを判定します。</li>
+   <li><strong>最後の式</strong>: これはループの 1 回が終了する度に評価される (または実行される) コードです。大体、カウンター変数を増やし(または減らし)、条件が <code>true</code> では無くなるポイントに近づけていきます。</li>
+  </ol>
+ </li>
+ <li>そして中括弧があり、中括弧の中のコードブロックが各ループの繰り返しで実行されます。</li>
+</ol>
+
+<p>それでは実際の例を見て、これらを明確に分かるようにしてみましょう。</p>
+
+<pre class="brush: js notranslate">const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン'];
+let info = '私の猫の名前は、';
+const para = document.querySelector('p');
+
+for (let i = 0; i &lt; cats.length; i++) {
+  info += cats[i] + '、';
+}
+
+para.textContent = info;</pre>
+
+<p>これで次の結果が得られます。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2" name="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;for ループの例&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン'];
+    let info = '私の猫の名前は、';
+    const para = document.querySelector('p');
+
+    for (let i = 0; i &lt; cats.length; i++) {
+      info += cats[i] + '、';
+    }
+
+    para.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">このコードは GitHub でも</a>見られます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">動くデモも</a>ありますよ)。</p>
+</div>
+
+<p>これは配列のすべての要素に対して、繰り返し何かを実行するループの使用例です。JavaScript ではとてもよく見られるパターンです。</p>
+
+<ol>
+ <li><code>i</code> をカウンター変数(イニシャライザーやイテレーター変数ともいう)として、<code>0</code> から開始します (<code>let i = 0</code>)。</li>
+ <li><code>i</code> が <code>cats</code> 配列の長さより小さくなくなるまで実行すると、ループには指定されています。これは重要です、条件にはループが継続するための条件が示されています。今回は、<code>i &lt; cats.length</code> が真となるため、ループは継続します。</li>
+ <li>ループの内側では、現在繰り返し対象となる項目 (<code>cats[i]</code> は <code>cats[i に入っているそのときの値]</code> となります) を <code>info</code> 変数に対してカンマとスペースとともに結合しています。つまり...
+  <ol>
+   <li>初回の実行時には、<code>i = 0</code> なので <code>cats[0] + ', '</code> ("ビル、") が <code>info</code> に対して結合されます。</li>
+   <li>2 回目の実行時には、<code>i = 1</code> なので <code>cats[1] + ', '</code> ("ジェフ、") が <code>info</code> に対して結合されます。</li>
+   <li>このように、ループ内の処理が実行されるたび、1 が <code>i</code> に加算され (<code>i++</code>)、次の処理が開始されます。</li>
+  </ol>
+ </li>
+ <li><code>i</code> が <code>cats.length</code> の値 (ここでは 5) と等しくなったときにループは終了し、ブラウザーはループの後に続くコードを実行します。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: 条件を <code>i &lt;= cats.length</code> ではなく、<code>i &lt; cats.length</code> としているのは、コンピューターが数値を 1 からではなく、0 から数えるためです。コードでも <code>i</code> を <code>0</code> から始め、<code>i = 4</code> (配列内の要素の最後のインデックス) となるまで加算していきます。配列内の要素が 5 つなので  <code>cats.length</code> は 5 となりますが、<code>i = 5</code> とすると、(配列に 5 のインデックスの要素がないので) <code>undefined</code> となってしまいます。なので、<code>cats.length</code> と同じ値まで (<code>i &lt;=</code>) ではなく、<code>i</code> の最大値を 1 減らして <code>cats.length</code> より小さくなる (<code>i &lt;</code>) まで加算しています。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: 条件の指定でよくある間違いは「以下」(<code>&lt;=</code>) ではなく、「等しい」(<code>===</code>) を使ってしまうことです。もし、<code>i = 5</code> となるまでループを実行したければ、終了条件は <code>i &lt;= cats.length</code> と指定しなければなりません。<code>i === cats.length</code> と指定した場合、ループは 1 度も実行されずに終了してしまいます。なぜなら、ループの最初では <code>i</code> が <code>5</code> ではないため、そこで終わってしまうからです。</p>
+</div>
+
+<p>残る小さな問題は、出力された文が完全ではないことです。</p>
+
+<blockquote>
+<p>私の猫の名前は、ビル、ジェフ、ピート、ビッグルズ、ジャスミン、</p>
+</blockquote>
+
+<p>ループの最後の結合処理を変更して文の最後が「、」で終わらないようにしたいと思います。まったく問題ありません。ループの中に条件ブロックを挿入して、これに対処しましょう。</p>
+
+<pre class="brush: js notranslate">for (let i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += cats[i] + 'です。';
+  } else {
+    info += cats[i] + '、';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">このコードは GitHub でも</a>見られます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">動いているデモも</a>あります)。</p>
+</div>
+
+<div class="warning">
+<p><strong>重要</strong>: for ループ (他のループも同様) では、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が true では無くなるポイントに達するようにする必要があります。もしそうで無い場合、ループは永遠に回り続け、ブラウザーが強制的に停止するか、クラッシュしてしまうでしょう。これは<strong>無限ループ</strong>といいます。</p>
+</div>
+
+<h2 id="Exiting_loops_with_break" name="Exiting_loops_with_break">break でループを終了する</h2>
+
+<p>すべての繰り返し処理が終了する前にループを終了したいとき、<a href="/ja/docs/Web/JavaScript/Reference/Statements/break">break</a> 文を使用して終了させることができます。前回の記事、<a href="/ja/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch 文</a>で、入力した値が switch 文の case にマッチしたとき、switch 文を抜け、それ以降のコードを実行するために <code>break</code> 文を使用しました。 </p>
+
+<p>これはループでも同様で、<code>break</code> 文を使用することで即時にループを抜けて、ブラウザーに続きのコードを実行させることができます。</p>
+
+<p>それでは、連絡先 (電話番号を持っている) の配列の中から特定の連絡先を検索してみましょう。まずは HTML です。検索するテキスト入力用の {{htmlelement("input")}} 要素と、検索内容を送信 (submit) する {{htmlelement("button")}} 要素、検索結果を表示する {{htmlelement("p")}} 要素を備えます。</p>
+
+<pre class="brush: html notranslate">&lt;label for="search"&gt;連絡先の名前: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;検索&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>現在の JavaScript について：</p>
+
+<pre class="brush: js notranslate">const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975'];
+const para = document.querySelector('p');
+const input = document.querySelector('input');
+const btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  let searchName = input.value.toLowerCase();
+  input.value = '';
+  input.focus();
+  for (let i = 0; i &lt; contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0].toLowerCase() === searchName) {
+      para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。';
+      break;
+    } else {
+      para.textContent = '連絡先が見つかりません。';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3" name="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;連絡先検索の例&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;連絡先の名前: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;検索&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975'];
+    const para = document.querySelector('p');
+    const input = document.querySelector('input');
+    const btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      let searchName = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 0; i &lt; contacts.length; i++) {
+        let splitContact = contacts[i].split(':');
+        if (splitContact[0] === searchName) {
+          para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。';
+          break;
+        } else {
+          para.textContent = '連絡先が見つかりません。';
+        }
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>コードの先頭で、いくつか変数を宣言しています。その中に、連絡先の情報を持った配列があり、各要素は名前と電話番号をコロンで区切った文字列となっています。</li>
+ <li>次に、ボタン (<code>btn</code>) にイベントリスナーを設定しています。ボタンが押されたときに検索結果が戻ってくるようになっています。</li>
+ <li>テキスト入力欄に入力された値を <code>searchName</code> という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code> を実行しているのに注意してください。</li>
+ <li>ここからが本題の for ループです。
+  <ol>
+   <li>カウンター変数を <code>0</code> から始め、<code>contacts.length</code> より小さくなくなるまで、ループの繰り返しの度に <code>i</code> を 1 増やしていきます。</li>
+   <li>ループの内側では、まず現在の連絡先 (<code>contacts[i]</code>) をコロンの文字で分割し、<code>splitContact</code> という配列に格納します。</li>
+   <li>それから、条件文を用いて、<code>splitContact[0]</code> (連絡先の名前) が入力された <code>searchName</code> にまた <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code> を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、<code>break</code> を使用してループを終了しています。</li>
+  </ol>
+ </li>
+ <li>  <code>(contacts.length-1)</code> 回目の繰り返しの後に、もし連絡先の名前が入力された検索語に一致しなければ、段落に「連絡先が見つかりません。」という文字列を表示し、条件が true では無くなるまでループを継続します。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">すべてのソースは GitHub</a> で見ることができます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">動いているデモ</a>もあります)。</p>
+</div>
+
+<h2 id="Skipping_iterations_with_continue" name="Skipping_iterations_with_continue">continue で繰り返しをスキップする</h2>
+
+<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/continue">continue</a> 文は <code>break</code> と同じような動作をします。けれど、ループを完全に抜けてしまうのではなく、次の繰り返しまで飛ばします。それでは、今度は入力として数値を受け取り、その数以下で整数の平方である値のみを返すという例を見てみましょう。</p>
+
+<p>HTML は基本的に先ほどの例と同様で、1 つのテキストボックスと出力用の段落があります。JavaScript もループ自体を除けばほぼ同じですので、違う部分のみを示します。</p>
+
+<pre class="brush: js notranslate">let num = input.value;
+
+for (let i = 1; i &lt;= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}</pre>
+
+<p>出力結果はこちらです。</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4" name="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;整数の平方根の生成&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;数値を入力してください: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;整数の平方根を生成&lt;/button&gt;
+
+  &lt;p&gt;出力結果: &lt;/p&gt;
+
+
+    &lt;script&gt;
+    const para = document.querySelector('p');
+    const input = document.querySelector('input');
+    const btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      para.textContent = 'Output: ';
+      let num = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 1; i &lt;= num; i++) {
+        let sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        para.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>今回の入力内容は数値 (<code>num</code>) です。<code>for</code> ループには、カウンターの初期値として、(今回は 0 ではなく) 1 が与えられ、終了する条件としてカウンターが入力値 (<code>num</code>) より大きくなった場合と指定されており、イテレーターとして、カウンターに 1 ずつ加算するよう指定されています。</li>
+ <li>ループ内部では、各値の平方根を <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a> を使用して求め、求めた平方根を切り捨てた値が、切り捨てる前の平方根と等しいかどうかを調べています (切り捨てには <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> に任意の数値を渡します)。</li>
+ <li>もし、平方根と切り捨てた数値が等しくないのなら (<code>!==</code>)、平方根は整数ではないことを示しています。整数以外には興味がありませんので、<code>continue</code> 文を用いて、その数値をどこにも保持することなく、次のループの繰り返しまでスキップします。</li>
+ <li>もし、その平方根が整数値であるならば、if ブロックは飛ばされるので、<code>continue</code> 文は実行されません。代わりに、現在の <code>i</code> の値を段落の内容の後ろにスペースと一緒に結合します。</li>
+</ol>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">すべてのソースは GitHub</a> でも見ることができます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">動いているデモ</a>もあります)。</p>
+</div>
+
+<h2 id="while_and_do_..._while" name="while_and_do_..._while">while と do ... while</h2>
+
+<p><code>for</code> は JavaScript で利用可能な唯一のループのタイプではありません。実際には多くのものがありますが、これらのすべてを理解する必要はありませんが、仕事の同じ機能をわずかに異なる方法で認識できるように、他のものの構造を見ておく価値があります。<br>
+ <br>
+ まず、while ループを見てみましょう。このループの構文は次のようになります。</p>
+
+<pre class="notranslate">初期化処理
+while (条件) {
+  // 実行するコード
+
+  最後の式
+}</pre>
+
+<p>これは for ループとよく似ていますが、初期化条件はループの前に設定され、最後の式は実行するコードの後のループ内に含まれます。これら二つの項目は丸括弧の中に含まれません。条件は、<code>for</code> ではなく <code>while</code> キーワードが前に付いた括弧内に含まれています。<br>
+ <br>
+ for ループにもある３つの項目が、for ループとおなじ順序で定義されています。これは理にかなっています。条件が true では無くなるポイントに達したかどうかを確認する前に初期化処理を定義する必要があります ; ループ内のコードが実行された後（1回の繰り返しの完了）、最期の式が実行されます。これは、条件がまだ true である場合にのみ発生します。<br>
+ <br>
+ 猫のリストの例をもう一度見てみましょう。ただし、while ループを使うように書き直してみましょう：</p>
+
+<pre class="brush: js notranslate">let i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: これは期待どおりに動作します。<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub でライブ実行</a>してみてください（<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">完全なソースコード</a>を見ることもできます）。</p>
+</div>
+
+<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/do...while">do ... while</a> ループは非常によく似ていますが、while構造にはバリエーションがあります。</p>
+
+<pre class="notranslate">初期化処理
+do {
+  // 実行するコード
+
+  最後の式
+} while (条件)</pre>
+
+<p>この場合、初期化処理は、ループが始まる前に、再び最初に来ています。キーワードは、実行するコードと最期の式を含む中括弧の直前にあります。</p>
+
+<p>ここでの違いは、条件がほかの全ての後にあり、括弧で囲まれ、その前に <code>while</code> キーワードが付いていることです。<code>do...while</code> ループでは、中括弧内のコードは、チェックが再度実行されるかどうかを確認する前に常に 1 回実行されます (while と for の場合、チェックが最初に来るため、コードは実行されない可能性があります) 。<br>
+ <br>
+ <code>do...while</code> ループを使用するように、猫のリストの例をもう一度書き直してみましょう：</p>
+
+<pre class="brush: js notranslate">let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>注</strong>: 再度、これは期待どおりに動作します。<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub でライブ実行</a>してみてください（<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">完全なソースコード</a>を見ることもできます）。</p>
+</div>
+
+<div class="warning">
+<p><strong>重要</strong>: while と do ... while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。そうしなければループは永遠に進み、ブラウザーはそれ強制的に停止させるか、クラッシュします。これは<strong>無限ループ</strong>と呼ばれます。</p>
+</div>
+
+<h2 id="Active_learning_Launch_countdown!" name="Active_learning_Launch_countdown!">アクティブラーニング: カウントダウンを開始します!</h2>
+
+<p>この練習では、出力ボックスへの簡単な起動カウントダウンを 10 から Blast off まで印字してください。具体的には、</p>
+
+<ul>
+ <li>10 から 0 までのループ。イニシャライザを提供します — <code>let i = 10;</code>.</li>
+ <li>各繰り返しに対して、新しい段落を作成し、それを出力&lt;div&gt;に追加します。これは、<code>const output = document.querySelector('.output');</code>を使用して選択したものです。コメントでは、ループ内のどこかで使用する必要がある 3 つのコード行を提供しました
+  <ul>
+   <li><code>const para = document.createElement('p');</code> — 新しいパラグラフを作成します</li>
+   <li><code>output.appendChild(para);</code> — 出力の <code>&lt;div&gt;</code>にパラグラフを追加します。</li>
+   <li><code>para.textContent =</code> — パラグラフ内のテキストを、イコールの後の右辺においたものにする。</li>
+  </ul>
+ </li>
+ <li>反復回数が異なると、その反復の段落に異なるテキストを入れる必要があります（条件文と複数の <code>para.textContent =</code> 行が必要です）。
+  <ul>
+   <li>数字が 10 の場合、パラグラフに "Countdown 10" と出力する。</li>
+   <li>数字が 0 の場合、パラグラフに "Blast off!" と出力する。</li>
+   <li>その他の数字では、パラグラフにその数字を出力する。</li>
+  </ul>
+ </li>
+ <li>イテレーターを含めることを忘れないでください！ですが、この例では各反復の後にカウント(アップではなく)ダウンするため、<code>i++</code> は要らないでしょう — 減少方向にどうやって反復しますか？</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: あなたがループ(例えば (while(i&gt;=0))からタイピングを始めると、ブラウザが固まってしまうかもしれません。終了条件をまだ入力していないからです。注意して下さい。この問題に対処するにはコメントの中にコードを書き始めて、完了してからコメントを削除することです。</p>
+</div>
+
+<p>間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。</p>
+
+<div class="hidden">
+<h6 id="Active_learning" name="Active_learning">Active learning</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
+let output = document.querySelector('.output');
+output.innerHTML = '';
+
+// let i = 10;
+
+// const para = document.createElement('p');
+// para.textContent = ;
+// output.appendChild(para);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+let jsSolution = 'const output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i &gt;= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Active_learning_Filling_in_a_guest_list" name="Active_learning_Filling_in_a_guest_list">アクティブラーニング: ゲストリストに記入する</h2>
+
+<p>この演習では、配列に格納された名前のリストを取得して、それらをゲストリストに入れることが必要です。しかし、これはそれほど簡単ではありません — 彼らは貪欲で失礼で、常にすべての食べ物を食べるので、私たちはフィルとローラを入れさせたくありません！ 私たちは 2 つのリストを持っています。1 つは承認するゲストのためのもの、もう 1 つは拒否するゲストのためのものです。<br>
+ <br>
+ 具体的には、</p>
+
+<ul>
+ <li>0 から <code>people</code> 配列の長さまで反復するループを作成します。<code>let i = 0;</code> の初期化処理で始める必要がありますが、どのような条件が必要ですか？</li>
+ <li>各ループ反復中に、条件文を使用して現在の配列項目が "Phil" または "Lola" に等しいかチェックします。
+  <ul>
+   <li>そうである場合は、<code>refused</code> パラグラフの <code>textContent</code> の最後に配列項目を連結し、その後にカンマとスペースを続けます</li>
+   <li>そうでない場合は、配列項目を、<code>admitted</code> パラグラフの <code>textContent</code> の末尾に連結し、その後にカンマとスペースを続けます</li>
+  </ul>
+ </li>
+</ul>
+
+<p>私たちはすでにあなたに次のものを提供しました：</p>
+
+<ul>
+ <li><code>let i = 0;</code> — イニシャライザー</li>
+ <li><code>refused.textContent +=</code> — <code>refused.textContent</code> の後に文字を連結する開始行</li>
+ <li><code>admitted.textContent +=</code> — <code>admitted.textContent</code> の後に文字を連結する開始行</li>
+</ul>
+
+<p>特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか？ヘルプのため<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a>の記事を見てみてください。<br>
+ <br>
+ 間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。</p>
+
+<div class="hidden">
+<h6 id="Active_learning_2" name="Active_learning_2">Active learning 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
+  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
+  &lt;p class="refused"&gt;Refuse: &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+const admitted = document.querySelector('.admitted');
+const refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+
+// let i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+const jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  const scrollPos = textarea.scrollTop;
+  const tcaretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Which_loop_type_should_you_use" name="Which_loop_type_should_you_use">どのタイプのループを使用しますか？</h2>
+
+<p>基本的な用途では for、while、do ... while ループはほぼ互換性があります。それらはすべて同じ問題を解決するために使用することができます。どちらを使用するかは、あなたの個人的な好みに大きく左右されます。これは、どれが最も覚えやすいか、最も直感的かということです。それらをもう一度見てみましょう。</p>
+
+<p>まずは <code>for</code>:</p>
+
+<pre class="notranslate">for (初期化処理; 条件; 最後の式) {
+  // 実行するコード
+}</pre>
+
+<p><code>while</code>:</p>
+
+<pre class="notranslate">初期化処理
+while (条件) {
+  // 実行するコード
+
+  最後の式
+}</pre>
+
+<p>そして最後は <code>do...while</code>:</p>
+
+<pre class="notranslate">初期化処理
+do {
+  // 実行するコード
+
+  最後の式
+} while (条件)</pre>
+
+<p>少なくとも最初は <code>for</code> から始めることをお勧めします。すべてを覚えておくことが簡単だからです。初期化処理、条件、最後の式をすべて括弧内にきちんと入れなければならないので、それらがどこにあるかや見落としていないことの確認が簡単です。</p>
+
+<div class="note">
+<p><strong>注</strong>: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度な<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">ループと反復処理ガイド</a>をお読みください。</p>
+</div>
+
+<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
+
+<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops">Test your skills: Loops</a> を見てください。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>この記事では、背後にある基本的な概念と、JavaScript でコードをループする際に使用できるさまざまなオプションについて説明しました。今はループが反復コードを処理するための良い仕組みである理由がはっきり分かり、自身の例で使用できることを誇らしく思うでしょう。<br>
+ <br>
+ あなたが理解できなかったことがあれば、記事をもう一度読んだり、ヘルプを求めて<a href="/ja/docs/Learn#Contact_us">私たちに連絡</a>してください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">ループと反復処理</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for文のリファレンス</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/while">while</a> と <a href="/ja/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> リファレンス</li>
+ <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/break">break</a> と <a href="/ja/docs/Web/JavaScript/Reference/Statements/continue">continue</a> リファレンス</li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — 高度なループのベストプラクティス</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>
diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html
new file mode 100644
index 0000000000..e9a13429b5
--- /dev/null
+++ b/files/ja/learn/javascript/building_blocks/return_values/index.html
@@ -0,0 +1,201 @@
+---
+title: 関数の戻り値
+slug: Learn/JavaScript/Building_blocks/Return_values
+tags:
+  - リターン
+  - リターン値
+  - 戻り値
+  - 返り値
+  - 返却値
+  - 関数
+translation_of: Learn/JavaScript/Building_blocks/Return_values
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary"><span class="seoSummary">このコースでの関数の学習を終えるために、最後に議論しておくべき関数についての大事なコンセプトがあります。それは戻り値です。関数によっては意味のある値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、あなたのコードの中でどのように利用するのか、またどのように関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシー、基本的な HTML と CSS の知識、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript初級レベルの知識</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数の知識</a></td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>関数の戻り値とその使い方を理解すること</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_are_return_values" name="What_are_return_values">戻り値とは？</h2>
+
+<p><strong>戻り値</strong>は、その名が示すとおり関数の実行が完了した時に返される値です。戻り値についてそこまで意識してこなかったかもしれませんが、これまでに何度も戻り値を見てきているはずです。</p>
+
+<p>以下の見覚えのある例を見てみましょう (このシリーズの<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">過去の記事</a>より) 。</p>
+
+<pre class="brush: js notranslate">let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');
+console.log(newString);
+// 文字列の replace() 関数は文字列を受け取り、
+// 一方の部分文字列をもう一方の部分文字列に置き換え、
+// 置き換えられた新しい文字列を返します。
+</pre>
+
+<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> 関数が <code>myText</code> という文字列の上で実行され、2 つの引数が渡されています:</p>
+
+<ol>
+ <li>置換される部分文字列 ('string')。</li>
+ <li>置換する部分文字列 ('sausage')。</li>
+</ol>
+
+<p>この関数が完了 (実行が終了) した時に、関数は置換された新しい文字列を値として返します。上記のコードでは、この戻り値を <code>newString</code> 変数に代入しています。</p>
+
+<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> 関数についての MDN のリファレンスページには、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">戻り値</a> というセクションがあります。関数によって返される値が何か知り把握することはとても大事です。従って、可能な限りこちらも見るようにしてください。</p>
+
+<p>関数によっては何も値を返しません (この場合、リファレンスページでは戻り値を <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/void">void</a></code> または <code><a href="/ja/docs/Glossary/undefined">undefined</a></code> として記載しています)。たとえば、前の記事で作った <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage()</a> 関数では、関数が実行されたときに特定の値は返されていません。ただスクリーンのどこかにボックスの表示を作っているだけです。</p>
+
+<p>一般的に、戻り値は関数がある種の計算をしている途中の段階で使用されます。 関数で計算する必要があるいくつかの値を含む最終結果を取得したいとします。関数は値を計算した後、結果を返すことができるため、変数に格納できます。この変数は、計算の次の段階で使用できます。</p>
+
+<h3 id="Using_return_values_in_your_own_functions" name="Using_return_values_in_your_own_functions">オリジナル関数での戻り値の使い方</h3>
+
+<p>カスタム関数から値を返すために、必要なことは、<a href="/ja/docs/Web/JavaScript/Reference/Statements/return">return</a> というキーワードを使うことです。直近の <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例でこれを見たでしょう。<code>draw()</code> 関数は 100 のランダムな円を HTML 内に表示します。<br>
+ {{htmlelement("canvas")}}:</p>
+
+<pre class="brush: js notranslate">function draw() {
+  ctx.clearRect(0, 0, WIDTH, HEIGHT);
+  for (let i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>ループの繰り返しの中で、現在の円の <em>x 座標</em>、<em>y 座標</em>、<em>半径</em>それぞれのランダムな値を生成するために <code>random()</code> 関数に対して3 回の呼び出しが行われます。<code>random()</code> 関数はひとつの引数 (整数) を受け取り、<code>0</code> からその受け取った数値までの乱数を返します。以下のようになります。</p>
+
+<pre class="brush: js notranslate">function random(number) {
+  return Math.floor(Math.random() * number);
+}
+</pre>
+
+<p>次のように書くことも可能です。</p>
+
+<pre class="brush: js notranslate">function random(number) {
+  const result = Math.floor(Math.random() * number);
+  return result;
+}
+</pre>
+
+<p>しかし最初のものの方がよりコンパクトで、効率よく書けています。</p>
+
+<p>関数が呼び出されるたびに、<code>Math.floor(Math.random() * number)</code> の計算の結果が返されます。この戻り値は、関数が呼び出された場所に現れて、コードが続行されます。</p>
+
+<p>したがって、以下を実行すると:</p>
+
+<pre class="brush: js notranslate">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+</pre>
+
+<p>この時、3 つの <code>random()</code> がそれぞれ <code>500</code>、<code>200</code>、<code>35</code> と値を返した場合、このコードは実際には次のように実行されたことになります。</p>
+
+<pre class="brush: js notranslate">ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+</pre>
+
+<p>コード上の関数の呼び出しがまず行われ、その戻り値が関数の呼び出しの代わりとなり、その後にコードそのものが実行されます。</p>
+
+<h2 id="Active_learning_our_own_return_value_function" name="Active_learning_our_own_return_value_function">実践: 戻り値を返す関数を作る</h2>
+
+<p>戻り値を返すオリジナルな関数を書いてみましょう。</p>
+
+<ol>
+ <li>まず最初に GitHub から <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> ファイルをローカル環境にコピーします。このファイルはシンプルな HTML のページで、文字列入力用の {{htmlelement("input")}} フィールドとパラグラフ（段落）要素を含んでいます。また、{{htmlelement("script")}} 要素があり、この中でページ内の HTML 要素の参照を 2 つの変数で保持させています。このページに対して、テキストボックスに数値を入力したら、入力した数値と関連のある異なる数値を下のパラグラフ要素に表示させるようにしていきます。</li>
+ <li>いくつかの関数を <code>&lt;script&gt;</code> 要素に追加していきましょう。既に記述されている 2 行の <a href="/ja/docs/Web/JavaScript">JavaScript</a> のコードの下に、以下の関数定義を追加します。
+  <pre class="brush: js notranslate">function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  if (num &lt; 0) return undefined;
+  if (num == 0) return 1;
+  let x = num - 1;
+  while (x &gt; 1) {
+    num *= x;
+    x--;
+  }
+  return num;
+}</pre>
+  <code>squared()</code> 関数と <code>cubed()</code> 関数は大変わかりやすいでしょう。引数として渡された値の 2 乗や 3 乗を返しています。<code>factorial()</code> 関数は渡された数の<a href="https://ja.wikipedia.org/wiki/%E9%9A%8E%E4%B9%97">階乗</a>を返しています。</li>
+ <li>次に input に入力された数値を出力する処理を追加していきます。イベントハンドラーを既存の関数の下に記述しましょう。
+  <pre class="brush: js notranslate">input.onchange = function() {
+  const num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}</pre>
+
+  <p>ここでは <code>onchange</code> イベントハンドラーを作っています。これは文字列入力での <code>change</code> イベントが発火した時に実行されます。つまり新しい値が <code>input</code> に入力され、送信された時です (たとえば値を入力し、<kbd>Tab</kbd> か <kbd>Return</kbd> を押して入力からフォーカスを外す時)。この無名関数が実行されると、<code>input</code> に入力された値が <code>num</code> 定数に代入されます。<br>
+   <br>
+   次に、条件付きテストを行うようにします。もし入力された値が数値でなければ、パラグラフ要素にエラーメッセージを出力します。テストでは、式 <code>isNaN(num)</code> が true を返すかどうか見るようにします。一般的に値が数値でないかをテストする際には <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></code> 関数を使います。この関数では、渡された値が数値でなければ <code>true</code> を返し、数値であれば <code>false</code> を返します。<br>
+   <br>
+   もしテストが <code>false</code> を返した場合、<code>num</code> の値は数値です。したがって、数値の 2 乗、3 乗、階乗の値を示す文が、パラグラフ要素内に出力されます。その出力する文章内で必要とする値を計算するために <code>squared()</code> 関数、<code>cubed()</code> 関数、<code>factorial()</code> 関数を呼んでいます。</p>
+ </li>
+ <li>
+  <p>コードを保存して、それをブラウザーで表示してみましょう。</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>注意</strong>: もしサンプルがうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub 上の完成版</a>と比較などしてみてください（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">実際に動かして確認もできます</a>）。またはお問い合わせください。</p>
+</div>
+
+<h2 id="あなたの番です!">あなたの番です!</h2>
+
+<p>この時点で、独自の関数をいくつか書き出してライブラリに追加してみましょう。数値の平方根や立方根はどうですか？また、特定の半径を持つ円の円周はどうでしょうか？</p>
+
+<p>関数に関する追加のヒント:</p>
+
+<ul>
+ <li>関数の中に<em>エラーハンドリング</em>を書く別の例を見てみましょう。一般に、必要な引数が検証されていること、および省略可能な引数に何らかのデフォルト値が渡されていることをチェックすることは良い考え方です。このようにしてプログラムがエラーを投げることを減らせます。</li>
+ <li><em>関数のライブラリ</em>を作るアイデアについて考えてみてください。プログラミングのキャリアを積んでいくと、何度も同じ類のことを繰り返し行うことになるでしょう。このようなことに対処するために、自分独自のユーティリティ関数のライブラリを作成することは良いアイデアです。新しいコードにコピーしたり、必要に応じて HTML ページにそれを適用したりすることができます。</li>
+</ul>
+
+<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>
+
+<p>この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>以上、関数は楽しく、非常に便利で、構文や機能についてまだまだ話すことはたくさんありますが、それらはかなり理解しやすいものです。</p>
+
+<p>もし何か理解できなかったことがありましたら、何度もこの記事を読み込むか、または<a href="/ja/docs/Learn#Contact_us">お問い合わせ</a>ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions">関数</a> — より高度な関数に関連した情報を網羅した詳細なガイド。</li>
+ <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Callback functions in JavaScript</a> — 一般的なJavaScriptのパターンは、ある関数を別の関数に<em>引数として</em>渡すことです。それは受け取った関数の中で呼び出されます。これについては、このコースの範疇を少し超えていますが、すぐにでも勉強する価値はあります。</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
+</ul>