モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 10：JavaScript総合演習

React 60日で身につけるReact
2026.08.21
スポンサーリンク
スポンサーリンク
  1. DAY 10：JavaScript総合演習 前半 ― 「商品データ管理」でここまでの基礎を一気につなげる
  2. データ構造と基本関数を決める ― 「土台づくり」の時間
    1. 商品データをどう表現するか ― オブジェクト配列で考える
    2. 関数で「機能」を分けて考える
  3. 検索と価格変更 ― filterとmapを組み合わせる
    1. 商品検索 ― filterで絞り込む
    2. 価格変更 ― map＋Spread構文で「一部だけ更新」
  4. 商品追加・削除 ― Spread構文とfilterで「増やす・減らす」を作る
    1. 商品追加 ― Spread構文で「末尾に追加」
    2. 商品削除 ― filterで「条件に合わないものを除く」
  5. DAY 10：JavaScript総合演習 前半のまとめ
  6. DAY 10：JavaScript総合演習 中盤 ― 「機能をまとめて1つのプログラムにする」
  7. 機能を1つの「管理オブジェクト」にまとめる
    1. まずは「関数をバラバラに持っている状態」を確認する
    2. 管理用オブジェクトを作る ― 「商品Manager」という考え方
  8. 実際に「商品管理プログラム」として呼び出してみる
    1. 一連の操作をシナリオとして書いてみる
  9. Reactで使うイメージと安全性の視点を重ねる
    1. Reactコンポーネントから呼び出すイメージ
    2. セキュリティ・安全性の視点から見た「商品管理」
  10. DAY 10：JavaScript総合演習 中盤のまとめ
  11. DAY 10：JavaScript総合演習 後半 ― 「商品データ管理」を通して基礎を“実務レベル”に近づける
  12. 完成形を意識した「設計」と「役割分担」を整理する
    1. 商品データの基本構造をもう一度確認する
    2. 機能を「関数」として分ける理由
  13. 各機能を“安全な状態更新”として組み立てる
    1. 商品一覧 ― 配列をそのまま表示する関数
    2. 商品検索 ― filter()で絞り込み
    3. 価格変更 ― map()＋Spread構文で「一部だけ更新」
    4. 商品追加 ― Spread構文で「配列コピー＋末尾追加」
    5. 商品削除 ― filter()で「残したいものだけ残す」
  14. 機能を「連続したシナリオ」として実行し、Reactとのつながりを意識する
    1. 一連の流れをコードで実行する
    2. Reactで使うとどうなるか？という視点
    3. セキュリティ・安全性の観点から見たこの設計
  15. DAY 10：JavaScript総合演習 後半のまとめ

DAY 10：JavaScript総合演習 前半 ― 「商品データ管理」でここまでの基礎を一気につなげる

DAY 10では、ここまで学んできた

  • 関数
  • 配列
  • map
  • filter
  • オブジェクト
  • Spread構文

をすべて組み合わせて、商品データ管理プログラムを作っていきます。 前半では、次の機能を題材にしながら、土台となる考え方とコードの型を固めていきます。

  • 商品一覧
  • 商品検索
  • 価格変更
  • 商品追加
  • 商品削除

理解しやすいように「前半・中盤・後半」の3つに分けて、連続した流れとして説明していきます。

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