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
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
980
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
200
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
240
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
300
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
130
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.8k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
130

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
75
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
Done Done
Avatar for chrislema chrislema
186
16k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
190
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200

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