JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 電卓編

Web APP JavaScript
2026.08.03
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと全体像
  2. 電卓に「クリアボタン」を追加する
    1. 電卓のHTMLにCボタンを足す
    2. 深掘りポイント
  3. JavaScriptで「クリアボタンの動き」を作る
    1. クリアボタンの要素を取得する
    2. クリア処理の関数を作る
    3. クリアボタンにイベントをつける
    4. 深掘りポイント
  4. 入力のルールを整える：最大桁数の制限
    1. なぜ桁数制限が必要か
    2. 最大桁数を定数で管理する
    3. 数字ボタンのクリック処理を改良する
    4. 深掘りポイント
  5. 2日目の完成コード（クリア＋桁数制限付き電卓）
  6. 2日目で本当に掴んでほしいこと
  7. 3日目のゴールと全体像
  8. 電卓の計算は「2つの数字」と「演算子」で成り立つ
    1. 電卓の計算モデルを理解する
    2. 深掘りポイント
  9. 演算子ボタンをHTMLに追加する
    1. ＋ − × ÷ ボタンを追加する
    2. 深掘りポイント
  10. JavaScriptで「演算子を押したときの処理」を作る
    1. 記憶すべき状態を変数で管理する
    2. 深掘りポイント
  11. 演算子ボタンのイベント処理を追加する
    1. 演算子ボタンをまとめて取得する
    2. 演算子が押されたときの処理
    3. 深掘りポイント
  12. 数字入力と演算子入力の流れを整理する
    1. 電卓の内部状態の流れ
    2. 深掘りポイント
  13. 3日目の完成コード（演算子入力まで対応）
  14. 3日目で本当に掴んでほしいこと
  15. 4日目のゴールと全体像
  16. 電卓の計算は「firstValue」「operator」「currentInput」で決まる
    1. 計算の仕組みを整理する
    2. 深掘りポイント
  17. HTMLに「＝ボタン」を追加する
    1. ＝ボタンを追加する
    2. ＝ボタンの役割
  18. JavaScriptで計算ロジックを作る
    1. ＝ボタンの要素を取得する
    2. 計算処理を関数としてまとめる
    3. 深掘りポイント
  19. ＝ボタンにイベント処理をつける
    1. クリックされたら計算する
    2. 深掘りポイント
  20. 計算後の入力ルールを整える
    1. 計算結果の後に数字を押したらどうする？
    2. フラグで「計算直後かどうか」を記憶する
    3. 計算後にフラグを立てる
    4. 数字入力処理を修正する
    5. 深掘りポイント
  21. 4日目の完成コード（計算ロジック付き電卓）
  22. 4日目で本当に掴んでほしいこと
  23. 5日目のゴールと全体像
  24. 電卓の「連続計算」を理解する
    1. 連続計算の内部状態の流れ
    2. 深掘りポイント
  25. 演算子を押したときの挙動を強化する
    1. 4日目までの演算子処理（おさらい）
  26. 演算子を連続で押したらどうする？
    1. 例：
  27. 連続計算に対応する演算子処理
    1. 改良版：演算子を押したときの処理
    2. 深掘りポイント
  28. ＝ボタンの計算処理も連続計算に対応させる
    1. 改良版：計算処理
    2. 深掘りポイント
  29. 数字入力処理も連続計算に対応させる
    1. 改良版：数字入力処理
  30. 5日目の完成コード（連続計算対応版）
  31. 5日目で本当に掴んでほしいこと
  32. 6日目のゴールと全体像
  33. 小数点（.）を扱うための考え方
    1. 小数点入力のルールを整理する
    2. 深掘りポイント
  34. HTMLに「小数点（.）ボタン」を追加する
  35. JavaScriptで小数点入力を実装する
    1. 小数点ボタンを取得する
    2. 小数点入力処理を関数化する
    3. 小数点ボタンにイベントをつける
  36. 符号反転（±）を扱うための考え方
    1. 符号反転のルール
    2. 深掘りポイント
  37. HTMLに「±ボタン」を追加する
  38. JavaScriptで符号反転を実装する
    1. 符号反転ボタンを取得する
    2. 符号反転処理を関数化する
    3. 符号反転ボタンにイベントをつける
  39. 計算ロジックを小数対応にする
    1. 4日目の計算処理はすでに小数に対応している
  40. 6日目の完成コード（小数点＋符号反転対応）
  41. 6日目で本当に掴んでほしいこと
  42. 7日目のゴールと全体像
  43. メモリ機能とは何か？
    1. M+（メモリ加算）
    2. M-（メモリ減算）
    3. MR（メモリ呼び出し）
    4. MC（メモリクリア）
  44. メモリ機能の内部状態を作る
    1. メモリ用の変数を追加する
    2. 深掘りポイント
  45. HTMLにメモリボタンを追加する
  46. JavaScriptでメモリ機能を実装する
    1. メモリボタンの取得
  47. M+（メモリ加算）
    1. 現在の入力値をメモリに加算する
    2. ボタンにイベントをつける
  48. M-（メモリ減算）
  49. MR（メモリ呼び出し）
    1. メモリの値を表示する
  50. MC（メモリクリア）
  51. メモリ機能の深掘りポイント
    1. 状態管理の本質
    2. 電卓は「複数の状態」を同時に扱う
  52. 7日目の完成コード（メモリ機能付き電卓）
  53. 7日目で本当に掴んでほしいこと
    1. 電卓は「状態の集合体」
    2. 状態管理はあらゆるアプリの基礎

2日目のゴールと全体像

2日目のテーマは 「電卓に“クリア（C）ボタン”と“入力のルール”を追加して、使いやすい入力アプリに育てること」 です。

1日目で作ったのは、

  • 数字ボタンを押すと
  • 表示エリアに数字が追加される

という「入力の土台」でした。

2日目では、そこに

  • クリアボタン（C）で入力をリセットする
  • 最大桁数の制限をつける
  • 先頭の0の扱いをきれいにする

といった「入力のルール」を加えます。

ここで、DOM操作・イベント処理・基本文法（条件分岐・関数）が 一気に“実践的な形”になります。

前へ
12
スポンサーリンク
タイトルとURLをコピーしました