diff options
Diffstat (limited to 'files/ja/learn/javascript/first_steps')
10 files changed, 3843 insertions, 0 deletions
diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.html b/files/ja/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..3281944f5b --- /dev/null +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,610 @@ +--- +title: JavaScriptへの最初のダイブ +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - CodingScripting + - Conditionals + - JavaScript + - Objects + - Operators + - events + - 'l10n:priority' + - 初心者 + - 変数 + - 学習 + - 記事 + - 関数 +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、JavaScript とは何かを知っている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>簡単な JavaScript を書いてみて、JavaScript のプログラムを書くために必要な知識を会得する。</td> + </tr> + </tbody> +</table> + +<p>ここでは、JavaScript (とその他のプログラミング言語) がどのように動くのかという高度なコンセプトを紹介したいので、一度ですべての詳細を理解する必要はありません。詳細については続く記事にてご紹介しますので！</p> + +<div class="note"> +<p><strong>注記</strong>: JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、コンセプトは大体同じです。</p> +</div> + +<h2 id="Thinking_like_a_programmer" name="Thinking_like_a_programmer">プログラマーのように考える</h2> + +<p>プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。</p> + +<p>これには努力・プログラミング文法の経験・練習に加え、少しの想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。</p> + +<p>まずはそれを念頭に置いてから、この記事で作るプログラムの実例を見てみましょう。さらにその後、具体的な手順に落とし込む方法について学習しましょう。</p> + +<h2 id="Example_—_Guess_the_number_game" name="Example_—_Guess_the_number_game">例: 数字当てゲーム</h2> + +<p>この記事では、以下に示す簡単なゲームを作る方法を紹介します。</p> + +<div class="hidden"> +<h6 id="Top_hidden_code" name="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html line-numbers language-html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>数字当てゲーム</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>数字当てゲーム</h1> + <p>1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。</p> + <div class="form"> <label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="予想を入力" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // JavaScript はここから +<code class="language-html"><span class="script token"><span class="language-javascript token"><span class="keyword token"> let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></span></span></code> + function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = '前回の予想: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'おめでとう! 正解です!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ゲームオーバー!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = '間違いです!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。'; + } + } + + <code class="language-html"><span class="script token"><span class="language-javascript token">guessCount<span class="operator token">++</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + guessSubmit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> checkGuess<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + resetButton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + resetButton<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Start new game'</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span> + resetButton<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> resetGame<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">function</span> <span class="function token">resetGame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> resetParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.resultParas p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span> <span class="punctuation token">;</span> i <span class="operator token"><</span> resetParas<span class="punctuation token">.</span>length <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + resetParas<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + resetButton<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span> + guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'white'</span><span class="punctuation token">;</span> + randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>さあ、ゲームで遊んでみてください。次に進む前にゲームに慣れておきましょう。</p> + +<p>上司から、次のように作るゲームの概要を聞いたところを想像してみてください。</p> + +<blockquote> +<p>数字を予想する単純なゲームを作って欲しい。ランダムな 1 から 100 の数字を決めて、プレイヤーに 10 回以内に当ててもらうゲームだ。プレイヤーには予想する都度、正解か間違いかを表示する。もしプレイヤーが間違っていれば、プレイヤーが予想した数字に応じて、大きすぎるか小さすぎるかを表示する。また、プレイヤーの前回の予想がどうだったかも表示する。ゲームはプレイヤーの予想が正しかった場合、もしくは回数の上限に達した場合に終了する。ゲームが終了したら、プレイヤーはもう一度プレイ開始できるようにする。</p> +</blockquote> + +<p>できるだけプログラマーのように考えると、この概要から最初に行うべきことは、簡潔な実行可能な単位に分割することです。</p> + +<ol> + <li>1 から 100 までの数字をランダムに一つ生成する。</li> + <li>プレイヤーの予想した回数を記録する。最初は 1 回から。</li> + <li>プレイヤーが数字が何かを予想する方法を用意する。</li> + <li>予想が入力されたら、プレイヤーが以前の予想を見られるように、どこかに記録する。</li> + <li>入力された数字が正しいかどうかを調べる。</li> + <li>入力された数字が正しい場合... + <ol> + <li>正解したお祝いのメッセージを表示する。</li> + <li>プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)</li> + <li>プレイヤーが次のゲームを始められるようなコントロールを表示する。</li> + </ol> + </li> + <li>プレイヤーの予想が間違いで、予想回数の上限にはまだ達していない場合... + <ol> + <li>プレイヤーが間違っていることを表示する。</li> + <li>次の予想を入力できるようにする。</li> + <li>予想回数に 1 を加算する。</li> + </ol> + </li> + <li>プレイヤーの予想が間違いで、予想回数の上限に達した場合... + <ol> + <li>プレイヤーにゲームオーバーであることを伝える。</li> + <li>プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)</li> + <li>プレイヤーが次のゲームを始められるようなコントロールを表示する。</li> + </ol> + </li> + <li>ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。</li> +</ol> + +<p>さあ、先に進みましょう。この手順をどのようにコードにするのか見て、JavaScript の機能を探求していきましょう。</p> + +<h3 id="Initial_setup" name="Initial_setup">まず初めに</h3> + +<p>チュートリアルを開始するにあたり、自分のコンピューターに <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> ファイル (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">こちらでデモが見られます</a>) をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。</p> + +<p>コードを入力するのはすべて HTML の一番下にある {{htmlelement("script")}} 要素の中です。</p> + +<pre class="brush: html notranslate"><script> + + // JavaScript をここに書きます + +</script> +</pre> + +<h3 id="Adding_variables_to_store_our_data" name="Adding_variables_to_store_our_data">データを保持する変数を追加する</h3> + +<p>始めましょう。まず、{{htmlelement("script")}} 要素の中に以下の内容を書いてみてください。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + +<span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></code></pre> + +<p>上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 <code>let</code> (か <code>var</code>) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> + +<p>等号記号 ( <code>=</code> ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。</p> + +<p>この例では:</p> + +<ul> + <li>最初の変数 ( <code>randomNumber</code> ) には数学的なアルゴリズムにより計算された 1 から 100 までのランダムな数字が代入されます。</li> + <li>続く 3 つの変数 ( <code>guesses</code>、<code>lastResult</code>、<code>lowOrHi</code> ) には、以下に示す HTML の段落の場所がそれぞれに保持されます。後ほど段落に値を追加するために使用します。 (すべて<code><div></code> 要素内にあり、後にゲーム再開時にリセットするのにすべてを選択するのに使われるのに注意してください): + <pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>resultParas<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guesses<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastResult<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lowOrHi<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + </li> + <li>次の 2 つの定数はにはテキスト入力フォームおよび送信ボタンへの参照が保持され、後で予想の送信をコントロールする際に使用されます。 + <pre class="brush: html notranslate"><label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="予想を投稿" class="guessSubmit"></pre> + </li> + <li>最後の 2 つの変数はプレイヤーが予想した回数を記録するため 1 を (プレイヤーが何回予想したかの回数を追跡します) 、そしてまだ存在していない(あとで追加する)リセットボタンへの参照を保持します。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="https://developer.mozilla.org/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> +</div> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>次に、以下のコードを先ほどの JavaScript に追加してください。</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('ここはプレースホルダです'); +}</pre> + +<p>関数は再利用可能なコードのかたまりです。何度も実行することができ、同じコードを書く手間を省けます。これはとても便利です。関数の書き方 (定義の仕方) はいくつかありますが、今回は集中するために、一つの簡単な書き方だけを使用します。ここでは <code>function</code> キーワードに続いて関数の名前、括弧 ( <code>()</code> )、中括弧 ( <code>{ }</code> )が続く書き方で定義しました。中括弧の中に、関数を呼ぶたびに実行されるコードを書きます。</p> + +<p>関数を実行したい場合には、関数の名前に続いて括弧を書きます。</p> + +<p>それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>を開いてください。そして次のコードを実行します。</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p><kbd>Return</kbd>/<kbd>Enter</kbd> を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。</p> + +<div class="note"> +<p><strong>注記</strong>: 関数についても<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> +</div> + +<h3 id="Operators" name="Operators">演算子</h3> + +<p>JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。</p> + +<p>コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 <kbd>Return</kbd>/<kbd>Enter</kbd> キーを押してください。結果が表示されるはずです。</p> + +<p>まずは算術演算子の例を見てください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加算</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減算</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乗算</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除算</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>また、 <code>+</code> 演算子は 2 つの文字を繋げて一つにするときにも使います。(プログラミングでは文字列を<em>結合</em>すると言います。) 下の例も試してみてください。</p> + +<pre class="brush: js notranslate">let name = 'ビンゴさん'; +name; +let hello = 'が、こんにちは！と言っています。'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p>累算<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> + +<pre class="brush: js notranslate">name += 'が、こんにちは！と言っています。';</pre> + +<p>のように書いたとき、次と同じです:</p> + +<pre class="brush: js notranslate">name = name + 'が、こんにちは！と言っています。';</pre> + +<p>true/false テスト（例えば条件内 - {{anch("Conditionals", "below")}}参照）を実行しているとき、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比較演算子</a>を使用します。例えば：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>厳密に等しい (全く同じかどうか)</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">5</span> <span class="operator token">===</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">4</span> <span class="comment token">// false</span> +<span class="string token">'Chris'</span> <span class="operator token">===</span> <span class="string token">'Bob'</span> <span class="comment token">// false</span> +<span class="number token">5</span> <span class="operator token">===</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">3</span> <span class="comment token">// true</span> +<span class="number token">2</span> <span class="operator token">===</span> <span class="string token">'2'</span> <span class="comment token">// false; number versus string</span></code></pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>等しくない (違うかどうか)</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">5</span> <span class="operator token">!==</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">4</span> <span class="comment token">// true</span> +<span class="string token">'Chris'</span> <span class="operator token">!==</span> <span class="string token">'Bob'</span> <span class="comment token">// true</span> +<span class="number token">5</span> <span class="operator token">!==</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">3</span> <span class="comment token">// false</span> +<span class="number token">2</span> <span class="operator token">!==</span> <span class="string token">'2'</span> <span class="comment token">// true; number versus string</span></code></pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>小なり</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">6</span> <span class="operator token"><</span> <span class="number token">10</span> <span class="comment token">// true</span> +<span class="number token">20</span> <span class="operator token"><</span> <span class="number token">10</span> <span class="comment token">// false</span></code></pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>大なり</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">6</span> <span class="operator token">></span> <span class="number token">10</span> <span class="comment token">// false</span> +<span class="number token">20</span> <span class="operator token">></span> <span class="number token">10</span> <span class="comment token">// true</span></code></pre> + </td> + </tr> + </thead> +</table> + +<h3 id="Conditionals" name="Conditionals">条件式</h3> + +<p>先ほどの <code>checkGuess()</code> 関数に話を戻します。当然ですが、ただ単にプレースホルダメッセージを出したいわけではありませんよね。この関数にはプレイヤーの予想が正しいかどうかを調べて適切に返事をすることを望みます。</p> + +<p>それでは、今の <code>checkGuess()</code> 関数を以下のように書き換えてみましょう。</p> + +<pre class="brush: js notranslate">function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = '前回の予想: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'おめでとう! 正解です!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ゲームオーバー!!!'; + setGameOver(); + } else { + lastResult.textContent = '間違いです!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='今の予想は小さすぎです!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '今の予想は大きすぎです!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</pre> + +<p>たくさん書きましたね！各部分に分割して、それぞれの部分を詳細に見て何をしているか説明しましょう。</p> + +<ul> + <li>関数の最初の行 (上のコードの 2行目) で、<code>userGuess</code> という変数を宣言して、現在のテキストフィールドに入力された値をセットしています。そして、組み込みの <code>Number()</code> 関数を呼び出して、テキストフィールドに入力された値が間違いなく数値であることも確認しています。</li> + <li>次に、初めて条件分岐を伴うコードブロックが出てきます (3行目～5行目)。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は <code>if</code> キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が <code>true</code> となれば、中括弧の中にあるコードが実行されます。条件が <code>true</code> にならなければ、中括弧の次のコードまで移動します。今回の条件は <code>guessCount</code> 変数が <code>1</code> であるかどうかを判定しています。(つまり、プレイヤーの初回の予想かどうかを判定しているのです。) + <pre class="brush: js notranslate">guessCount === 1</pre> + もしそうなら、<code>guesses</code> 段落 ({{htmlelement("p")}}要素) の内容を "<samp>前回の予想: </samp>" に変更します。違うなら、何もしません。</li> + <li>6行目では、<code>guesses</code> 段落の最後にスペースを付けて、現在の <code>userGuess</code> 変数の値を追加しています。なので、予想が表示されるときにはスペースで区切られて表示されます。</li> + <li>次の部分 (8行目～24行目) には、確認すべきことがいくつかあります。 + <ul> + <li>最初の <code>if(){ }</code> は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した <code>randomNumber</code> 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する <code>setGameOver()</code> 関数を実行します。</li> + <li>今度は <code>else if(){ }</code> という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。</li> + <li>このコードに連なる最後のブロック (<code>else { }</code>) は、前の二つの条件がどちらも真とならなかった場合にのみ実行されます。(つまり、プレイヤーは間違えてはいるものの、予想回数が残っている場合です。) この場合、プレイヤーに予想が間違っていることを伝え、入力された数字が大きいか小さいかを伝えるため、さらなる条件の確認を行います。</li> + </ul> + </li> + <li>最後の 3行 (26行目～28行目) は、次の予想の入力を受け取るための準備です。<code>guessCount</code> 変数に 1 を加算して、プレイヤーの予想回数を数えます。(<code>++</code> はインクリメント演算子で、1 だけインクリメント(増加)します。) そして、入力フォームのテキストフィールドを空にしてからフォーカスを当て、プレイヤーの次の入力に備えます。</li> +</ul> + +<h3 id="Events" name="Events">イベント</h3> + +<p>ここまでで、<code>checkGuess()</code> 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。イベントが発生したことを聞き取る構成が<strong>イベントリスナー</strong>で、発生したイベントに反応して実行されるコードブロックが<strong>イベントハンドラー</strong>です。</p> + +<p><code>checkGuess()</code> 関数の下に、以下の一文を加えましょう。</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p><code>guessSubmit</code> ボタンに対して、イベントリスナーを追加しました。これは発生したことを知りたいイベントの種類 (この場合は <code>click</code>)と、イベントが発生した場合に実行するコード (この場合は <code>checkGuess()</code>) の 2 つの入力値 (<em>引数</em>と言います) を取る関数です。({{domxref("EventTarget.addEventListener", "addEventListener()")}}の中では括弧を書く必要はありません。)</p> + +<p>保存して再度コードを読み直してください。今度はきっとある程度まで動くはずです。ただし、まだ問題があります。もし正解したり、予想回数の上限に達してしまった場合には、ゲームが止まってしまうでしょう。なぜなら、ゲームが終わった時に実行されるべき関数 <code>setGameOver()</code> をまだ定義していないためです。さあ、足りないコードを書いてチュートリアルの機能を完成させましょう。</p> + +<h3 id="Finishing_the_game_functionality" name="Finishing_the_game_functionality">ゲームの機能を完成させる</h3> + +<p><code>setGameOver()</code> 関数をコードの一番下に追加して、中身を見てみましょう。これを JavaScript の一番下に追加します。</p> + +<pre class="brush: js notranslate">function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = '新しいゲームを始める'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</pre> + +<ul> + <li>最初の 2行は入力フォームのテキストフィールドとボタンの <code>disabled</code> プロパティを <code>true</code> に設定することで、入力できないようにしています。ゲーム終了後にユーザーがさらに予想を入力し、ゲームが予期しない動作をすることを防ぐために必要です。</li> + <li>さらに次の 3行では、新しい {{htmlelement("button")}} 要素を生成し、そのラベルに"<samp>新しいゲームを始める</samp>"という文言を設定し、HTML ページに追加しています。</li> + <li>最後の行では、上で生成したボタンがクリックされたときに <code>resetGame()</code> という関数が実行されるようにイベントリスナーを設定しています。</li> +</ul> + +<p>この関数も定義しなければなりませんね！もう一度、以下のコードを JavaScript のいちばん下に追加してください。</p> + +<pre class="brush: js notranslate">function resetGame() { + guessCount = 1; + + const resetParas = document.querySelectorAll('.resultParas p'); + for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</pre> + +<p>ちょっと長めのこのコードブロックは、プレイヤーが次のゲームができるように、ゲームを起動したときの状態に完全にリセットします。</p> + +<ul> + <li><code>guessCount</code> に 1 を代入して元に戻します。</li> + <li>情報段落のすべてを消去します。</li> + <li>リセットボタンをページから削除します。</li> + <li>入力フォームの要素を使用可能にして、新しい予想が入力できるようにテキストフィールドを空にしてフォーカスを設定します。</li> + <li>最終結果を表示している <code>lastResult</code> 段落の背景色を消去します。</li> + <li>同じ数字以外の数字でゲームができるように、新しいランダムな数字を再度生成します。</li> +</ul> + +<p><strong>ここまでで (単純ではありますが) 動くゲームの完成です。お疲れ様でした!</strong></p> + +<p>この記事では、あと少し説明しなければならない大事な機能が残っています。既に見ているはずですが気づいたでしょうか。</p> + +<h3 id="Loops" name="Loops">ループ (繰り返し)</h3> + +<p>上のコードでもう少し詳しく説明しなければならないのは、<a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。</p> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールの JavaScript コンソール</a> をもう一度開いて次のコードを入力してみましょう。</p> + +<pre class="brush: js notranslate">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>どうでしょうか。<samp>1</samp> から <samp>20</samp> の数字がコンソールに出力されましたね。これが繰り返しです。<code>for</code> ループには 3 つの入力値 (引数) が必要です。</p> + +<ol> + <li><strong>初期値</strong>: 上の例では、<code>i</code> を 1 からはじめましたが、どんな数字でもかまいません。さらに言えば、<code>i</code> という名前でなくともかまいません。ただし、ループでは短くて覚えやすいため、<code>i</code> という変数の名前がよく使われることを覚えておいてください。</li> + <li><strong>条件</strong>: 上の例では <code>i < 21</code> をループが継続する条件としました。つまりループは <code>i</code> が 21未満でなくなるまで継続します。<code>i</code> が 21 になったらループの実行が終了します。</li> + <li><strong>増分</strong>: 上の例では増分を <code>i++</code> と指定しています。つまり「<code>i</code> に 1 を足し」ます。ループは <code>i</code> が 21 になるまで(それは 2.の継続条件で説明しましたね) 、<code>i</code> の取りうる値について、それぞれ一度ずつ実行されます。今回の例では繰り返しのコードが実行される度に <code>i</code> の値を{{domxref("Console.log", "console.log()")}}を使用してコンソールに出力しています。</li> +</ol> + +<p>さて、それでは数字当てゲームに登場したループを見てみましょう。<code>resetGame()</code> 関数に以下の記述がありますね。</p> + +<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>このコードは <code><div class="resultParas"></code> に含まれるすべての {{htmlelement("p")}} 要素を {{domxref("Document.querySelectorAll", "querySelectorAll()")}} というメソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。</p> + +<h3 id="A_small_discussion_on_objects" name="A_small_discussion_on_objects">オブジェクトについて(簡単に)</h3> + +<p>オブジェクトについて説明する前に、プログラムに対して最後のちょっとした改良を加えてみましょう。JavaScript の書き出しの方にある <code>let resetButton;</code> のすぐ下に、以下の行を追記してファイルを保存します。</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>この行はページが読み込まれるとすぐ、 {{domxref("HTMLElement.focus", "focus()")}} メソッドを呼び出して、入力フォームの {{htmlelement("input")}} 要素に対して自動的にカーソル (フォーカス) を設定しています。つまり、ページが開いたと同時に、入力フォームを最初にクリックすることなくプレイヤーが予想を入力できるようにしているのです。本当にちょっとしたことですが、ユーザーにゲームで遊ぶためには何をすればよいかの視覚的なヒントを教えてあげることで、使い勝手が向上します。</p> + +<p>もう少し詳細に何が起こっているのか分析しましょう。JavaScript では、すべてのものはオブジェクトです。オブジェクトというのは 1 か所に関連する機能をまとめたものです。自分でオブジェクトを作ることもできますが、高度なことなので、このコースの大分後まで出てきません。今は簡単に、これを使うと多くの便利なことができるようになる、ブラウザーに含まれる組み込みオブジェクトについて説明します。</p> + +<p>この具体的なケースでは、HTML のテキスト入力フィールドを参照するために、最初に <code>guessField</code> 変数を作成しました。以下の行は最上部のあたりの変数定義で見つかります、</p> + +<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre> + +<p>この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。<code>querySelector()</code> はある情報 (必要な要素を選択する <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクタ</a>) を受け取ります。</p> + +<p><code>guessField</code> に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ (基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります) とメソッド (基本的にはオブジェクトの内部に保持されている関数のこと) にアクセスできるようになりました。ようやく {{htmlelement("input")}} 要素のメソッドの一つである <code>focus()</code> メソッドを使ってテキストフィールドにフォーカスを当てられます。</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>入力フォームの要素の参照を含まない変数に対しては、<code>focus()</code> は使用できません。例えば、<code>guesses</code> 変数には {{htmlelement("p")}} 要素への参照が入っていますし、<code>guessCount</code> には数値が入っています。</p> + +<h3 id="Playing_with_browser_objects" name="Playing_with_browser_objects">ブラウザーのオブジェクトで遊ぼう</h3> + +<p>少しブラウザーが持っているオブジェクトで遊んでみましょう。</p> + +<ol> + <li>まずブラウザーでプログラムを開いてください</li> + <li>次に<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツール</a>を開き、JavaScript コンソールのタブが開いたのを確認します</li> + <li><code>guessField</code> と入力してみてください。するとコンソールに {{htmlelement("input")}} 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました!</li> + <li>さらに下のように入力してみてください + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + <code>value</code> プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！</li> + <li>さらに続けて <code>guesses</code> と入力して <kbd>Return</kbd>/<kbd>Enter</kbd> を押します。{{htmlelement("p")}} 要素を含む変数がコンソールに表示されますね。</li> + <li>そして次のコードを入力します + <pre class="brush: js notranslate">guesses.value</pre> + コンソールには <code>undefined</code> (未定義) という文字が返ってきましたね。<code>value</code> というプロパティは {{htmlelement("p")}} 要素にはないためです。</li> + <li>パラグラフ内のテキストを変えたい場合には、{{domxref("Node.textContent", "textContent")}} プロパティを使用する必要があります。こうしてみます + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>ちょっと遊んでみましょう。下のコードをひとつづつ入力してみてください。 + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + ページ内に存在するすべての要素は <code>style</code> プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。</li> +</ol> + +<h2 id="Finished_for_now..." name="Finished_for_now...">ここで一息...</h2> + +<p>これで数字当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。(最後のプログラムは<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">こちらでも遊べます</a>。) もし作ったプログラムが動かなければ、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">ソースコード</a>と見比べてみてください。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/arrays/index.html b/files/ja/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..973a8511fa --- /dev/null +++ b/files/ja/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,568 @@ +--- +title: 配列 +slug: Learn/JavaScript/First_steps/Arrays +tags: + - CodingScripting + - JavaScript + - Join + - Pop + - Push + - 'l10n:priority' + - shift + - split + - unshift + - 初心者 + - 学習 + - 記事 + - 配列 +translation_of: Learn/JavaScript/First_steps/Arrays +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">このモジュールの最後に、配列について見ていきましょう。配列は 1 つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、JavaScript についての理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript において、配列とは何か、どのように操作するのかを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_an_array" name="What_is_an_array">配列とは何？</h2> + +<p>配列はたいてい「リストのようなオブジェクトである」と説明され、単一のオブジェクト内に複数の値をリストとして持っています。配列オブジェクトは変数に格納され、その他の型と同様に扱われます。異なるのはリスト内の値に個別にアクセスすることができ、繰り返しを用いて全ての値に同じことをするといった、リストとして便利で効率的に扱うことができます。商品とその価格の一覧を配列に保持し、その値をループして合計額を計算しつつ請求書にそれぞれの価格を表示して一番下に合計額を表示することもできるでしょう。</p> + +<p>もし配列がなかったとしたら、別々の変数にそれぞれの値を格納しなければならず、各変数を表示するのと計算するので別々に呼び出さなければならなかったでしょう。こうなると、書き出すのがとても長く、非効率的でエラーを起こしやすいプログラムとなるでしょう。例えば、10 個の項目を請求書に出すだけでも最悪ですが、それが 100 個や 1000 個だったらどうでしょう。この記事の最後に実例としてやってみましょう。</p> + +<p>前回までの記事と同様に、JavaScript コンソールに配列の基礎となるコード例を<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に入力しながら学びましょう。</p> + +<h3 id="Creating_an_array" name="Creating_an_array">配列を作る</h3> + +<p>配列を作るには、角括弧の中にカンマで区切ったリストの形式で項目を並べます。</p> + +<ol> + <li>買い物リストを配列に保持したいとき、次のようにします。下のコードをコンソールに入力してみましょう。 + <pre class="brush: js notranslate">let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺']; +shopping;</pre> + </li> + <li>この例では、配列の各項目は文字列ですが、配列には何でも格納することができることを頭に入れておきましょう。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができます。そして混ぜ合わせることも。すべて同じデータ型である必要はありません。 + <pre class="brush: js notranslate">let sequence = [1, 1, 2, 3, 5, 8, 13]; +let random = ['tree', 795, [0, 1, 2]];</pre> + </li> + <li>いくつか配列を作ってみましょう。それから先に進みます。</li> +</ol> + +<h3 id="Accessing_and_modifying_array_items" name="Accessing_and_modifying_array_items">配列の項目を取得し変更する</h3> + +<p>配列の各項目は<a href="/ja/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">文字列中の文字を取得したときのように</a>列で角括弧 (<code>[]</code>) を使用して取得することができます。</p> + +<ol> + <li>次のコードをコンソールに入力してください。 + <pre class="brush: js notranslate">shopping[0]; +// "パン"という値が戻ります</pre> + </li> + <li>そして、配列中の項目は単に新しい値を代入することで変更することが出来ます。 + <pre class="brush: js notranslate">shopping[0] = 'タヒーニ'; +shopping; +// ショッピングリストは[ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ]に変更されています。</pre> + + <div class="note"><strong>注</strong>: 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます！</div> + </li> + <li>配列の中に配列があるとき、その配列は多次元配列と呼ばれます。配列中の配列に含まれる項目には角括弧を繋げて書くことでアクセスすることができます。例えば、先ほどの例で出てきた <code>random</code> 変数に格納された配列の 3番目の項目のさらに 3番目の項目を取得するには以下のようにします。 + <pre class="brush: js notranslate">random[2][2];</pre> + </li> + <li>移動する前に、配列の例をいくつか変更してみてください。遊んでみて、何が動いて何がそうでないかを見てください</li> +</ol> + +<h3 id="Finding_the_length_of_an_array" name="Finding_the_length_of_an_array">配列の長さを調べる</h3> + +<p>ある配列の長さ (いくつの項目が配列中に存在するか) を知るには、文字列の (文字の) 長さを調べた時と全く同じようにします。{{jsxref("Array.prototype.length","length")}}プロパティを使用して長さを取得することができます。</p> + +<pre class="brush: js notranslate">sequence.length; +// 7 が返る</pre> + +<p>このプロパティはいろいろな使われ方をするのですが、最もよく使われるのは、配列中の全項目をループするために使用されます。次の例を見てください。</p> + +<pre class="brush: js notranslate">let sequence = [1, 1, 2, 3, 5, 8, 13]; +for (let i = 0; i < sequence.length; i++) { + console.log(sequence[i]); +}</pre> + +<p>ループについてはそのうち (<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a> の記事で) しっかりと学ぶ機会があるでしょうが、ここで簡単に説明すると上のコードは次のように動きます。</p> + +<ol> + <li>配列中の項目 0 番よりループを開始します。</li> + <li>項目番号が配列の長さと同じ数になったら、繰り返しを終了します。これで配列中の要素がいくつであっても動くようになります。今回の場合は、項目の番号が 7 のときに終了します(ループでカバーしたい最後の項目番号は 6 なので、これで問題ありません)。</li> + <li>そして、各項目を <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code> メソッドを使用してブラウザーのコンソールに出力しています。</li> +</ol> + +<h2 id="Some_useful_array_methods" name="Some_useful_array_methods">便利な配列メソッド</h2> + +<p>このセクションでは、文字列を配列にしたり、配列を文字列にしたり、配列に項目を追加したり、ちょっと便利な配列関連のメソッドを見てみましょう。</p> + +<h3 id="Converting_between_strings_and_arrays" name="Converting_between_strings_and_arrays">文字列と配列を相互に変換する</h3> + +<p>データが長い長い文字列の中に含まれていて、それを使いやすい形に分割して操作したいときがあります。例えばデータを表形式で表示するというようなときです。それには{{jsxref("String.prototype.split()","split()")}} メソッドが使用できます。このメソッドは文字列を分割するのに使用する文字を引数として取り、文字列をその文字で区切った部分文字列の配列に分割します。</p> + +<div class="note"> +<p><strong>注</strong>: 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。</p> +</div> + +<ol> + <li>それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。 + <pre class="brush: js notranslate">let myData = '札幌,仙台,東京,名古屋,大阪,博多';</pre> + </li> + <li>この文字列をカンマで区切ります。 + <pre class="brush: js notranslate">let myArray = myData.split(','); +myArray;</pre> + </li> + <li>そして、できた配列の長さを確認して、その中身を見てみましょう。 + <pre class="brush: js notranslate">myArray.length; +myArray[0]; // 配列の最初の項目 +myArray[1]; // 配列の二番目の項目 +myArray[myArray.length-1]; // 配列の最後の項目</pre> + </li> + <li>{{jsxref("Array.prototype.join()","join()")}} メソッドを使うことで、逆のことができます。 + <pre class="brush: js notranslate">let myNewString = myArray.join(','); +myNewString;</pre> + </li> + <li>配列を文字列にするもう一つの方法は、{{jsxref("Array.prototype.toString()","toString()")}} メソッドを使うことです。引数を取らない <code>toString()</code> は <code>join()</code> と比べ簡単でしょうが、制限があります。<code>join()</code> を使えば、他の区切り文字を指定することもできます (4. の例をカンマ以外の他の文字を指定して試してください)。 + <pre class="brush: js notranslate">let dogNames = ['ポチ','ハチ','タロウ','モコ']; +dogNames.toString(); //ポチ,ハチ,タロウ,モコ</pre> + </li> +</ol> + +<h3 id="Adding_and_removing_array_items" name="Adding_and_removing_array_items">項目の追加と削除</h3> + +<p>まだ配列への項目の追加と削除をやっていませんでしたね。次はこれをやりましょう。先ほどの例にあった <code>myArray</code> 配列を使用します。先ほどの例をまだ実行していなければ、以下のコードをコンソールに入力して配列を作ってください。</p> + +<pre class="brush: js notranslate">let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];</pre> + +<p>まず、配列の最後に項目を追加したり、最後の項目を削除するには、それぞれ {{jsxref("Array.prototype.push()","push()")}} と {{jsxref("Array.prototype.pop()","pop()")}} を使います。</p> + +<ol> + <li>先に <code>push()</code> を使ってみます。配列の最後に項目を追加するには 1 つ以上の項目を引数に指定します。 + + <pre class="brush: js notranslate">myArray.push('横浜'); +myArray; +myArray.push('神戸', '広島'); +myArray; +</pre> + </li> + <li>メソッドの呼び出しが終わると、新しい配列の長さが返ります。もし新しい配列の長さを変数に格納したければ、次のようにできます。 + <pre class="brush: js notranslate">let newLength = myArray.push('京都'); +myArray; +newLength;</pre> + </li> + <li>配列の最後の要素を削除するには <code>pop()</code> を呼び出すだけです。 + <pre class="brush: js notranslate">myArray.pop();</pre> + </li> + <li>メソッドの呼び出しが終わると、削除された項目それ自体が返ります。 + <pre class="brush: js notranslate">let removedItem = myArray.pop(); +myArray; +removedItem;</pre> + </li> +</ol> + +<p>{{jsxref("Array.prototype.unshift()","unshift()")}} と {{jsxref("Array.prototype.shift()","shift()")}} はそれぞれ <code>push()</code> や <code>pop()</code> と同様の動作ですが、配列の末尾ではなく先頭において動作します。</p> + +<ol> + <li>まずは、<code>unshift()</code> を次のように実行します。 + + <pre class="brush: js notranslate">myArray.unshift('奈良'); +myArray;</pre> + </li> + <li>今度は <code>shift()</code> でやってみましょう！ + <pre class="brush: js notranslate">let removedItem = myArray.shift(); +myArray; +removedItem;</pre> + </li> +</ol> + +<h2 id="アクティブラーニング_商品を印字しよう！">アクティブラーニング: 商品を印字しよう！</h2> + +<p>商品の名前と価格、合計金額を請求書に印字するという最初の話に戻りましょう。以下に示す編集可能なコードのコメントの中に数字が書かれています。この数字はコードを書くべき場所を示しています。各数字の場所に次のようなコードを書いてください。</p> + +<ol> + <li><code>// No.1</code> というコメントの下に、商品の名前と価格をコロン (:) で繋げた、いくつか文字列が並んでいます。これを <code>products</code> という名前の配列にしてください。</li> + <li><code>// No.2</code> というコメントの行から for ループが始まっています。この行には <code>i <= 0</code> と書かれています。「<code>i</code> の値が 0 以下でなくなれば終了」と書かれており、<code>i</code> は 0 から始まるので、この <a href="/ja/Learn/JavaScript/First_steps/A_first_splash#Loops">for ループ</a>は一度しか実行されません。この条件を <code>i</code> が <code>products</code> 配列の長さより小さくなくなった場合に終了するような条件に置き換えて下さい。</li> + <li><code>// No.3</code> のコメントの直下に 1 行で、現在の配列の項目 (<code>name:price</code>) を 2 つに分割するコードを書いてください。一方は商品の名前、もう一方は価格です。もしどうすればいいのかわからなければ、<a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列のメソッド</a>の記事を参照してください。さらに{{anch("Converting between strings and arrays","文字列と配列を相互に変換する")}}も役に立つでしょう。</li> + <li>上記のコードの一部として、価格を文字列から数値に変換する必要もあるでしょう。どのようにすべきか思い出せなければ、<a href="/ja/Learn/JavaScript/First_steps/Strings#Numbers_vs._strings">文字列の最初の記事</a>を確認してみましょう。</li> + <li>コードの先頭に <code>total</code> という名前の変数が宣言されて、0 で初期化されています。ループの中で (<code>// No.4</code><em> の</em>下) 繰り返している現在の項目の価格を <code>total</code> 変数に加算するコードを一行で書いてください。そうすれば、コードの最後で正しい合計が請求書に印字されます。恐らく<a href="/ja/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>が役に立つでしょう。</li> + <li><code>// No.5</code> のコメントの直下のコードを <code>itemText</code> 変数が「現在の項目の商品名 — $現在の項目の価格」となるように変更してください。「靴 — $23.99」という感じです。そうすれば正しい情報が請求書に印字されます。これはもう慣れたはずの単純な文字列結合で実現できます。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 150px;"> + +<ul> + +</ul> + +<p></p> + +</div> + +<h2>コードエディター</h2> + +<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 410px;width: 95%"> +const list = document.querySelector('.output ul'); +const totalBox = document.querySelector('.output p'); +let total = 0; +list.innerHTML = ''; +totalBox.textContent = ''; +// No.1 + 'パンツ:6.99' + '靴下:5.99' + 'T シャツ:14.99' + 'ズボン:31.99' + '靴:23.99'; + +for (let i = 0; i <= 0; i++) { // No.2 + // No.3 + + // No.4 + + // No.5 + let itemText = 0; + + const listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); +} + +totalBox.textContent = '合計: $' + total.toFixed(2); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</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 === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst totalBox = document.querySelector(\'.output p\');\nlet total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nlet products = [\'パンツ:6.99\',\n \'靴下:5.99\',\n \'T シャツ:14.99\',\n \'ズボン:31.99\',\n \'靴:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subArray = products[i].split(\':\');\n let name = subArray[0];\n let price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n let listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'合計: $\' + total.toFixed(2);'; +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> + +<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-color: #f5f9fa; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_Top_5_searches" name="Active_learning_Top_5_searches">アクティブラーニング: 上位5件の検索</h2> + +<p>{{jsxref("Array.prototype.push()","push()")}} や{{jsxref("Array.prototype.pop()","pop()")}} といったメソッドを使用するよい例は、ウェブアプリでデータの中で有効な項目だけを抜き出して維持したいときなどです。例えば、アニメーションのあるシーンで、現在表示中の背景イメージを保持している配列があり、一度に表示するイメージをパフォーマンスなどの理由で 50 に制限したいとします。その際、新しいオブジェクトを配列に追加したと同時に、古いオブジェクトを削除して配列を希望のサイズに維持します。</p> + +<p>次の例では、もう少し単純に、検索ボックスのある、ダミーの検索サイトを用意しました。検索ボックスに文字が入力されたら、直前 5 つの検索語がリストに表示されます。検索された語が 5 を超えたら最後の検索語が削除されるようになります。新しい検索語が先頭に追加されるので、常に 5 つの検索語が表示されます。</p> + +<div class="note"> +<p><strong>注</strong>: 本当の検索アプリでは、前回の検索語をクリックすることでその検索に戻れて、実際に検索結果が表示されることでしょう！ただし、今は単純にしておきましょう。</p> +</div> + +<p>アプリを完成させるには...</p> + +<ol> + <li><code>// No.1</code> コメントの下に、検索ボックスに入力された検索語を配列の先頭に追加するコードを書いてください。検索語は <code>searchInput.value</code> と書いて取得します。</li> + <li><code>// No.2</code> コメントの下に、配列の最後の項目を削除するコードを書いてください。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="min-height: 150px;"> + +<input type="text"><button>検索</button> + +<ul> + +</ul> + +</div> + +<h2>コードエディター</h2> + +<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + + +<textarea id="code" class="playable-code" style="height: 370px; width: 95%"> +const list = document.querySelector('.output ul'); +const searchInput = document.querySelector('.output input'); +const searchBtn = document.querySelector('.output button'); + +list.innerHTML = ''; + +let myHistory = []; + +searchBtn.onclick = function() { + // 検索ボックスが空ではない場合のみ検索語を受け付けるようにします + if (searchInput.value !== '') { + // No.1 + + // 表示中の一覧を空にして、同じ項目が表示されないようにして、 + // 結果は検索語が入力される度に毎回作り直されます。 + list.innerHTML = ''; + + // 配列をループして、リスト内の全ての検索語を表示します + for (let i = 0; i < myHistory.length; i++) { + itemText = myHistory[i]; + const listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); + } + + // 配列の長さが 5以上になったら一番古い検索語を削除します + if (myHistory.length >= 5) { + // No.2 + + } + + // 次の検索語を受け付けるため、検索ボックスを空にしてフォーカスします + searchInput.value = ''; + searchInput.focus(); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div></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 === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst searchInput = document.querySelector(\'.output input\');\nconst searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\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%', 700, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test your skills: Arrays</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>この記事を読んで、配列がとても使えるものであることがお分かりいただけたのではないでしょうか。配列は JavaScript の至るところで見かけます。特に配列の各項目に対して同じことをする際にループと一緒に使われます。便利なループの基本については次のモジュールで教えますが、今は自分自身を褒めて、十分に休みましょう！このモジュールのすべての記事をやり終えました！</p> + +<p>ただし、次のモジュールの前に、理解度を確認するため、このモジュールの課題をやりましょう。残っているのはそれだけです。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections">インデックス付きコレクション</a> — 配列とそのいとこにあたる型付き配列についての高度なガイドです。</li> + <li>{{jsxref("Array")}} — <code>Array</code> オブジェクトのリファレンスページです。詳細なガイドと機能については、このリファレンスページで紹介されています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "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> diff --git a/files/ja/learn/javascript/first_steps/index.html b/files/ja/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..13cb953a6c --- /dev/null +++ b/files/ja/learn/javascript/first_steps/index.html @@ -0,0 +1,84 @@ +--- +title: JavaScript の第一歩 +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - Numbers + - Operators + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何？」や「どのようなもの？」や「何ができる？」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。</p> + +<div class="in-page-callout webdev"> +<h3 id="フロントエンドのWeb開発者になりたいですか？">フロントエンドのWeb開発者になりたいですか？</h3> + +<p>私たちはあなたがあなたの目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> +</div> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始めるには JavaScript の知識は必要ありませんが、HTML や CSS に少し慣れている必要があります。JavaScript の学習を開始する前に以下のモジュールを学習することをお勧めします :</p> + +<ul> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a> (<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の入門</a> を含む)</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li> +</ul> + +<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/First_steps/What_is_JavaScript">JavaScript って何？</a></dt> + <dd>MDN の初心者向け JavaScript コースへようこそ！<span>この最初の記事では JavaScript を高い視点から見ていき、「それは何ですか？」「それで何ができますか？」などの質問に答え、JavaScript の目的があなたに受け入れられるものであるかを確認します。</span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">最初のダイブ</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript の理論についていくつか学びましたが、それで何ができるのでしょう？完全に実践的なチュートリアルを通して、JavaScript の基本機能の短期集中コースを提供します。</span> <span>ここでは、簡単な数字当てゲームを段階的に作っていきます。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている？JavaScript のトラブルシューティング</a></dt> + <dd>前の記事で数字当てゲームを構築した時に、うまく動かなかったかもしれません。心配しないでください —この記事は、JavaScript のプログラムにエラーを見つけて修正するシンプルな方法を提供することで、こうした大変な事態からあなたを手助けすることを目的としています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></dt> + <dd>前の 2 つの記事を読んで、JavaScript が何であるか、あなたのために何ができるか、他のウェブテクノロジーと一緒に使う方法、そして高い視点から見た主な機能を知ったことでしょう。この記事では実際の基礎に着目し、JavaScript の最も基本的な構成要素を扱う方法を見ていきます ― それが変数です。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript の簡単な数学 — 数値と算術演算子</a></dt> + <dd>ここで、JavaScript における数学について論じます。指示に従ってうまく数値を操作するために、演算子やその他の機能を組み合わる方法を説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></dt> + <dd>次に、文字列に注目します ― プログラミングではテキストのことをこう呼びます。この記事では、文字列の作成、文字列の引用符のエスケープ、およびそれらの結合など、JavaScript を学習するにあたって本当に知っておくべき、文字列についてのすべての一般的な事柄を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></dt> + <dd>文字列の基本について見てきましたが、文字列の長さの取得、文字列の結合と分割、文字列内の文字の置換、その他の文字列の置換など、組込みメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></dt> + <dd>このモジュールの最後の記事では、配列を見ていきます — 単一の変数名の下に複数のデータ項目のリストを保存するのに適した方法です。ここでは、なぜこれが便利なのかを確認してから、配列の作成方法、配列に格納された項目の取り出し、追加、削除などの方法を学びます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">課題</h2> + +<p>以下の成績評価では、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">バカ話ジェネレーター</a></dt> + <dd>この課題では、このモジュールの記事で取り上げた知識の一部を用いて、ランダムなバカ話を生成する愉快なアプリの作成に適用することを求められます。楽しんで取り組みましょう！</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>短いレッスンとインタラクティブなテストを使用して、自動化された評価に基づいた、インタラクティブな環境でJavaScriptを学びます。<br> + 最初の40レッスンは無料で、コース全体を少額の1回払いで利用できます。</dd> +</dl> diff --git a/files/ja/learn/javascript/first_steps/math/index.html b/files/ja/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..bbdb6550b7 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/math/index.html @@ -0,0 +1,469 @@ +--- +title: JavaScriptでの基本演算 — 数値と演算子 +slug: Learn/JavaScript/First_steps/Math +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Math + - Operators + - augmented + - increment + - 'l10n:priority' + - maths + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">今回は JavaScript での数学的処理についてです。我々の命令を実行するために上手く数値を操作するのにどのように {{Glossary("Operator","演算子")}} や、その他の機能を使用できるのかを見ていきましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript での基礎的な数値処理に慣れる。</td> + </tr> + </tbody> +</table> + +<h2 id="Everybody_loves_math" name="Everybody_loves_math">みんな数学が大好き</h2> + +<p>まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど、数学が生活に必要なものであるということは、否定することは出来ません。特に JavaScript のプログラミングを学習しているのなら、なおさらです。数値データを処理したり、計算をしたりすることが多いので、JavaScript に数学的な関数が十分にそろっていることは、驚くことではありません。</p> + +<p>この記事ではまず知っておくべき基礎的なものに絞って見ていきます。</p> + +<h3 id="Types_of_numbers" name="Types_of_numbers">数値の種類</h3> + +<p>プログラミングをしていると、慣れ親しんだ普通の数値ですら難しいと思えるかもしれません。数値と言ってもいくつか種類があり、それぞれ名前を付けて区別しています。</p> + +<ul> + <li><strong>整数</strong> ( integer ) とは 10、400、-5 といった数値のことです。</li> + <li><strong>浮動小数点数 </strong>( float ) とは小数以下の数と小数桁を持つ 12.5 や 56.7786543 といった数値のことです。</li> + <li><strong>倍精度浮動小数点数 </strong>( double ) は浮動小数点数の特殊な型であり、通常の浮動小数点数よりも大きな精度を持ちます (つまりより大きい桁数まで精度を保つことを意味します)。</li> +</ul> + +<p>さらに通常とは異なる数値表現も使います！今まで出てきた数値は 10 を基数 (0 ～ 9 を 1 つの桁として扱う) とした十進数でしたが、他にも以下のようなものがあります。</p> + +<ul> + <li><strong>二進数</strong> — 0 と 1 だけで表現される、コンピューターの最も低レベルな言語です。</li> + <li><strong>八進数</strong> — 8 を基数として、1 桁を 0 ～ 7 で表します。</li> + <li><strong>十六進数</strong> — 16 を基数として、1 桁を 0 ～ 9、a ～ f で表します。もしかしたら <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS の色</a>を設定するときに見たかもしれませんね。</li> +</ul> + +<p><strong>脳みそが溶けそうだと思う前に、少し待ってください！</strong>まず、この講座では十進数しか扱いません。それに「もしかすれば」ですが、他の数値表現について考える機会は訪れないということだってあり得ます。</p> + +<p>さらにちょっといいことを教えましょう。いくつかの他のプログラミング言語とは違い、JavaScript には数値(整数と少数の両方)を表すデータ型が一つしかありません。わかりますか？{{jsxref("Number","Number (数値)")}} で、これは整数と小数の両方です。これはJavaScript でどんな型の数値を扱おうとも、それらを全く同じように扱うことが可能だということを意味します。</p> + +<div class="blockIndicator note"> +<p><strong>記</strong>: 実際に、JavaScript には 2 つ目の数値型である{{Glossary("BigInt")}} があり、これはとても大きな整数に使います。しかしこのコースの目的としては、<code>Number</code> の値だけに関心を持つことにします。</p> +</div> + +<h3 id="Its_all_numbers_to_me" name="It's_all_numbers_to_me">すべてが「Number」に見えるよね</h3> + +<p>書き方の復習を兼ねてちょっと数字で遊んでみましょう。以下に示すコマンドを<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>入力してみましょう。もちろんこのページに埋め込みのコンソールを使っても構いません。</p> + +<ol> + <li>まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。 + <pre class="brush: js notranslate">var myInt = 5; +var myFloat = 6.667; +myInt; +myFloat;</pre> + </li> + <li>数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。</li> + <li>さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。JavaScript では、{{jsxref("Operators/typeof", "typeof")}} という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。 + <pre class="brush: js notranslate">typeof myInt; +typeof myFloat;</pre> + どちらの変数についても <code>"number"</code> という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！</li> +</ol> + +<h3 id="便利な_Number_メソッド">便利な Number メソッド</h3> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクト参照ページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。</p> + +<p>例えば、数値を固定の桁数に丸めるには <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> メソッドを使用します。ブラウザの<a href="/ja/docs/Tools/Web_Console">コンソール</a>に次の行を入力します。</p> + +<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364; +lotsOfDecimal; +let twoDecimalPlaces = lotsOfDecimal.toFixed(2); +twoDecimalPlaces;</pre> + +<h3 id="数値データ型への変換">数値データ型への変換</h3> + +<p>たまに、文字列型として格納されている数字で計算ができなくなってしまうことがあります。これは、データが<a href="/ja/docs/Learn/Forms">フォーム</a>入力に入力され、<a href="/ja/docs/Web/HTML/Element/input/text">input タイプが text</a> である場合によく起こります。この問題を解決する方法があります - 文字列の値を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> コンストラクタに渡して、同じ値の数値バージョンを返します。</p> + +<p>例えば、これらの命令をコンソールに入力してみてください。</p> + +<pre class="brush: js notranslate">let myNumber = '74'; +myNumber + 3;</pre> + +<p>答えは 743 です。77 ではありません。 なぜなら <code>myNumber</code> は string として定義されているからです。以下の命令で確認することができます。</p> + +<pre class="brush: js notranslate">typeof myNumber;</pre> + +<p>これは以下のようにして修正することができます。</p> + +<pre class="brush: js notranslate">Number(myNumber) + 3;</pre> + +<h2 id="Arithmetic_operators" name="Arithmetic_operators">算術演算子</h2> + +<p>算術演算子は JavaScript で計算をするのに使用する最も基本的な演算子です。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加算</td> + <td>左項と右項を足す。</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減算</td> + <td>左項より右項の数を引く。</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乗算</td> + <td>左項と右項を掛ける。</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除算</td> + <td>左項の数値を右項で割る。</td> + <td><code>10 / 5</code></td> + </tr> + <tr> + <td><code>%</code></td> + <td>剰余 (モジューロともいう) </td> + <td> + <p>左項を右項で割った余りを求める。</p> + </td> + <td><code>8% 3</code> (8 を 3 で割ったとき、商 2 余り 2 の ２ ですね)</td> + </tr> + <tr> + <td><code>**</code></td> + <td>指数</td> + <td> + <p><code>基数</code>を<code>指数</code>の累乗にします。つまり、<code>指数</code>の回数だけ<code>基数</code>の数自身を乗算します。EcmaScript 2016 で最初に導入されました。</p> + </td> + <td><code>5 ** 2</code> ( <code>25</code> を返します。その値は <code>5 * 5</code> と同じですね)</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: 演算子 (オペレーター) に必要とされる数のことを{{Glossary("Operand", "オペランド")}}と呼ぶことがあります。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 指数が古い {{jsxref("Math.pow()")}} メソッドを使って表現されているのを見ることがあるかもしれませんが、それはとてもよく似た働きをします。たとえば、<code>Math.pow(7, 3)</code>では、<code>7</code> が基底で <code>3</code> が指数であるため、式の結果は <code>343</code> になります。<code>Math.pow(7, 3)</code> は <code>7**3</code> と同じです。</p> +</div> + +<p>たぶん基本的な数学を教える必要はないでしょうが、ここに出てくる文法を理解しているかをテストしたいと思います。書き方を覚えるため、以下に示す例を<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>に入力してみましょう。</p> + +<ol> + <li>まずは次のような簡単な例を自分で試してみてください。 + <pre class="brush: js notranslate">10 + 7 +9 * 8 +60 % 3</pre> + </li> + <li>そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。 + <pre class="brush: js notranslate">let num1 = 10; +let num2 = 50; +9 * num1; +num1 ** 3; +num2 / num1;</pre> + </li> + <li>それではさらに難しい計算式を入力してみましょう。 + <pre class="brush: js notranslate">5 + 10 * 3; +num2 % 9 * num1; +num2 + num1 / 8 + 2;</pre> + </li> +</ol> + +<p>最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。</p> + +<h3 id="Operator_precedence" name="Operator_precedence">演算子の優先順位</h3> + +<p>先ほどの計算式の一番最後の例を見てみましょう。<code>num2</code> に 50、<code>num1</code> に 10 が格納されているものとします。(最初はそうでしたよね。)</p> + +<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> + +<p>ある人は、先に「50 + 10 = 60」と「8 + 2 = 10」を先に計算して、その後で「60 ÷ 10 = 6」となるように計算するかもしれません。</p> + +<p>けれどもブラウザは「10 ÷ 8 = 1.25」を先に計算してから「50 + 1.25 + 2 = 53.25」を計算します。</p> + +<p>どうしてこうなるのかといえば、<strong>演算子には優先順位がある</strong>からです。ある演算子は (プログラムの<em>式</em>によっては) 他の演算子よりも先に実行されます。JavaScript の演算子の優先順位は算数の授業で教わったものと同じです。つまり、乗算と除算は常に最初に行われ、それから加算と減算が実行されます(通常の計算は常に左から右に評価されます)。</p> + +<p>もし、演算子の優先順位を変更したいならば、先に実行したい部分を括弧 (<code>()</code>) を使って囲みます。もし先ほどの例で 6 が答えになるようにしたいなら次のようにします。</p> + +<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> + +<p>実際に実行し、結果を見てみてください。</p> + +<div class="note"> +<p><strong>メモ</strong>: JavaScript の演算子とその優先順位については<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">式と演算子</a>で確認することができます。</p> +</div> + +<h2 id="Increment_and_decrement_operators" name="Increment_and_decrement_operators">インクリメント演算子とデクリメント演算子</h2> + +<p>たまに、繰り返し値を足したり引いたりしたいときがあるでしょう。そんなときに便利なのがインクリメント演算子 (<code>++</code>) とデクリメント演算子 (<code>--</code>) です。もう既に、<a href="/ja/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">JavaScript への最初のダイブ</a>に出てくる「数字当てゲーム」で、ユーザーの残り予想回数を求めるために使用する <code>guessCount</code> 変数に 1 を加えるのに <code>++</code> を使用しましたね。</p> + +<pre class="brush: js notranslate">guessCount++;</pre> + +<div class="note"> +<p><strong>メモ</strong>: これらの演算子は、このコースの後で学ぶ<a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">繰り返し</a>処理でよく使われます。例えば、価格の一覧があって、それに対して掛かる税金を各要素に足していきたいとします。恐らく繰り返し処理を使用して、それぞれの価格に対して必要な計算をすることになるでしょう。そのときに、次の値に移動するためインクリメント演算子を使用します。どのように行うかを説明する簡単な例をご用意しました。— インクリメント演算子に興味を持ったら<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">ライブで実行</a>、および<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">ソースコードの閲覧</a>をしてみてください。繰り返しについては、このコースの後で詳細を見てみます。</p> +</div> + +<p>それでは、コンソールで試してみましょう。ただし、その前に注意点です。この演算子は数値には直接使用できません。変に思えるかもしれませんが、これは対象の値そのものに作用するわけではなく、変数に対して新しい値を代入するのです。次の例はエラーになります。</p> + +<pre class="brush: js notranslate">3++;</pre> + +<p>既に存在する値に対してのみインクリメントすることができます。</p> + +<pre class="brush: js notranslate">let num1 = 4; +num1++;</pre> + +<p>また変なことが起きましたね！上のコードを実行したとき「4」がコンソールに表示されました。これはブラウザが現在の値を先に返して、その後にインクリメントを実行したためです。もう一度変数を入力してみると、変数がインクリメントされていることがわかります。</p> + +<pre class="brush: js notranslate">num1;</pre> + +<p>それは <code>--</code> 演算子についても同様です。以下のコードも試してみてください。</p> + +<pre class="brush: js notranslate">var num2 = 6; +num2--; +num2;</pre> + +<div class="note"> +<p><strong>メモ</strong>: 変数の前に演算子を置くことで、ブラウザにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は <code>++num1</code> や <code>--num2</code> のように入力してみてください。</p> +</div> + +<h2 id="Assignment_operators" name="Assignment_operators">代入演算子</h2> + +<p>代入演算子は変数に値を代入します。すでに一番基本的な <code>=</code> 演算子を何度も使用しています。この演算子は単に左辺に記述された値を右辺に代入します。</p> + +<pre class="brush: js notranslate">let x = 3; // x には 3 が入る +let y = 4; // y には 4 が入る +x = y; // x には y と同じ値:4 が入る</pre> + +<p>ただし、コードを簡潔に効率よく書くための、もっと複雑な方法が用意されています。よく見かけるものを以下に示します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + <th scope="col">同様のコード</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+=</code></td> + <td>加算代入</td> + <td>右辺の値を左辺の変数値に加算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x += 4;</code></td> + <td style="white-space: nowrap;"><code>x = x + 4;</code></td> + </tr> + <tr> + <td><code>-=</code></td> + <td>減算代入</td> + <td>右辺の値を左辺の変数値より減算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x -= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x - 3;</code></td> + </tr> + <tr> + <td><code>*=</code></td> + <td>乗算代入</td> + <td>左辺の変数値に右辺の値を乗算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x *= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x * 3;</code></td> + </tr> + <tr> + <td><code>/=</code></td> + <td>除算代入</td> + <td>左辺の変数値を右辺の値で除算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x /= 5;</code></td> + <td style="white-space: nowrap;"><code>x = x / 5;</code></td> + </tr> + </tbody> +</table> + +<p>どのように動いているか理解するため、コンソールに上記の例をいくつか入力してみましょう。どの例も、2 行目を入力する前にコードがどのようになるかを予想してから入力しましょう。</p> + +<p>ちなみに、どの演算子も右辺には自由に変数を置くことができます。例えば以下のように。</p> + +<pre class="brush: js notranslate">let x = 3; // x には 3 が入る +let y = 4; // y には 4 が入る +x *= y; // x は 12 になる</pre> + +<div class="note"> +<p><strong>メモ</strong>: もっとたくさんの<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子があります</a>が、とりあえず今は基本的なものだけ知っておけばよいでしょう。</p> +</div> + +<h2 id="Active_learning_sizing_a_canvas_box" name="Active_learning_sizing_a_canvas_box">アクティブラーニング: Canvas のボックスのサイズを変更する</h2> + +<p>練習として、数値と演算子を使用してボックスのサイズを変更してみましょう。ブラウザの {{domxref("Canvas API", "", "", "true")}} を使用してボックスを描きます。どうやって描くかについて気にする必要はありません。今は計算に集中しましょう。ボックスの幅と高さ (ピクセル単位で) 変数 <code>x</code> と <code>y</code> で宣言しています。最初は 50 になっています。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">新しいウィンドウで開く</a></strong></p> + +<p>上の編集可能なコードには、変更すべき 2 つの行にコメントが書かれています。その行を適切な演算子および値を用いて変更し、拡大縮小させてください。それではやってみましょう。</p> + +<ul> + <li>ボックスの幅を 50px としたまま x の値を求める行を変更してください。ただし、50 を 43 と 7、算術演算子を一つ使って演算によって求めてください。</li> + <li>ボックスの高さを 75px になるよう y の値を求める行を変更してください。ただし、75 を 25 と 3、算術演算子を一つ使用して演算によって求めてください。</li> + <li>ボックスの幅を 250px になるように x の値を求める行を変更してください。ただし、250 は 2 つの数値と、剰余演算子を使用して演算によって求めてください。</li> + <li>ボックスの高さを 150px になるように y の値を求める行を変更してください。ただし 150 は 3 つの数値と減算演算子および除算演算子を使用して演算によって求めてください。</li> + <li>ボックスの幅が 200px になるように x の値を求める行を変更してください。ただし 200 は 4 と代入演算子を一つ使用して演算によって求めてください。</li> + <li>ボックスの高さが 200px になるように y の値を求める行を変更してください。ただし 200 は 50 と 3 と乗算演算子、加算演算子を使用して求めてください。</li> +</ul> + +<p>コードを完全に壊してしまっても大丈夫です。いつでもリセットボタンを押すことで何度でも最初から実行できます。上の問題に全問正解したら、もう少し遊んでみてもいいですし、自分で問題を作ってみてもいいですね。</p> + +<h2 id="Comparison_operators" name="Comparison_operators">比較演算子</h2> + +<p>ときには、true または false を判定し、その結果により動作を変更したいと思う時があるでしょう。そのようなことをするために<strong>比較演算子</strong>を使用します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>厳密な等価</td> + <td>右辺と左辺が厳密に同一の値であるかを判定します</td> + <td><code>5 === 2 + 4</code></td> + </tr> + <tr> + <td><code>!==</code></td> + <td>厳密な不等</td> + <td>右辺と左辺が厳密に同一の値<strong>ではない</strong>ことを判定します</td> + <td><code>5 !== 2 + 3</code></td> + </tr> + <tr> + <td><code><</code></td> + <td>小なり</td> + <td>左辺の値が右辺の値より小さいこととを判定します</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>大なり</td> + <td>左辺の値が右辺の値より大きいことを判定します</td> + <td><code>10 > 20</code></td> + </tr> + <tr> + <td><code><=</code></td> + <td>以下なり</td> + <td>左辺の値が右辺の値以下であることを判定します</td> + <td><code>3 <= 2</code></td> + </tr> + <tr> + <td><code>>=</code></td> + <td>以上なり</td> + <td>左辺の値が右辺の値以上であることを判定します</td> + <td><code>5 >= 4</code></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>メモ</strong>: もしかしたら <code>==</code> や <code>!=</code> といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、<code>===</code> や <code>!==</code> とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。</p> +</div> + +<p>もし、これらの値をコンソールに入力したら、すべて <code>true<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> または </span></font></code><code>false</code> の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。</p> + +<ul> + <li>機能が使用可能かどうかに応じてボタンに表示するテキストを変更する</li> + <li>負けた時にゲームオーバー、勝った時に勝利のメッセージを表示する</li> + <li>時候のあいさつを時期に応じて表示する</li> + <li>選択されたズームレベルに応じて地図を拡大する</li> +</ul> + +<p>後の記事にて、条件文でどのようにロジックをコーディングするのかを見ていきます。とりあえずの簡易な例で見てみましょう。</p> + +<pre class="brush: html notranslate"><button>起動する</button> +<p>マシンは停止中です。</p> +</pre> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); +const txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.textContent === '起動する') { + btn.textContent = '停止する'; + txt.textContent = 'マシンが起動しました！'; + } else { + btn.textContent = '起動する'; + txt.textContent = 'マシンは停止中です。'; + } +}</pre> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">新しいウィンドウで開く</a></strong></p> + +<p>等価演算子が <code>updateBtn()</code> 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 2 つの状態を行き来するこのような操作を一般的に<strong>トグル</strong>といいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">Test your skills: Math</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、JavaScript の数値処理で知っておくべき基礎的なことを学びました。JavaScript を学習する間、今後も繰り返し数値を扱うことになるので、しっかりと復習しておきましょう。数学が好きではなくとも、この章はとても短いので安心して (復習して) ください。</p> + +<p>次の章では文字列と、文字列を JavaScript で操作する方法について見ていきます。</p> + +<div class="note"> +<p><strong>メモ</strong>: もし数学が好きで、JavaScript にどう実装されているかをもっと知りたいのであれば、MDN の JavaScript のメインの章に詳細がたくさん載っています。まずは<a href="/ja/docs/Web/JavaScript/Guide/Numbers_and_dates">数値と日付</a>や<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators">式と演算子</a>辺りの記事から読むのがいいでしょう。</p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/silly_story_generator/index.html b/files/ja/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..ae52da17c7 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,151 @@ +--- +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><script></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></body></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> diff --git a/files/ja/learn/javascript/first_steps/strings/index.html b/files/ja/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..d4b850bd6d --- /dev/null +++ b/files/ja/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,240 @@ +--- +title: テキストを扱う — JavaScript での文字列 +slug: Learn/JavaScript/First_steps/Strings +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Join + - Quotes + - concatenation + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータの知識および HTML と CSS への理解、JavaScript とは何かを知っている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の文字列操作に慣れる。</td> + </tr> + </tbody> +</table> + +<h2 id="The_power_of_words" name="The_power_of_words">言葉の力</h2> + +<p>言葉はコミュニケーションの大部分を担う、人類にとって、とても大切なものです。Web は情報の共有やコミュニケーションができるように設計された大規模な文字ベースの媒体ですので、そこで使用される言葉を操作できると便利です。{{glossary("HTML")}} は意味付けされ、構造化されたテキストを提供し、{{glossary("CSS")}} がきれいに体裁を整える事を可能にし、そして JavaScript には、挨拶用の文章を生成したり、適切なラベルを表示したり、言葉を並べ替えたりといった、文字列を操作するたくさんの機能が含まれています。</p> + +<p>今までこのコースでお見せしたプログラムのほとんどが、何らかの文字列操作を含んでいましたね。</p> + +<h2 id="Strings_—_the_basics" name="Strings_—_the_basics">文字列 — 基本</h2> + +<p>文字列は一見すると数値と同じように見えますが、少し深く見ていくと、違いに気づくことでしょう。まずは慣らすために基本的なコードを<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者ツール</a>に入力してみましょう。</p> + +<h3 id="Creating_a_string" name="Creating_a_string">文字列を作る</h3> + +<ol> + <li>初めに、次の行を入力してみましょう。 + <pre class="brush: js notranslate">let string = '革命はテレビでは放送されない。'; +string;</pre> + 数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。</li> + <li>もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。 + <pre class="brush: js example-bad notranslate">let badString = これはテストです; +let badString = 'これはテストです; +let badString = これはテストです';</pre> + これらの行は動きません。なぜなら引用符で文字を囲わなければ、変数名や、プロパティ名や、予約語などと解釈されてしまうためです。もしブラウザが引用符を見つけられないと、エラーとなります (たとえば "missing ; before statement" [文の前に、セミコロンが見つかりません] のようなエラーです)。2行目の例のように、ブラウザが引用符を見つけても、文字列の終わりが示されていなければ、これもエラーとなります ("unterminated string literal" [文字列リテラルの終わりがありません] というエラーです)。このようなエラーがプログラムで起きたら、全ての文字列について、引用符の付け忘れがないかを確認してください。</li> + <li>続くコードは先ほど変数を <code>string</code> という名前で宣言していれば、動くでしょう。試してみましょう。 + <pre class="brush: js notranslate">let badString = string; +badString;</pre> + <code>badString</code> という変数に <code>string</code> という変数の値が設定されたことでしょう。</li> +</ol> + +<h3 id="Single_quotes_vs._double_quotes" name="Single_quotes_vs._double_quotes">シングルクォーテーション vs. ダブルクォーテーション</h3> + +<ol> + <li>JavaScript では、文字列を囲む引用符として、シングルクォーテーションとダブルクォーテーションを使用することができます。以下のどちらの例も正しく動きます。 + <pre class="brush: js notranslate">let sgl = 'シングルクォーテーション'; +let dbl = "ダブルクォーテーション"; +sgl; +dbl;</pre> + </li> + <li>どちらを使ってもほとんど違いはありません。どちらを使うかは好みの問題ですが、どちらを使うかは統一するべきでしょう。両方を同時に使うと混乱してしまいます、特に同じ文字列に二種類の引用符を使ってしまうときなど！次の行はエラーです。 + <pre class="brush: js example-bad notranslate">let badQuotes = 'なんということだ！";</pre> + </li> + <li>ブラウザは上の文字列が閉じていないと認識します。なぜなら、文字列を囲うのに使用していない引用符はその文字列の中に含めることができるからです。たとえば次の例は問題ありません。 + <pre class="brush: js notranslate">let sglDbl = 'Would you eat a "fish supper"?'; +let dblSgl = "I'm feeling blue."; +sglDbl; +dblSgl;</pre> + </li> + <li>ただし、文字列の中に、囲んでいるのと同じ種類の引用符を含めることはできません。以下の例は文字列の終わりがわからないので、ブラウザを混乱させてしまいます。 + <pre class="brush: js example-bad notranslate">let bigmouth = 'I've got no right to take my place...';</pre> + それでは同じ種類の引用符を含めるにはどのようにすればよいでしょうか。</li> +</ol> + +<h3 id="Escaping_characters_in_a_string" name="Escaping_characters_in_a_string">文字列をエスケープする</h3> + +<p>先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザに認識させる書き方です。JavaScript ではバックスラッシュ ( \ [環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。</p> + +<pre class="brush: js notranslate">let bigmouth = 'I\'ve got no right to take my place...'; +bigmouth;</pre> + +<p>これでうまく動きます。 同じ方法で他の文字をエスケープする (例えば <code>\"</code>) ことができ、それ以外にも特別なコードがあります。詳細は<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">エスケープ記法</a>を見てください。</p> + +<h2 id="Concatenating_strings" name="Concatenating_strings">文字列を連結する</h2> + +<ol> + <li>コンカチする (concatenate) という単語は「結合する」ことを表すプログラミングの用語です。JavaScript で文字列を結合するにはプラス (+) 演算子を使用します。数値の加算をするのに使用した演算子ですが、今回は違う動作をします。下の例をコンソールに入力してみてください。 + <pre class="brush: js notranslate">let one = 'こんにちは、'; +let two = 'ご機嫌いかがでしょう？'; +let joined = one + two; +joined;</pre> + この例の実行結果は <code>joined</code> という変数に格納され、値は "こんにちは、ご機嫌いかがでしょう？" となります。</li> + <li>今の例は 2 つの文字列だけを結合しましたが、<code>+</code> 演算子が変数と変数の間にあれば、いくつでも結合することができます。例えば、次の例を試しましょう。 + <pre class="brush: js notranslate">let multiple = one + one + one + one + two; +multiple;</pre> + </li> + <li>変数のほかに、実際の文字列と混ぜて使うこともできます。 + <pre class="brush: js notranslate">let response = one + '私は元気です。' + two; +response;</pre> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: コード中に、シングルクォーテーションおよびダブルクォーテーションで囲われた、実際の文字列を書いたときそれは<strong>文字列リテラル</strong>と呼ばれます。</p> +</div> + +<h3 id="Concatenation_in_context" name="Concatenation_in_context">様々な結合</h3> + +<p>実際に文字列が結合されている場面を見てみましょう。これはこのコースの最初の方からの例です。</p> + +<pre class="brush: html notranslate"><button>押してみて！</button></pre> + +<pre class="brush: js notranslate">let button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('あなたの名前は？'); + alert('こんにちは、' + name + 'さん。初めまして！'); +}</pre> + +<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>4行目でユーザに答えてもらうため、{{domxref("Window.prompt()", "Window.prompt()")}}関数を使用して、テキストを入力できるポップアップダイアログを表示し、ユーザによって入力された文字列を <code>name</code> 変数に格納しています。そして、5行目で{{domxref("Window.alert()", "Window.alert()")}}関数を使用し、2 つの文字列リテラルと <code>name</code> 変数を結合して別のポップアップに文字列を作り上げています。</p> + +<h3 id="Numbers_vs._strings" name="Numbers_vs._strings">数値 vs. 文字列</h3> + +<ol> + <li>それでは文字列と数値を足したら (もしくは結合したら) 何が起きるでしょうか。コンソールに入力してみましょう。 + <pre class="brush: js notranslate">'フロント' + 242; +</pre> + エラーが起きると予想したかもしれませんが、普通に動きます。文字列を数値として表すのには意味がありませんが、数値を文字で表すのはわかりますね。つまりブラウザはどうやら、数値を文字列に変換し、2 つの文字列としてから結合しているようです。</li> + <li>数字同士でやっても同じです。数字を引用符で囲むと文字列になります。次の行を実行してみてください。(<code>typeof</code>演算子で変数が文字列なのか数値なのか調べています。) + <pre class="brush: js notranslate">let myDate = '19' + '67'; +typeof myDate;</pre> + </li> + <li>もし、数値を文字列に変換したかったり、文字列を数値に変換したかったりする場合には、次の 2 つの生成方法を見てください。 + <ul> + <li>{{jsxref("Number")}}オブジェクトは渡されたものすべてを数値に変換します。次の例を実行してみましょう。 + <pre class="brush: js notranslate">let myString = '123'; +let myNum = Number(myString); +typeof myNum;</pre> + </li> + <li>反対に全ての数値は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> という文字列に変換するメソッドを持っています。 + <pre class="brush: js notranslate">let myNum = 123; +let myString = myNum.toString(); +typeof myString;</pre> + </li> + </ul> + この生成方法は状況によってはとても便利です。例えば、ユーザがフォームのテキストフィールドに数字を入力した場合、入力された値は文字列です。しかし、その数字を使って計算したい場合、数値にしなければなりません。そんな時は <code>Number()</code> に任せましょう。これは実際に<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">数字当てゲームの 54行目</a>で使用した方法です。</li> +</ol> + +<h2 id="テンプレートリテラル">テンプレートリテラル</h2> + +<p>遭遇する可能性のある別のタイプの文字列構文は、<strong>テンプレートリテラル</strong>（テンプレート文字列と呼ばれることもあります）です。 これは、より柔軟で読みやすい文字列を提供する新しい構文です。</p> + +<div class="blockIndicator note"> +<p>注: 以下の例をブラウザの JavaScript コンソールに入力して、どのような結果が得られるかを確認してください。</p> +</div> + +<p>標準の文字列リテラルをテンプレートリテラルに変換するには、引用符 (<code>' '</code> または <code>" "</code>) をバッククォート文字 (<code>` `</code>) に置き換える必要があります。</p> + +<p>簡単な例。</p> + +<pre class="brush: js notranslate">let song = 'Fight the Youth';</pre> + +<p>テンプレートリテラルに変換します。</p> + +<pre class="brush: js notranslate">song = `Fight the Youth`;</pre> + +<p>文字列を連結したり、文字列内に式の結果を含めたりする場合、従来の文字列で書くのは面倒です。</p> + +<pre class="brush: js notranslate">let score = 9; +let highestScore = 10; +let output = 'I like the song "' + song + '". I gave it a score of ' + (score/highestScore * 100) + '%.';</pre> + +<p>テンプレートリテラルはこれを非常に簡単に行えます。</p> + +<pre class="brush: js notranslate">output = `I like the song "${ song }". I gave it a score of ${ score/highestScore * 100 }%.`;</pre> + +<p>複数の文のピースを繋げる必要はありません。文章全体を1組のバッククォートで囲むだけです。文字列内に変数または式を含める場合は、プレースホルダーと呼ばれる <code>${ }</code> 構造内に含めます。</p> + +<p>テンプレートリテラル内に複雑な式を含めることもできます。</p> + +<pre class="brush: js notranslate">let examScore = 45; +let examHighestScore = 70; +examReport = `You scored ${ examScore }/${ examHighestScore } (${ Math.round((examScore/examHighestScore*100)) }%). ${ examScore >= 49 ? 'Well done, you passed!' : 'Bad luck, you didn\'t pass this time.' }`;</pre> + +<ul> + <li>最初の2つのプレースホルダーは非常に単純で、変数を参照する単純な文字列のみが含まれています。</li> + <li>3つ目は、パーセンテージの結果を計算し、それを最も近い整数に丸めます。</li> + <li>4つ目は、三項演算子を使用してスコアが特定の値を超えているかどうかを確認し、結果に応じて合格または不合格のメッセージを出力します。</li> +</ul> + +<p>従来の文字列リテラルで複数の行に分割する場合は、改行文字 <code>\n</code> を含める必要がありました。</p> + +<pre class="brush: js notranslate">output = 'I like the song "' + song + '".\nI gave it a score of ' + (score/highestScore * 100) + '%.';</pre> + +<p>テンプレートリテラルはソースコードの改行をそのまま再現するため、改行文字は不要になります。 以下は同じ結果を得ます。</p> + +<pre class="brush: js notranslate">output = `I like the song "${ song }". +I gave it a score of ${ score/highestScore * 100 }%.`;</pre> + +<p>できるだけ早くテンプレートリテラルの使用に慣れることをお勧めします。 これらは最新のブラウザで十分にサポートされており、サポートが不足しているのは Internet Explorer だけです。私たちの例の多くはまだ標準の文字列リテラルを使用していますが、今後さらに多くのテンプレートリテラルを含める予定です。</p> + +<p>高度な機能の例と詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>のリファレンスページを参照してください。</p> + +<h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> + +<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>ここまでが JavaScript での文字列の基礎になります。次の記事では、JavaScript で使える文字列操作の組み込み関数と、それを使って思い通りの形に文字列を変換する方法を、その基礎の上に建てていきましょう。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..0c2f22adfd --- /dev/null +++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,680 @@ +--- +title: 便利な文字列メソッド +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Article + - Beginner + - CodingScripting + - JavaScript + - Learn + - case + - indexof + - 'l10n:priority' + - length + - lower + - replace + - split + - upper +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "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>基礎的なコンピュータの知識、HTML と CSS の基本の理解、JavaScript が何かを知っていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>文字列がオブジェクトであることを理解して、そのオブジェクトで使用できる基本的なメソッドを使って文字列を操作する方法を身に付ける。</td> + </tr> + </tbody> +</table> + +<h2 id="Strings_as_objects" name="Strings_as_objects">オブジェクトとしての文字列</h2> + +<p id="Useful_string_methods">JavaScript ではほとんどのものはオブジェクトです。たとえば、次のように文字列を作った時も、</p> + +<pre class="brush: js notranslate">let string = 'This is my string';</pre> + +<p>この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。{{jsxref("String")}} オブジェクトのページに行って、横にある一覧を眺めてみてください！</p> + +<p><strong>また、脳が溶け出しそうかもしれませんが、安心してください！</strong>先ほどのページにある、ほとんどのメソッドは学習の初期に覚える必要はありません。しかし、今から紹介する、文字列操作のメソッドはとてもよく使いますのでぜひ覚えましょう。 </p> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者コンソール</a>にいくつかの例を入力してみましょう。</p> + +<h3 id="Finding_the_length_of_a_string" name="Finding_the_length_of_a_string">文字列の長さを調べる</h3> + +<p>ただ {{jsxref("String.prototype.length", "length")}} プロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。</p> + +<pre class="brush: js notranslate">let browserType = 'mozilla'; +browserType.length;</pre> + +<p>これで 7 という数値が戻ります。なぜなら "mozilla" は 7文字だからです。例えば、文字の長さによって文字列を並べたいときや、ユーザーがある長さ以上のユーザー名をフォームの入力フィールドに入れたことを知らせたりするような場面で便利です。</p> + +<h3 id="Retrieving_a_specific_string_character" name="Retrieving_a_specific_string_character">特定の文字列を扱う</h3> + +<p>前の例と関連していますが、文字列に対して<strong>角括弧記法</strong>を使用することで文字列中の任意の 1文字が得られます。つまり角括弧 (<code>[]</code>) を変数名の後ろに付け、その中に数値を入れることで、その番目にある文字が返ってきます。例えば最初の一文字を取得するには次のようにします。</p> + +<pre class="brush: js notranslate">browserType[0];</pre> + +<p>コンピューターは 1 からではなく、0 から数えます！例えば、文字列から最初の文字を見つけてアルファベット順に並べるときに使うことができます。</p> + +<p>文字列の一番最後の文字を取得したいときは、先ほどの <code>length</code> プロパティと組み合わせて以下のようにします。</p> + +<pre class="brush: js notranslate">browserType[browserType.length-1];</pre> + +<p>"mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって <code>length-1</code> とする必要があるのです。</p> + +<h3 id="Finding_a_substring_inside_a_string_and_extracting_it" name="Finding_a_substring_inside_a_string_and_extracting_it">部分文字列を探して抽出する</h3> + +<p>長い文字列の中に、ある文字列が存在するか調べたいと思うことがあります (よく文字列中に部分文字列が存在するなどといいます)。これには、探したい部分文字列を{{glossary("parameter","引数")}}に取る {{jsxref("String.prototype.indexOf()", "indexOf()")}} メソッドを使用することで可能です。</p> + +<p>もし対象の文字列中に部分文字列が<em>見つかった</em>場合、このメソッドは部分文字列のインデックス位置を表す数値 (対象の文字列上で部分文字列が始まる文字数) を返します。もし対象の文字列中に部分文字列が<em>見つからなかった</em>場合は、<code>-1</code> の値を返します。</p> + +<ol> + <li>以下を試してみましょう。 + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。</li> +</ol> + +<ol start="2"> + <li>部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。 + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + 上記のコードは <code>-1</code> を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。<br> + <br> + これを使って、部分文字列 'mozilla' を<strong>含まない</strong> (あるいは否定演算子 <code>!==</code> を使うなら<strong>含む</strong>) 文字列のすべてのインスタンスを見つけることができます。 + + <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) { + // もし部分文字列 'mozilla' が含まれていない場合は、 + // 文字列で何かをします。 +} + +if(browserType.indexOf('mozilla') !== -1) { + // もし部分文字列 'mozilla' が含まれている場合は、 + // 文字列で何かをします。 +}</pre> + </li> + <li>部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を {{jsxref("String.prototype.slice()", "slice()")}} メソッドを使用することで抽出することができます。 + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2番目の引数と同じ 3文字が切り出されました。</li> + <li>また、ある文字以降の文字列の残りの文字をすべて抽出したいとわかっている場合は、2番目のパラメータを含める必要はありません！その代わり、文字列内の残りの文字を抽出したい文字の位置を含める必要があるだけです。次のようにしてみてください。 + <pre class="brush: js notranslate">browserType.slice(2);</pre> + この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2番目の引数を指定していないため、3文字目から最後までが部分文字列として戻ったのです。 </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <code>slice()</code> の 2番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければ{{jsxref("String.prototype.slice()", "slice()")}}のページで調べてみましょう。</p> +</div> + +<h3 id="Changing_case" name="Changing_case">大文字・小文字の切り替え</h3> + +<p>String には{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}と{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}という 2 つのメソッドがあり、引数として渡された文字列のすべての文字の大文字・小文字を切り替えます。これは例えば、ユーザーの入力を DB に保存する場合に、値を正規化するのに便利です。</p> + +<p>それでは次の行を入力し、何が起きるか見てみましょう。</p> + +<pre class="brush: js notranslate">let radData = 'My NaMe Is MuD'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 id="Updating_parts_of_a_string" name="Updating_parts_of_a_string">文字列の一部分を書き換える</h3> + +<p>{{jsxref("String.prototype.replace()", "replace()")}}メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。基本レベルではとても単純に動作しますが、<code>replace()</code> メソッドは高度な機能を持っています (今回はその機能は紹介しませんが)。</p> + +<p>検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。</p> + +<pre class="brush: js notranslate">browserType.replace('moz','van');</pre> + +<p>これはコンソールで"vanilla"を返しますが、<code>browserType</code> の値は、"mozilla"のままです。プログラムで変数 <code>browserType</code> の値を実際に更新するには、演算の結果を変数に設定し直す必要があります。つまりそれ変数に設定されている部分文字列を自動的には更新してくれないのです。従って実際に変数の内容を更新するためには <code>browserType = browserType.replace('moz','van');</code> のように書きます。</p> + +<h2 id="Active_learning_examples" name="Active_learning_examples">アクティブ学習の実例</h2> + +<p>この章では、文字列を操作するコードを書いてもらいます。以下のどの問題も文字列の配列をループで回して、順序なしリスト形式で表示しますが、配列やループに関して今は理解する必要はありません。配列については今後の記事で説明します。必要なのは、どのような書式で出力するかという要求を満たすコードを書くことです。</p> + +<p>どの例も「リセット」ボタンがあるので、コードが動かなくなった場合は使用してみてください。もし本当に行き詰まってしまった場合には、「答えを見る」ボタンを押すことで、回答を見ることができます。</p> + +<h3 id="Filtering_greeting_messages" name="Filtering_greeting_messages">挨拶を選別する</h3> + +<p>まずは簡単な問題から始めます。挨拶状に使用するメッセージの配列の中から、クリスマスのメッセージのみを選別し、並べ替えてください。やるべきことは、メッセージがクリスマスメッセージであることを判定しその場合のみ表示されるよう、<code>if ( ... )</code> 文の条件式を埋めることです。</p> + +<ol> + <li>まず、各メッセージがどうであればクリスマス(Christmas)メッセージとみなせるかを考えてください。こういうメッセージ中にはどんな文字列があり、それが存在するか判定するのにどんなメソッドが使えるでしょうか？</li> + <li>それから、オペランド 1 演算子 オペランド 2 の形で条件を書いてください。その条件は左辺と右辺が等しいかというものでしょうか？もしくは左辺のメソッドの戻り値が、右辺であるかというものでしょうか。</li> + <li>ヒント: 今回の場合、メソッドの戻り値の結果が何でないかを判定するとよいでしょう。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Merry Christmas my love', + 'A happy Christmas to all the family', + 'You\'re all I want for Christmas', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // 以下の条件の括弧内の内容を書き換えて下さい + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</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 list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Merry Christmas my love\',' + +'\n \'A happy Christmas to all the family\',' + +'\n \'You\\\'re all I want for Christmas\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\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', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Fixing_capitalization" name="Fixing_capitalization">単語の最初の文字を大文字に直す</h3> + +<p>この課題ではイギリスの都市名を題材にします。ところが、単語の大文字と小文字がぐちゃぐちゃになっています。そこで最初の文字を大文字にし、残りをすべて小文字にしてみましょう。こういう手順でやってみます:</p> + +<ol> + <li><code>input</code> 変数に入っている文字列全体を小文字に変換し、それを新しい変数に格納します。</li> + <li>この新しい変数にある最初の文字を取り出し、さらに別の変数に格納します。</li> + <li>その新しい変数を部分文字列とし、小文字ばかりの文字列にある最初の文字を置換して、大文字化します。この置換処理の結果を別の新しい変数に格納します。</li> + <li><code>input</code> 変数ではなく、最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: ヒント — 文字列メソッドのパラメーターは文字列リテラルである必要はありません。変数でもよいですし、メソッドが呼び出される変数であっても構いません。</p> +</div> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; +for(var i = 0; i < cities.length; i++) { + var input = cities[i]; + // この下にコードを書いて下さい + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</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 list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\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%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Making_new_strings_from_old_parts" name="Making_new_strings_from_old_parts">既存の部分から新しい文字列を作成する</h3> + +<p>最後の課題では、北イングランドの駅に関する情報が入っている文字列を格納している配列を扱います。この文字列にはデータ項目として、アルファベット 3文字の駅コード、次にコンピューター読み取り用のデータ、次にセミコロン、そして人間が読める駅名が入っています。例:</p> + +<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p>駅コードと駅名を抽出し、それを文字列にまとめてこのような形にします:</p> + +<pre class="notranslate">MAN: Manchester Piccadilly</pre> + +<p>このようにプログラムしてみましょう:</p> + +<ol> + <li>アルファベット 3文字のコードを抽出し、新しい変数に格納します。</li> + <li>セミコロンの文字インデックス番号を検索します。</li> + <li>セミコロンの文字インデックス番号を参照位置にして、人が読める駅名を抽出し、新しい変数に格納します。</li> + <li>この 2 つの新しい変数と文字列リテラルとを連結し、最終的な文字列を作成します。</li> + <li><code>input</code> 変数ではなく、この最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (var i = 0; i < stations.length; i++) { + let input = stations[i]; + // この下にコードを書いてください + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</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 list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\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_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているかを検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Test your skills: Strings</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>プログラミング、特に JavaScript では単語や文を処理できるようになることが大事であるという現実から逃れることはできません。それはウェブサイトは人とのコミュニケーションがすべてとなるためです。この記事では、文字列を処理するのに当面知っておくべき基礎を解説しました。今後もっと複雑なトピックに進んで行くときに役立つはずです。次に、配列を見てみます。重要なデータ型のうち、短期間で押さえておくべき最後の 1 つです。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/variables/index.html b/files/ja/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..80c3c5af57 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,342 @@ +--- +title: 必要な情報を保存する — 変数 +slug: Learn/JavaScript/First_steps/Variables +tags: + - Arrays + - Booleans + - JavaScript + - Numbers + - Objects + - Updating + - Variables + - declaring + - initializing + - 'l10n:priority' + - loose typing + - strings +translation_of: Learn/JavaScript/First_steps/Variables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">前回までの記事を読んで、高度な視点からその機能を概観し、JavaScript とは何なのか、それで何ができるのか、他の Web の技術とどう一緒に使うのか、そして、どのような機能があるのかが分かったのではないでしょうか。この記事では、本当の基本に立ち返り、JavaScript の基本的な構成要素である変数について見てみましょう。</p> + +<table class="learn-box"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の変数についての基礎を会得する。</td> + </tr> + </tbody> +</table> + +<h2 id="Tools_you_need" name="Tools_you_need">必要なツール</h2> + +<p>この記事を通じて、理解した内容を確認するために、コードを入力してもらうことがあるでしょう。デスクトップを使用しているのなら、JavaScript のサンプルコードを打ち込むのに最適なのはブラウザーの JavaScript コンソールでしょう(詳しくは<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールとは</a>をご覧ください)。</p> + +<h2 id="What_is_a_variable" name="What_is_a_variable">変数とは</h2> + +<p>変数は値の入れものです。数を合計したり、ある文章の一部を格納するのに使用します。変数が特別なのは、変数が持っている値を変更できることにあります。ちょっと例を見てみましょう。</p> + +<pre class="brush: html notranslate"><button>押してください</button></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('あなたの名前は何ですか？'); + alert('こんにちは、' + name + 'さん、初めまして！'); +}</pre> + +<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>この例では、ボタンを押すとちょっとしたコードが走ります。最初の行では、ボタンを押した人の名前を入力するボックスが画面に表示されます。そして入力された値を変数に保存します。2行目では、入力した人の名前を変数から取り出して、あいさつのメッセージに含めています。</p> + +<p>なぜこれが便利なのかを理解するためには、変数を使用せずにこの例と同じことをするためにはどのようにすればよいのか考えてみましょう。恐らく次のようになるでしょう。</p> + +<pre class="example-bad notranslate">let name = prompt('あなたの名前は何ですか？'); + +if (name === 'アダム') { + alert('こんにちは、アダムさん初めまして！'); +} else if (name === 'アラン') { + alert('こんにちは、アランさん初めまして！'); +} else if (name === 'ベラ') { + alert('こんにちは、ベラさん初めまして！'); +} else if (name === 'ビアンカ') { + alert('こんにちは、ビアンカさん初めまして！'); +} else if (name === 'クリス') { + alert('こんにちは、クリスさん初めまして！'); +} + +// ... さらに続く ...</pre> + +<p>もしかしたら、まだ完全にはコードの内容がわからないかもしれませんね！けれども、変数がなければ、適切なメッセージを表示するために、どんな名前が入力されたのかを延々と判定し続ける巨大なコードを書かなければならないことが、何となくでもわかるのではないでしょうか。これはまったくもって非効率です(このコードは 5人の名前しか表示できないのに既に大きくなっています)。さらに、すべての状況に対応するようには書くことはできないでしょう。</p> + +<p>変数というのはとても合理的です。JavaScript に慣れていけばとても自然なものに感じられるでしょう。</p> + +<p>変数についてもう一つ特筆すべき点は、変数には文字列や数字だけでなく、何でも格納できるということです。複雑なデータや、すごいことをする関数全体ですら保持できます。先に進めばさらに理解できるようになるでしょう。</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 変数に値を「格納する」と言っていますが、これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> + +<h2 id="Declaring_a_variable" name="Declaring_a_variable">変数を宣言する</h2> + +<p>変数を使用するためには、まずは変数を作らなければなりません。より正確には、「宣言する」といいます。そのためには <code>var</code> または <code>let</code> キーワードに続けて変数名を書きます。</p> + +<pre class="brush: js notranslate">let myName; +let myAge;</pre> + +<p>ここでは 2 つの変数 <code>myName</code> と <code>myAge</code> を宣言しています。それではこの 2 つの行をブラウザーのコンソールに入力してみましょう。すぐ下のコンソールに入力することも可能です。続けて、好きな名前で変数を作ってみましょう。</p> + +<div class="note"> +<p><strong>注</strong>: JavaScript では、命令の行末ごとにセミコロン (<code>;</code>) を書かなければなりません。1行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。</p> +</div> + +<p>今実行している環境に値が存在するかどうか、変数名を入力して確かめることができます。例えば、</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>これらの変数は現在、値を保持しておらず、空です。変数の名前を入力すると、<code>undefined</code> という値が表示されるでしょう。もし変数自体が存在していない場合はエラーメッセージが表示されます。以下の変数を入力してみてください。</p> + +<pre class="brush: js notranslate">scoobyDoo;</pre> + +<div class="note"> +<p><strong>注</strong>: 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。</p> +</div> + +<h2 id="Initializing_a_variable" name="Initializing_a_variable">変数を初期化する</h2> + +<p>変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (<code>=</code>) を入力し、変数に入れたい値を渡します。例えば次のように。</p> + +<pre class="brush: js notranslate">myName = 'Chris'; +myAge = 37;</pre> + +<p>コンソールに戻って上の行を入力してみてください。コンソール上に、変数に設定した値がその都度戻ってくることが確認できるでしょう。先ほど言ったように、変数の名前をコンソールに入力することで、その値が確認できます。もう一度、やってみましょう。</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>変数の宣言と初期化を一度にすることもできます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myDog <span class="operator token">=</span> <span class="string token">'Rover'</span><span class="punctuation token">;</span></code></pre> + +<p>2行で書くよりも簡単に書けるので、ほとんどの場合はこのように書くでしょう。</p> + +<h2 id="The_difference_between_var_and_let" name="The_difference_between_var_and_let">var と let の違い</h2> + +<p>ここまでで、「なぜ変数を定義するのに 2 つのキーワードが必要なのですか。なぜ <code>var</code> と<code> let</code> があるのでしょうか」と考えるかもしれません。</p> + +<p>その理由はやや歴史的なものです。JavaScript が最初に作成されたときには、<code>var</code> しかありませんでした。ほとんどの場合、基本的にはうまく機能しますが、その機能にはいくつかの問題があります。その設計は時々混乱したり、実に迷惑になることがあります。そこで、<code>let</code> を最新のバージョンの JavaScript で作成しました。これは、<code>var</code> とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。</p> + +<p>一部の簡単な違いを以下に説明します。ここではすべての違いについて説明するわけではありませんが、JavaScript について詳しく学習するにつれてそれらの違いがわかるようになります (今すぐ読みたい場合は、<a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let のリファレンスページ</a>を参照してください)。</p> + +<p>はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を <code>var</code> で宣言することができます。例えば：</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>myName<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> myName<span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>メモ</strong>: Web コンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1行ずつ入力してもうまくいきません。</p> +</div> + +<p>これは<strong>巻き上げ</strong>のために動作します。件名に関する詳細については <a href="/ja/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var の巻き上げ</a>を読んでください。</p> + +<p>巻き上げはもはや <code>let</code> で動作しません。上記の例で var を let に変更すると、エラーで失敗します。これは良いことです - 変数を初期化した後に宣言すると混乱しやすくなり、コードを理解するのが難しくなります。</p> + +<p>第二に、<code>var</code> を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし <code>let</code> ではできません。次のようにします。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre> + +<p>しかし、次のようにすると 2行目でエラーが発生します。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre> + +<p>代わりにこれをしなければならないでしょう：</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> +myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre> + +<p>繰り返しますが、これは賢明な言語決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。</p> + +<p>これらの理由などから、コードでは <code>var</code> ではなく可能な限り <code>let</code> を使用することをお勧めします。コードで古いバージョンの Internet Explorer をサポートする必要がない限り、<code>var</code> を使用する理由はありません (バージョン 11 まで <code>let</code> をサポートしていません。最近の Windows Edge ブラウザーでは、<code>let</code> をサポートしています)。</p> + +<h2 id="Updating_a_variable" name="Updating_a_variable">変数の値を変更する</h2> + +<p>変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更することができます。次の行を入力してみてください。</p> + +<pre class="brush: js notranslate">myName = 'Bob'; +myAge = 40;</pre> + +<h3 id="An_aside_on_variable_naming_rules" name="An_aside_on_variable_naming_rules">変数の名前付けのルール</h3> + +<p>変数には制限はあるものの、大体どんな名前を付けることができます。ただし、一般的に、アルファベットと数字 (0-9, a-z, A-Z) やアンダースコアだけを使用すべきでしょう。</p> + +<ul> + <li>上記以外の文字を使用するのはやめましょう。環境によってはエラーとなったり、他の国の人々にとって理解しがたいものとなります。</li> + <li>変数名の先頭にアンダースコアは使用してはいけません。一部の JavaScript のコンストラクターにとっては特別な意味を持つため、問題となることがあります。</li> + <li>変数名の先頭に数字を使用してはいけません。これは JavaScript の文法エラーとなります。</li> + <li>複数の単語をつなげる場合は、<a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"小文字始まりのキャメルケース"</a>と呼ばれる書き方に従いましょう。最初の単語を全て小文字で書いて、その後に続く単語の最初の文字を大文字にする記法です。この記事ではこの書き方を採用しています。</li> + <li>保持するデータを説明する、分かりやすい名前を付けましょう。1 つの文字・数字や、長すぎる命名はしないようにしましょう。</li> + <li>変数名は大文字・小文字を区別します。<code>myage</code> と <code>myAge</code> は違うものになります。</li> + <li>最後に、JavaScript の予約語 ( これは JavaScript の文法を構成する単語のことです) を変数名には付けないようにしましょう。<code>var</code>、<code>function</code>、<code>let</code>、<code>for</code> 等を変数名として使用することは出来ません。ブラウザーはそれを異なるように解釈し、結果としてエラーとなるでしょう。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 避けるべき予約語の一覧は<a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">字句文法 — キーワード</a>で見つかるでしょう。</p> +</div> + +<p>良い名前の例：</p> + +<pre class="example-good notranslate">age +myAge +init +initialColor +finalOutputValue +audio1 +audio2</pre> + +<p>悪い名前の例：</p> + +<pre class="example-bad notranslate">1 +a +_12 +myage +MYAGE +var +Document +skjfndskjfnbdskjfb +thisisareallylongstupidvariablenameman</pre> + +<p>さらにいくつかの変数を作成してみましょう。上記の内容をしっかりと覚えてください。</p> + +<h2 id="Variable_types" name="Variable_types">変数のデータ型</h2> + +<p>変数に保持する値にはいくつかの種類があります。このセクションでは、その種類について簡単に解説します。さらに詳細については、もっと先の記事で紹介します。</p> + +<p>ここまで最初の 2 つは見てきましたが、他にもあります。</p> + +<h3 id="Numbers" name="Numbers">数値型</h3> + +<p>変数には数値を格納することができます。数値は 30 のような整数値や、2.456 のような実数値 (浮動小数点数とも呼ばれます ) が存在します。その他の言語とは違い、JavaScript ではデータ型を宣言する必要はありません。もし数値を変数に設定するならば、クォーテーションマークは付けてはいけません。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myAge <span class="operator token">=</span> <span class="number token">17</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Strings" name="Strings">文字列型</h3> + +<p>文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、シングルクォーテーション (<code>'</code>) またはダブルクォーテーション (<code>"</code>) で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> dolphinGoodbye <span class="operator token">=</span> <span class="string token">'So long and thanks for all the fish'</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Booleans" name="Booleans">真偽値</h3> + +<p>真偽値は <code>true</code> と <code>false</code> の二つの値だけを持ちます。どちらのコードを実行するべきかといった、条件を判定するためによく使います。例として、簡単なコードは以下のようなものです。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> iAmAlive <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span></code></pre> + +<p>実際には以下のように使われます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> test <span class="operator token">=</span> <span class="number token">6</span> <span class="operator token"><</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre> + +<p>これは「小なり」演算子 (<code><</code>) を使用して 6 が 3 より小さいかどうかを判定しています。想像の通り、6 は 3 より小さくないためにこれは <code>false</code> となります。このような演算子はまた今度じっくりと紹介します。</p> + +<h3 id="Arrays" name="Arrays">配列</h3> + +<p>配列とは角括弧 (<code>[]</code>) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myNameArray <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Chris'</span><span class="punctuation token">,</span> <span class="string token">'Bob'</span><span class="punctuation token">,</span> <span class="string token">'Jim'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> myNumberArray <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre> + +<p>配列を宣言したら、配列中の位置を指定することで、その値にアクセスすることができます。次のように入力してみましょう。</p> + +<pre class="brush: js notranslate">myNameArray[0]; // 'クリス'と表示されます +myNumberArray[2]; // 40 と表示されます</pre> + +<p>角括弧で表示したい値の位置に応じたインデックス値を指定します。気づいたかもしれませんが JavaScript の配列は 0 始まりで、最初の要素のインデックスが 0 となります。</p> + +<p>配列についても<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">先の記事</a>にて紹介します。</p> + +<h3 id="Objects" name="Objects">オブジェクト</h3> + +<p>プログラミングにおいて、オブジェクトとは現実のもの(オブジェクト)をモデルとしたコードの構造です。幅と長さについての情報をもつ駐車場を表す単純なオブジェクトもあれば、名前や身長、体重、話す言葉やあいさつもすることもできる、人を表すオブジェクトも作ることができます。</p> + +<p>次の行をコンソールに入力してみましょう。</p> + +<pre class="brush: js notranslate">let dog = { name : 'ポチ', breed : 'ダルメシアン' };</pre> + +<p>オブジェクトに格納された情報を取得するには、以下のような書き方をします。</p> + +<pre class="brush: js notranslate">dog.name</pre> + +<p>とりあえずオブジェクトについて、今はここまでです。オブジェクトについてはもっと先のモジュールで紹介します。</p> + +<h2 id="Loose_typing" name="Loose_typing">動的型付け</h2> + +<p>JavaScript は他の言語と異なり、「動的型付け言語」という、格納するデータ型 (数値や文字列や配列など ) を変数に対して指定する必要のない言語です。</p> + +<p>たとえば、もし変数を宣言して、クォーテーションマークで囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myString <span class="operator token">=</span> <span class="string token">'Hello'</span><span class="punctuation token">;</span></code></pre> + +<p>それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myNumber <span class="operator token">=</span> <span class="string token">'500'</span><span class="punctuation token">;</span> <span class="comment token">// oops, this is still a string</span> +<span class="keyword token">typeof</span> myNumber<span class="punctuation token">;</span> +myNumber <span class="operator token">=</span> <span class="number token">500</span><span class="punctuation token">;</span> <span class="comment token">// much better — now this is a number</span> +<span class="keyword token">typeof</span> myNumber<span class="punctuation token">;</span></code></pre> + +<p>上の 4行をコンソールに一つづつ入力して、結果を見てみてください。<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> という演算子に気づきましたか？これは渡した変数のその時点でのデータ型を返します。最初に使用したとき、<code>myNumber</code> には <code>'500'</code> という文字列が入っているため、<code>string</code> と返ってきます。2 回目に呼んだときに何が返ってくるかを見てみましょう。</p> + +<h2 id="Constants_in_JavaScript" name="Constants_in_JavaScript">JavaScript の定数</h2> + +<p>多くのプログラミング言語は定数の概念を持っています — 一度宣言されると変更できない値です。セキュリティ (サードパーティのスクリプトによってこのような値が変更された場合に問題が発生する可能性がある) からデバッグやコードの理解 (変更してはいけない値を誤って変更して混乱する) まで、実行するさまざまな理由があります。</p> + +<p>JavaScript の初期の頃は、定数は存在しませんでした。現代の JavaScript では、<code>const</code> というキーワードがあります。これにより、絶対に変更できない値を格納できます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const</span> daysInWeek <span class="operator token">=</span> <span class="number token">7</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> hoursInDay <span class="operator token">=</span> <span class="number token">24</span><span class="punctuation token">;</span></code></pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code></span></span></span></span> は <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>let</code></span></span></span></span> と全く同じように動作しますが、<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code></span></span></span></span> に新しい値を与えることはできません。次の例では、2行目でエラーが発生します。</p> + +<pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">const</span> daysInWeek <span class="operator token">=</span> <span class="number token">7</span><span class="punctuation token">;</span> +daysInWeek <span class="operator token">=</span> </code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">8;</span></span></span></span></pre> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を取得したかのテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables">Test your skills: variables</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.html b/files/ja/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..4dc00a10e4 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,434 @@ +--- +title: JavaScript とは +slug: Learn/JavaScript/First_steps/What_is_JavaScript +tags: + - 3rd party + - API + - Article + - Beginner + - Browser + - CodingScripting + - Core + - JavaScript + - Learn + - Script + - comments + - external + - inline + - 'l10n:priority' + - what +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">MDN 初心者向け JavaScript コースへようこそ！ この最初の記事では、高水準から JavaScript を見ていき、「JavaScript とは何か？」「これを使うと何ができるか？」などの質問に答えます。JavaScript の用途にきっちりと親しめるようになります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解。</td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>JavaScript とは何か、何ができるか、どのようにウェブサイトに適用できるかについて親しむ。</td> + </tr> + </tbody> +</table> + +<h2 id="高水準の定義">高水準の定義</h2> + +<p>JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です —ウェブページが読み込まれるたびに、単にあなたが見ている静的な情報を表示する以上のことをしています— 更新されたコンテンツの定期表示や、インタラクティブな地図や、2D/3D グラフィックのアニメーションや、ビデオジュークボックスのスクロールなど — たぶん JavaScript が組み込まれています。ウェブ技術をケーキだとするとこれは 3 つ目の層で、他の 2 つ (<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a>) は学習エリアの他の部分でもっと詳しく扱ってきました。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} はマークアップ言語で、これを使ってウェブコンテンツに構造と意味を与えます。例えば段落や見出しや表を定義したり、ページに画像や動画を入れたりします。</li> + <li>{{glossary("CSS")}} は HTML コンテンツに適用するスタイリング規則の言語です。例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。</li> + <li>{{glossary("JavaScript")}} は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。(ええ、すべてできるわけではないですが、JavaScript の数行でできることは素晴らしいです。)</li> +</ul> + +<p>この 3 層は素晴らしい構成です。例としてシンプルなテキストラベルを見てみます。HTML を使って構造と意図をマークアップできます:</p> + +<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>次に、CSS を加えて、見栄えをよくします:</p> + +<pre class="brush: css notranslate">p { + font-family: 'helvetica neue', helvetica, sans-serif; + letter-spacing: 1px; + text-transform: uppercase; + text-align: center; + border: 2px solid rgba(0,0,200,0.6); + background: rgba(0,0,200,0.3); + color: rgba(0,0,200,0.6); + box-shadow: 1px 1px 2px rgba(0,0,200,0.4); + border-radius: 10px; + padding: 3px 10px; + display: inline-block; + cursor: pointer; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>最後に、JavaScript を加えて動的なふるまいを実装します:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('名前を入力して下さい'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>テキストラベルの最新バージョンをクリックしてみて、何が起きるのか見てみます (このデモは GitHub でも見られます— <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ソースコード</a>または<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ライブ実行</a>を参照してください)。</p> + +<p>JavaScript はそれ以上のことができます — もっと詳しく見てみましょう。</p> + +<h2 id="So_what_can_it_really_do" name="So_what_can_it_really_do">実際に何ができるのか</h2> + +<p>JavaScript は次のことを実現する一般的なプログラミング機能で構成されています。</p> + +<ul> + <li>有用な値を変数に格納する。上の例では、ユーザーに新しい名前を問いかけて、<code>name</code> と名付けられた変数に入力された新しい名前を格納しています。</li> + <li>連なった文字 (プログラミングでは「文字列」と呼ばれます) に対する操作。上の例では「Player 1: 」という文字列と <code>name</code> 変数を繋げて「Player 1: Chris」というような新しいラベルを生成しています。</li> + <li>ウェブページで起きる事柄に対処する。先ほどの例では {{Event("click")}} イベントを使用して、ボタンがクリックされたことを検出し、ラベルを更新するコードを実行しました。</li> + <li>他にもたくさんのことができます！</li> +</ul> + +<p>さらにワクワクするのは、JavaScript からすぐに使えるように構築されている機能です。それは <strong>Application Programming Interface</strong> (<strong>API</strong>) と呼ばれ、JavaScript のコードにさらなる強力な力を与えてくれることでしょう。</p> + +<p>API がなければ難しかったり、不可能であるようなコードを、すぐに使えるブロックのように、開発者がプログラムを作ることを可能にします。家を作るときの既製の家具と同じことを、プログラミングでしてくれるのです。自分で設計し、使用する木材を選定し、正しい形で板を切り出して、正しいサイズのネジを見つけて、自分で組み立てるよりも、既に切り出されたボードとネジを使って本棚を組み立てるだけの方がずっと簡単ですよね。</p> + +<p>API は大まかに 2種類に分けられます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>ブラウザー API </strong>はウェブブラウザーに組み込まれていて、コンピューターを取り巻く環境からデータを取り出したり、複雑で便利なことをしてくれたりします。例えば、</p> + +<ul> + <li>{{domxref("Document_Object_Model","DOM (Document Object Model) API")}} は HTML と CSS の操作を可能とします。HTML を生成し、削除し、変更し、動的にページの見た目を変更することなどが可能です。もし (先ほどの簡単な例で見たように) ページ内でポップアップウィンドウを見たり、新しいコンテンツが表示されたりしたのなら、DOM が使用されていることでしょう。</li> + <li>{{domxref("Geolocation","Geolocation API")}} は地理的な情報を取得します。これは <a href="https://www.google.com/maps">Google マップ</a>があなたの所在地を見つけて地図上にプロットする場合に使用されています。</li> + <li>{{domxref("Canvas_API","Canvas")}} と {{domxref("WebGL_API","WebGL")}} の API は 2D や 3D グラフィックでのアニメーションを可能とします。このウェブ技術を使用してすごいことをやってのける人たちがいます。<a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> や <a href="http://webglsamples.org/">webglsamples</a> などのページを見てください。</li> + <li><a href="/ja/Apps/Fundamentals/Audio_and_video_delivery">音声と動画の API</a>、たとえば {{domxref("HTMLMediaElement")}} や {{domxref("WebRTC API", "WebRTC")}} などは適切な音声・動画をウェブページで再生することや、ウェブカメラの動画を撮って他の人のコンピューターで流すといった、マルチメディアの可能性を示してくれます (我々が作った<a href="http://chrisdavidmills.github.io/snapshot/"> Snapshot demo</a> を見てみてください)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といったモダンなブラウザーを使うのがよいでしょう。プロダクションコードを提供する (顧客に実際のコードを納品する) 段になったら、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>を読んでみるとよいでしょう。</p> +</div> + +<p><strong>サードパーティ API </strong>はブラウザーには組み込まれておらず、さらに普通はウェブ上のどこかからそのコードと情報を探さなければなりません。例えば、</p> + +<ul> + <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使用して、ウェブサイトに最新のツイートを表示させることができます。</li> + <li><a href="https://developers.google.com/maps/">Google マップ API</a> と <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> を使用して、ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a> で扱っています。</p> +</div> + +<p>ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！</p> + +<h2 id="What_is_JavaScript_doing_on_your_page" name="What_is_JavaScript_doing_on_your_page">JavaScript は何をするのか</h2> + +<p>まずは実際にコードを見てみましょう。そしてページで JavaScript を動かすと何が起きるのか見てみましょう。</p> + +<p>ブラウザーをウェブページに読み込んだときの話を簡単に説明します (<a href="/ja/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> の記事で最初に出てきました)。ウェブページをブラウザーで見たとき、実行環境 (ブラウザーのタブ) の中で、コード (HTML、CSS そして JavaScript) が実行されます。これは素材 (コード) を加工して製品 (ウェブページ) を出力する工場のようなものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。なお、ウェブドキュメント上のコードは通常、ページ上に現れる順序で読み込まれて実行されます。もし JavaScript がロードされ、影響を受ける HTML および CSS がロードされる前に実行しようとすると、エラーが発生する可能性があります。この回避策については、記事の後半の「<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">スクリプトの読み込み方針</a>」セクションで学習します。</p> + +<h3 id="ブラウザーのセキュリティ">ブラウザーのセキュリティ</h3> + +<p>ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。互いに干渉することが出来てしまえば、ウェブの悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。</p> +</div> + +<h3 id="JavaScript_running_order" name="JavaScript_running_order">JavaScript の実行順序</h3> + +<p>ブラウザーが JavaScript のブロックを見つけたとき、たいていは先頭から最後に向かって順番に実行されます。つまりどの順番で実行されるかということに気を配らなければなりません。例えば、最初の例で見た JavaScript のブロックに戻りましょう。</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('名前を入力して下さい'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>このコードでは文章段落を選択して (1 行目)、イベントリスナーを登録して (3 行目) 段落がクリックされたとき、<code>updateName()</code> というコードブロック (5 行目から 8 行目) が実行されるようにしています。<code>updateName()</code> というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。</p> + +<p>もし、最初の 2行を入れ替えた場合、動かなくなってしまいます。代わりに<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に <code>TypeError: para is undefined</code> というエラーが出るでしょう。この意味は <code>para</code> オブジェクトがまだ存在しないため、イベントリスナーを設定できないということを表しています。</p> + +<div class="note"> +<p><strong>注</strong>: これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。</p> +</div> + +<h3 id="Interpreted_versus_compiled_code" name="Interpreted_versus_compiled_code">インタープリターとコンパイルコード</h3> + +<p>もしかしたら、<strong>インタープリター</strong>と<strong>コンパイル</strong>という用語をプログラミングの文脈で聞いたことがあるかもしれませんね。インタープリターでは、コードが上から下に実行されてコードの実行結果がすぐに返ってきます。ブラウザーが実行する前にコードを何らかの形に変換する必要はありません。コードはプログラマーに親しみやすいテキストで受け取って、それから直接処理されます。</p> + +<p>反対に、コンパイル言語はコンピューターで実行する前に他の形式に変換 (コンパイル) しなければなりません。例えば C/C++ は機械語にコンパイルされてから、コンピューターで実行されます。プログラムは、元のプログラムソースコードから生成されるバイナリーフォーマットで実行されます。</p> + +<p>JavaScript は軽量なインタープリター型プログラミング言語です。ウェブブラウザーは元のテキストの形で JavaScript コードを受け取り、それからスクリプトを実行します。技術的な見地からは、たいていの JavaScript インタープリターは <strong>just-in-time compiling</strong> というテクニックを使ってパフォーマンスを向上させています; スクリプトが使われるときに、JavaScript コードが速いバイナリーフォーマットにコンパイルされて、可能な限り高速に実行されます。しかし、JavaScript は、事前ではなく実行時にコンパイルされるために、インタープリター言語と考えられています。</p> + +<p>ここで詳細は話しませんが、どちらの方式も長所と短所があります。</p> + +<h3 id="Server-side_versus_client-side_code" name="Server-side_versus_client-side_code">サーバーサイドコードとクライアントサイドコード</h3> + +<p><strong>サーバーサイド</strong>と<strong>クライアントサイド</strong>という言葉も聞いたことがあるかもしれません。特にウェブ開発でよく聞かれます。クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。この JavaScript モジュールのことを明示的に<strong>クライアントサイド JavaScript </strong>と言います。</p> + +<p>反対に、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。ウェブで人気のあるサーバーサイドの言語は、PHP、Python、Ruby や ASP.NET など。そして JavaScript です！ JavaScript はサーバーサイドの言語としても使われます。人気のある Node.js 環境がその例です。サーバーサイドの JavaScript については <a href="/ja/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> のトピックを見てください。</p> + +<h3 id="Dynamic_versus_static_code" name="Dynamic_versus_static_code">動的コードと静的コード</h3> + +<p>クライアントサイドの JavaScript と、サーバーサイドの言語を説明するのに<strong>動的</strong>という言葉を使います。これはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。サーバーサイドのコードは、データベースからデータを取得して動的にコンテンツを生成します。一方、クライアントサイドの JavaScript はクライアント上のブラウザーで HTML のテーブルを生成したり、そのテーブルにサーバーから指示を受け、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。それぞれの文脈で、少し異なる意味合いではありますが、関連しています。そしてどちらの方式も (サーバーサイドもクライアントサイドも) たいていは同時に使用されます。</p> + +<p>動的に更新されるコンテンツを含まないウェブページは<strong>静的</strong>と表現されます。静的なウェブページとは常に同じコンテンツを表示するページのことです。</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page" name="How_do_you_add_JavaScript_to_your_page">ページに JavaScript を追加する方法</h2> + +<p>JavaScript は CSS と同じような方法で、HTML ページに適用することができます。CSS では {{htmlelement("link")}} 要素を使用することで外部のスタイルシートを適用することができ、また、{{htmlelement("style")}} 要素を使用することで HTML 内部に書かれたスタイルシートを適用することが出来ました。しかし、JavaScript で HTML に書く必要があるのは {{htmlelement("script")}} 要素だけです。どのように書くのか見てみましょう。</p> + +<h3 id="Internal_JavaScript" name="Internal_JavaScript">内部の JavaScript</h3> + +<ol> + <li>まずは <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a> ファイルを自分のコンピューターにコピーします。どこか適当な場所に保存してください。</li> + <li>テキストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。</li> + <li>次に、テキストエディターで <code></head></code> タグの直前に以下のコードを追加します。 + <pre class="brush: html notranslate"><script> + + // JavaScript をここに書きます + +</script></pre> + </li> + <li>それでは {{htmlelement("script")}} 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。 + <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました!'; + document.body.appendChild(para); + } + + const buttons = document.querySelectorAll('button'); + + for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。コピーしてコードを書いたファイルは <code>.html</code> というファイル名ですか？ {{htmlelement("script")}} 要素を <code></head></code> タグの直前に追加しましたか？ JavaScript を上の例の通りに書きましたか？<strong> JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。</strong>文字化けしているなら、テキストエディターの文字エンコーディングの設定が UTF-8 になっていることを確認してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: GitHub にあるこちらのバージョン、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">動くバージョンもあります</a>) を見ることもできます。</p> +</div> + +<h3 id="External_JavaScript" name="External_JavaScript">外部の JavaScript</h3> + +<p>これで JavaScript が動きましたね。しかし、JavaScript を外部のファイルに書きたいときはどうすればよいでしょうか？ 次の例を見てみましょう。</p> + +<ol> + <li>まず、先ほどの HTML ファイルと同じディレクトリーに新しいファイルを作ります。これを <code>script.js</code> と名付けます。.js という拡張子であることを確認してください。それで JavaScript であると認識されるのです。</li> + <li>{{htmlelement("script")}} 要素を以下のコードで置き換えます。 + <pre class="brush: html notranslate"><script src="script.js" defer></script></pre> + </li> + <li><code>script.js</code> に、次のスクリプトを追加します。 + <pre class="brush: js notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました!'; + document.body.appendChild(para); +} + +const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>HTML ファイルを保存して、ブラウザーを更新してください。同じページが見えますね！ 同じように動いていますが、今回は外部の JavaScript ファイルです。コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。大きなスクリプトの塊がないほうが、HTML も読みやすくなります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: GitHub でこちらのバージョンも見られます。<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> です (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">動いているバージョンもあります</a>)。</p> +</div> + +<h3 id="Inline_JavaScript_handlers" name="Inline_JavaScript_handlers">インラインの JavaScript ハンドラー</h3> + +<p>たまに JavaScript のコードが HTML の途中に書かれているのを見かけます。こんな感じで。</p> + +<div id="inline_js_example"> +<pre class="brush: js example-bad notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました！'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">押してください</button></pre> +</div> + +<p>このバージョンのデモを下のボタンを押して確認してください。</p> + +<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>このデモは先ほどのセクションのものと同じ機能を持っていますが、{{htmlelement("button")}} 要素に <code>onclick</code> 属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。</p> + +<p><strong>書けはしますが、このようにはしないでください。</strong>この書き方は HTML を JavaScript で汚してしまう悪い書き方です。さらに、<code>onclick="createParagraph()"</code> という属性を JavaScript を適用したいボタンすべてに書かなければなりませんので、とても非効率です。</p> + +<p>純粋な JavaScript では、1 つの命令ですべてのボタンが取得できます。先ほど使用した、すべてのボタンを取得するためのコードは以下の通りでした。</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>これは <code>onclick</code> 属性を用いて書くより少し長いように見えますが、どれだけそのページにボタンを追加し、削除し、いくつあろうとも期待通りに動くでしょう。コードを変更することなく。</p> + +<div class="note"> +<p><strong>注</strong>: 自分の <code>apply-javascript.html</code> ファイルを編集して、いくつかボタンを追加してみて下さい。再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。素敵でしょ！</p> +</div> + +<h3 id="Script_loading_strategies" name="Script_loading_strategies">スクリプトの読み込み方針</h3> + +<p>スクリプトを適切なタイミングで読み込むためには、いくつかの問題があります。 それは見掛けほど簡単ではありません！ 一般的な問題は、ページ上のすべての HTML が、現れた順に読み込まれることです。JavaScript を使用してページ上の要素（またはより正確には、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>）を操作している場合、何かをしようとする HTML の前に JavaScript が読み込まれ、解析されてもコードは機能しません。</p> + +<p>上のコード例では、内部の例と外部の例は、HTML 本文が解析される前に JavaScript が読み込まれて文書の head で実行されています。これによりエラーが発生する可能性があるため、いくつかの構文を使用して回避しています。</p> + +<p>内部の例では、コードの周りにこの構造を見ることができます。</p> + +<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>これはブラウザーの "DOMContentLoaded" イベントをリッスンするイベントリスナーで、HTML body が完全に読み込まれて解析されたことを示します。このブロック内の JavaScript はそのイベントが発生するまで実行されないため、エラーは回避されます (コースの後半で<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントについて学習</a>します) 。</p> + +<p>外部の例では、より現代的な JavaScript 機能の <code>defer</code> 属性を使用して問題を解決し、<code><script></code> 要素に達した後も HTML コンテンツのダウンロードを続行するようブラウザーに指示します。</p> + +<pre class="brush: js notranslate"><script src="script.js" defer></script></pre> + +<p>この場合、スクリプトと HTML の両方が同時に読み込まれ、コードが機能します。</p> + +<div class="note"> +<p><strong>注</strong>: 外部のケースでは、<code>defer</code> 属性が問題を解決したため、<code>DOMContentLoaded</code> イベントを使用する必要はありませんでした。<code>defer</code> は外部スクリプトに対してのみ機能するため、内部の例では <code>defer</code> による解決策を使用しませんでした。</p> +</div> + +<p>この問題に対する昔ながらの解決策は、すべての HTML が解析された後に読み込まれるように、body の下部に（たとえば <code></body></code> タグの直前に）script 要素を置くことでした。この解決策（および上記の <code>DOMContentLoaded</code> による解決策）の問題点は、HTML DOM が読み込まれるまでスクリプトの読み込みと解析が完全にブロックされることです。JavaScript がたくさんある大規模なサイトでは、これは大きなパフォーマンス上の問題を引き起こす可能性があり、サイトを遅くします。</p> + +<h4 id="async_and_defer" name="async_and_defer">async と defer</h4> + +<p>実際には、スクリプトのブロッキングの問題を回避できるモダンな機能が 2 つあります — <code>async</code> と <code>defer</code>(すでに見てきました)。これらの 2 つの違いを見てみましょう。</p> + +<p><code>async</code> 属性を使って読み込むスクリプトは(下記を見てください)、ページのレンダリングをブロックせずにスクリプトをダウンロードし、スクリプトのダウンロードが終了すると直ちに実行します。複数のスクリプトが特定の順序で実行されるという保証はありませんが、ページの残りの部分の表示を停止することはありません。ページ内のスクリプトが互いに独立して実行され、ページ上の他のスクリプトに依存しない場合は、<code>async</code> を使用することをお勧めします。</p> + +<p>たとえば、次のスクリプト要素があるとします。</p> + +<pre class="brush: html notranslate"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>スクリプトが読み込まれる順序に依存することはできません。<code>jquery.js</code> は <code>script2.js</code> と <code>script3.js</code> に前後して読み込まれます。この場合、<code>jquery</code> に依存するこれらのスクリプトの関数は、スクリプトの実行時に <code>jquery</code> が定義されないため、エラーを生成します。</p> + +<p>読み込むバックグラウンドスクリプトがいくつもあって、それらをできるだけ早く実行したい場合に <code>async</code> を使用するべきです。例えば、ゲームを実際に開始するときに必要になるいくつかのロードすべきゲームデータファイルがあるとして、今のところは、スクリプトのロードによってブロックされずに、ゲームのイントロ、タイトル、ロビーを表示したいだけ、という場合です。</p> + +<p><code>defer</code> 属性つきのスクリプト(下記のようなもの)は、ページに現れた順序でスクリプトを実行し、スクリプトとコンテンツがダウンロードされるとすぐにスクリプトを実行します。</p> + +<pre class="brush: html notranslate"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p><code>defer</code> 属性を持つすべてのスクリプトは、ページに現れた順序で読み込まれます。したがって、2番目の例では、<code>jquery.js</code> が <code>script2.js</code> と <code>script3.js</code> の前に読み込まれ、<code>script2.js</code> が <code>script3.js</code> の前に読み込まれることは確実です。ページコンテンツがすべて読み込まれるまでは、実行せず、これはスクリプトが DOM配置に依存している場合に便利です(例: ページの要素を変更する場合)</p> + +<p>要約すると、</p> + +<ul> + <li><code>async</code> と <code>defer</code> の両方とも、ページのその他の部分 (DOM など) がダウンロード中な時でも、ブラウザーにスクリプトを別々のスレッドでダウンロードするよう指示して、このためページ読み込みはスクリプトでブロックされません。</li> + <li>依存関係なしでスクリプトを単独ですぐに実行できる場合は、<code>async</code> を使用します。</li> + <li>スクリプトが他のスクリプトや DOM配置に依存している場合は、<code>defer</code> を使用してスクリプトを読み込み、対応する <code><script></code> 要素をブラウザーで実行して欲しい順序で配置します。</li> +</ul> + +<h2 id="コメント">コメント</h2> + +<p>HTML や CSS と同様に、JavaScript でもコード内にブラウザーが実行しない「コメント」を書くことができます。仲間の開発者 (または、6 カ月後のコードを忘れた自分自身) に対して動作方法を書くことができます。コメントはとても便利ですしたくさん書きましょう。大きなプログラムを書くのならなおのことです。コメントの書き方は 2 種類あります。</p> + +<ul> + <li>1 行で収まるコメントは 2 つのスラッシュ (//) のあとに続けて書きます。 + <pre class="brush: js notranslate">// これはコメントです</pre> + </li> + <li>複数行に渡るコメントは /* から */ の間に書きます。 + <pre class="brush: js notranslate">/* + これも + コメントです +*/</pre> + </li> +</ul> + +<p>先ほどのデモでコメントを書くならば、以下のようにします。</p> + +<pre class="brush: js notranslate">// 関数: HTML の body タグ内の一番下に新しい段落を追加します。 + +function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました！'; + document.body.appendChild(para); +} + +/* + 1. ページ内のボタンへの参照をすべて取り出して配列に入れる。 + 2. すべてのボタンをループで回し、クリックイベントのリスナーを追加する + + どのボタンが押されても、createParagraph() 関数が実行されるようにする。 +*/ + +const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<div class="note"> +<p><strong>メモ</strong>: 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>さて、JavaScript の世界に足を踏み入れましたね。なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。進むにつれ、少しでしたが例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。</p> + +<p>JavaScript が少し大変だと思いましたか。でも心配は無用です。このコースを受講することで一歩ずつ、理解しながら前に進んで行きましょう。次の記事で、まっすぐに飛び込んで自分で JavaScript のページを作って<a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">実践に飛び込んでいきましょう</a>。</p> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "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> diff --git a/files/ja/learn/javascript/first_steps/what_went_wrong/index.html b/files/ja/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..accce26c15 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,265 @@ +--- +title: 何が間違っている? JavaScript のトラブルシューティング +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Article + - Beginner + - CodingScripting + - Debugging + - Developer Tools + - Error + - JavaScript + - Learn + - Tutorial + - console.log + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">前の記事の「数字当てゲーム」を作っていて、動かないことはありませんでしたか？恐れることはありません。この記事では、そんな心配をしなくて済むように、JavaScript のエラーを見つけて直す方法を伝授します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解、JavaScript についての理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>コード内のシンプルな問題を修正し始める能力と自信を得る。</td> + </tr> + </tbody> +</table> + +<h2 id="Types_of_error" name="Types_of_error">エラーの種類</h2> + +<p>コードに誤りがある場合、一般的に以下の 2 つのうち、どちらかの誤りであることがよくあります。</p> + +<ul> + <li><strong>文法エラー</strong>: プログラムが全く動かなかったり、途中で止まったりするような記述エラーで、通常はエラーメッセージが出力されます。正しいツールに慣れて、エラーメッセージの内容がわかるのなら、さほど無理なく修正が可能です。</li> + <li><strong>論理のエラー</strong>: 書き方は正しくても、コードが意図した通りに動ないエラーです。つまりプログラムは動くのですが、間違った結果を返します。たいていの場合に、問題となる箇所に直接のエラーメッセージが出ることがないため、文法エラーよりも直すのが難しいことが多いです。</li> +</ul> + +<p>まあ、こんなに単純ではありません。もっと深く追及していくと違う種類のエラーも出てくることでしょう。しかし、見習いのうちは上の分類で十分です。上記2 つの種類のエラーについて見ていきましょう。</p> + +<h2 id="An_erroneous_example" name="An_erroneous_example">誤りの例</h2> + +<p>始めるにあたり、数字当て (今回は当たらない) ゲームに戻りましょう。わざとエラーになるバージョンを見ていきます。Github に行って <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> をローカルにコピーしてください。(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">ライブ実行はこちら</a>を見てください)</p> + +<ol> + <li>始めるには、コピーしたファイルをお好みのテキストエディターとブラウザで開きます。</li> + <li>ゲームで遊んでみてください。気づきましたか。"予想を入力" ボタンを押しても動きません！</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: もしかしたら、あなたにも直したいと思っているバージョンがあるかもしれませんね。ですが、まずはこちらで用意したバージョンを直してみてください。そうすれば、ここで教えるテクニックが身につきます。それから、あなた自身のプログラムに戻って直してみてください。</p> +</div> + +<p>それでは、開発者コンソールで文法エラーがあるか調べてみましょう。それからエラーを修正します。どうやって修正すればいいかは今から教えます。</p> + +<h2 id="Fixing_syntax_errors" name="Fixing_syntax_errors">文法エラーを修正する</h2> + +<p>以前に<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>で、簡単なコマンドを入力してもらったことがあったと思います。(思い出せなければ、リンクを見て開き方を調べてください。) コンソールの何が便利かといえば、ブラウザの JavaScript エンジンに読み込ませようとしている JavaScript コードに文法エラーがあれば、すべて教えてくれるのです。さあ、バグを潰していきましょう。</p> + +<ol> + <li><code>number-game-errors.html</code> ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>これは分かりやすいエラーです。ブラウザからもいくつか情報が出ています。(上のスクリーンショットは FireFox のものですが、他のブラウザでも同様の情報が表示されるでしょう。) 左から順に説明します。 + <ul> + <li>赤色の 「x」 ボタンはエラーがあることを示しています。</li> + <li>「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。</li> + <li>「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。</li> + <li>JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。</li> + <li>エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86行目の 3文字目です。</li> + </ul> + </li> + <li>テキストエディターで 86行目を見てみましょう。 + <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre> + </li> + <li>エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリタに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn <em>機能の名前</em>」と検索してみるのがよいでしょう。今回は代わりに <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> のリンクを張っておきます。</li> + <li>ページによると、関数の名前を間違えたみたいですね！JavaScript は大文字・小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは <code>addeventListener</code> を <code>addEventListener</code> に修正してエラーを直しましょう。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="Syntax_errors_round_two" name="Syntax_errors_round_two">文法エラーその 2</h3> + +<ol> + <li>ファイルを保存してブラウザを更新すると、エラーが消えています。</li> + <li>予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>今回のエラーを見ると、78行目で"TypeError: lowOrHi is null"が起きています。 + <div class="note"><strong>注</strong>: <code><a href="/ja/docs/Glossary/Null">Null</a></code> は「何もない」ことや「値がない」ことを表す特別な値です。つまり <code>lowOrHi</code> が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。</div> + + <div class="note"><strong>注</strong>: このエラーは関数内部 (<code>checkGuess() { ... }</code> ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数の記事</a>を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、86行目の <code>checkGuess()</code> 関数が実行されるまで実行されず、エラーも発生していませんでした。</div> + </li> + <li>78行目を見てください。以下のコードが書かれています。 + <pre class="brush: js notranslate">lowOrHi.textContent = '今の予想は大きすぎです!';</pre> + </li> + <li>この行は <code>lowOrHi</code> 定数の <code>textContent</code> プロパティに文字列を設定しようとしていますが、<code>lowOrHi</code> 定数に適切な値が設定されていないため上手く動きません。<code>lowOrHi</code> が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 48行目でしょう。 + <pre class="brush: js notranslate">const lowOrHi = document.querySelector('lowOrHi');</pre> + </li> + <li>ここでは、HTML の要素を参照する変数を作ろうとしています。この行の後ろで、値が <code>null</code> になっているか確認するため以下のコードを直後の 49行目に追加します。 + <pre class="brush: js notranslate">console.log(lowOrHi);</pre> + + <div class="note"> + <p><strong>注</strong>: <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code> は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48行目で <code>lowOrHi</code> にセットしたはずの値がコンソールに出力されるでしょう。</p> + </div> + </li> + <li>ファイルを保存して再度ブラウザで読み込みます。そして <code>console.log()</code> の結果をコンソールで見てみましょう。 <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">わかりましたね。<code>lowOrHi</code> の値は <code>null</code> でした。これで問題が 48行目にあることがわかりました。</li> + <li>それでは何が問題となり得るか考えてみましょう。48行目では要素への参照を CSS セレクタを使用して取得する <code><a href="/ja/docs/Web/API/Document/querySelector">document.querySelector()</a></code> メソッドが使用されています。ファイルの少し上のほうにある、問題となる{{htmlelement("p")}} 要素を見てみましょう。 + <pre class="brush: js notranslate"><p class="lowOrHi"></p></pre> + </li> + <li>ここではクラスセレクタが必要です。クラスセレクタはドット (<code>.</code>) で始まりますが、48行目で <code>querySelector()</code> メソッドに渡された文字列にはドットがありません。これが問題でしょう！48行目の <code>lowOrHi</code> を <code>.lowOrHi</code> に変更してみてください。</li> + <li>ファイルを保存して再度読み込むと、<code>console.log()</code> の文は求めていた <code><p></code> 要素を表示しています。何とか次のエラーを潰すことができました！<code>console.log()</code> の行は削除してもいいですし、後で使うために残しておいても大丈夫です。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="Syntax_errors_round_three" name="Syntax_errors_round_three">文法エラーその 3</h3> + +<ol> + <li>さて、もう一度ゲームをプレイしてみましょう。ゲームは問題なく動いているようです。正解するか、残りの予想回数がなくなって、ゲームが終わるまでは...。</li> + <li>ここで、またゲームが止まってしまいました。最初のエラーと同じく "TypeError: resetButton.addeventListener is not a function" というエラーです！しかし、今回は 94行目から発生していると表示されています。</li> + <li>94行目を見ると、同じ間違いを犯したことがわかります。もう一度 <code>addeventListener</code> を <code>.addEventListener</code> に直してください。</li> +</ol> + +<h2 id="A_logic_error" name="A_logic_error">論理のエラー</h2> + +<p>今回はゲームは上手く動いているようです。しかし、何度か動かしていると、予想すべき「ランダムな」数字が常に 1 であることに気づくでしょう。これはあまりやりたくないゲームですね！</p> + +<p>これはゲームのロジックに間違いなく問題があります。ゲームはエラーとはなっていませんが、正しく動いてはいません。</p> + +<ol> + <li><code>randomNumber</code> 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 44行目のあたりです。 + + <pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random()) + 1;</pre> + そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113行目のあたりです。</li> + <li> + <pre class="brush: js notranslate">randomNumber = Math.floor(Math.random()) + 1;</pre> + </li> + <li>これらの行が問題となるかを確認するため、<code>console.log()</code> にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。 + <pre class="brush: js notranslate">console.log(randomNumber);</pre> + </li> + <li>保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される <code>randomNumber</code> の値が常に 1 であることに気づきます。</li> +</ol> + +<h3 id="Working_through_the_logic" name="Working_through_the_logic">ロジックを何とかする</h3> + +<p>これを直すには、この行が何をしているのか考えなければなりません。まず <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。</p> + +<pre class="brush: js notranslate">Math.random()</pre> + +<p>次に <code>Math.random()</code> の実行結果を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code> に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。</p> + +<pre class="notranslate">Math.floor(Math.random()) + 1</pre> + +<p>0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre> + +<p>さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100) + 1;</pre> + +<p>先ほどの 2行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう！</p> + +<h2 id="Other_common_errors" name="Other_common_errors">その他のよくあるエラー</h2> + +<p>コードを書いていると、よくあるエラーは他にもあります。このセクションではそれらを紹介してみましょう。</p> + +<h3 id="SyntaxError_missing_before_statement" name="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3> + +<p>たいてい、このエラーはコード行のどこかの末尾にセミコロン (;) がないことを意味しています。しかし、時にはかなり難解です。例えば <code>checkGuess()</code> 関数内の、この行を</p> + +<pre class="brush: js notranslate">var userGuess = Number(guessField.value);</pre> + +<p>以下のように変更してみます。</p> + +<pre class="brush: js notranslate">var userGuess === Number(guessField.value);</pre> + +<p>そうすると、このエラーが吐かれます。違うことをやろうとしているように見えるのでしょう。値を変数にセットする代入演算子 (<code>=</code>) と、ある値が別の値と同じかどうかを判定して <code>true<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> または </span></font></code><code>false</code> を返す等値演算子 (<code>===</code>) を間違わないようにしてください。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="The_program_always_says_youve_won_regardless_of_the_guess_you_enter" name="The_program_always_says_you've_won_regardless_of_the_guess_you_enter">プログラムが入力の内容に関わらずいつでも勝ちだと言ってくる</h3> + +<p>これは代入と比較を混同する別の症状でしょう。たとえば、<code>checkGuess()</code> 関数内の、この行を</p> + +<pre class="brush: js notranslate">if (userGuess === randomNumber) {</pre> + +<p>以下のように変更してみます。</p> + +<pre class="brush: js notranslate">if (userGuess = randomNumber) {</pre> + +<p>判定で常に <code>true</code> が返るようになり、常にプレイヤーが勝ったことになってしまいます。気を付けましょう！</p> + +<h3 id="SyntaxError_missing__after_argument_list" name="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3> + +<p>これは単純です。大体は関数やメソッドの呼び出しで閉じ括弧を忘れたことを表しています。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="SyntaxError_missing_after_property_id" name="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> + +<p>たいてい、このエラーは JavaScript のオブジェクトの書き方が正しくないことに関連しているのですが、</p> + +<pre class="brush: js notranslate">function checkGuess() {</pre> + +<p>上記のコードを以下のように変えても起きるでしょう。</p> + +<pre class="brush: js notranslate">function checkGuess( {</pre> + +<p>この変更でブラウザは関数の内容を関数の引数として渡しているように勘違いしてしまいます。括弧には気を付けましょう！</p> + +<h3 id="SyntaxError_missing_after_function_body" name="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3> + +<p>これは簡単ですね。たいていの場合、関数や条件ブロックの終わりの閉じ波括弧が抜けていることを表します。<code>checkGuess()</code> 関数の最後の閉じ波括弧を消すと発生します。</p> + +<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal" name="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' または SyntaxError: unterminated string literal</h3> + +<p>これらのエラーは文字列の始まりもしくは終わりのクォーテーションマークが抜けていることを表します。最初のエラーは、文字列の始めのクォーテーションマークの代わりに、ブラウザが予期しない文字列を見つけた (string には実際に見つけた文字列が入ります) ことを表し、2 つ目のエラーは文字列がクォーテーションマークで終わっていないことを表します。</p> + +<p>どのエラーにも言えることですが、上の例でも見たように、考えてください。エラーが起きた時に、エラーが起きた行の番号をみて、その行にエラーがあるか見てみます。エラーはその行に存在しないこともありますし、上述した理由以外で起きることもあるということを心に留めておいてください。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> と <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> のリファレンスページで、これらエラーに関する詳細な説明が見られます。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、特に学習の最初の過程では、うまくいかない時にも寝る時間を数時間節約し、多少早く進捗をあげられるでしょう。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<div> +<ul> + <li>ここで挙げたもの以外にもいくつかのエラーの種類があります。詳細はリファレンスをご覧ください。( <a href="/ja/docs/Web/JavaScript/Reference/Errors">JavaScript エラーリファレンス</a> )</li> + <li>この記事を読んでもまだ直し方がわからないエラーに遭遇した場合は助けを求めましょう！ <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse フォーラムの Learning カテゴリー</a>や <a class="external external-icon" href="https://wiki.mozilla.org/Matrix">Matrix</a> の <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs ルーム</a>などで聞いてください。{{訳注("いずれも英語ベースのもの")}}。日本語では <a href="https://join.slack.com/t/mozillajp/shared_invite/MjI2NDMwODUwNzY5LTE1MDI4MjEyMjktYjE2MThlMmM4OA">Mozilla Japan コミュニティの Slack</a> など。どんなエラーなのか教えてくれれば、助けてあげられるかもしれません。コードを見せてくれてもいいですね。</li> +</ul> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> |