Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
作ろう、Custom Hooks
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
surumebeer
October 02, 2019
Programming
330
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
作ろう、Custom Hooks
surumebeer
October 02, 2019
More Decks by surumebeer
See All by surumebeer
about ES and TC39
surumebeer
0
280
Other Decks in Programming
See All in Programming
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.7k
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
geekplus_tech
0
400
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
210
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
contour_gara
0
550
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
ming_ayami
0
130
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
tatsuhiro
1
150
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
250
Contextとはなにか
chiroruxx
1
330
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
macha64
0
540
A2UI という光を覗いてみる
satohjohn
1
140
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
140
Inside Stream API
skrb
1
730
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
57
14k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
730
Ethics towards AI in product and experience design
skipperchong
2
310
Amusing Abliteration
ianozsvald
1
210
Typedesign – Prime Four
hannesfritz
42
3.1k
Crafting Experiences
bethany
1
180
Technical Leadership for Architectural Decision Making
baasie
3
420
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Into the Great Unknown - MozCon
thekraken
41
2.6k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
200
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.9k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
230
Transcript
作ろう、Custom Hooks 表参道Web勉強会 『Vue.js/PWA/JavaScript…新&定番なんでもあり』 Vol8 @sururmebeer
Shuji Nishino @surumebeer 株式会社 でフロントエンドエンジニアしてます
今日話すこと…
React Hooks
React Hooksとは? • React 16.8から追加されたAPI • 関数型コンポーネントでのみ利用可能 • 関数型コンポーネント自体が状態を持てるようになった •
関数型コンポーネント内で副作用の実行も可能
None
state state更新用の関数 useStateの宣言 stateの初期値
None
useEffectの宣言 副作用 副作用が依存 している関数
stateの操作をCustom Hooks化
None
Hooksを使ってロジック部分を関数として切り離す
Custom Hooksを作って嬉しいこと • ロジック部分を分割して管理ができる • 分割したロジックを、コンポーネントの階層構造に影響することなく共有・再利用できる • プレゼンテーションのコンポーネントは、プレゼンテーションのみに専念させられる
もうちょっと実践的に…
fetchしたjsonを表示する
None
ロジック部分 プレゼンテーション ロジックとUIが同じ関数コンポーネント内にある
Custom Hooksとして切り離す
Hooksを使ってロジック部分だけ関数として切り離す
None
スッキリ!
ご清聴ありがとうございました