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