女性向けエンジニアスクール
React設計：useEffectとコンポーネント分割 - 副作用とは
副作用にあたる仕事
画面を作る以外の仕事は、すべて副作用です。何がどこに触れているか見てください。
どれも React が管理する画面の外に触っています。
| 仕事 | 触れる場所 |
|---|---|
| document.title を書きかえる | ブラウザのタブ |
| タイマーを動かす | ブラウザの時計 |
| サーバーにデータを取りに行く | ネットワークの先 |
| ブラウザに値を保存する | ブラウザの保存領域 |
1 / 5
副作用、useEffect、依存配列、クリーンアップ、stateの持ち上げ、propsの受け渡し、1コンポーネント1責務、部品ツリーとフォルダ構成を扱う全19レッスンの設計コースです。JavaScript版プロフィールサイトを、状態と責務が整理されたReactアプリとして完成させます。
レッスン
19件
所要時間
約5時間
ランク
中級
学習環境
ブラウザ完結
副作用とstateの配置を整理し、プロフィールサイトを設計されたReactアプリとして完成させる
副作用、useEffect、依存配列、クリーンアップ、stateの持ち上げ、propsの受け渡し、1コンポーネント1責務、部品ツリーとフォルダ構成を扱う全19レッスンの設計コースです。JavaScript版プロフィールサイトを、状態と責務が整理されたReactアプリとして完成させます。
useEffectが必要な処理を見分け、依存配列とcleanupを扱える
stateを適切な共通親へ置き、propsの流れを説明できる
責務ごとにコンポーネントとフォルダを分割できる
ブラウザ完結（インストール不要）
テキストでの解説
0
レッスン
コーディングの問題
17
レッスン
クイズ問題
2
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
React設計：useEffectとコンポーネント分割 - 副作用とは
画面を作る以外の仕事は、すべて副作用です。何がどこに触れているか見てください。
どれも React が管理する画面の外に触っています。
| 仕事 | 触れる場所 |
|---|---|
| document.title を書きかえる | ブラウザのタブ |
| タイマーを動かす | ブラウザの時計 |
| サーバーにデータを取りに行く | ネットワークの先 |
| ブラウザに値を保存する | ブラウザの保存領域 |
1 / 5
React設計：useEffectとコンポーネント分割 - useEffect
useEffect は2つ引数を取ります。処理の関数と、いつ動かすかを決める配列です。
2つめの空の配列を忘れると、動くタイミングが変わります。
useEffect(() => {
// 描画のあとにしたい処理
}, []);1 / 5
React設計：useEffectとコンポーネント分割 - 依存配列
依存配列に何を書くかで、effect が走るタイミングが変わります。
配列の中身が多いほど、走る条件も増えます。
| 書き方 | 走るタイミング |
|---|---|
| 書かない | 描き直すたび毎回走る |
| 空の配列 | 最初に1回だけ走る |
| [likes] | 最初と、likes が変わったときに走る |
1 / 5
ボタンを押してからタブの文字が変わるまで、この順で進みます。
stateが変わる
いいねボタンを押し、likes が更新される
描画が終わる
Reactが新しい画面をブラウザに反映する
effectが走る
document.title に likes を使った文字を入れる
effect は描画のあとに動くので、タブは1周遅れて追いかけます。
1 / 5
動かしながら、仕組みや変化を目で確かめられます。
陽葵「注文ウィジェット、今風にできる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
React道場 ハレノヒ珈琲をモダン化する10問
このコースを終えたあとに進むと、無理なく続けられます
同時に進めると、理解が早くなる組み合わせです
