1. 1 年 6 ヶ月から 3 年を目指す
  2. 境界値。経験ゼロから 1 年を目指す
  3. 境界値。ちょうど目標に到達している
  4. 目標を 1 年超えているのでマイナスになる
  5. 端数のある月数でも正しく引ける
コース一覧
JavaScript入門:コードを動かす
四則演算

JavaScript入門:コードを動かす

HTML に JavaScript を読み込むところから始め、コンソール、文字列と数値、let と const、データ型、型変換、比較・論理・三項・null 合体演算子を学ぶ全 23 レッスン(335 分)の入門コースです。最後は、変数と式を使ってプロフィールの見出し用の値を組み立てます。if 文、配列とループ、DOM 操作は後続コースで扱います。

1
はじめての JavaScript
01. HTML に JavaScript を読み込む5分
02. console.log で表示する15分
03. 文字列を連結する15分
04. 四則演算15分
05. コメントで意図を残す15分
06. エラーを読んでみる15分
07. つくる 起動メッセージ20分
08. 第1章まとめクイズ10分
2
変数とデータ型
01. let と const を使い分ける15分
02. typeof で型を調べる15分
03. 型を変換する15分
04. 真偽値と falsy な値15分
05. null と undefined を見分ける15分
06. テンプレートリテラル15分
07. つくる プロフィールを変数にする20分
08. 第2章まとめクイズ10分
3
演算子と式
01. 比較演算子と ===15分
02. 論理演算子と短絡評価15分
03. 三項演算子で簡潔に15分
04. ?? で既定値を用意する15分
05. 演算子の優先順位15分
06. つくる 表示名を決める20分
07. 第3章まとめクイズ10分

四則演算

算術演算子の優先順位
解説

このレッスンで分かること

  • かけ算は *、わり算は / と書きます
  • 年と月のように単位の違う値は、そろえてから計算します

記号が算数と 2 つだけ違う

JavaScript の計算は算数とほぼ同じです。違うのは記号 2 つで、かけ算は × ではなくアスタリスク *、わり算は ÷ ではなくスラッシュ / を使います。

JavaScript

console.log(3 + 5); // => 8 console.log(10 - 4); // => 6 console.log(3 * 5); // => 15 console.log(20 / 4); // => 5
演算子名前例結果
+加算3 + 58
-減算10 - 46
*乗算3 * 515
/除算7 / 23.5

わり算は、割り切れなくても小数のまま返ります。他の言語のように勝手に切り捨てられることはありません。

プロフィールサイトに置き換えてみます。作品が 3 つ、それぞれの閲覧数が 120 回だとしたら、合計はこう書けます。

JavaScript

console.log(3 * 120); // => 360

年と月は、そのままでは引けない

「いま 2 年 3 ヶ月」から「目標の 5 年」までの残りを出したいとします。2 と 3 と 5 をどう並べても答えは出ません。年と月という違う単位が混ざっているからです。

計算の前に、単位をそろえます。年を 12 倍すれば月になるので、どちらも月数に直してしまえば、あとは引き算だけで済みます。

JavaScript

console.log(2 * 12 + 3); // => 27

* は + より先に計算されるので、この式は 24 に 3 を足した 27 になります。2 年 3 ヶ月は 27 ヶ月です。目標の 5 年も同じように 60 ヶ月に直しておけば、残りは引き算で求まります。

解説

単位をそろえるのは計算の基本です。金額なら円、時間なら分というように、いちばん小さい単位に寄せてから計算し、人に見せるときだけ読みやすい形に戻します。

引いた結果がマイナスになってもよい

目標をすでに過ぎている場合、残りはマイナスになります。JavaScript はマイナスの数もそのまま扱えるので、エラーにはなりません。

JavaScript

console.log(24 - 30); // => -6

-6 は「目標を 6 ヶ月分すでに超えている」という意味です。0 に丸めたくなるかもしれませんが、今回はそのまま返します。値をありのまま返しておくほうが、あとで表示のしかたを選べるからです。

よくある間違い

  • 単位をそろえずに引く — 年と月をそのまま引いても、数としては計算できてしまいます。エラーが出ないぶん間違いに気づけないので、引く前に両方を同じ単位に直したか確かめてください

要件

  1. 関数名は monthsToGoal、引数は years months goalYears の 3 つ (すべて数値)
  2. 戻り値は数値で goalYears * 12 - (years * 12 + months)
  3. かけ算 *、足し算 +、引き算 - を使うこと
  4. 目標を過ぎている場合はマイナスの値をそのまま返すこと

入出力例

monthsToGoal(1, 6, 3) → 18 monthsToGoal(0, 0, 1) → 12 monthsToGoal(2, 0, 2) → 0 monthsToGoal(3, 0, 2) → -12 monthsToGoal(0, 7, 1) → 5

ヒント

先に「いまの経験を月に直す」計算をしてから、目標の月数から引きます

`goalYears * 12 - (years * 12 + months)` の形です

カッコを外すと `+ months` が引かれずに足されてしまいます。カッコを忘れないでください

生田 陸人
監修生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア監修者プロフィールを見る →
編集 ゆめさく編集部·公開 2026/05/19·更新 2026/08/26

関連レッスン

  • コメントで意図を残す

    実行されないメモをコードの中に書き残す方法を学びます。行コメントとブロックコメントを使い分けられるようになります。

  • エラーを読んでみる

    コンソールに出る赤いメッセージの読み方を覚えます。エラーの種類と行番号から、直す場所を自分で見つけられるようになります。

  • つくる 起動メッセージ

    第 1 章の総仕上げです。プロフィールサイトを開いたときにコンソールへ出す自己紹介メッセージを、1 つの関数で組み立てます。

  • 第1章まとめクイズ

    第1章で学んだ script タグの読み込み、console.log と return の違い、文字列の連結と四則演算、コメント、エラーの読み方を 5 問で確かめます。

このレッスンに出てくる用語

意味があいまいなまま進んだ語は、ここから読み直せます。

  • 演算子//は切り捨て除算(7 // 2 = 3)。
  • 関数処理に名前を付けて再利用できる単位
  • 引数位置引数=順番で渡す。
  • 戻り値呼び出し元への返答を表す点線矢印
main.js
学習モード
エディタを読み込んでいます

メモ

四則演算

⌘S で保存