JavaScriptの代入演算子を完全ガイド！初心者でもわかる基本

新人と先輩の会話形式で理解しよう

新人

「JavaScriptで計算をするときに、変数に結果を入れる方法はどうやって使うんですか？」

先輩

「変数に計算結果を入れるためには、代入演算子を使います。代入演算子にはいくつか種類があって、例えば=を使って値を代入することができますよ。」

新人

「代入演算子ってどういうものですか？」

先輩

「では、代入演算子の使い方を実際に見ていきましょう！」

1. 代入演算子（=）

代入演算子は、変数に値を代入するために使います。基本的に、=を使って変数に値を格納します。

例えば、次のコードでは変数xに10を代入しています。


<script>
    let x = 10;
    document.write("xの値: " + x);  // 変数xに格納された値を表示
</script>

ブラウザ表示

上記のコードでは、変数xに10を代入し、document.write()でその値を表示しています。結果として「xの値: 10」が表示されます。

加算代入は、変数にある値に他の値を加算して再代入する演算子です。加算代入演算子は+=です。

次のコードでは、変数xに5を加算して、その結果を表示しています。


<script>
    let x = 10;
    x += 5;  // xに5を加算して再代入
    document.write("加算代入後のxの値: " + x);  // 結果を表示
</script>

ブラウザ表示

このコードでは、変数xに5を加算し、結果として「加算代入後のxの値: 15」が表示されます。

減算代入は、変数にある値から他の値を引き算して再代入する演算子です。減算代入演算子は-=です。

次のコードでは、変数xから5を引き算して、その結果を表示しています。


<script>
    let x = 15;
    x -= 5;  // xから5を引き算して再代入
    document.write("減算代入後のxの値: " + x);  // 結果を表示
</script>

ブラウザ表示

このコードでは、変数xから5を引き算し、結果として「減算代入後のxの値: 10」が表示されます。

乗算代入は、変数にある値に他の値を掛け算して再代入する演算子です。乗算代入演算子は*=です。

次のコードでは、変数xに5を掛け算して、その結果を表示しています。


<script>
    let x = 3;
    x *= 5;  // xに5を掛け算して再代入
    document.write("乗算代入後のxの値: " + x);  // 結果を表示
</script>

ブラウザ表示

このコードでは、変数xに5を掛け算し、結果として「乗算代入後のxの値: 15」が表示されます。

除算代入は、変数にある値を他の値で割って再代入する演算子です。除算代入演算子は/=です。

次のコードでは、変数xを5で割って、その結果を表示しています。


<script>
    let x = 15;
    x /= 5;  // xを5で割って再代入
    document.write("除算代入後のxの値: " + x);  // 結果を表示
</script>

ブラウザ表示

このコードでは、変数xを5で割って、結果として「除算代入後のxの値: 3」が表示されます。

剰余算代入は、変数にある値を他の値で割った余りを再代入する演算子です。剰余算代入演算子は%=です。

次のコードでは、変数xを3で割ってその余りを代入し、その結果を表示しています。


<script>
    let x = 10;
    x %= 3;  // xを3で割った余りを再代入
    document.write("剰余算代入後のxの値: " + x);  // 結果を表示
</script>

ブラウザ表示

このコードでは、変数xを3で割った余りを代入し、結果として「剰余算代入後のxの値: 1」が表示されます。