今回はJavaScriptで四則演算をする方法を解説します。
JavaScriptに限らず、四則演算はプログラミングの基礎と言えます。
やり方はそこまで難しくないので、足し算や引き算のやり方をしっかり覚えましょう。
また、四則演算以外の演算方法についても併せて触れていきます。
本記事を読むことで、四則演算に関することはマスターできますよ。
JavaSciptで数値を表示する
四則演算のやり方の前に、まずJavaScriptで数値を表示する方法をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(1)
</script>
</body>
</html>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/1757b6bede791dd2713375b549ad2f6c-1024x559.png)
JavaScriptで文字列や数値を表示する場合「document.write」を使います。
scriptタグの中を変更に、上記のように記述してください。
注意点ですが、文字列ではなく数値を表示する場合、””で括る必要はありません。
実行結果を確認すると、ブラウザに「1」と表示されていることが分かります。
数値ではなく文字列を表示する方法は、【入門編1】JavaScriptとは?Hello Worldの出し方を学ぼうで解説しているので、こちらをお読みください。
JavaSciptで四則演算を行う方法
それではJavaScriptで四則演算を行う方法をみていきましょう。
本記事では基本的な四則演算方法と、その他の演算方法に分けて解説します。
基本的な四則演算を行う
まずはJavaScriptで足し算を行いましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(4+2)
</script>
</body>
</html>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/63dd120815e073058df652e19d416495-1024x560.png)
足し算を行う場合、上記のように「+」という記号を使います。
4+2は6ですので、実行するとブラウザに「6」が表示されます。
続いて、引き算を行います。
○コード例
<script>
document.write(4-2)
</script>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/ff4d6b39d4d4988866b0d8a0e0264ce8-1024x560.png)
引き算を行う場合は「-」を使います。
ブラウザに「2」か表示されます。
続いて、掛け算を行います。
○コード例
<script>
document.write(4*2)
</script>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/59bebe3ef50e44c95a58d2ce037f0efe-1024x562.png)
掛け算を行う場合は「*」という記号を使います。
プログラミングでは「×」という記号は使いません。
掛け算の場合全て「*」を使うので注意しましょう。
最後に、割り算を行います。
○コード例
<script>
document.write(4/2)
</script>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/0a109d6241c36304e5e611a296e5c5ff-1024x563.png)
割り算を行う場合は「/」という記号を使います。
プログラミングでは「÷」という記号は使いません。
掛け算と割り算は、プログラミング特有の記号を使います。
そこさえ気をつければ、JavaScriptでの四則演算は難しくないでしょう。
なお、掛け算や足し算が混じった演算も、もちろん可能です。
例をみていきましょう。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(5*4+2)
</script>
</body>
</html>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/0115ac31102902d2049e175cd7c6be0f-1024x560.png)
5*4+2の結果である「22」が表示されています。
また、「()」を使うことで、足し算から計算することも可能です。
○コード例
<script>
document.write(5*(4+2))
</script>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/26a362f62ca10a8bad460da6f16eaee6-1024x561.png)
先程とは違い、30が表示されていますね。
このあたりは通常の計算と同じなので、分かりやすいでしょう。
その他の演算を行う
四則演算以外にも、JavaScriptではいくつかの演算処理が可能です。
まず割り算の「余り」を表示する方法を解説します。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(5%2)
</script>
</body>
</html>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/1abbb9c8fd30b5563c2ab8f008803555-1024x560.png)
割り算の余りを表示する場合「%」を使います。
5/2の余りは1なので「1」が表示されます。
プログラムにおいて、割り算の余りの値を使用する機会は、多くあります。
たとえば、数値が偶数か奇数かを見分ける際、2で割った余りが1か0かで判別します。
最後に乗算のやり方を紹介します。
○コード例
<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
document.write(5**2)
</script>
</body>
</html>
○実行結果
![](https://canit.jp/wp-content/uploads/2021/03/7fea926159dbf21a388495c370aed91a-1024x558.png)
乗算を行う場合は「**」という記号を使います。
「*」を2回使うことで乗算を表すのです。
5の2条は25なので「25」が表示されます。
乗算をする場合もたまにあるので、このやり方も覚えておきましょう。
以上がJavaScriptでの演算の基本となります。
まとめ
本記事ではJavaScriptでの四則演算方法について解説しました。
四則演算の方法や、割り算の余りを取得する方法、乗算を行う方法がお分かり頂けたかと思います。
今回は簡単な例を紹介しましたが、もっと大きな数の計算をすることももちろん可能です。
本記事のサンプルコード内の数値を変更し、どんな表示結果になるか確認してみましょう。
次回は、JavaScriptで変数を扱う方法について解説します。