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 hooks を気合で理解する
Search
forcia_dev_pr
March 01, 2023
0
300
React hooks を気合で理解する
2023/2/28開催Shinjuku.ts#2LT資料
forcia_dev_pr
March 01, 2023
Tweet
Share
More Decks by forcia_dev_pr
See All by forcia_dev_pr
第7回ゆるふわオンサイト解説
forcia_dev_pr
0
110
第6回ゆるふわオンサイト解説
forcia_dev_pr
0
170
よくわかるFORCIAのエンジニア旅行SaaSプロダクト開発編
forcia_dev_pr
0
460
よくわかるフォルシアのエンジニア 新卒採用編
forcia_dev_pr
0
2.6k
第5回ゆるふわオンサイト解説
forcia_dev_pr
0
100
よくわかるフォルシアのエンジニア 旅行プラットフォーム部編
forcia_dev_pr
0
4.5k
k8sマニフェストを Typescriptで管理したい― cdk8s+を導入してみました ―
forcia_dev_pr
0
290
第4回ゆるふわ競技プログラミングオンサイト解説
forcia_dev_pr
0
480
フォルシアのフレームワークとTypeScript
forcia_dev_pr
0
280
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Language of Interfaces
destraynor
154
24k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Speed Design
sergeychernyshev
24
570
How GitHub (no longer) Works
holman
311
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Faster Mobile Websites
deanohume
304
30k
Typedesign – Prime Four
hannesfritz
39
2.4k
Six Lessons from altMBA
skipperchong
26
3.5k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Designing Experiences People Love
moore
138
23k
Transcript
React hooksを気合で理解する 宮本唯 フォルシア株式会社エンジニア
自己紹介 • 宮本 唯 • ソフトウェアエンジニア@フォルシア株式会社 ◦ 旅行会社検索アプリの運用保守・開発 • 活動領域
◦ webアプリケーション開発 (TypeScript, React, Redux) ◦ バックエンド開発(PostgreSQL) ◦ 技術広報 ◦ 飲み会のにぎやかし要員 2
免責 このLTはゆるふわ系です。 3 理由 : 宮本はTypeScriptやReactを雰囲気でしか理解しておらずガチのLTはできないので。 LTの真の目的 : こんなんでもいいのかとみんなに思ってもらってLTのハードルを下げる。 (とくに掲載しているソースコードはサクッと書いたものなので間違えている可能性大です…)
もくじ 1. React完全に理解した 2. Reactなにもわからない 3. React Hooksを気合で理解する~クラスコンポーネントと関数コンポーネント~ 4. React
Hooksを気合で理解する~useState と useEffect 5. まとめと教訓 4
第1章 React完全に理解した 5
Reactとは? 6 • webアプリケーションのフロントエンドを開発するためのJavaScriptライブラリ • フォルシアでは TypeScript + React で検索アプリを開発している(全部ではない)
※shinjuku.ts「フォルシアのフレームワークとTypeScript」より
Reactとは? 7 • webアプリケーションのフロントエンドを開発するためのJavaScriptライブラリ • フォルシアでは TypeScript + React で検索アプリを開発している(全部ではない)
※shinjuku.ts「フォルシアのフレームワークとTypeScript」より ここでReactも 導入
Reactを使う理由(1) 8 • Reactでは長大なHTMLを コンポネント に分割することで、簡潔さや高い保守性を実現できる … 本質的には JSX(Javascript XML),
TSX(Typescript XML) の利用 HTMLを 書きやすくする マクロみたいな ものか… ひよっ子エンジニア ・ 宮本 イメージ
Reactを使う理由(1) 9 • Reactでは長大なHTMLを コンポネント に分割することで、簡潔さや高い保守性を実現できる … 本質的には JSX(Javascript XML),
TSX(Typescript XML) の利用 HTMLを 書きやすくする マクロみたいな ものか… ひよっ子エンジニア ・ 宮本 イメージ 完全に理解
第2章 Reactなにもわからない 10
11 • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる • javaScriptによってHTMLを変化させることで実現 Reactを使う理由(2)
12 • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる • javaScriptによってHTMLを変化させることで実現 Reactを使う理由(2) • Reactを使ってもHTMLの変化を実現させることができる • jQueryと異なり、変化させる処理を陽に記述しなくて良いので、思わぬバグを防げる
13 • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる • javaScriptによってHTMLを変化させることで実現 Reactを使う理由(2) • Reactを使ってもHTMLの変化を実現させることができる • jQueryと異なり、変化させる処理を陽に記述しなくて良いので、思わぬバグを防げる
14 • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる • javaScriptによってHTMLを変化させることで実現 Reactを使う理由(2) • Reactを使ってもHTMLの変化を実現させることができる • jQueryと異なり、変化させる処理を陽に記述しなくて良いので、思わぬバグを防げる
React Hooksである!!
第3章 React hooksを気合で理解する ~クラスコンポーネントと関数コンポーネント~ 15
とりあえずReact hooksについて調べてみた 16 要するにフックとは? フックとは、関数コンポーネントに state やライフサイク ルといった React の機能を
“接続する (hook into)” ための関 数です。フックは React をクラスなしに使うための機能で すので、クラス内では機能しません。 React公式ドキュメント(https://ja.reactjs.org/docs/hooks-overview.html)より抜粋 ここでmiyamotoは衝撃の事実に気づく…
とりあえずReact hooksについて調べてみた 17 要するにフックとは? フックとは、関数コンポーネントに state やライフサイク ルといった React の機能を
“接続する (hook into)” ための関 数です。フックは React をクラスなしに使うための機能で すので、クラス内では機能しません。 React公式ドキュメント(https://ja.reactjs.org/docs/hooks-overview.html)より抜粋 ここでmiyamotoは衝撃の事実に気づく… Reactのコンポーネントには クラスコンポーネントと関数コンポーネントがあるのだ!!
Reactのクラスコンポーネント 18 • Javascriptのクラスの機能を利用して実装されたReactのフレームワーク 主な用語(お気持ち) props … 親から与えられたコンポーネントの状態 state …
自分が内部に持っているコンポーネントの状態 render … HTMLを生成しDOMに書き出すプロセス propsまたはstateが更新されると renderが(何度でも)実行され画面が変化される。
Reactの関数コンポーネント 19 • Javascriptの関数の機能を利用して実装されたReactのフレームワーク 19 • クラスよりも実装がシンプルで再利用しやすく、保守性が 高い • ただし、クラスコンポーネントのようにReactの機能を自由
に使うことができなかった(stateなどReact.Component のメソッド) 関数コンポネントでも、stateなどクラスコンポーネントで 使えていた機能を使えるようにするのが React Hooks! ※React16.8で追加された比較的新しい機能
第4章 React Hooksを気合で理解する ~useStateとuseEffect~ 20
• クラスコンポーネントで使えてた機能を関数コンポーネントでも使えるようにするのが React Hooks • React Hooks はReactに新機能を提供するものというより、リファクタリングのための道具を与えるものといえる • React
Hooksのうちよく利用するのが useState と useEffect • useMemo, useCallback, useRef とかもたまに使う • useState … クラスコンポーネントの state を 関数コンポーネントでも使えるようにする • useEffect … クラスコンポーネントの 副作用 を 関数コンポーネントでも使えるようにする useState と useEffect 21
• useState … クラスコンポーネントの state を 関数コンポーネントでも使えるようにする useState の使い方 クラスコンポーネント
関数コンポーネント 22
• useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする useEffect の使い方
(1) 副作用を起こせる主なメソッド • componentDidMount 出力がDOMにrenderされた直後に呼び出し • componentDidUpdate DOMが更新された直後に呼び出し • componentWillUnmount コンポネントが破棄される直前に呼び出し 23
useEffect の使い方 (2) • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を
関数コンポーネントでも使えるようにする 24
useEffect の使い方 (2) ※ 実際はクラスと関数で微妙に副作用実行のタイミングが異なっているので、書き換えは等価ではない componentDidMount, componentDidUpdate に対応 componentWillUnmount に対応
※両者の違いはuseEffectの第2引数でだいたい制御可能 • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする 25
その他のReact Hooks 紹介した以外にもReact Hooksはいっぱいある。 • useRef • refのフォワーディングを関数コンポネントで使用する • useContext
• コンテクストを関数コンポネントで使用する • useMemo • レンダリング時の関数の実行結果をメモしパフォーマンスを改善するために使用する • useCallback • コールバック関数をメモしパフォーマンスを改善するために使用する • useReducer • Reduxっぽく状態を管理したいときにuseStateの代わりに使用する 詳しくは、https://ja.reactjs.org/docs/hooks-reference.html に書いてある。 26
• React Hooks を使えば、関数コンポーネントでもクラスコンポーネントで使えていた機能が利用できる • コードの意味が分からないときは公式ドキュメントを読んで体系的に勉強しましょう • LTこんなのでもよいのでぜひ!! (TypeScriptそのものでなくても、周辺分野であれば大丈夫です) まとめと教訓
ご清聴ありがとうございました 27