Upgrade to Pro — share decks privately, control downloads, hide ads and more …

作ろう、Custom Hooks

Avatar for surumebeer surumebeer
October 02, 2019
Programming
1
330

作ろう、Custom Hooks

Avatar for surumebeer

surumebeer

October 02, 2019
Tweet

More Decks by surumebeer

See All by surumebeer
about ES and TC39
Avatar for surumebeer surumebeer
0
270

Other Decks in Programming

See All in Programming
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
Avatar for Andrey Chernov inetand
0
2.4k
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
560
テストカバレッジ100%を10年続けて得られた学びと品質
Avatar for もっち mottyzzz
2
610
私の後悔をAWS DMSで解決した話
Avatar for 平目 hiramax
4
210
CJK and Unicode From a PHP Committer
Avatar for てきめん tekimen youkidearitai
PRO
0
110
Deep Dive into Kotlin Flow
Avatar for Matsuda Jumpei jmatsu
1
370
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
Avatar for luccafort luccafort
PRO
1
190
はじめてのMaterial3 Expressive
Avatar for yume ym223
2
900
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
170
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
2.5k
Reading Rails 1.0 Source Code
Avatar for Masafumi Okura okuramasafumi
0
250
時間軸から考えるTerraformを使う理由と留意点
Avatar for Ryoma Fujiwara fufuhu
16
4.8k

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
3
59
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k

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
 • 関数型コンポーネントでのみ利用可能
 • 関数型コンポーネント自体が状態を持てるようになった
 •

    関数型コンポーネント内で副作用の実行も可能

  6. None

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


  8. None

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


  10. stateの操作をCustom Hooks化


  11. None

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


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


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


  15. fetchしたjsonを表示する


  16. None

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


  18. Custom Hooksとして切り離す


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


  20. None

  21. スッキリ！


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