SlideShare a Scribd company logo

Apolloを使って、React-Reduxの世界にGraphQLを持ち込む

C
chuck h

Apolloを使って、React-Reduxの世界にGraphQLを持ち込む

1 of 31
Download to read offline
1
APOLLOを使って、REACT, REDUX
の世界にGRAPHQLを持ち込む
chuck
2016/9/2 @Gotanda.js
14
ABOUT ME
3
• フロントエンドエンジニア
• 平成3年産
• @chuck0523 FollowMe :)
ABOUT ME
11
ABOUT ME
Global triple worker
8
TONIGHT’S TOPIC
7
React.js, Redux, GraphQL

Recommended

react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのかreact-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか暁 三宅
 
AWSで開発するサーバレスAPIバックエンド
AWSで開発するサーバレスAPIバックエンドAWSで開発するサーバレスAPIバックエンド
AWSで開発するサーバレスAPIバックエンド暁 三宅
 
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techConsumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techToshiaki Maki
 
GraphQLについての5分間
GraphQLについての5分間GraphQLについての5分間
GraphQLについての5分間Matsuo Obu
 

More Related Content

What's hot

アプリケーションへのRubyインタープリターの組み込み
アプリケーションへのRubyインタープリターの組み込みアプリケーションへのRubyインタープリターの組み込み
アプリケーションへのRubyインタープリターの組み込みKouhei Sutou
 
Reactを使ったVR環境
Reactを使ったVR環境Reactを使ったVR環境
Reactを使ったVR環境KatsuyaENDOH
 
Responsableを使ったadr実装
Responsableを使ったadr実装Responsableを使ったadr実装
Responsableを使ったadr実装Kenjiro Kubota
 
Rails composerでrails newを楽にしよう
Rails composerでrails newを楽にしようRails composerでrails newを楽にしよう
Rails composerでrails newを楽にしよう健太 田上
 
WebGL Performance Tuning Tips
WebGL Performance Tuning TipsWebGL Performance Tuning Tips
WebGL Performance Tuning TipsYukio Andoh
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかたKazunari Hara
 
20210129 azure webapplogging
20210129 azure webapplogging20210129 azure webapplogging
20210129 azure webapploggingTakayoshi Tanaka
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDEdcubeio
 
LaravelでAPI定義を管理する
LaravelでAPI定義を管理するLaravelでAPI定義を管理する
LaravelでAPI定義を管理するKenjiro Kubota
 
Lambda(Python)のデプロイについて考えたというか作った
Lambda(Python)のデプロイについて考えたというか作ったLambda(Python)のデプロイについて考えたというか作った
Lambda(Python)のデプロイについて考えたというか作ったTerui Masashi
 
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発Kenjiro Kubota
 
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたKazunari Hara
 
Kubernetesクラスタバージョンアップを支える技術
Kubernetesクラスタバージョンアップを支える技術Kubernetesクラスタバージョンアップを支える技術
Kubernetesクラスタバージョンアップを支える技術LIFULL Co., Ltd.
 
Skinny framework勉強会
Skinny framework勉強会Skinny framework勉強会
Skinny framework勉強会Yusuke Arakaki
 
LIFULLの全社アプリケーション実行基盤 KEEL について
LIFULLの全社アプリケーション実行基盤 KEEL についてLIFULLの全社アプリケーション実行基盤 KEEL について
LIFULLの全社アプリケーション実行基盤 KEEL についてLIFULL Co., Ltd.
 
Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方LIFULL Co., Ltd.
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...Shotaro Suzuki
 
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみたZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみたYasunori Kirimoto
 
introducing vue-wait-component
introducing vue-wait-componentintroducing vue-wait-component
introducing vue-wait-componentKenjiro Kubota
 

What's hot (20)

アプリケーションへのRubyインタープリターの組み込み
アプリケーションへのRubyインタープリターの組み込みアプリケーションへのRubyインタープリターの組み込み
アプリケーションへのRubyインタープリターの組み込み
 
Reactを使ったVR環境
Reactを使ったVR環境Reactを使ったVR環境
Reactを使ったVR環境
 
Responsableを使ったadr実装
Responsableを使ったadr実装Responsableを使ったadr実装
Responsableを使ったadr実装
 
Rails composerでrails newを楽にしよう
Rails composerでrails newを楽にしようRails composerでrails newを楽にしよう
Rails composerでrails newを楽にしよう
 
WebGL Performance Tuning Tips
WebGL Performance Tuning TipsWebGL Performance Tuning Tips
WebGL Performance Tuning Tips
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
 
20210129 azure webapplogging
20210129 azure webapplogging20210129 azure webapplogging
20210129 azure webapplogging
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
 
LaravelでAPI定義を管理する
LaravelでAPI定義を管理するLaravelでAPI定義を管理する
LaravelでAPI定義を管理する
 
WebWorker and Atomics
WebWorker and AtomicsWebWorker and Atomics
WebWorker and Atomics
 
Lambda(Python)のデプロイについて考えたというか作った
Lambda(Python)のデプロイについて考えたというか作ったLambda(Python)のデプロイについて考えたというか作った
Lambda(Python)のデプロイについて考えたというか作った
 
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
 
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかた
 
Kubernetesクラスタバージョンアップを支える技術
Kubernetesクラスタバージョンアップを支える技術Kubernetesクラスタバージョンアップを支える技術
Kubernetesクラスタバージョンアップを支える技術
 
Skinny framework勉強会
Skinny framework勉強会Skinny framework勉強会
Skinny framework勉強会
 
LIFULLの全社アプリケーション実行基盤 KEEL について
LIFULLの全社アプリケーション実行基盤 KEEL についてLIFULLの全社アプリケーション実行基盤 KEEL について
LIFULLの全社アプリケーション実行基盤 KEEL について
 
Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方Kubernetesセキュリティの歩き方
Kubernetesセキュリティの歩き方
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
 
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみたZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
 
introducing vue-wait-component
introducing vue-wait-componentintroducing vue-wait-component
introducing vue-wait-component
 

Similar to Apolloを使って、React-Reduxの世界にGraphQLを持ち込む

今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おうHayashi Yuichi
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有するkazuki matsumura
 
Prepare for Java 9 #jjug
Prepare for Java 9 #jjugPrepare for Java 9 #jjug
Prepare for Java 9 #jjugYuji Kubota
 
GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...
GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...
GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...Rescale Japan株式会社
 
SADAO TOKUYAMA の L.E.A.P カンファレンス な 話
SADAO TOKUYAMA の L.E.A.P カンファレンス な 話SADAO TOKUYAMA の L.E.A.P カンファレンス な 話
SADAO TOKUYAMA の L.E.A.P カンファレンス な 話Sadao Tokuyama
 
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうKazuhiro Hara
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめKazuhiro Hara
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころAyumi Goto
 

Similar to Apolloを使って、React-Reduxの世界にGraphQLを持ち込む (12)

今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
 
REACT & WEB API
REACT & WEB APIREACT & WEB API
REACT & WEB API
 
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
 
Prepare for Java 9 #jjug
Prepare for Java 9 #jjugPrepare for Java 9 #jjug
Prepare for Java 9 #jjug
 
GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...
GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...
GTC Japan 2016 Rescaleセッション資料「クラウドHPC ではじめるDeep Learning」- Oct/5/2016 at GTC ...
 
SADAO TOKUYAMA の L.E.A.P カンファレンス な 話
SADAO TOKUYAMA の L.E.A.P カンファレンス な 話SADAO TOKUYAMA の L.E.A.P カンファレンス な 話
SADAO TOKUYAMA の L.E.A.P カンファレンス な 話
 
ClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろうClojureでElectronアプリを作ろう
ClojureでElectronアプリを作ろう
 
ngJapan報告会
ngJapan報告会ngJapan報告会
ngJapan報告会
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめ
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
ScalaCL in ScalaKaigi
ScalaCL in ScalaKaigiScalaCL in ScalaKaigi
ScalaCL in ScalaKaigi
 
OpenStack Now!
OpenStack Now!OpenStack Now!
OpenStack Now!
 

Recently uploaded

オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)
オリジナルNFTを発行するブロックチェーン開発ハンズオン(NFTの発行に必要なツールから実装まで)Kanta Sasaki
 
解説: 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
 
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
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227ssuserf8ea02
 
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)NTT DATA Technology & Innovation
 
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
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishinMakoto Mori
 

Recently uploaded (8)

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

Apolloを使って、React-Reduxの世界にGraphQLを持ち込む