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
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
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.2k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
200
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
280

Featured

See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
69
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
HDC tutorial
Avatar for Michiel Stock michielstock
1
380
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
290
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240

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