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

---
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="/ja/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>&lt;</code></td>
   <td>小なり</td>
   <td>左辺の値が右辺の値より小さいこととを判定します</td>
   <td><code>10 &lt; 6</code></td>
  </tr>
  <tr>
   <td><code>&gt;</code></td>
   <td>大なり</td>
   <td>左辺の値が右辺の値より大きいことを判定します</td>
   <td><code>10 &gt; 20</code></td>
  </tr>
  <tr>
   <td><code>&lt;=</code></td>
   <td>以下なり</td>
   <td>左辺の値が右辺の値以下であることを判定します</td>
   <td><code>3 &lt;= 2</code></td>
  </tr>
  <tr>
   <td><code>&gt;=</code></td>
   <td>以上なり</td>
   <td>左辺の値が右辺の値以上であることを判定します</td>
   <td><code>5 &gt;= 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">&lt;button&gt;起動する&lt;/button&gt;
&lt;p&gt;マシンは停止中です。&lt;/p&gt;
</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="/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="/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>