강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

初めて出会ったRedux

状態管理の基礎概念とともに、Reduxの基礎を着実に身につけることができます。

  • soaple
리액트
리덕스
상태관리
Redux
React
redux-thunk
redux-saga
redux-toolkit

学習した受講者のレビュー

受講後に得られること

  • Reduxの基礎概念

  • Redux関連のコアライブラリ

  • Redux Toolkit の使い方

  • ミニプロジェクトを通じたReduxベースのウェブアプリケーション開発

🚨講義提供中止案内🚨

こんにちは、ソープルです。
初めて会った Redux 」講義の Inflearn 提供が中断されました。
既存の受講生の方は Inflearn で講義を受講でき、
講義に関する質問は下記のリンクに残していただければ確認して回答させていただきます 😀

きちんとした講義資料、細かい説明で
簡単に学ぶリダックス講義です。 👨‍🏫

リダックスの世界へ
招待します💫

Redoxは、オープンソースのJavaScriptステータス管理ライブラリです。
状態管理ライブラリの中で圧倒的に最も多く使われており、
リアクトに連動してアプリケーションの状態を効果的に管理できます。

なぜRedux
学ぶべきですか? 🤔

最近はMobX、Recoil、Zustand、Jotaiなど様々な状態管理ライブラリがありますが、Reduxは世界に出てから10年以上の状態管理ライブラリの先祖のような存在です。つまり、状態管理の核心的なコンセプトと構造について基盤を固めたと見ることができるのです!

상태관리 라이브러리 npm trend
上の図は、代表的な状態管理ライブラリのnpm trendを示しています。他のヘルスケアライブラリが下から飛び上がっていますが、まだReduxが圧倒的に多く使用されていることがわかります。

だから、比較的使いやすいRecoilやZustandを使う前に、ぜひReduxを通じて状態管理の基礎を固めることが大切です!


講義の特徴

お知らせします🔎

  • Reduxコンポーネントを1つずつ直接作成し、基礎の概念を習得します。
  • Reduxに関連するコアライブラリの使い方を学びます。
  • Redux Toolkitの使い方を学びます。
  • ミニプロジェクトを通じて、実際のReduxベースのWebアプリケーションを開発します。

文書を通して
学習内容を整理📖

講義の内容をいつでも再度復習できるように文書の形で提供します。
気になる部分を見直してリダックスを完璧に身につけてみてください!

FrontOverflow_redux_document

🔗 初めて出会ったReduxドキュメント

講義を聞いた後、受講生の変化🙋‍♂️

Reduxの基礎
よく固めることができます!

コアライブラリ
使えます!

Redux Toolkit
使えます!

本番プロジェクトの経験
積むことができます!


学習内容を垣間見る 📚

セクション0 [準備]

  • redux-devtoolsについて学びます。
  • 練習用の開発環境設定とredux-devtoolsをインストールします。

セクション1、2 [Reduxについて、はじめに]

  • Reduxの誕生プロセスと原則を学びます。
  • Reduxのコンポーネントと不変性について学びます。

セクション 3 [Store]

  • StoreとDispatcherの概念について学びます。
  • ストアに関連する関数について学習します。

セクション 4 [Action and Action Creator]

  • ActionとAction Creatorの概念を学びます。

セクション 5 [Reducer]

  • Reducerの概念とルールについて学びます。
  • Immutable Updateの概念を学びます。
  • rootReducerの作成方法を学びます。

セクション6 [ReduxとUI]

  • ReduxとUIの関係を学びます。
  • ReduxとUIを連携する方法を学びます。

セクション 7 [Container]

  • Containerの概念について学びます。
  • react-reduxパッケージと主要なAPIについて学びます。

セクション 8 [Ducks Pattern]

  • Duckの概念とDucksパターンについて学びます。

セクション 9 [redux-actions]

  • Flux Standard Actionについて学びます。
  • redux-actions について学習します。

セクション 10 [Redux と Async Logic]

  • Async Logic と Side Effect について学習します。
  • Redux での Async Logic について学習します。

セクション 11 [redux-thunk]

  • Thunkの概念とその理由を学びます。
  • redux-thunkについて学びます。
  • Thunk 関数の作成方法とパターンについて学習します。

セクション 12 [redux-saga]

  • 佐賀の概念とその使用理由を学びます。
  • Generator Functionについて学びます。
  • redux-sagaについて学びます。
  • ThunkとSagaの違いを学びます。

セクション 13 [redux-persist]

  • Persistの概念について学びます。
  • redux-persistについて学びます。
  • ストレージとデータの保存と復元プロセスについて学びます。

セクション 14 [Redux Toolkit (RTK)]

  • Redux Toolkitについて学びます。
  • Sliceの概念と使い方を学びます。
  • immer 使用パターンについて学習します。

セクション 15 [Redux Hooks]

  • useSelector() フックについて学習します。
  • useDispatch() フックについて学習します。
  • useStore() フックについて学習します。

セクション16 [ミニプロジェクト]

  • これまでに学んだことをまとめて、ReduxベースのTODOアプリケーションを一緒に作成しましょう。


予想される質問 Q&A 💬

Q. JavaScriptをよく知らなくても聞ける講義ですか?

JavaScriptの基礎文法に関する内容は別々に含まれていないので、まず学習して聞くことをお勧めします。

Q.リアクトについてよく知らなくても聞ける講義ですか?

リアクト開発も含まれていますので、リアクト基礎内容をまず学習して聞くことをお勧めします。
下の私の無料リアクト講義を先に聞いてきたら一番いいです!

🔗 [無料]初めて出会ったリアクト

Q.リダックスを学ぶと何がいいですか?

Redoxを使用すると、アプリケーション全体で状態を効果的に管理できます。


学習関連資料💡

講義内容整理文書
🔗 初めて出会ったReduxドキュメント

2強~15強。練習ソースコード
🔗 https://github.com/soaple/first-met-redux-practice

16強。ミニプロジェクトソースコード
🔗 https://github.com/soaple/first-met-redux-todo


こんな方に
おすすめです

学習対象は
誰でしょう?

  • ステート管理の基礎を築きたい方

  • Reduxを初めて触る方

  • Reduxを使った状態管理に関心のある方

前提知識、
必要でしょうか?

  • JavaScriptの基礎

  • Reactの基礎

こんにちは
です。

안녕하세요, 소플입니다.

2025년 3월부로 인프런에서의 지식공유자 활동을 마무리하고 새로운 출발을 합니다.

앞으로는 아래 사이트에서 제 강의와 컨텐츠들을 만나보실 수 있습니다.

소플이 만든 프론트엔드 지식 포털 - FrontOverflow

カリキュラム

全体

118件 ∙ (5時間 50分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

18件

5.0

18件の受講レビュー

  • dldldksl1048님의 프로필 이미지
    dldldksl1048

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    reduxの動作原理、reduxに関連するいくつかの技術が登場した理由、概念と使い方の簡単で詳細な説明、その技術が最近使用されているかどうか、 途中で聞こえる疑問に対する答えも講義に沿って自然に分かりました。 しかし、reduxは基本的に状態管理のためにやや面倒な過程を経なければならないんだという不便さを感じ、多くの技術が互いに混乱したりもしました。 講義の問題ではなく、技術そのものがそう感じましたね… それでも講師様が一つ一つ理解しやすく教えてくださり、頑強ができました。 講師が最後に言ったように、Reactの勉強は楽しかったが、Reduxを学びながらかなり挫折したようです。 でもこんな言葉も付け加えてくれました。 開発者にとって重要なのは、忍耐と誠実さです。 あきらめずに着実に、繰り返し勉強すれば素晴らしい開発者になっているはずだ。 初めて開発に入門した時、何でも本当に難しく感じ、理解できない部分が多すぎました。 以前や今でも学んで学んで学んだことが多くなっても、学ぶことは依然として無限に多いと感じられます。 それでももちろん、最初は何でもほとんど難しく感じられますが、時間が流れて積み重ねられた知識と経験が再び新しい技術に触れたときにとても大きな助けになることもまた感じました。 Reduxをよく勉強することでヘルスケアをより深く理解し、将来的に他のヘルスケアライブラリを勉強する際にも役に立つと思います。 良い講義はもちろん、質問も素早く親切に答えてくれてありがとう。 次の講義をしてくださったらまたぜひ聞きたいです。

    • soaple
      知識共有者

      dldldkslさん詳細な受講評を残してくれてありがとう。 Redux講義は中途半端な入門者を挫折させる点が存在しますが、このように最後まで頑張っていただけでもとても大きな関門を一つ通過したと思います。 Reduxを習得した後に他のヘルスケアライブラリを使用すると、非常に簡単で簡単に使用できます。 もし理解がうまくいかなかった部分がある場合は、再び繰り返し学習してほしい、理論だけで学習するのではなく、実際に自分だけのアプリケーションをぜひ開発してみることをお勧めします。 個人的にプロジェクトをしながら起こる疑問は、いつでもFrontOverflowに残していただければ、少し遅れても是非答えをさせていただきます。 https://www.frontoverflow.com/ そしてコードレビューが必要な場合は、GitHubにコードを投稿し、私のメールアドレスに気軽に連絡してください。 どうぞ、私の講義を通して、Redoxの基礎をよく固めたことを願っています!😀

  • kaenum18779님의 프로필 이미지
    kaenum18779

    受講レビュー 1

    平均評価 5.0

    5

    6% 受講後に作成

    その間、私はリダックスを勉強しようとし、それを見つけてコードを組んでみましたが、それでも理解されていないまま書いているような蒸しさがありました。この少し捕まった同じく「ああ、その時、そんなコードを書いたんだな」という気がします〜良い講義ありがとうございました!

    • soaple
      知識共有者

      rockrock82さん詳細な受講評を残してくれてありがとう。 私のレッスンでリダックスを使うのに役立つことを願っています!

  • misutgaru님의 프로필 이미지
    misutgaru

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    ソープル様の初めて会ったリアクトから初めて会ったリダックスまでみんな聞きました。 実はリアクトまで学習後ブログを探してみながら、最近は簡単に出てきた状態管理ライブラリが多いからといって リダックスまで聞くつもりはなかった。 講義紹介に出ている「ぜひReduxを通じて状態管理の基礎を固めることが大切です!」 このフレーズのおかげで リダックスまで学習するようになりました。 今考えると本当に幸いな部分ですね。 セクション1から最後のミニプロジェクトまで進行中 リダックスの一番始まり(?)的な姿から その部分の欠点を補うために、ダックス、トゥーン、スライス、サガなどに進むことを学ぶことができます。 単純になった部分から学んだらただの注入式学習になったはずなのに 順番に発展していく様子を学べるので 短期間でリダックスと馴染みやすい講座だと思います。 ただし、難易度が "初級"になっているだけに入門段階だと思えばちょっと裏切りそうです。 私はリアクトは初めてですがバックエンドでは経歴があり、気づき(?)学べたからです。 一度理解できなくても気楽にコラム聞くようにずっと聞いて、代わりにプロジェクトはぜひ直接してみました。 そして再び文書を確認し、やり方で学習しました。 ただ、序盤にはわかりませんが、ただそうだな~と聞いてみると次のセクションでその部分を補完するのが出てきて 自然にもう一度理解できる時間を与えるのも良い部分です。 リアクトはとても進化が速いライブラリのようです。 今後もソープル様の多くの講義が出てきてほしい!

    • soaple
      知識共有者

      ミスン粉様こんなに詳細な受講評を残していただきありがとうございます。 あなたが言ったように'最初に会ったRedox'講義はリダックスの古くから使用方法から現在の使用方法まで一つずつ直接実習をしながら学ぶ形で構成されています。 この部分は最近入門者の方がすぐにRedux Toolkitを使用することになり、内部の構成と動作原理をよく理解できず使用する場合があり、このように構成することになりました。この過程がリダックスを理解するのに役立つとは、私が意図したとおりになったようで、気持ちいいですねㅎㅎ そしてどうやら講義のテーマがReduxだから初級講座ですが難しく感じられる部分があると思います。このような部分は私もいろいろなフィードバックを通してどんな部分が難しく感じられるのか理解し、今後は少しもっと簡単に説明できるように改善していきたいと思います。 今後もリアクト、リダックスなどフロントエンドと関連して学習しながら、気になる点はいつでもご質問いただき、素早く成長させて頂きたいと思います!

  • greenspace4699님의 프로필 이미지
    greenspace4699

    受講レビュー 1

    平均評価 5.0

    5

    31% 受講後に作成

    ソプルの講義は私にとって最高の力になる講義です。

    • soaple
      知識共有者

      greenspace さん、受講評価をありがとうございます。 私の講義を高く評価していただき、とても嬉しいです😊😊 最後まで必ず受講していただき、学習中に疑問点があればいつでも質問してください!😀

  • 깃허브님의 프로필 이미지
    깃허브

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    説明を面白く簡単に書いてくださったので、理解もよくできて楽しく見ることができました😊😊

    • soaple
      知識共有者

      79blog さん、受講レビューをありがとうございます。 私の講義を通じて、Redux の基礎をしっかり固めていただければ幸いです! 😀

似ている講座

同じ分野の他の講座を見てみましょう!