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のチュートリアルをしよう
Search
akatsuki1910
October 17, 2023
0
16
Reactのチュートリアルをしよう
akatsuki1910
October 17, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
2
難解(かもしれない)言語
akatsuki1910
1
28
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
27
Reactのチュートリアルをしよう2
akatsuki1910
0
13
HTMLとCSSとコンポーネント
akatsuki1910
0
17
そのコレクション合ってる?
akatsuki1910
0
20
第3回 TypeScriptを使おう
akatsuki1910
0
10
第2回 TypeScriptを使おう
akatsuki1910
0
21
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Automating Front-end Workflow
addyosmani
1366
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Designing the Hi-DPI Web
ddemaree
280
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
A designer walks into a library…
pauljervisheath
204
24k
Producing Creativity
orderedlist
PRO
341
39k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Happy Clients
brianwarren
98
6.7k
Transcript
Reactのチュートリアルをしよう らり
なにすんの? 昔からあるチュートリアル、Tic-Tac-Toe 今回は新しいやつをする ↓古いやつ https://ja.legacy.reactjs.org/tutorial/tutorial.html ↓新しいやつ https://react.dev/learn/tutorial-tic-tac-toe
なに話すの? チュートリアルはあくまで構文を理解するためのものなので、細かいところまでは考慮さ れてない そのため、チュートリアルにそって、開発をするのであれば気をつけるべき点などを知り つつ、Reactについて学ぶ そのため、チュートリアルをすすめるのにめちゃくちゃ牛歩です
Setup for the tutorial ×が入った四角を表示させるコード https://codesandbox.io/s/vy6j3f?file=/App.js&utm_medium=sandpack
クラスコンポーネントと関数コンポーネント いいえ。React からクラスを削除する予定はありません — 我々はみなプロダクトを世に 出し続ける必要があり、クラスを書き換えている余裕はありません。新しいコードでフック を試すことをお勧めします。 => 強い意思がなければ関数コンポーネントでかく https://ja.legacy.reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components
命名 コンポーネントとファイル名を同じにする また、拡張子はjsxかtsxを使う => 逆に、コンポーネントやcontextといった、Reactでのファイル(?)でなければjsxかtsx の拡張子を使わない/使う必要がない https://github.com/airbnb/javascript/tree/master/react#naming
四角を並べていく 同じコードを2つ書く Reactのコンポーネントは単一のJSX要素を返す必要があるので、fragmentを用いて 囲ってあげる必要がある
9つ並べる SquareからBoardに名前を変える
Squareを別コンポーネントにする 今回はこのコンポーネントを派生したり、組み合わせて使うわ けではない分割する これは、ボードと各マスは責務が異なるためである この分割方法はデザインパターンによって異なるため、プロ ジェクトによってルールを知る必要がある
valueを入れれるようにする valueというpropsを用いて、値が表示されるようにする
クリックできるようにする これにより、「clicked!」が表示されるようになる
useCallback useCallBackは、メモ化されたコールバック関数を返します。メモ化とは同じ入力が再度 発生した時に、キャッシュした結果を返すことです => どゆこと? https://tyotto-good.com/react/use-callback
その前に React Hooksは、Reactのクラス記法を使わずともReactを使えるようにするもの useCallbackや、useStateなどがそれに当たる => そのため、大体の機能はクラス記法時代のライフサイクルを大まかに知っておく必要 がある
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
だいた~い理解してると分かること • componentDidMount ◦ コンポーネントがマウントされた(ツリーに挿入された)直後 • componentDidUpdate ◦ 更新が行われた直後 =>
つまり、実行タイミングが2つある
だいた~い理解してると分かること depsに値が入ってるか入っていないかによって、その2つの書き方を使い分けれる 値が入っていない => componentDidMount 値が入っている => その値が更新された時 => componentDidUpdate
だいた~い理解してると分かること ReactはObject.isを用いて、同一のものかを比較をしているため(内容は後日)、関数や オブジェクトであれば、同一メモリのものでないと同じものであると認識されない そのため、hooksを用いてないと毎度違うオブジェクトが生成されてしまうため、再レンダ リング云々の問題に直面することになる またメモリ効率的にも悪い(詳しい話は難しいので省略)ので、基本的にuseCallbackを 用いた方がいい https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is
なんで素の関数を書いてはいけないの? componentDidMountとcomponentDidUpdateの2つをあわせもつ物が出来るため、再 レンダリングが行われる度に関数が更新される あとは先ほどの通り、デメリットがどんどん出てくることになる
頭に入れておくこと かつては最適化をするものが多くなりすぎると重くなることが問題視されていた ただ、その数は相当数なものでないと起こりえないため、気にするものでもない また、本当にいらないのなら外すだけでいいので、最初からuseCallbackなどを書いて おいた方がいい そのため、「必ず使おう」という強制するものではない https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ https://zenn.dev/takepepe/articles/react-context-rerender
課題 課題 今のままでも問題ないですが、keyが何かを回すとき、keyが必要になります このとき、keyを付けるにはどのようにすればいいでしょうか