path: root/files/ja/learn/javascript/building_blocks/image_gallery/index.html

---
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>