JavaScript | 1 日 60 分 × 7 日アプリ学習:JavaScript基礎・DOM操作 単位変換編

Web APP JavaScript
スポンサーリンク
スポンサーリンク
  1. 単位変換アプリ 2日目のゴール
  2. 単位変換のパターンを言葉で整理する
  3. 変換関数をひとつずつ作る
    1. メートル → キロメートル
    2. キログラム → グラム
    3. 分 → 時間
  4. 「変換の種類」を選べるようにする
    1. HTMLの構成
  5. 入力値と変換種類をまとめて処理する
    1. 全体のHTML+JavaScript
  6. 「convert関数」が持っている意味を深掘りする
  7. 関数で「役割」を分ける感覚を身につける
  8. 2日目の小さな応用:変換関数を追加してみる
  9. 2日目で本当に掴んでほしいこと
    1. ● 関数は「役割ごとに分ける」と強力になる
    2. ● 変換の種類は「文字列ラベル」で管理するとわかりやすい
    3. ● 数値処理では「型」と「ルール」を常に意識する
    4. ● 小さなアプリでも「構造」を意識すると成長させやすい
  10. 次のステップ(3日目の予告)
  11. 単位変換アプリ 3日目のゴール
  12. 数値処理で「ちゃんとやるべきこと」を整理する
  13. 入力チェック用の関数を作る(バリデーションの基本)
    1. 深掘りポイント
  14. 小数点の桁数を揃える(toFixed の使い方)
    1. 深掘りポイント
  15. 単位変換関数を「丸め対応」にする
    1. メートル → キロメートル
    2. 分 → 時間
  16. 3日目版の単位変換アプリ(バリデーション+丸め対応)
  17. 「バリデーション関数」が持つ意味をもう一段深く理解する
  18. 小数点の扱いは「表示のため」と割り切る
  19. 3日目の小さな応用:表示フォーマット関数を作る
  20. 3日目で本当に掴んでほしいこと
    1. ● 数値処理は「入力チェック」と「丸め」がセット
    2. ● 関数に「責任」を持たせるとコードが整理される
    3. ● 小数点の扱いは「見やすさ」のため
    4. ● 小さなアプリでも「品質」を意識する癖をつける
  21. 次のステップ(4日目の予告)
  22. 単位変換アプリ 4日目のゴール
  23. まず「単位変換のルール」を言葉で整理する
  24. 変換ルールをオブジェクトで表現する
    1. 深掘りポイント
  25. 複数の変換ルールをひとつの配列にまとめる
    1. 深掘りポイント
  26. ルールを「id」で検索する関数を作る
    1. 深掘りポイント
  27. 数値処理の共通関数(3日目の復習+再利用)
  28. 「ルール × 関数」で変換処理を組み立てる
    1. 深掘りポイント
  29. 4日目版の単位変換アプリ(ルール管理+関数)
  30. 「ルールをデータとして持つ」ことの意味を深く理解する
  31. 4日目の小さな応用:ルールを画面に自動反映する
  32. 4日目で本当に掴んでほしいこと
    1. ● 単位変換の「ルール」をオブジェクトで表現できる
    2. ● 配列にまとめることで「一覧」として扱える
    3. ● 関数とデータ構造を組み合わせると設計が一気に強くなる
    4. ● 小さな単位変換アプリでも「設計」を意識できる
  33. 次のステップ(5日目の予告)
  34. 単位変換アプリ 5日目のゴール
  35. 履歴機能でやりたいことを言葉で整理する
  36. 履歴1件分をオブジェクトで表現する
  37. 履歴をためる配列を用意する
  38. 履歴追加用の関数を作る
  39. 履歴表示用の関数を作る
    1. 深掘りポイント
  40. 5日目版の単位変換アプリ(履歴付き)
  41. 履歴機能の意味をもう一段深く理解する
    1. ● 配列は「時間の流れ」を表現するのに向いている
    2. ● 履歴1件をオブジェクトにすることで「意味」がはっきりする
    3. ● 関数で「履歴追加」と「履歴表示」を分ける
  42. 5日目で本当に掴んでほしいこと
    1. ● 配列は「たまっていくデータ」を扱うための基本構造
    2. ● オブジェクト+配列で「意味のある一覧」を作れる
    3. ● 関数で「追加」と「表示」を分けると整理される
  43. 次のステップ(6日目の予告)
  44. 単位変換アプリ 6日目のゴール
  45. ロジックとUIを分けるという発想
  46. 単位変換ライブラリの「設計」を言葉で決める
  47. 単位変換ライブラリの骨組みを作る
    1. 深掘りポイント
  48. 共通の数値処理関数をライブラリに組み込む
    1. 深掘りポイント
  49. 変換実行用のメソッドを作る
    1. 深掘りポイント
  50. ライブラリに変換ルールを登録する
  51. 6日目版の単位変換アプリ(UIは最小限)
  52. 「ライブラリ化」が持つ意味を深く理解する
  53. 6日目で本当に掴んでほしいこと
    1. ● ロジックとUIを分けるとコードが一気に読みやすくなる
    2. ● オブジェクトに「状態」と「メソッド」を持たせる
    3. ● 関数を「ライブラリの一部」として扱う感覚
    4. ● 小さな単位変換アプリでも「設計力」を鍛えられる
  54. 次のステップ(7日目の予告)
  55. 単位変換アプリ 7日目のゴール
  56. 完成版アプリの全体構造をイメージする
    1. ● 単位変換ライブラリ(UnitConverter)
    2. ● UI部分(HTML+イベント)
  57. 完成版コード(コメント付き)
  58. コードの重要ポイントをもう一段深掘りする
    1. ● UnitConverter に「責任」を集約している
    2. ● ルールオブジェクトが「変換の辞書」になっている
    3. ● 数値処理は常に「バリデーション+丸め」のセット
  59. 7日目で本当に掴んでほしいこと
    1. ● 関数は「役割」と「責任」で分けると強力になる
    2. ● ロジックをライブラリとしてまとめると再利用性が上がる
    3. ● 小さな単位変換アプリでも「設計力」を鍛えられる
  60. この先に広げていける方向

単位変換アプリ 2日目のゴール

2日目のテーマは 「複数の単位変換を関数で整理し、選択式で変換できる“ちょっと本格的な単位変換アプリ”に育てること」 です。

1日目では

  • 関数とは何か
  • 数値と文字列の違い
  • メートル → キロメートルの変換 を学びました。

2日目では、これを一歩進めて

  • 複数の変換関数を作る
  • 変換の種類を選べるようにする
  • 「関数でロジックを分ける」感覚を身につける ことを目指します。
タイトルとURLをコピーしました