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
あけの
September 08, 2022
Programming
1
480
Reactハンズオンラーニングを読んだので感想を語る
あけの
September 08, 2022
Tweet
Share
More Decks by あけの
See All by あけの
TypeScriptのエラー処理(ES2022の新機能を添えて)
akeno
1
1.5k
oapi-codegenを使ってみた
akeno
0
1.5k
こんな案件は嫌だ(※個人の感想です)
akeno
1
160
SQLアンチパターンから学ぶテーブル設計
akeno
0
330
VSCode Remote Containers のすすめ
akeno
0
210
設計とテストの必要性について考える
akeno
1
250
Other Decks in Programming
See All in Programming
Dev ContainersとTestcontainers
bells17
3
100
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
[RailsConf Detroit 2024] Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Porting mruby/c for the SNES (Super Famicom) - RubyKaigi 2024
gedorinku
0
520
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
『WordPressコミュニティで学ぶ』OSS貢献の多様性
ippey
0
300
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
5.2k
The test code generator using static analysis and LLM
mikik0
1
300
酒飲んでたらテックリードになった話
spbaya0141
0
210
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
170
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
49
31k
For a Future-Friendly Web
brad_frost
172
9k
Designing for Performance
lara
601
67k
Designing for humans not robots
tammielis
247
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Clear Off the Table
cherdarchuk
86
310k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Building an army of robots
kneath
300
42k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Automating Front-end Workflow
addyosmani
1357
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Adopting Sorbet at Scale
ufuk
69
8.6k
Transcript
@akeno_0810 2022.09.08 Reactハンズオンラーニング を読んだので感想を語る フロントエンドLT会 - vol.8 #frontendlt
自己紹介 About me あけの (@akeno_0810) Webエンジニア歴2年くらい API/コード設計, チーム開発の効率化, 要件定義 Amplify使ったことないので気になる…
触っている技術 最近興味のある分野
概要 About this talk X React(Next.js)歴10ヶ月くらd X 体系的な知識を仕入れない状態でやってき$ X 一通り読んで気になった部分を話す(積読だった)
X 関数型プログラミン X フッ X パフォーマン X データ取t X Suspense https://www.oreilly.co.jp/books/9784873119380/ Alex Banks、Eve Porcello 著、宮崎 空 訳 Reactハンズオンラーニング 第2版 オライリー・ジャパン発行 ISBN: 978-4-87311-938-0
関数型プログラミング
関数型プログラミング JavaScriptにおける関数型プログラミングの説明が盛り込まれている 命令型との対比でこれから目指すコードの形が表されている ここを理解することがReactの設計の理解に繋がっている 宣言的に書けるか否かがReactらしいコードかどうか https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-03/3.3/3.3.7
フック
フック ステートを管理して、値をバケツリレーで各コンポーネントに配るのが基本 ステートの管理に使えるフックなるものがある https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-06/6.1/6.1.1 ステートの変更が再描画をトリガーするという認識は持った - useState - useReducer -
useContext Formのcontrolled/uncontrolled 前者はReactでステート管理出来る分多少重い 後者はRefを用いてDOMを参照する必要がある https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-06/6.3/6.3.1
フック カスタムフックの設計 https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-06/6.3/6.3.3 どんどん宣言的になっていくので、そちらを向いて作るのが良さそう 関心の分離を進めている フックの種類 useLayoutEffect...? → render後paint前に呼ばれる(useEffectとは違いレンダリングをブロックする) useEffect
→ 描画の副作用という認識を持つ https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-07/7.1/7.1.1 render内ではUI構築に関する処理のみが書かれているべき console.logをuseEffect内で書くという発想はなかった →ログを非同期的に出力するカスタムフックになるのか…?
フック 依存配列の同一性について https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-07/7.1/7.1.2 Reactで用意されているフックは参照を比較するが、深い比較をするライブラリもある… 参照を比較するのでスプレッド演算子が多用される傾向にある useMemoとuseCallbackの使い方 依存しているものが変わらない限り同一のものとして扱いたい →変更されると副作用や再描画が起こるため useReducerでのさらなる抽象化 https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-07/7.3/7.3.1
パフォーマンス
パフォーマンス React.memo 使ってない… 複雑さを受け入れてでもパフォーマンスを求める場面が来たら使うという認識 理解せずに使うと意図せぬ挙動が起こりやすく見える とりあえず囲っておくのもありに見える predicateを使うより親でuseMemoやuseCallbackを使うパターンを取っている →linterもあるし楽 問題のあるところを計測して修正するのが良くて、 最初からパフォーマンスを過度に気をつけて作る必要はなさそう
→ある程度はReactがよしなにやってくれる
データ取得
データ取得 localStorage + FetchAPI + useEffectでの取得をしている https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-08/8.3 データの管理が複雑なのでデータ取得ライブラリの有用性がわかる UIの構築に必要な戻り値を持つフックの提供があると楽(data,error,loading,etc...) 末端のコンポーネントでのAPI呼び出し
https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-08/8.5/8.5.2 親コンポーネントでのデータ取得から分配するパターンを取ることが多いので 表現の違いが見える unmountされた際の検出とリクエストのキャンセル https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-08/8.5/8.5.3 →データ取得を自前で実装することの面倒さを感じる
Suspense
Suspense ErrorBoundaryの関数コンポーネント or フックが欲しい https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-09/9.u e React.lazyを使ったコンポーネントの遅延読み込V e Promiseを返す非同期処理 データ取得ライブラリと対応している
https://github.com/oreilly-japan/learning-react-2e-ja/tree/master/chapter-09/9.3/9.3.3 loading → Suspense.Fallback error → ErrorBoundary.Fallback Promise(非同期処理)の状態に合わせてどうするかを明確に書ける 異常系の処理を正常系の処理をしているコンポーネントの外に追い出せるのが良い
まとめ
まとめ 本を眺めた結果、Reactは - カスタムフックをどう設計するか - 1つのフックで多くのことをせずに複数のフックに分割する - 既存のライブラリがどういうフックを提供しているかから学ぶ - TypeScript力が試される
- State・Promiseをどう管理するか - Server/Global/Localの切り分けと再描画の管理 - 今のところ前2つはライブラリ依存なので、 LocalState以外を意識することがない に尽きる。(現在の自分の見える範囲) 書く時もこの辺で迷ってることが多く…
https://www.oreilly.co.jp/books/9784873119380/ Thank you! フックの依存チェーンが出来るのが厄介 これを分かりやすいと捉えるのが難しい 結局カスタムフックをどう作るかにぶつかる - 宣言的な書き方に慣れる - 手続き的なコードを末端に寄せていく
コンテナ・プレゼンテーションパターン 疎結合であること 反省 ハンズオンラーニングなのに手元でコードをまだ動かしていない…