path: root/files/ja/learn/javascript/first_steps/silly_story_generator/index.html

---
title: バカ話ジェネレーター
slug: Learn/JavaScript/First_steps/Silly_story_generator
tags:
  - Arrays
  - Assessment
  - CodingScripting
  - JavaScript
  - Numbers
  - Operators
  - Variables
  - 'l10n:priority'
  - strings
  - 初心者
  - 学習
translation_of: Learn/JavaScript/First_steps/Silly_story_generator
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください！</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>評価試験を開始するには...</p>

<ul>
 <li>GitHubからサンプル用の <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">HTML ファイルを取って</a>きて自分のコンピュータの新しいディレクトリーに <code>index.html</code> という名前で保存します。ここには見た目をきれいにするため、CSS も含まれています。</li>
 <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">この生テキストを含むページ</a>に移動してどこか別のブラウザタブで開いたままにしておきます。後で必要となります。</li>
</ul>

<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 パネルを持たない場合、HTML ページ内の <code>&lt;script&gt;</code> 要素内に書いても問題ありません。</p>
</div>

<h2 id="Project_brief" name="Project_brief">プロジェクトの要点</h2>

<p>HTML および CSS と少しのテキストと JavaScript 関数がありますね。JavaScript を必要なだけ書いて、下記のような動作をするプログラムを書きましょう。</p>

<ul>
 <li>"Generate random story" ボタンが押された時にバカな話を生成する。</li>
 <li>バカな話を生成するボタンが押される前に "Enter custom name" のテキストフィールドに名前が入力されていた場合には、既定の "Bob" という名前を入力された名前に置き換える。</li>
 <li>バカな話を生成するボタンが押される前に UK のラジオボタンがチェックされていた場合のみ、既定の US (米国) の重さと気温を UK (英国) の同等な単位に変換する。</li>
 <li>ボタンが再度 (何度でも) 押されたら、別のランダムなバカ話を生成する。</li>
</ul>

<p>下記のスクリーンショットは完成したプログラムが出力する例を表しています:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>これ以上のアイデアを与えるには<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">完成プログラムの例を見てください</a> (ソースコードは覗かないで！)</p>

<h2 id="Steps_to_complete" name="Steps_to_complete">完成させるステップ</h2>

<p>以下の項目が達成すべきリストです。</p>

<p>基本的なセットアップ</p>

<ol>
 <li><code>index.html</code> ファイルと同じディレクトリーに <code>main.js</code> を作ります。</li>
 <li>{{htmlelement("script")}} 要素を使用して、HTML ファイルに <code>main.js</code> への参照を外部 JavaScript として適用します。{{htmlelement("script")}} 要素は <code>&lt;/body&gt;</code> タグの直前に配置します。</li>
</ol>

<p>最初の変数と関数</p>

<ol>
 <li>先ほどのテキストファイル内の "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" という見出しの直後にあるコードをコピーして <code>main.js</code> の先頭に貼り付けます。これで "Enter custom name" テキストフィールド (<code>customName</code>) 、"Generate random story" ボタン (<code>randomize</code>) 、HTML の body の下のほうにある {{htmlelement("p")}} 要素 (<code>story</code>) への参照を保持することができます。さらに <code>randomValueFromArray()</code> という、引数として配列を取りその配列からランダムに 1 つの項目を戻り値として返す関数が使えるようになります。</li>
 <li>次にテキストファイルの 2番目のセクションを見てみましょう。"2. RAW TEXT STRINGS" という見出しのところです。このプログラムの入力となる文字列が書かれています。<code>main.js</code> の内部で使用できるように、これらの文字列を変数に保持してください。
  <ol>
   <li>先頭の長い長い文字列を <code>storyText</code> という変数に格納します。</li>
   <li>3 つセットになっている最初の文字列の組を <code>insertX</code> という配列に格納します。</li>
   <li>2組目の文字列を <code>insertY</code> という配列に格納します。</li>
   <li>3組目の文字列を <code>insertZ</code> という配列に格納します。</li>
  </ol>
 </li>
</ol>

<p>イベントハンドラーと未完成の関数の配置:</p>

<ol>
 <li>テキストファイルに戻ります。</li>
 <li>"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" という見出しの直後にあるコードをコピーして <code>main.js</code> ファイルの最後に貼り付けます。これで、
  <ul>
   <li><code>randomize</code> 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に <code>result()</code> 関数が実行されるようになります。</li>
   <li>部分的に実装されている <code>result()</code> 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。</li>
  </ul>
 </li>
</ol>

<p><code>result()</code> 関数の作成</p>

<ol>
 <li><code>newStory</code> という変数を作り、<code>storyText</code> の値を <code>newStory</code> 変数に格納します。これはボタンが押された場合に、毎回新しい話を作り出すために必要となります。もし <code>storyText</code> 変数自体に変更を加えてしまうと一度しか面白い話が生成できなくなってしまいます。</li>
 <li><code>xItem</code>、<code>yItem</code>、<code>zItem</code> という変数を 3 つ作成し、それぞれ対応する配列で呼び出した <code>randomValueFromArray()</code> の戻り値を設定します (それぞれの配列に含まれる文字列がランダムに選ばれます)。例えば、関数を呼び出して <code>insertX</code> から一つの文字列を取得するには <code>randomValueFromArray(insertX)</code> のように書きます。</li>
 <li>次に <code>newStory</code> 文字列内の <code>:insertx:</code>、<code>:inserty:</code>、<code>:insertz:</code> という 3 か所のプレースホルダーをそれぞれ <code>xItem</code>、<code>yItem</code>、<code>zItem</code> に格納されている文字列で置き換えます。ここでは適切なメソッドを使用して、<code>newStory</code> に対して何度メソッドを呼び出しても <code>newStory</code> 自体の値を変えずに置換された文字列が手に入るようにしてください。これでボタンが何度押されても、プレースホルダーの値をランダムなバカ話で置き換えることができます。もう少しヒントを出すと、そのメソッドは見つけた最初の部分文字列だけを置き換えるため、同じ部分文字列を置換するためには 2 回メソッドを呼び出す必要があるでしょう。</li>
 <li>最初の <code>if</code> ブロックで、<code>newStory</code> の文字列内で見つかる 'Bob' という文字列を <code>name</code> 変数の値で置換するため、別の文字列置換のメソッド呼び出し追加します。このブロック内では、「もし ( if ) <code>customName</code> テキストフィールドに何かが入力されていれば、Bob をその文字列で置き換える」ということを言っています。</li>
 <li>次の <code>if</code> ブロックの中では、<code>uk</code> のラジオボタンが選択されているかどうかを調べています。もし選択されているのなら、重さと温度の単位をポンド・華氏から、ストーン・摂氏に変換したいと思います。そのために必要なことは...
  <ol>
   <li>ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。</li>
   <li><code>weight</code> 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして <code>' stone'</code> (ストーン) を <code>Math.round()</code> の結果に対して、その後ろに結合します。</li>
   <li><code>temperature</code> 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには <code>' centigrade'</code> (摂氏～度) という文字を <code>Math.round()</code> の結果に対して、後ろに結合します。</li>
   <li>上記2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を <code>temperature</code> 変数の内容に、'300 pounds' を <code>weight</code> 変数の内容にそれぞれ置換します。</li>
  </ol>
 </li>
 <li>最後に、関数の下から 2行目にある、<code>story</code> 変数の <code>textContent</code> プロパティ(段落を参照している) を、<code>newStory</code> 変数の内容で置き換えます。</li>
</ol>

<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントと tips</h2>

<ul>
 <li>JavaScript を HTML に適用する以外に、HTML を変更する必要は全くありません。</li>
 <li>もし、JavaScript が HTML に適切に適用されているかどうかを知りたければ、JavaScript ファイルから一時的に全てのコードを削除して、確実に何かが起きるようなコードを追加して、JavaScript ファイルを保存して HTML ファイルを更新してみましょう。次の例は {{htmlelement("html")}} 要素の背景色を赤くするコードです。JavaScript が適切に HTML に適用されていれば、ブラウザのウィンドウが真っ赤になることでしょう。
  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
 </li>
 <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> は JavaScript の組み込みメソッドで、計算結果を整数値に四捨五入します。</li>
 <li>置き換えなければならない文字列のインスタンスが３つあります。 <code>replace()</code> メソッドを複数回繰り返すか、正規表現を使用するかします。具体的には、 <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> とするとすべての 'love' のインスタンスを 'like' に置き換えます。なお、 String は変化しないことに注意してください。</li>
</ul>

<h2 id="Assessment" name="Assessment">評価</h2>

<p>もし特定の組織の元でこのコースを受けているのなら、先生やメンターに出来たものを見せて、評価をお願いしてみましょう。もし自分だけでやっているのなら、<a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">この評価試験のスレッド</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/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2>

<ul>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li>
</ul>