Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
frontend_bearbash_3.pdf
Kodai Nakamura
August 04, 2018
Programming
0
240
frontend_bearbash_3.pdf
Kodai Nakamura
August 04, 2018
Tweet
Share
More Decks by Kodai Nakamura
See All by Kodai Nakamura
React Fire
kdnk
2
950
wejs24.pdf
kdnk
1
670
Local State Management with Apollo
kdnk
2
1k
React Suspense on Apollo
kdnk
4
1.1k
wejs22.pdf
kdnk
0
490
Other Decks in Programming
See All in Programming
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
410
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
1.9k
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
460
即、New Relic / New Relic NOW!
uzulla
0
270
Node.jsデザインパターンを読んで
mmmommm
0
2.2k
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
240
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
410
heyにおけるCI/CDの現状と課題
fufuhu
2
550
Branching out to Jetpack Compose
chrisbanes
4
1.1k
git on intellij
hiroto_kitamura
0
160
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
160
IE Graduation Certificate
jxck
6
4.7k
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
A better future with KSS
kneath
225
15k
Practical Orchestrator
shlominoach
178
8.6k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Designing Experiences People Love
moore
130
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Thoughts on Productivity
jonyablonski
43
2.3k
Transcript
©2018 Wantedly, Inc. "QPMMPͷհͱ͜Ε͔Β *OUSPEVDUJPOPG"QPMMPBOEUIF'VUVSF JSϑϨʔϜϫʔΫ × ϏΞόογϡ ॳ৺ऀษڧձ in
ळ༿ݪ 4th.Aug.2018 - Kodai Nakamura
©2018 Wantedly, Inc. "QPMMPͷհͱ͜Ε͔Β *OUSPEVDUJPOPG"QPMMPBOEUIF'VUVSF JSϑϨʔϜϫʔΫ × ϏΞόογϡ ॳ৺ऀษڧձ in
ळ༿ݪ 4th.Aug.2018 - Kodai Nakamura
©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software
Engineer at Wantedly, inc. ৽ଔ JavaScript, TypeScript, React, Rails, Ruby
©2018 Wantedly, Inc. (SBQI2-ͷͨΊͷϥΠϒϥϦͷհͰ͢
©2018 Wantedly, Inc. ࣍ ‣(SBQI2- "QPMMP ‣"QPMMPͷ͜Ε͔Β
©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ͍ϞόΠϧར༻ͷ૿Ճ 3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢ΔͷʹෳͷϦΫΤετ͕ඈͿ ඞཁͷͳ͍ϑΟʔϧυؚ·Εͯ͠·͏
(SBQI2-ͩͱɺͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ 3FBDU7VF"OHVMBSJ04"OESPJEʜ ֤ը໘͝ͱʹඞཁͳσʔλҟͳΔ ‣ ։ൃαΠΫϧͷߴԽ ϑϩϯτΤϯυͷཁʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷԼ
©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ͍ϞόΠϧར༻ͷ૿Ճ 3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢ΔͷʹෳͷϦΫΤετ͕ඈͿ ඞཁͷͳ͍ϑΟʔϧυؚ·Εͯ͠·͏
(SBQI2-ͩͱɺͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ 3FBDU7VF"OHVMBSJ04"OESPJEʜ ֤ը໘͝ͱʹඞཁͳσʔλҟͳΔ ‣ ։ൃαΠΫϧͷߴԽ ϑϩϯτΤϯυͷཁʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷԼ
©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ͍ϞόΠϧར༻ͷ૿Ճ 3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢ΔͷʹෳͷϦΫΤετ͕ඈͿ ඞཁͷͳ͍ϑΟʔϧυؚ·Εͯ͠·͏
(SBQI2-ͩͱɺͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ 3FBDU7VF"OHVMBSJ04"OESPJEʜ ֤ը໘͝ͱʹඞཁͳσʔλҟͳΔ ‣ ։ൃαΠΫϧͷߴԽ ϑϩϯτΤϯυͷཁʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷԼ
©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ͍ϞόΠϧར༻ͷ૿Ճ 3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢ΔͷʹෳͷϦΫΤετ͕ඈͿ ඞཁͷͳ͍ϑΟʔϧυؚ·Εͯ͠·͏
(SBQI2-ͩͱɺͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ 3FBDU7VF"OHVMBSJ04"OESPJEʜ ֤ը໘͝ͱʹඞཁͳσʔλҟͳΔ ‣ ։ൃαΠΫϧͷߴԽ ϑϩϯτΤϯυͷཁʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷԼ
©2018 Wantedly, Inc. (SBQI2- ‣ 2VFSZ ‣ .VUBUJPO ‣ 4VCTDSJQUJPO
©2018 Wantedly, Inc. (SBQI2- 2VFSZ type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } ‣ 3&45Ͱ͍͏ͱ(&5 TDIFNBఆٛ { allPersons { name age } } 2VFSZ
©2018 Wantedly, Inc. (SBQI2- 2VFSZ type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } { allPersons { name age } } ‣ 3&45Ͱ͍͏ͱ(&5 TDIFNBఆٛ { "data": { "allPersons": [ { "name": "Johnny", "age": 23 }, { "name": "Sarah", "age": 20 }, { "name": "Alice", "age": 20 } ] } } 2VFSZ ฦΓ
©2018 Wantedly, Inc. (SBQI2- 2VFSZ type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } ‣ 3&45Ͱ͍͏ͱ(&5 TDIFNBఆٛ { allPersons { name age posts { title } } } 2VFSZ
©2018 Wantedly, Inc. (SBQI2- 2VFSZ type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } ‣ 3&45Ͱ͍͏ͱ(&5 TDIFNBఆٛ "data": { "allPersons": [ { "name": "Johnny", "age": 23, "posts": [ { "title": "GraphQL is awesome" }, { "title": "Relay is a powerful …" } ] }, { "name": "Alice", "age": 20, "posts": [] } ] } ฦΓ { allPersons { name age posts { title } } } 2VFSZ
©2018 Wantedly, Inc. (SBQI2- 2VFSZ type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } ‣ 3&45Ͱ͍͏ͱ(&5 TDIFNBఆٛ { "data": { "allPersons": [ { "name": "Alice" }, { "name": "Bob" } ] } } ฦΓ { allPersons(last: 2) { name } } 2VFSZ
©2018 Wantedly, Inc. (SBQI2- .VUBUJPO type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } TDIFNBఆٛ mutation { createPerson(name: "Bob", age: 36) { name age } } 2VFSZ ‣ 3&45Ͱ͍͏ͱ(&5Ҏ֎
©2018 Wantedly, Inc. (SBQI2- .VUBUJPO type Person { name: String!
age: Int! posts: [Post!]! } type Post { title: String! author: Person! } TDIFNBఆٛ mutation { createPerson(name: "Bob", age: 36) { name age } } ฦΓ 2VFSZ { "data": { "createPerson": { "name": "Bob", "age": 36 } } } ‣ 3&45Ͱ͍͏ͱ(&5Ҏ֎
©2018 Wantedly, Inc. (SBQI2- 3FBDU ‣ "QPMMPͰ2FVSZ .VUBUJPO͕ $PNQPOFOUͱͯ͠༻ҙ͞Ε͍ͯΔ ‣
ͦͷ$PNQPOFOUͷQSPQTͱͯ͠औಘͨ͠ σʔλ͕ͬͯ͘Δ const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return "Loading..."; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
©2018 Wantedly, Inc. (SBQI2- 3FBDU ‣ "QPMMPͰ2FVSZ .VUBUJPO͕ $PNQPOFOUͱͯ͠༻ҙ͞Ε͍ͯΔ ‣
ͦͷ$PNQPOFOUͷQSPQTͱͯ͠औಘͨ͠ σʔλ͕ͬͯ͘Δ const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return "Loading..."; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> ); const GET_DOGS = gql` { dogs { id breed } } `;
©2018 Wantedly, Inc. (SBQI2- 3FBDU ‣ "QPMMPͰ2FVSZ .VUBUJPO͕ $PNQPOFOUͱͯ͠༻ҙ͞Ε͍ͯΔ ‣
ͦͷ$PNQPOFOUͷQSPQTͱͯ͠औಘͨ͠ σʔλ͕ͬͯ͘Δ const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return "Loading..."; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
©2018 Wantedly, Inc. (SBQI2- 3FBDU ‣ "QPMMPͰ2FVSZ .VUBUJPO͕ $PNQPOFOUͱͯ͠༻ҙ͞Ε͍ͯΔ ‣
ͦͷ$PNQPOFOUͷQSPQTͱͯ͠औಘͨ͠ σʔλ͕ͬͯ͘Δ const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return "Loading..."; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
©2018 Wantedly, Inc. (SBQI2- 3FBDU ‣ "QPMMPͰ2FVSZ .VUBUJPO͕ $PNQPOFOUͱͯ͠༻ҙ͞Ε͍ͯΔ ‣
ͦͷ$PNQPOFOUͷQSPQTͱͯ͠औಘͨ͠ σʔλ͕ͬͯ͘Δ const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return "Loading..."; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
©2018 Wantedly, Inc. ͜Ε͔ΒͲ͏ͳΔʁ
©2018 Wantedly, Inc. 4VTQFOTF ‣ 3FBDUͰඇಉظϨϯμϦϯάΛ؆୯ʹ Ͱ͖ΔΈ ‣ ϨϯμϦϯάΛΒͤΔ͜ͱ͕Ͱ͖Δ const
Photo = ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); IUUQTTQFBLFSEFDLDPNLEOLSFBDUTVTQFOTFPOBQPMMP
©2018 Wantedly, Inc. 4VTQFOTF ‣ 3FBDUͰඇಉظϨϯμϦϯάΛ؆୯ʹ Ͱ͖ΔΈ ‣ ϨϯμϦϯάΛΒͤΔ͜ͱ͕Ͱ͖Δ const
Photo = ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); IUUQTTQFBLFSEFDLDPNLEOLSFBDUTVTQFOTFPOBQPMMP
©2018 Wantedly, Inc. 4UBUF.BOBHFNFOU ‣ 3FEVYͰ͍ͬͯΔΑ͏ͳঢ়ଶཧΛ"QPMMPͩ ͚ͰͰ͖Δ ‣ (SBQI2-TFSWFSʹܨ͕͍ͬͯͳ͍͍ͯ͘ ‣
σʔλͷͨΊͷීวతͳΫΤϦݴޠ ‣ BQPMMMJOLTUBUFͱ͍͏ͷΛ͏ ‣ ঢ়ଶཧͷํ "QPMMPࣗલͰDBDIFͷΈΛ͍࣋ͬͯΔ SFEVYͩͱBDUJPOΛEJTQBUDI BQPMMPͩͱNVUBUJPO TFSWFSͰͳ͘DBDIFʹରͯ͠ export const resolvers = { Mutation: { visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } }
©2018 Wantedly, Inc. 4UBUF.BOBHFNFOU export const resolvers = { Mutation:
{ visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } } ‣ 3FEVYͰ͍ͬͯΔΑ͏ͳঢ়ଶཧΛ"QPMMPͩ ͚ͰͰ͖Δ ‣ (SBQI2-TFSWFSʹܨ͕͍ͬͯͳ͍͍ͯ͘ ‣ σʔλͷͨΊͷීวతͳΫΤϦݴޠ ‣ BQPMMMJOLTUBUFͱ͍͏ͷΛ͏ ‣ ঢ়ଶཧͷํ "QPMMPࣗલͰDBDIFͷΈΛ͍࣋ͬͯΔ SFEVYͩͱBDUJPOΛEJTQBUDI BQPMMPͩͱNVUBUJPO TFSWFSͰͳ͘DBDIFʹରͯ͠
©2018 Wantedly, Inc. 4UBUF.BOBHFNFOU export const resolvers = { Mutation:
{ visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } } ‣ 3FEVYͰ͍ͬͯΔΑ͏ͳঢ়ଶཧΛ"QPMMPͩ ͚ͰͰ͖Δ ‣ (SBQI2-TFSWFSʹܨ͕͍ͬͯͳ͍͍ͯ͘ ‣ σʔλͷͨΊͷීวతͳΫΤϦݴޠ ‣ BQPMMMJOLTUBUFͱ͍͏ͷΛ͏ ‣ ঢ়ଶཧͷํ "QPMMPࣗલͰDBDIFͷΈΛ͍࣋ͬͯΔ SFEVYͩͱBDUJPOΛEJTQBUDI BQPMMPͩͱNVUBUJPO TFSWFSͰͳ͘DBDIFʹରͯ͠
©2018 Wantedly, Inc. 4UBUF.BOBHFNFOU export const resolvers = { Mutation:
{ visibilityFilter: (_, { filter }, { cache }) => { cache.writeData({ data: { visibilityFilter: filter } }); return null; }, addTodo: (_, { text }, { cache }) => { const query = gql` query GetTodos { todos @client { id text completed } } `; const previous = cache.readQuery({ query }); const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem', }; const data = { todos: previous.todos.concat([newTodo]), }; cache.writeData({ data }); return newTodo; }, } } ‣ 3FEVYͰ͍ͬͯΔΑ͏ͳঢ়ଶཧΛ"QPMMPͩ ͚ͰͰ͖Δ ‣ (SBQI2-TFSWFSʹܨ͕͍ͬͯͳ͍͍ͯ͘ ‣ σʔλͷͨΊͷීวతͳΫΤϦݴޠ ‣ BQPMMMJOLTUBUFͱ͍͏ͷΛ͏ ‣ ঢ়ଶཧͷํ "QPMMPࣗલͰDBDIFͷΈΛ͍࣋ͬͯΔ SFEVYͩͱBDUJPOΛEJTQBUDI BQPMMPͩͱNVUBUJPO TFSWFSͰͳ͘DBDIFʹରͯ͠
©2018 Wantedly, Inc. ·ͱΊ ‣ SFBDUBQPMMPศར ‣ 3FBDU4VTQFOTFͱ߹Θͤͯඇಉظ௨৴Ͱ͖ΔΑ͏ʹͳΔ ‣ BQPMMPMJOLTUBUF͑ɺSFEVYͳͯ͘TUBUFཧָ͕ʹͳΔ͔