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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
surumebeer
October 02, 2019
Programming
1
330
作ろう、Custom Hooks
surumebeer
October 02, 2019
Tweet
Share
More Decks by surumebeer
See All by surumebeer
about ES and TC39
surumebeer
0
270
Other Decks in Programming
See All in Programming
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
460
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.6k
CSC307 Lecture 09
javiergs
PRO
1
840
今から始めるClaude Code超入門
448jp
8
8.8k
CSC307 Lecture 06
javiergs
PRO
0
690
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
100
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
140
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
180
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
How to build a perfect <img>
jonoalderson
1
4.9k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
340
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Prompt Engineering for Job Search
mfonobong
0
160
So, you think you're a good person
axbom
PRO
2
1.9k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
1.9k
Un-Boring Meetings
codingconduct
0
200
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
170
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
スッキリ!
ご清聴ありがとうございました