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

作ろう、Custom Hooks

Avatar for surumebeer surumebeer
October 02, 2019
Programming
330
1

作ろう、Custom Hooks

Avatar for surumebeer

surumebeer

October 02, 2019

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
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
850
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
220
Coding at the Speed of Thought: The New Era of Symfony Docker
Avatar for Kévin Dunglas dunglas
0
4.8k
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
180
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
200
Vibe NLP for Applied NLP
Avatar for Ines Montani inesmontani
PRO
0
290
[PHPerKaigi 2026]PHPerKaigi2025の企画CodeGolfが最高すぎて社内で内製して半年運営して得た内製と運営の知見
Avatar for Z.O.E. ikezoemakoto
0
340
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
Avatar for Rodrigo Serradura serradura
0
300
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
240
forteeの改修から振り返るPHPerKaigi 2026
Avatar for muno92 muno92
PRO
3
260
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
3
150
飯MCP
Avatar for Yusuke Wada yusukebe
0
490

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
130
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
6.7k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
37k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k

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. ご清聴ありがとうございました