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
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
240
リリース時」テストから「デイリー実行」へ！開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
Avatar for goataka (GOAMI Takaaki) goataka
0
160
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
190
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
230
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
10
1.5k
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
160
gunshi
Avatar for kazupon kazupon
1
140
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.4k
Python札幌 LT資料
Avatar for t3tra t3tra
7
1.1k
PC-6001でPSG曲を鳴らすまでを全部NetBSD上の Makefile に押し込んでみた / osc2025hiroshima
Avatar for Izumi Tsutsui tsutsui
0
200
大規模Cloud Native環境におけるFalcoの運用
Avatar for Chihiro Hasegawa owlinux1000
0
240
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
6
2.9k

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
100
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
680
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
74
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
41
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k

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