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
410
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
"書く文化"を仕組みで育てる──フォルシアの技術ブログ継続戦略
forcia_dev_pr
1
140
新しいおもちゃを見つけたい私がやっている情報収集
forcia_dev_pr
2
390
「Pythonの環境構築について」と記事作成で意識したこと
forcia_dev_pr
1
130
Neovim で VS Code みたいにコーディングする
forcia_dev_pr
1
140
なぜ・どうやって・何を書く? 〜技術記事を書く習慣の作り方〜
forcia_dev_pr
1
150
第8回ゆるふわオンサイト 解説スライド
forcia_dev_pr
0
91
第7回ゆるふわオンサイト解説
forcia_dev_pr
0
230
第6回ゆるふわオンサイト解説
forcia_dev_pr
0
230
よくわかるFORCIAのエンジニア旅行SaaSプロダクト開発編
forcia_dev_pr
0
750
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Gamification - CAS2011
davidbonilla
81
5.3k
What's in a price? How to price your products and services
michaelherold
246
12k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Facilitating Awesome Meetings
lara
54
6.4k
How to Ace a Technical Interview
jacobian
277
23k
Docker and Python
trallard
44
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Typedesign – Prime Four
hannesfritz
42
2.7k
Site-Speed That Sticks
csswizardry
10
680
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