Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

作ろう、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
340
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
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
110
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
Avatar for Keisuke Kobayashi kobakei
0
120
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
130
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
170
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
320
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
1k
マイコン向けの軽量Ruby「PicoRuby」で各種デバイスを制御するネイティブアプリの実現手法
Avatar for bash0C7 bash0c7
0
420
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
280
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
170
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
180
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
160
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
730

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
810
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
300
Visualization
Avatar for Eitan Lees eitanlees
152
17k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
510
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.2k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
570
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
540
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k

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