React hooks を気合で理解する

2023/2/28開催Shinjuku.ts#2LT資料

Transcript

1. React hooksを気合で理解する
   宮本唯
   フォルシア株式会社エンジニア
   

   View Slide

2. 自己紹介
   ● 宮本 唯
   ● ソフトウェアエンジニア@フォルシア株式会社
   ○ 旅行会社検索アプリの運用保守・開発
   ● 活動領域
   ○ webアプリケーション開発 (TypeScript, React, Redux)
   ○ バックエンド開発(PostgreSQL)
   ○ 技術広報
   ○ 飲み会のにぎやかし要員
   2
   

   View Slide

3. 免責
   このLTはゆるふわ系です。
   3
   理由 : 宮本はTypeScriptやReactを雰囲気でしか理解しておらずガチのLTはできないので。
   LTの真の目的 : こんなんでもいいのかとみんなに思ってもらってLTのハードルを下げる。
   (とくに掲載しているソースコードはサクッと書いたものなので間違えている可能性大です…)
   

   View Slide

4. もくじ
   1. React完全に理解した
   2. Reactなにもわからない
   3. React Hooksを気合で理解する～クラスコンポーネントと関数コンポーネント～
   4. React Hooksを気合で理解する～useState と useEffect
   5. まとめと教訓
   4
   

   View Slide

5. 第1章 React完全に理解した
   5
   

   View Slide

6. Reactとは？
   6
   • webアプリケーションのフロントエンドを開発するためのJavaScriptライブラリ
   • フォルシアでは TypeScript + React で検索アプリを開発している(全部ではない)
   ※shinjuku.ts「フォルシアのフレームワークとTypeScript」より
   

   View Slide

7. Reactとは？
   7
   • webアプリケーションのフロントエンドを開発するためのJavaScriptライブラリ
   • フォルシアでは TypeScript + React で検索アプリを開発している(全部ではない)
   ※shinjuku.ts「フォルシアのフレームワークとTypeScript」より
   ここでReactも
   導入
   

   View Slide

8. Reactを使う理由(1)
   8
   • Reactでは長大なHTMLを コンポネント に分割することで、簡潔さや高い保守性を実現できる
   … 本質的には JSX(Javascript XML), TSX(Typescript XML) の利用
   HTMLを
   書きやすくする
   マクロみたいな
   ものか…
   ひよっ子エンジニア ・ 宮本
   イメージ
   

   View Slide

9. Reactを使う理由(1)
   9
   • Reactでは長大なHTMLを コンポネント に分割することで、簡潔さや高い保守性を実現できる
   … 本質的には JSX(Javascript XML), TSX(Typescript XML) の利用
   HTMLを
   書きやすくする
   マクロみたいな
   ものか…
   ひよっ子エンジニア ・ 宮本
   イメージ
   完全に理解
   

   View Slide

10. 第2章 Reactなにもわからない
    10
    

    View Slide

11. 11
    • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる
    • javaScriptによってHTMLを変化させることで実現
    Reactを使う理由(2)
    

    View Slide

12. 12
    • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる
    • javaScriptによってHTMLを変化させることで実現
    Reactを使う理由(2)
    • Reactを使ってもHTMLの変化を実現させることができる
    • jQueryと異なり、変化させる処理を陽に記述しなくて良いので、思わぬバグを防げる
    

    View Slide

13. 13
    • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる
    • javaScriptによってHTMLを変化させることで実現
    Reactを使う理由(2)
    • Reactを使ってもHTMLの変化を実現させることができる
    • jQueryと異なり、変化させる処理を陽に記述しなくて良いので、思わぬバグを防げる
    

    View Slide

14. 14
    • Webページでは、(同じURLでも)ブラウザ上の画面に動きを出すことができる
    • javaScriptによってHTMLを変化させることで実現
    Reactを使う理由(2)
    • Reactを使ってもHTMLの変化を実現させることができる
    • jQueryと異なり、変化させる処理を陽に記述しなくて良いので、思わぬバグを防げる
    React Hooksである！！
    

    View Slide

15. 第3章 React hooksを気合で理解する
    ～クラスコンポーネントと関数コンポーネント～
    15
    

    View Slide

16. とりあえずReact hooksについて調べてみた
    16
    要するにフックとは？
    フックとは、関数コンポーネントに state やライフサイク
    ルといった React の機能を “接続する (hook into)” ための関
    数です。フックは React をクラスなしに使うための機能で
    すので、クラス内では機能しません。
    React公式ドキュメント(https://ja.reactjs.org/docs/hooks-overview.html)より抜粋
    ここでmiyamotoは衝撃の事実に気づく…
    

    View Slide

17. とりあえずReact hooksについて調べてみた
    17
    要するにフックとは？
    フックとは、関数コンポーネントに state やライフサイク
    ルといった React の機能を “接続する (hook into)” ための関
    数です。フックは React をクラスなしに使うための機能で
    すので、クラス内では機能しません。
    React公式ドキュメント(https://ja.reactjs.org/docs/hooks-overview.html)より抜粋
    ここでmiyamotoは衝撃の事実に気づく…
    Reactのコンポーネントには
    クラスコンポーネントと関数コンポーネントがあるのだ！！
    

    View Slide

18. Reactのクラスコンポーネント
    18
    • Javascriptのクラスの機能を利用して実装されたReactのフレームワーク
    主な用語(お気持ち)
    props … 親から与えられたコンポーネントの状態
    state … 自分が内部に持っているコンポーネントの状態
    render … HTMLを生成しDOMに書き出すプロセス
    propsまたはstateが更新されると
    renderが(何度でも)実行され画面が変化される。
    

    View Slide

19. Reactの関数コンポーネント
    19
    • Javascriptの関数の機能を利用して実装されたReactのフレームワーク
    19
    • クラスよりも実装がシンプルで再利用しやすく、保守性が
    高い
    • ただし、クラスコンポーネントのようにReactの機能を自由
    に使うことができなかった(stateなどReact.Component
    のメソッド)
    関数コンポネントでも、stateなどクラスコンポーネントで
    使えていた機能を使えるようにするのが React Hooks!
    ※React16.8で追加された比較的新しい機能
    

    View Slide

20. 第4章 React Hooksを気合で理解する
    ～useStateとuseEffect～
    20
    

    View Slide

21. • クラスコンポーネントで使えてた機能を関数コンポーネントでも使えるようにするのが React Hooks
    • React Hooks はReactに新機能を提供するものというより、リファクタリングのための道具を与えるものといえる
    • React Hooksのうちよく利用するのが useState と useEffect
    • useMemo, useCallback, useRef とかもたまに使う
    • useState … クラスコンポーネントの state を 関数コンポーネントでも使えるようにする
    • useEffect … クラスコンポーネントの 副作用 を 関数コンポーネントでも使えるようにする
    useState と useEffect
    21
    

    View Slide

22. • useState … クラスコンポーネントの state を 関数コンポーネントでも使えるようにする
    useState の使い方
    クラスコンポーネント 関数コンポーネント
    22
    

    View Slide

23. • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする
    useEffect の使い方 (1)
    副作用を起こせる主なメソッド
    • componentDidMount
    出力がDOMにrenderされた直後に呼び出し
    • componentDidUpdate
    DOMが更新された直後に呼び出し
    • componentWillUnmount
    コンポネントが破棄される直前に呼び出し
    23
    

    View Slide

24. useEffect の使い方 (2)
    • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする
    24
    

    View Slide

25. useEffect の使い方 (2)
    ※ 実際はクラスと関数で微妙に副作用実行のタイミングが異なっているので、書き換えは等価ではない
    componentDidMount,
    componentDidUpdate に対応
    componentWillUnmount に対応
    ※両者の違いはuseEffectの第2引数でだいたい制御可能
    • useEffect … クラスコンポーネントの 副作用 (≒レンダリング以外の処理) を 関数コンポーネントでも使えるようにする
    25
    

    View Slide

26. その他のReact Hooks
    紹介した以外にもReact Hooksはいっぱいある。
    • useRef
    • refのフォワーディングを関数コンポネントで使用する
    • useContext
    • コンテクストを関数コンポネントで使用する
    • useMemo
    • レンダリング時の関数の実行結果をメモしパフォーマンスを改善するために使用する
    • useCallback
    • コールバック関数をメモしパフォーマンスを改善するために使用する
    • useReducer
    • Reduxっぽく状態を管理したいときにuseStateの代わりに使用する
    詳しくは、https://ja.reactjs.org/docs/hooks-reference.html に書いてある。
    26
    

    View Slide

27. • React Hooks を使えば、関数コンポーネントでもクラスコンポーネントで使えていた機能が利用できる
    • コードの意味が分からないときは公式ドキュメントを読んで体系的に勉強しましょう
    • LTこんなのでもよいのでぜひ！！ (TypeScriptそのものでなくても、周辺分野であれば大丈夫です)
    まとめと教訓
    ご清聴ありがとうございました
    27
    

    View Slide