Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactのチュートリアルをしよう2
Search
akatsuki1910
November 21, 2023
0
13
Reactのチュートリアルをしよう2
akatsuki1910
November 21, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
2
難解(かもしれない)言語
akatsuki1910
1
27
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
26
HTMLとCSSとコンポーネント
akatsuki1910
0
17
Reactのチュートリアルをしよう
akatsuki1910
0
15
そのコレクション合ってる?
akatsuki1910
0
17
第3回 TypeScriptを使おう
akatsuki1910
0
10
第2回 TypeScriptを使おう
akatsuki1910
0
19
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Happy Clients
brianwarren
97
6.7k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Navigating Team Friction
lara
183
14k
Six Lessons from altMBA
skipperchong
26
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Music & Morning Musume
bryan
46
6.1k
Transcript
Reactのチュートリアルをしよう2 らり
valueを入れれるようにする valueというpropsを用いて、値が表示されるようにする
クリックできるようにする これにより、「clicked!」が表示されるようになる
クリックして文字が表示されるようにする useStateを用意し、そこに値を入れることでXを表 示させることが出来る
なんでuseStateを使う必要があるの? 画像のようなコードがあったとき、ccの値が増えたとし ても、毎度Boardコンポーネントが再レンダリングされる ため、ccの値は初期化される また、useStateの初期値は初回レンダリング時にのみ 更新されるため、再レンダリングされても値は保持され たままである
なんでuseStateを使う必要があるの? ただ、useStateの初期値にpropsを入れていた場合、 初回時にのみしか反映されないため、propsの値を stateの初期値にしたい場合はuseEffectなどを用いて stateに入れる必要がある そのため、レンダリングされた最初だけ読まれる値だと いうことを知っておく必要がある
useStateの初期値は入れよう useStateの値を入れないと、初期値はundefinedになる これは暗黙的に型もundefinedになり、指定した型と違った結果になる 下の例では、itemはnumber|undefined型になる(ジェネリクスの話) そのため、指定した型の通りのstateを用意するためにも、型を指定したらその型にあっ た初期値を入れておくと、間違えることが少なくなる
stateをBoard側で持つ handleClickを親で持つようにする
stateと配列の話 stateの変化をObject.isで見ているため、同一メモリのオブジェクトの変化には対応でき ない そのため、一度配列やオブジェクトをコピーしてから変更を行うか、非破壊的変更を行う ことでsetする必要がある 左はsetされないが、右はsetされる
Object.is https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is
まるばつゲームっぽくする xIsNextをフラグとして、まるとばつを 繰り返し表示させる
勝ちかを判定する 配列を回して、縦横ななめが 揃えば、それのまるばつを返 す それ以外ならnullを返す
その関数、コンポーネント内にいる? hookに関わらない関数や定数はそもそもコンポーネント内に書く必要がない レンダリング毎に宣言されるため、外に出した方がよかったりする あなたのその定数、コンポーネント内に入れる必要はありますか?
勝敗を表示 calculateWinner関数を用いて、勝敗が確定してい たら、勝敗を表示してまるばつを表示する機能を止 める
useMemo useMemoパフォーマンスの最適化としてのみ使用してください。これがないとコードが機 能しない場合は、根本的な問題を見つけて、まずそれを修正してください。その後、 useMemoパフォーマンスを向上させるために追加することができます => 基本的に使う必要がない https://react.dev/reference/react/useMemo
ただ? 「使わなくていい」とされるのはメモ化をするための意味がない場合が多かったり、使っ た方がパフォーマンスが落ちるからだったりする それは大規模サービスとかに当てはまるものであり、普通に使ってる分には誤差にしか ならないので、使ってなくて取り返しがつかなくなる前に積極的に使ってよい というか可能な限り使っていいって公式が書いてるから素でロジック書かない方がいい https://react.dev/reference/react/useMemo
注意書き 「reactStrictMode」がtrueだと中身が2回実行される そのため、実行されるとバグが発生するから困るからとこのモードをfalseにする人がい るが、そもそもreactは純粋関数で作るべきであるので、バグが発生している時点でロ ジックがおかしいので反省すべき
React.memo useMemoは値に対してだが、React.memoはコンポーネントに対してのメモ化 これも基本的に使う必要がない また、全てにラップすることによるメリットはほぼない むしろメモ化することでよりよくなる場合があるのであれば、それの大半は設計ミスの賜 物なので、コードを見直す必要がある そもそも公式サイトの記述をきちんと読まず、正しく理解できていない状態で使用してい るプログラマーが非常に多い印象があります。 https://ja.react.dev/reference/react/memo
課題 課題1 このままではボタンを押すたびに重い処理が走ります これを可能な限り軽量化を計ってください また、再レンダリングの数も極力抑えてください 答えはuseMemoを使った場合と、React.memoを使った場合を用意してください