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

作ろう、Custom Hooks

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
条件判定に名前、つけてますか？ #phperkaigi #c
Avatar for Hiromi Hishida 77web
2
770
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
500
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
1.1k
AHC061解説
Avatar for Shun_PI shun_pi
0
420
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
140
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
150
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
2
360
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
200
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1.3k
コードレビューをしない選択 #でぃーぷらすトウキョウ
Avatar for Takuma Kajikawa kajitack
3
1.1k
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
310
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
Avatar for Suguru Ohki suguruooki
0
160

Featured

See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
52k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
360
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
720
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
320
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
200
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
37k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
150
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k

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