ゼロから始めるJavaScript講座VoL05 演算子とは


ゼロから始めるJavaScript講座VoL05 演算子とは
目次
  1. ゼロから始めるJavaScript講座演算子とは
  2. 演算子とは
  3. 算術演算子
  4. 代入演算子
  5. インクリメント演算子とデクリメント演算子
  6. 比較演算子
  7. 論理演算子

ゼロから始めるJavaScript講座演算子とは

演算子とは

算数で足し算のときには+(プラス)、引き算のときには-(マイナス)など、記号を使って演算していたと思いますが、このような演算内容を指示する記号のことを演算子と呼びます。

算術演算子

+(加算)、-(減算)、*(乗算)、/(除算)、%(剰余)があり、計算に利用します。お手本に従い、算術演算子を利用したプログラムを作成してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>算術演算子</title>
</head>
<body>
    <script>
        var num;
        // 加算
        num = 3 + 3; // 6
        document.write('<p>3 + 3 = ' + num + '</p>');

        // 減算
        num = 5 - 3; // 2
        document.write('<p>5 - 3 = ' + num + '</p>');

        // 乗算
        num = 2 * 3; // 6
        document.write('<p>2 * 3 = ' + num + '</p>');

        // 除算
        num = 9 / 3; // 3
        document.write('<p>9 / 3 = ' + num + '</p>');

        // 剰余
        num = 9 % 5; // 4
        document.write('<p>9 % 5 = ' + num + '</p>');
    </script>
</body>
</html>

javascript-operator1-639

それぞれ計算した結果が表示されます。

この中で+(プラス)記号は特殊で、今回は加算をしていますが、文字列の結合でも利用していました。

実は+(プラス)は「加算」と「文字列結合」という2つの役割を持っています。ではどのように2つの役割を切り替えているかというと、データ型と呼ばれる形式により判断をしています。

データ型に関する内容は「ゼロから始めるJavaScript講座データ型の種類

代入演算子

これまで何度も利用してきた「=」が代入演算子となります。以前にも説明した通り、=の右側にある値を、=の左側に書かれた名前の変数に代入します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>代入演算子</title>
</head>
<body>
    <script>
        var num = 10;
        document.write('<p>num : ' + num + '</p>');
        // 値を加算して変数に代入
        num += 5;  // num = num + 5
        document.write('<p>num += 5 :' + num + '</p>');
    </script>
</body>
</html>

javascript-assignment-639

インクリメント演算子とデクリメント演算子

++(インクリメント)は変数の値を1つ増やし、(デクリメント)は変数の値を1つ減らします。インクリメント演算子は加算子、デクリメント演算子は減算子とも呼びます。javascript-assignment2-639

javascript-assignment3-639

どのような場合で利用するかは、次の「for」の講義にて説明致します。

比較演算子

数値や変数を比較するときに用い、条件が成立した際はtrue、成立しない場合はfalseとなります。

比較演算子と次に学ぶ論理演算子は単独で使うことがあまりない演算子で、後に学ぶ条件分岐(if)と合わせて利用することが多いため、ここでは簡単な説明に留めます。

比較演算子

主な比較演算子は上記となります。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>比較演算子</title>
</head>
<body>
    <script>
        var num = 123;
        var str = '123';

        document.write(num == str);  // true
        document.write(num === str); // false
    </script>
</body>
</html>

javascript-assignment4-639

「==」と「===」の違いは、型の比較を行うか否かとなり、「==」は値のみ比較し、「===」は値とデータ型の両方を厳密比較します。

実際の使い方を含めた詳細については、次の「if」の講義にて説明致します。

論理演算子

AND、OR、NOTなど、条件を複数組み合わせたり否定したりするときに使う演算子となります。

論理演算子

例えば「num>=10&&num<=30」とした場合、「変数numは10以上かつ30以下」という条件になります。

実際の使い方を含めた詳細については、次の「if」の講義にて説明致します。

NEXTLESSONIf文を使った条件分岐の方法If文を使った条件分岐の方法

PREVLESSONデータ型の種類データ型の種類


CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp