SlideShare a Scribd company logo

Recoilライブラリを 触ってみる

2023/08/04の勉強会で発表されたものです。

1 of 11
Download to read offline
Recoilライブラリを
触ってみる
執筆者:トビウオ
Reactにおけるstate管理
• メモ帳アプリを考える
• 日付とメッセージ
• 追加、削除できる
• フィルター機能
• 件数の表示機能
Reactにおけるstate管理
• 必要なstateとメソ
ッドを考えるとこ
んな感じ
• filteredMessagesは
messagesから生成す
る
Reactにおけるstate管理
• 必要なstateとメソッドを考えるとこんな感じ
stateをどう利用するか
A. stateを直接生成して管理する←前のページ
B. React.createContextを使う
C. Recoilライブラリを使う←今回の内容
Recoilライブラリの概念
Atom (小さなstate) Atom Atom Selectorの出力
Selectorが加工
stateを利用するUI
getのみ
getやsetが行える

Recommended

ドラフト版 COD2012 九州会場 Active Directory 障害対策
ドラフト版 COD2012 九州会場 Active Directory 障害対策ドラフト版 COD2012 九州会場 Active Directory 障害対策
ドラフト版 COD2012 九州会場 Active Directory 障害対策wintechq
 
COD2012 九州会場 Active Directory 障害対策
COD2012 九州会場 Active Directory 障害対策COD2012 九州会場 Active Directory 障害対策
COD2012 九州会場 Active Directory 障害対策wintechq
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」Naoyuki Kataoka
 
Hadoopによるリクルートでの技術調査とその活用
Hadoopによるリクルートでの技術調査とその活用Hadoopによるリクルートでの技術調査とその活用
Hadoopによるリクルートでの技術調査とその活用Chiaki Hatanaka
 
BMXUG ブロックチェーンハンズオン 20190622
BMXUG ブロックチェーンハンズオン 20190622BMXUG ブロックチェーンハンズオン 20190622
BMXUG ブロックチェーンハンズオン 20190622Kohei Nishikawa
 
React+redux+saga 02
React+redux+saga 02React+redux+saga 02
React+redux+saga 02TIS Inc
 

More Related Content

More from iPride Co., Ltd.

AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。iPride Co., Ltd.
 
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。iPride Co., Ltd.
 
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものですAWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものですiPride Co., Ltd.
 
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。iPride Co., Ltd.
 
画像生成AIの問題点
画像生成AIの問題点画像生成AIの問題点
画像生成AIの問題点iPride Co., Ltd.
 
MVCになぞらえて理解するReact
MVCになぞらえて理解するReactMVCになぞらえて理解するReact
MVCになぞらえて理解するReactiPride Co., Ltd.
 
AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~iPride Co., Ltd.
 
ゼロトラストについて学んだこと
ゼロトラストについて学んだことゼロトラストについて学んだこと
ゼロトラストについて学んだことiPride Co., Ltd.
 
ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話iPride Co., Ltd.
 
AIについて学んだこと ~ AIとは? ~
AIについて学んだこと ~ AIとは? ~AIについて学んだこと ~ AIとは? ~
AIについて学んだこと ~ AIとは? ~iPride Co., Ltd.
 
単一責任の原則について
単一責任の原則について単一責任の原則について
単一責任の原則についてiPride Co., Ltd.
 
JavaScriptで「キャピタライズ」を 実装してみる
JavaScriptで「キャピタライズ」を 実装してみるJavaScriptで「キャピタライズ」を 実装してみる
JavaScriptで「キャピタライズ」を 実装してみるiPride Co., Ltd.
 
Pythonで学ぶ数理計画法の初歩
Pythonで学ぶ数理計画法の初歩Pythonで学ぶ数理計画法の初歩
Pythonで学ぶ数理計画法の初歩iPride Co., Ltd.
 
OIDC(OpenID Connect)について解説③
OIDC(OpenID Connect)について解説③OIDC(OpenID Connect)について解説③
OIDC(OpenID Connect)について解説③iPride Co., Ltd.
 
DrupalをDockerで起動してみる
DrupalをDockerで起動してみるDrupalをDockerで起動してみる
DrupalをDockerで起動してみるiPride Co., Ltd.
 
HTTPの仕組みについて
HTTPの仕組みについてHTTPの仕組みについて
HTTPの仕組みについてiPride Co., Ltd.
 
通信プロトコルについて
通信プロトコルについて通信プロトコルについて
通信プロトコルについてiPride Co., Ltd.
 

More from iPride Co., Ltd. (20)

AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
 
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
 
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものですAWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
 
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
 
画像生成AIの問題点
画像生成AIの問題点画像生成AIの問題点
画像生成AIの問題点
 
AI入門
AI入門AI入門
AI入門
 
MVCになぞらえて理解するReact
MVCになぞらえて理解するReactMVCになぞらえて理解するReact
MVCになぞらえて理解するReact
 
AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~
 
OAuth2.0について
OAuth2.0についてOAuth2.0について
OAuth2.0について
 
ゼロトラストについて学んだこと
ゼロトラストについて学んだことゼロトラストについて学んだこと
ゼロトラストについて学んだこと
 
ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話
 
AIについて学んだこと ~ AIとは? ~
AIについて学んだこと ~ AIとは? ~AIについて学んだこと ~ AIとは? ~
AIについて学んだこと ~ AIとは? ~
 
単一責任の原則について
単一責任の原則について単一責任の原則について
単一責任の原則について
 
オブジェクト指向
オブジェクト指向オブジェクト指向
オブジェクト指向
 
JavaScriptで「キャピタライズ」を 実装してみる
JavaScriptで「キャピタライズ」を 実装してみるJavaScriptで「キャピタライズ」を 実装してみる
JavaScriptで「キャピタライズ」を 実装してみる
 
Pythonで学ぶ数理計画法の初歩
Pythonで学ぶ数理計画法の初歩Pythonで学ぶ数理計画法の初歩
Pythonで学ぶ数理計画法の初歩
 
OIDC(OpenID Connect)について解説③
OIDC(OpenID Connect)について解説③OIDC(OpenID Connect)について解説③
OIDC(OpenID Connect)について解説③
 
DrupalをDockerで起動してみる
DrupalをDockerで起動してみるDrupalをDockerで起動してみる
DrupalをDockerで起動してみる
 
HTTPの仕組みについて
HTTPの仕組みについてHTTPの仕組みについて
HTTPの仕組みについて
 
通信プロトコルについて
通信プロトコルについて通信プロトコルについて
通信プロトコルについて
 

Recently uploaded

COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)NTT DATA Technology & Innovation
 
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)Kanta Sasaki
 
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfHarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfMatsushita Laboratory
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんtoshinori622
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishinMakoto Mori
 
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHubK Kinzal
 
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdfAyachika Kitazaki
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227ssuserf8ea02
 

Recently uploaded (8)

COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
 
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
 
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdfHarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
HarukiShinkawa_果樹農家が期待する行動への変容を促す仕掛け設計のための収穫作業体験者の行動観察とモデル化_仕掛学2024.pdf
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
 
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub解説: Token Extensions - Solana Developer Hub Online #SolDevHub
解説: Token Extensions - Solana Developer Hub Online #SolDevHub
 
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
20240222_Neko_IoTLT_vol9_kitazaki_v1.pdf
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227
 

Recoilライブラリを 触ってみる