Web Design

【JavaScriptの数値】概要から様々な計算例をまとめました

2021年7月13日

JavaScriptの数値
  • JavaScriptの数値について知りたい

この記事はそんな方へ向けて書いています。

 この記事でわかること

JavaScriptの数値の概要
JavaScriptでの様々な計算例
JavaScriptの少し複雑な計算

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学習中(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで当ブログを開設(月間最高62,000PV、52,000円)

本記事では、職業訓練校で学んだJavaScriptの数値についてまとめました。

この記事を読むことで、JavaScriptで数値の扱い方、計算例がわかります。

なおJavaScriptの文字列については、【JavaScriptの文字列】概要から連結結合をまとめましたで解説しています。

こーいち
文字列も数値も、職業訓練校の初めに習った基礎になります。

【JavaScriptの数値】概要から様々な計算例をまとめました

JavaScriptの数値について

数値の概要

数値とは数字のことです。
半角入力で、'(シングルクォート)や"(ダブルクォート)を使わずに記述します。

const kazu = 1;
console.log(kazu);
//出力結果:1

下記のように四則演算ができます。

console.log(3+4);
//足し算の出力結果:7

console.log(5-2);
//引き算の出力結果:3

console.log(5*3);
//かけ算の出力結果:15

console.log(6/2);
//割り算の出力結果:153

計算の順番も四則演算どおり。
下記は、かけ算から計算しています。

console.log(3+2*2);
//出力結果は7

( )がある場合は、( )を先に計算します。

console.log((3+2)*2);
//出力結果は12

割ったときの余りを求める剰余算です。

console.log(5%2);
//出力結果は1

HTMLに記述してみます。

index.html

<script>
 const kazu = 1;
 console.log(kazu);
 console.log(1 + 2);
 console.log(5 - 3);
 console.log(2 * 6);
 console.log(1 / 2);
 console.log(1 + 2 * 9);
 console.log((1 + 2) * 9);
 console.log(9 % 4);
</script>

【解説】
変数kazuを定義し、数値1を代入。
開発者ツールに変数kazu=1を出力。

足し算の出力結果3。
引き算の出力結果2。
掛け算の出力結果12。
割り算の出力結果0.5。

足し算と掛け算が混合したときの出力結果19。
( )で足し算をくくったときの出力結果27。
余りを求める剰余算の出力結果1。

計算用の演算子一覧

左辺に右辺を足す
左辺から右辺を引く
左辺に右辺をかける
左辺を右辺で割る
左辺を右辺で割った余りを出す
**左辺の右辺乗を出す

 

様々な計算【4つの例】

さまざまな計算例を紹介します。

① 縦が5、横が8の長方形の面積を求めます。

const tate = 5;
const yoko = 8;
console.log(tate * yoko);
//出力結果:40

② 底辺が8、高さが6の三角形の面積を求めます。

const tei = 8;
const takasa = 6;
console.log(tei * takasa);
//出力結果:48

③ 上底が10、下底が4、高さが4の台形の面積を求めます。

const joutei = 10;
const katei = 4;
const takasa2 = 4;
console.log((joutei + katei) * takasa2 / 2);
//出力結果:28

④ 身長170cm、体重が68kgの人のBMI値を求めます。

const shinchou = 170;
const taiju = 68;
console.log(taiju / (shinchou/100 * shinchou/100));
//出力結果:23.52941176470588

 HTMLに記述します。

index.html

<script>

 const tate = 4;
 const yoko = 6;
 console.log(tate * yoko);

 const tei = 6;
 const takasa = 8;
 console.log(tei * takasa / 2);

 const joutei = 3;
 const katei = 5;
 const takasa2 = 4;
 console.log((joutei + katei) * takasa2 / 2);

 const shinchou = 170;
 const taiju = 63;
 console.log(taiju / (shinchou / 100 * shinchou / 100));

</script>

【解説】
変数tate、yokoを定義し、tateに4、yokoに6を代入して計算。
変数tei、takasaを定義し、teiに6、takasaに8を代入して計算。
変数joutei、katei、takasa2を定義し、jouteiに3、kateiに5、takasa2に4を代入して計算。
変数shinchou、taijuを定義し、shinchouに170、taijuに63を代入を代入して計算。

少し複雑な計算【ワリカン】

複雑な計算方法を、具体例を出して解説します。

合計金額10000円、人数4名の割り勘を計算します。

const kane = 10000;
const ninzu = 4;
console.log(kane / ninzu);
//出力結果2500

次に合計金額30,000円、男性3名、女性4名の払う金額の比が、男性:女性=2:1のとき、男性、女性の一人当たりの支払額を求めます。

計算方法は、以下のとおり。

1.女性一人の支払額を調べる。
方法は、ひとまず全員女性だったとして考える。
男性3名に2をかけた数(女性だった場合の金額負担分)と、女性4名を足すと10。
30,000円を10で割ると、女性一人が払うべき金額3,000円が算出できる。

2.男性が払うべき金額の合計を調べる
30,000円から、女性が払う合計学12,000円を引くと18,000円。

3.男性一人が払うべき金額を調べる
男性が払う合計18,000円を、男性の人数3名で割る。

HTMLに記述します。

index.html

<script>
 const goukei = 30000;
 const male = 3;
 const female = 4;

 const m_plus_f = female + male * 2;
 const f_single = goukei / m_plus_f;

 const m_goukei = goukei - female * f_single;
 const m_single = m_goukei / male;

 console.log(f_single);
 console.log(m_goukei);
 console.log(m_single);
</script>

【解説】
合計金額、男性の数、女性の数を変数に格納。
全員が女性としたときの仮の女性の人数を、変数m_plus_fに代入する。
女性一人が払う金額を、変数f_singleに代入する。
男性が払う金額の合計を、変数m_goukeiに代入する。
男性一人が払う金額を、変数m_singleに代入する。

まとめ:JavaScriptの基礎である数値を深く理解しよう

JavaScriptの数値

本記事ではJavaScriptの数値について解説しました。

職業訓練校で2時間ほど学んだ内容です。
「数値なんて数学と似ているからカンタンだ」と思っていると足元をすくわれます。
数値の複雑な計算など、考え方を問われると太刀打ちできなかったからです。

基礎が一番大事です。

まずは徹底的に基礎を、深く理解することが大切
焦らずに、基礎の1つ1つを、時間をかけて学んでいく

上記は受け売りですが、基礎なくしては砂上の楼閣。

こーいち
何事も基礎あっての、応用ですね。

なお職業訓練校で数値の次に学んだJavaScriptの分岐条件(if構文)については、【JavaScriptの分岐】if構文の書き方、うるう年の判定方法で解説しています。

JavaScriptのif構文
【JavaScriptの分岐】if構文の書き方、うるう年の判定方法

こーいちより

P.S. JavaScriptの数値を理解しよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.