inflearn logo
inflearn logo

簡単に学ぶReactデザインパターン

Reactの核心的なデザインパターンを概念と例題で素早く身につけましょう!

27名 が受講中です。

難易度 初級

受講期間 無制限

React
React
TypeScript
TypeScript
Design Pattern
Design Pattern
React
React
TypeScript
TypeScript
Design Pattern
Design Pattern
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

受講後に得られること

  • 再利用性が高く、保守しやすいコンポーネント構造設計能力

  • コンポーネント設計時に適切なパターンを素早く選択・適用する

Reactをどうすればもっと上手く使えるだろうか?もっと良い方法はないだろうか?


多くの人々がReactをどうすればもっとうまく使えるか、より良い方法はないかと悩んできました。
そして、Reactを使いながらぶつかる繰り返しの問題に対する解決策を出したのです。

この講義では、その7つの解決策、Container & Presentation、Compound、Custom Hooks、Data Provider、HOC、Render Props、State Reducerについて扱います。

単にこのようなデザインパターンがある〜と紹介するのではなく、そのデザインパターンがどのような長所と短所を持っているのか、どのような特徴を持っているのか、コンポーネントをどのように捉えてどのように活用するのかを学んでいきます。


デザインパターンを難しく考える必要はありません。
簡単な例題とシンプルな説明で素早く学びましょう!


講義で扱う内容

🔍 各パターンの核心概念とパターンの活用例

🔍 パターン別の長所と短所、適用時に考慮すべきトレードオフ

🔍 どのパターンをいつ選択するかの基準提示


この講義の特徴

📌7つのパターンを短く明確な例題で素早く学習してみましょう

📌単純な暗記ではなく、コンポーネントを見る視点を学びましょう

📌 再利用性・テスト性・パフォーマンスの観点からの比較と判断基準を立ててみましょう

こんな方におすすめです

🤔 Reactの基本は知っているけど、コンポーネント設計が散発的でメンテナンスが大変な方

😎 デザインシステム/ライブラリ制作を目標とする方

受講後には

  • メンテナンス性と再利用性の高いコンポーネントを設計・実装できます

  • 状況に合ったパターン選択でコードの一貫性と拡張性を改善できます

  • コンポーネントを見る新しい視点を持つことができます。

受講前の参考事項

前提知識と注意事項

  • Reactの基礎知識が必要です

  • Reactを使用して小さなプロジェクトでも作ってみた経験が必要です

  • TypeScript + React を使用するため、TypeScript を知っている必要があります

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactでコードは書けるけれど、より構造的で拡張可能なコードを書きたい方

  • Reactの基礎はあるが、構造的設計とパターン活用が不足している方

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

  • React

  • TypeScript

こんにちは
mjang69888231です。

自分の知識が誰かの役に立つことを願っている開発者です。

カリキュラム

全体

15件 ∙ (51分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

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

¥2,100