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

作ろう、Custom Hooks

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
280

Other Decks in Programming

See All in Programming
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
Avatar for hideki kinjyo o0h
PRO
2
250
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
150
エージェンティックRAGにAWSで入門しよう！
Avatar for Har1101 har1101
8
1.6k
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
610
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成（CC Night 2026）
Avatar for Hiroki Uemura wemra
1
140
Spring Security 実践 ─ GraphQL APIで実務に役立つ 認証・認可 を学ぶ
Avatar for Wagyu wagyu
0
250
エンジニアと一緒にテストコードの設計と実装を改善した話
Avatar for mototakatsu mototakatsu
0
200
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
4.2k
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
880
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
500
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
200
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
140

Featured

See All Featured
Designing for Performance
Avatar for Lara Hogan lara
611
70k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
730
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
180
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
390
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.3k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
310

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