【JavaScript】剰余を計算することができる%算術演算子（パーセント）について解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで剰余を計算することができる%算術演算子（パーセント）について

%算術演算子とは
%算術演算子を使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
%算術演算子とは
%算術演算子を解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：%算術演算子を使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

%算術演算子とは

%算術演算子とは、演算子の左辺を右辺で割った余りを返す演算子です。
使い方サンプルは以下です。

var result = 5 % 3

1	var result = 5 % 3

上記の例だと、resultには5÷3の余りである2が返されます。

では、次の章で実際に使ってみます。

%算術演算子を解説するプログラムの概要

%算術演算子を解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

余りがある
余りがない

の2パターンで%算術演算子を使って計算し、結果を表示させます。

フォルダ構成は以下のようになっています。
%算術演算子を解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>%算術演算子サンプル</title>
    </head>
    <body>
        <h2>%算術演算子サンプル</h2>
        <h3>余りがある場合</h3>
        <div id="resultSurplus1"></div>
        <h3>余りがない場合</h3>
        <div id="resultSurplus2"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>%算術演算子サンプル</title>

</head>

<body>

<h2>%算術演算子サンプル</h2>

<h3>余りがある場合</h3>

<h3>余りがない場合</h3>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

// 余りがある場合
var number1 = 10
var number2 = 6
var result1 = number1 % number2
var resultSurplus1 = document.getElementById('resultSurplus1')
resultSurplus1.innerHTML = number1 + 'を' + number2 + 'の余剰：' + result1

// 余りがない場合
var number3 = 20
var number4 = 5
var result2 = number3 % number4
var resultSurplus2 = document.getElementById('resultSurplus2')
resultSurplus2.innerHTML = number3 + 'を' + number4 + 'の余剰：' + result2

// 余りがある場合

var number1 = 10

var number2 = 6

var result1 = number1 % number2

var resultSurplus1 = document.getElementById('resultSurplus1')

resultSurplus1.innerHTML = number1 + 'を' + number2 + 'の余剰：' + result1

// 余りがない場合

var number3 = 20

var number4 = 5

var result2 = number3 % number4

var resultSurplus2 = document.getElementById('resultSurplus2')

resultSurplus2.innerHTML = number3 + 'を' + number4 + 'の余剰：' + result2

getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。

JavaScriptの%算術演算子を解説

余剰を求められていることが確認できました。

まとめ：%算術演算子を使ってみよう

以上がJavaScriptの%算術演算子についての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ