JavaScriptで数値と算術演算子を使う方法【初心者向け】

JavaScriptで【数値と算術演算子】を使う方法をプログラミング初心者向けに解説した記事です。加算(たし算)、減算(引き算)など基礎的な部分から解説。応用した、代入演算子・単項演算子もサンプルコードを使って説明しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptで数値と算術演算子を使う方法について解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

大石ゆかり

田島メンター!算術演算子は、足し算・引き算に使う記号のことですよね?代入演算子や単項演算子って何でしょうか?

田島悠介

代入は、左にある変数に、右の値や変数の値を入れるってことで、単項演算子は、インクリメントやデクリメントと言って、値を1増やしたり減らしたりする特殊な記号なんだ。

大石ゆかり

その2つはプログラミング特有の処理なんですか?

田島悠介

そう言えると思うよ。四則計算についても、普段使う記号と違う記号が使われていたりするんだ。さっそく書き方を見てみよう!

 

算術演算子とは

JavaScriptでは、数値を計算して出力することができます。その計算に用いるのが算術演算子です。

算術演算子には、「加算(足し算)」「減算(引き算)」「乗算(掛け算)」「除算(割り算)」「剰余(あまり)」などがあり、それぞれ「+*/%」を使います。

 

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に出力してみよう

JavaScriptで変数をxとし、実際に加算の計算をして数値を出力してみましょう。

 

加算

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>はじめてのJavaScript</title>
</head>
<body>
<script>
var x ;
x = 10 + 2;
document.write(x);
</script>
</body>
</html>

 

ブラウザでは、10+2の加算結果である12が出力されました。
kasan

 

 

ほかの算術演算子も同様にやってみましょう。

 

減算

<script>
var x ;
x = 10 – 2;
document.write(x);
</script>

8

 

乗算

<script>
var x ;
x = 10 * 2;
document.write(x);
</script>

乗算の「かける」は×ではなく「*」を使うので注意しましょう。

20

 

除算

<script>
var x ;
x = 10 / 2;
document.write(x);
</script>

除算の「割る」は÷ではなく「/」を使うので注意しましょう。

5

 

剰余

<script>
var x ;
x = 10 % 3;
document.write(x);
</script>

剰余では余りが出力されます。10÷3は3余り1ですので、今回は1が出力されました。

1

 

 

代入演算子

また、場合によっては x = x + 10;  のように両項に同じ変数が含まれるときがあります。そのときは、代入演算子を使うと便利でしょう。

 

代入演算子ではたとえば、x = x + 10;  という加算は x += 10; と短く書くことができ、それぞれ次のようになります。

  • 加算 x = x +10;   → x += 10;
  • 減算 x = x -10;    → x -= 10;
  • 乗算 x = x *10;    → x *= 10;
  • 除算 x = x /10;    → x /= 10;
  • 剰余 x = x %10;   → x %= 10;

 

上の、剰余の続きからやってみましょう。

<script>
var x ;
x = 10 % 3; //1
x += 10;
document.write(x);
</script>

11剰余によって出された x = 1 が x += 10; に代入され、11が算出されました。

 

 

単項演算子

最後は、単項演算子です。単項演算子には「++(1ずつ足していく)」「- -(1ずつ引いていく)」があります。

代入演算子の続きからやってみましょう。

<script>
var x ;
x = 10 % 3; //1
x += 10; //11
x++;
document.write(x);
</script>

12

11に1が足され、12になりました。

 

1ずつ引きたいときは次のようになります。

<script>
var x ;
x = 10 % 3; //1
x += 10; //11
x- -;
document.write(x);
</script>

10

これで11から1が引かれ、10になりました。

 

今回の記事は以上です。

JavaScriptの基礎となるので、覚えておきましょう。

 

JavaScriptの他にPHPの算術演算子についての記事もあるので、合わせてご覧ください。

 

大石ゆかり

割り算が/(スラッシュ)、掛け算が*(アスタリスク)になってますね。

田島悠介

普通に使う記号と違うから注意が必要だね。

大石ゆかり

%(パーセント)って割った数の余り、が出てくるんですけど、何に使うんですか?

田島悠介

割った数の余りで、法則のようなものが出来るんだよね。主にゲームとか、画像チップの選択とかで使用するのが多いね。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。