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
20
Reactのチュートリアルをしよう
akatsuki1910
October 17, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
業務を効率化させるためのAIツール3選(超実践編)
akatsuki1910
0
23
後輩に伝えたいこと
akatsuki1910
0
8
難解(かもしれない)言語
akatsuki1910
1
34
Reactのチュートリアルをしよう3
akatsuki1910
0
19
クソドメインを取ろう
akatsuki1910
0
39
Reactのチュートリアルをしよう2
akatsuki1910
0
16
HTMLとCSSとコンポーネント
akatsuki1910
0
21
そのコレクション合ってる?
akatsuki1910
0
25
第3回 TypeScriptを使おう
akatsuki1910
0
15
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
GraphQLとの向き合い方2022年版
quramy
45
14k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
Making Projects Easy
brettharned
116
6.1k
Designing for Performance
lara
606
69k
Embracing the Ebb and Flow
colly
85
4.6k
The Language of Interfaces
destraynor
157
24k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Adaptive Systems
keathley
41
2.5k
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を付けるにはどのようにすればいいでしょうか