Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Learn_web_development/Core/Scripting/Math below:

JavaScript での基本演算 — æ•°å€¤ã¨æ¼”ç®—å - ウェブ開発のå¦ç¿’

• 前のページ
• 次のページ

今回は JavaScript での数学的処理についてです。我々の命令を実行するために上手く数値を操作するのにどのように 演算子 や、その他の機能を使用できるのかを見ていきましょう。

• JavaScript の基本的な数値演算 — 加算、減算、乗算、除算。
• 数値が文字列として定義されている場合、それは数値ではなく、計算が間違ってしまう可能性があります。
• 文字列を数値に変換する Number()。
• 演算子の優先順位。
• インクリメントとデクリメント。
• 代入演算子と比較演算子。
• Math オブジェクトの基本的なメソッド、 Math.random()、Math.floor()、Math.ceil() など。

まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど、数学が生活に必要なものであるということは、否定することは出来ません。特に JavaScript （または同様の言語）のプログラミングを学習しているのなら、なおさらです。数値データを処理したり、計算をしたりすることが多いので、JavaScript に数学的な関数が十分にそろっていることは、驚くことではありません。

この記事ではまず知っておくべき基礎的なものに絞って見ていきます。

プログラミングをしていると、慣れ親しんだ普通の数値ですら難しいと思えるかもしれません。数値と言ってもいくつか種類があり、それぞれ名前を付けて区別しています。

• 整数 (integer) とは 10、400、-5 といった数値のことです。
• 浮動小数点数 (float) とは小数以下の数と小数桁を持つ 12.5 や 56.7786543 といった数値のことです。

さらに通常とは異なる数値表現も使います！今まで出てきた数値は 10 を基数 (0 ～ 9 を 1 つの桁として扱う) とした 10 進数でしたが、他にも以下のようなものがあります。

• 2 進数 — 0 と 1 だけで表現される、コンピューターの最も低レベルな言語です。
• 8 進数 — 8 を基数として、1 桁を 0 ～ 7 で表します。
• 16 進数 — 16 を基数として、1 桁を 0 ～ 9、a ～ f で表します。もしかしたら CSS の色を設定するときに見たかもしれませんね。

脳みそが溶けそうだと思う前に、少し待ってください！ まず、この講座では 10 進数しか扱いません。それに「もしかすれば」ですが、他の数値表現について考える機会は訪れないということだってあり得ます。

さらにちょっといいことを教えましょう。いくつかの他のプログラミング言語とは違い、JavaScript には数値（整数と小数の両方）を表すデータ型が一つしかありません。わかりますか？数値型 (Number) で、これは整数と小数の両方です。これは JavaScript でどんな型の数値を扱おうとも、それらを全く同じように扱うことが可能だということを意味します。

メモ: 実は、JavaScript には 2 つ目の数値型である長整数型 (BigInt) があり、これはとても大きな整数に使います。しかしこのコースの目的としては、数値型 (Number) の値だけに関心を持つことにします。

書き方の復習を兼ねてちょっと数字で遊んでみましょう。以下に示すコマンドを開発者ツールの JavaScript コンソールに入力してみましょう。もちろんこのページの埋め込みコンソールを使っても構いません。

1. まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。

   const myInt = 5;
   const myFloat = 6.667;
   myInt;
   myFloat;
   

2. 数値には引用符が不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。

3. さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。 JavaScript では、typeof という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。

   typeof myInt;
   typeof myFloat;
   

   どちらの変数についても "number" という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！

Number オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクトリファレンスページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。

例えば、数値を固定の桁数に丸めるには toFixed() メソッドを使用します。ブラウザーのコンソールに次の行を入力します。

const lotsOfDecimal = 1.766584958675746364;
lotsOfDecimal;
const twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;

たまに、文字列型として格納されている数字で計算ができなくなってしまうことがあります。これは、データがフォーム入力に入力され、input の type が text である場合によく起こります。この問題を解決する方法があります - 文字列の値を Number() コンストラクターに渡すと、同じ値の数値バージョンを返します。

例えば、これらの命令をコンソールに入力してみてください。

let myNumber = "74";
myNumber += 3;

答えは 743 です。77 ではありません。 なぜなら myNumber は文字列として定義されているからです。以下の命令で確認することができます。

これは以下のようにして修正することができます。

let myNumber = "74";
myNumber = Number(myNumber) + 3;

結果は当初の期待通り 77 になります。

算術演算子は JavaScript で計算をするのに使用する最も基本的な演算子です。

左項の数値を右項の数値で割った同じ数の整数に分割した後に残った余りを返します。

8 % 3 （8 を 3 つずつ分けると 2 つに分かれ、 2 が残るので 2 を返す。）

メモ: 演算に使用される数のことをオペランドと呼ぶことがあります。

メモ: べき乗が、よく似た動作をする古い Math.pow() メソッドを使って表現されているのを見ることがあるかもしれません。たとえば、 Math.pow(7, 3) では、 7 が基数で 3 が指数であるため、式の結果は 343 になります。 Math.pow(7, 3) は 7**3 と同じです。

たぶん基本的な数学を教える必要はないでしょうが、ここに出てくる文法を理解しているかをテストしたいと思います。書き方を覚えるため、以下に示す例を開発者ツールの JavaScript コンソールに入力してみましょう。

1. まずは次のような簡単な例を自分で試してみてください。

2. そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。

   const num1 = 10;
   const num2 = 50;
   9 * num1;
   num1 ** 3;
   num2 / num1;
   

3. それではさらに難しい計算式を入力してみましょう。

   5 + 10 * 3;
   (num2 % 9) * num1;
   num2 + num1 / 8 + 2;
   

最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。

先ほどの計算式の一番最後の例を見てみましょう。 num2 に 50、num1 に 10 が格納されているものとします。(最初はそうでしたよね。)

ある人は、先に「50 + 10 = 60」と「8 + 2 = 10」を先に計算して、その後で「60 ÷ 10 = 6」となるように計算するかもしれません。

けれどもブラウザーは「10 ÷ 8 = 1.25」を先に計算してから「50 + 1.25 + 2 = 53.25」を計算します。

どうしてこうなるのかといえば、演算子には優先順位があるからです。ある演算子は (プログラムの式によっては) 他の演算子よりも先に実行されます。JavaScript の演算子の優先順位は算数の授業で教わったものと同じです。つまり、乗算と除算は常に最初に行われ、それから加算と減算が実行されます。（通常の計算は常に左から右に評価されます。）

もし、演算子の優先順位を変更したいならば、先に実行したい部分を括弧 (()) を使って囲みます。もし先ほどの例で 6 が答えになるようにしたいなら次のようにします。

実際に実行し、結果を見てみてください。

メモ: JavaScript の演算子とその優先順位については演算子の優先順位で確認することができます。

たまに、繰り返し値を足したり引いたりしたいときがあるでしょう。そんなときに便利なのがインクリメント演算子 (++) とデクリメント演算子 (--) です。もう既に、JavaScript の最初の一歩に出てくる「数字当てゲーム」で、ユーザーの残り予想回数を求めるために使用する guessCount 変数に 1 を加えるのに ++ を使用しました。

それでは、コンソールで試してみましょう。ただし、その前に注意点です。この演算子は数値には直接使用できません。変に思えるかもしれませんが、これは対象の値そのものに作用するわけではなく、変数に対して新しい値を代入するのです。次の例はエラーになります。

既に存在する値に対してのみインクリメントすることができます。

また変なことが起きましたね！上のコードを実行したとき「4」がコンソールに表示されました。これはブラウザーが現在の値を先に返して、その後にインクリメントを実行したためです。もう一度変数を入力してみると、変数がインクリメントされていることがわかります。

それは -- 演算子についても同様です。以下のコードも試してみてください。

let num2 = 6;
num2--;
num2;

メモ: 変数の前に演算子を置くことで、ブラウザーにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は ++num1 や --num2 のように入力してみてください。

代入演算子は変数に値を代入します。すでに一番基本的な = 演算子を何度も使用しています。この演算子は単に左辺に記述された値を右辺に代入します。

let x = 3; // x には 3 が入る
let y = 4; // y には 4 が入る
x = y; // x には y と同じ値:4 が入る

ただし、コードを簡潔に効率よく書くための、もっと複雑な方法が用意されています。よく見かけるものを以下に示します。

どのように動いているか理解するため、コンソールに上記の例をいくつか入力してみましょう。どの例も、2 行目を入力する前にコードがどのようになるかを予想してから入力しましょう。

ちなみに、どの演算子も右辺には自由に変数を置くことができます。例えば以下のように。

let x = 3; // x には 3 が入る
let y = 4; // y には 4 が入る
x *= y; // x は 12 になる

メモ: もっとたくさんの代入演算子がありますが、とりあえず今は基本的なものだけ知っておけばよいでしょう。

練習として、数値と演算子を使用してボックスのサイズを変更してみましょう。ブラウザーのキャンバス API を使用してボックスを描きます。どうやって描くかについて気にする必要はありません。今は計算に集中しましょう。ボックスの幅と高さ (ピクセル単位で) 変数 x と y で宣言しています。最初は 50 になっています。

新しいウィンドウで開く

上の編集可能なコードには、変更すべき 2 つの行にコメントが書かれています。その行を適切な演算子および値を用いて変更し、拡大縮小させてください。それではやってみましょう。

• ボックスの幅を 50px としたまま x の値を求める行を変更してください。ただし、50 を 43 と 7、算術演算子を一つ使って演算によって求めてください。
• ボックスの高さを 75px になるよう y の値を求める行を変更してください。ただし、75 を 25 と 3、算術演算子を一つ使用して演算によって求めてください。
• ボックスの幅を 250px になるように x の値を求める行を変更してください。ただし、250 は 2 つの数値と、剰余演算子を使用して演算によって求めてください。
• ボックスの高さを 150px になるように y の値を求める行を変更してください。ただし 150 は 3 つの数値と減算演算子および除算演算子を使用して演算によって求めてください。
• ボックスの幅が 200px になるように x の値を求める行を変更してください。ただし 200 は 4 と代入演算子を一つ使用して演算によって求めてください。
• ボックスの高さが 200px になるように y の値を求める行を変更してください。ただし 200 は 50 と 3 と乗算演算子、加算演算子を使用して求めてください。

コードを完全に壊してしまっても大丈夫です。いつでもリセットボタンを押すことで何度でも最初から実行できます。上の問題に全問正解したら、もう少し遊んでみてもいいですし、自分で問題を作ってみてもいいですね。

ときには、true または false を判定し、その結果により動作を変更したいと思う時があるでしょう。そのようなことをするために比較演算子を使用します。

メモ: もしかしたら == や != といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、=== や !== とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。

もし、これらの値をコンソールに入力したら、すべて true または false の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。

• 機能が使用可能かどうかに応じてボタンに表示するテキストを変更する
• 負けた時にゲームオーバー、勝った時に勝利のメッセージを表示する
• 時候のあいさつを時期に応じて表示する
• 選択されたズームレベルに応じて地図を拡大する

後の記事にて、条件文でどのようにロジックをコーディングするのかを見ていきます。とりあえずの簡易な例で見てみましょう。

<button>起動する</button>
<p>マシンは停止中です。</p>

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 = "マシンは停止中です。";
  }
}

新しいウィンドウで開く

等価演算子が updateBtn() 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。

メモ: 2 つの状態を行き来するこのような操作を一般的にトグルといいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。

この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — スキルテスト: 演算 を見てください。

この記事では、 JavaScript で数字について知っておくべき基本的な情報について、とりあえず扱いました。 JavaScript を学習していく中で、数値はすべて何度も使用することになるので、今のうちに取得しておくのはよい考えです。もしあなたが数学を楽しめない人であれば、この章はかなり短かったので安心してください。

次の章では文字列と、文字列を JavaScript で操作する方法について見ていきます。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4