- JavaScriptの数値について知りたい
この記事はそんな方へ向けて書いています。
この記事でわかること
- JavaScriptの数値の概要
- JavaScriptでの様々な計算例
- JavaScriptの少し複雑な計算
本記事の信頼性
- 2021年6月からWebデザインの職業訓練校で学習中(6ヶ月コース)
- 使用テキスト:「HTML&CSS、JavaScriptのきほんのきほん」
- ブログ歴:2019年1月にWordPressでブログ開設(月間最高62,000PV、52,000円)
本記事では、職業訓練校で学んだJavaScriptの数値についてまとめました。
この記事を読むことで、JavaScriptで数値の扱い方、計算例がわかります。
文字列も数値も、職業訓練校の初めに習った基礎です。
なおJavaScriptの文字列については「【JavaScriptの文字列】概要から連結・結合をまとめました」で解説しています。
Contents
【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(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人当たりの支払額を求めます。
計算方法
1.女性1人の支払額を調べる。
方法は、ひとまず全員女性だったとして考える。
男性3名に2をかけた数(女性だった場合の金額負担分)と、女性4名を足すと10。
30,000円を10で割ると、女性1人が払うべき金額3,000円が算出できる。
2.男性が払うべき金額の合計を調べる
30,000円から、女性が払う合計学12,000円を引くと18,000円。
3.男性1人が払うべき金額を調べる
男性が払う合計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に代入する。
女性1人が払う金額を、変数f_singleに代入する。
男性が払う金額の合計を、変数m_goukeiに代入する。
男性1人が払う金額を、変数m_singleに代入する。
まとめ:JavaScriptの基礎である数値を深く理解しよう
本記事ではJavaScriptの数値について解説しました。
職業訓練校で2時間学んだ内容です。
「数値なんて数学と似ているからカンタンだ」と思っていると足元をすくわれます。
数値の複雑な計算など、考え方を問われると太刀打ちできなかったからです。
基礎が1番大事です。
- まずは徹底的に基礎を、深く理解するのが大切
- 焦らずに、基礎の1つ1つを、時間をかけて学んでいく
上記は受け売りですが、基礎なくしては砂上の楼閣です。
何事も基礎あっての、応用ですね。
なお職業訓練校で数値の次に学んだJavaScriptの分岐条件(if構文)については「【JavaScriptの分岐】if構文の書き方、うるう年の判定方法」で解説しています。
以上です。
P.S. JavaScriptの数値を理解しよう。
関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由