Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

作ろう、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 PADAone pd1xx
1
740
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
170
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
140
ゲームの物理 剛体編
Avatar for Fadis fadis
0
360
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
170
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
Avatar for matsu_chara matsu_chara
2
220
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
Avatar for Tomofumi Kondo tomokon
0
140
これだけで丸わかり！LangChain v1.0 アップデートまとめ
Avatar for os1ma os1ma
6
1.9k
Cap'n Webについて
Avatar for Yusuke Wada yusukebe
0
140
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
270
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
420
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
Avatar for とすり tosuri13
6
360

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.2k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
0
2.3k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
130
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
180
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
1.9k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
71
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
0
1.8k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
75
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
160

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