作ろう、Custom Hooks

Transcript

1. 作ろう、Custom Hooks
 表参道Web勉強会
 『Vue.js/PWA/JavaScript…新&定番なんでもあり』
 Vol8
 @sururmebeer

2. Shuji Nishino @surumebeer
 株式会社 でフロントエンドエンジニアしてます

3. 今日話すこと…

4. React Hooks

5. React Hooksとは？
 • React 16.8から追加されたAPI
 • 関数型コンポーネントでのみ利用可能
 • 関数型コンポーネント自体が状態を持てるようになった
 • 関数型コンポーネント内で副作用の実行も可能

7. state
 state更新用の関数
 useStateの宣言
 stateの初期値

9. useEffectの宣言
 副作用
 副作用が依存 している関数

10. stateの操作をCustom Hooks化

12. Hooksを使ってロジック部分を関数として切り離す

13. Custom Hooksを作って嬉しいこと
 • ロジック部分を分割して管理ができる
 • 分割したロジックを、コンポーネントの階層構造に影響することなく共有・再利用できる
 • プレゼンテーションのコンポーネントは、プレゼンテーションのみに専念させられる

14. もうちょっと実践的に…

15. fetchしたjsonを表示する

17. ロジック部分
 プレゼンテーション
 ロジックとUIが同じ関数コンポーネント内にある

18. Custom Hooksとして切り離す

19. Hooksを使ってロジック部分だけ関数として切り離す

21. スッキリ！

22. ご清聴ありがとうございました