JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 じゃんけんゲーム編

Web APP JavaScript
2026.08.07
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと全体像
  2. 2日目で追加する機能
  3. HTMLに新しい表示エリアを追加する
  4. CSSで強調表示のスタイルを追加する
    1. 深掘りポイント
  5. JavaScriptで勝率を管理する
  6. 要素の取得（DOM操作）
  7. 背景色を勝敗に応じて変える関数
    1. 深掘りポイント
  8. プレイヤーとCPUの手を強調表示する
    1. 深掘りポイント
  9. 勝率を更新する関数
  10. じゃんけん実行関数（2日目版）
  11. 2日目の完成コード（script.js 全体）
  12. 2日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を動かす力」
    2. ● 条件分岐は「状況に応じて動きを変える」
    3. ● イベント処理は「ユーザーの操作に反応する」
  13. 次のステップ（3日目）
  14. 3日目のゴールと全体像
  15. ローカルストレージとは何か
  16. 履歴データの構造を決める
    1. 履歴1件のオブジェクト構造
    2. 履歴全体は配列で管理
  17. HTMLに履歴表示エリアを追加する
    1. 深掘りポイント
  18. CSSで履歴カードの見た目を整える
  19. ローカルストレージに履歴を保存する
    1. 保存関数
    2. 読み込み関数
  20. 履歴を追加する処理（じゃんけん実行時）
    1. 深掘りポイント
  21. 履歴を画面に表示する（DOM操作）
    1. 深掘りポイント
  22. 履歴を削除する処理
    1. 個別削除
    2. 全削除
  23. じゃんけん実行関数（履歴追加版）
  24. 3日目の完成コード（script.js 全体）
  25. 3日目で本当に掴んでほしいこと
    1. ● ローカルストレージは「ブラウザに保存できる小さなデータベース」
    2. ● DOM操作で「一覧表示」を作れるようになる
    3. ● イベント処理は「ユーザーの操作に反応する」
  26. 次のステップ（4日目）
  27. 4日目のゴールと全体像
  28. 履歴機能を強化するための新しいUI
    1. 深掘りポイント
  29. CSSでカードの見た目とアニメーションを整える
    1. 深掘りポイント
  30. JavaScript：並び替え機能を追加する
    1. 並び替えボタンの要素を取得
    2. 新しい順に並び替える
    3. 古い順に並び替える
  31. 詳細表示機能を追加する
  32. カード色分け（勝敗によって背景色を変える）
  33. 削除アニメーション付きの削除処理
  34. 履歴描画関数を強化する
  35. メモ編集機能を追加する
  36. 4日目の完成コード（script.js 全体）
  37. 4日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● ローカルストレージ＋並び替えで“記録アプリ”になる
    3. ● イベント処理は複数組み合わせると強力
  38. 次のステップ（5日目）
  39. 5日目のゴールと全体像
  40. 5日目で追加する機能
  41. HTMLの強化ポイント
  42. CSSの強化（UIを洗練させる）
    1. 深掘りポイント
  43. JavaScript：カード色分けを強化する
    1. 深掘りポイント
  44. 削除アニメーションを強化する
    1. 深掘りポイント
  45. メモ編集機能を改善する
    1. 深掘りポイント
  46. 詳細表示を改善する
    1. 深掘りポイント
  47. 履歴描画関数を強化する
  48. 5日目の完成コード（script.js 全体）
  49. 5日目で本当に掴んでほしいこと
    1. ● DOM操作は「画面を作り変える力」
    2. ● UI/UXは「使いやすさ」を決める
    3. ● 関数を分けるとコードが読みやすくなる
  50. 次のステップ（6日目）
  51. 6日目のゴールと全体像
  52. 6日目でやること
  53. コード整理の基本方針
    1. 役割ごとに関数を分ける例
  54. UI改善：履歴カードの色分けを強化する
    1. 深掘りポイント
  55. UI改善：詳細表示をより見やすくする
    1. 深掘りポイント
  56. UI改善：削除アニメーションを滑らかにする
    1. 深掘りポイント
  57. メモ編集機能の改善（入力チェック追加）
    1. 深掘りポイント
  58. 履歴描画関数の整理（読みやすくする）
  59. 6日目の完成コード（script.js 全体）
  60. 6日目で本当に掴んでほしいこと
    1. ● UI/UXは「使いやすさ」を決める
    2. ● 関数を整理するとアプリが大きくなっても迷わない
    3. ● DOM操作はアプリの“手足”
  61. 次のステップ（7日目）
  62. 7日目のゴールと全体像
  63. アプリ全体の構造を理解する
    1. ● HTML（画面の骨格）
    2. ● CSS（見た目・アニメーション）
    3. ● JavaScript（動き・データ管理）
  64. 完成版HTML（最終形）
  65. 完成版CSS（最終形）
  66. 完成版JavaScript（最終形）
  67. 7日目で本当に掴んでほしいこと
    1. ● JavaScriptの基礎が「ひとつのアプリ」で全部つながった
    2. ● Webアプリは「画面 × 動き × データ」でできている
    3. ● DOM操作はアプリの“手足”
  68. 次のステップ（応用編への橋）

2日目のゴールと全体像

じゃんけんゲーム 2日目のテーマは 「勝敗に応じて画面の色やメッセージを変え、プレイヤーの選択を強調表示し、ゲームらしい“動き”を作ることで DOM操作・イベント処理・条件分岐をさらに深く理解すること」 です。

1日目では、

  • ボタンを押す
  • CPUの手をランダムに決める
  • 勝敗を判定する
  • 結果を表示する

という最小のじゃんけんゲームを作りました。

2日目ではここに 視覚的な変化（UIの動き） を加えていきます。

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