frontend_bearbash_3.pdf

8ad58ff2bfccf7b4c07b34000c1d6afd?s=47 Kodai Nakamura
August 04, 2018
Programming
0
110

 frontend_bearbash_3.pdf

8ad58ff2bfccf7b4c07b34000c1d6afd?s=128

Kodai Nakamura

August 04, 2018
Tweet

More Decks by Kodai Nakamura

See All by Kodai Nakamura
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
2
720
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
1
520
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
2
750
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
4
820
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
0
330

Other Decks in Programming

See All in Programming
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
0
270
5a065e7ea7c56f4b04c2271771688df3?s=48 raykataoka
34
18k
E24ebbedcae292dc8e4b56186e082220?s=48 iganari
1
270
B3a78cfbf06ca9ee860536c6d1de5e7f?s=48 ykanoh
0
180
A093c82d1ffb09f8a023c757ffa7419d?s=48 yuzujoe
2
190
D83b3739651001461f48763639b90b50?s=48 mazipan
4
930
29bfc9e2bc82b775a30af70be3196386?s=48 hannaprinz
0
100
70b07e6b7fe7d921d7ac542d0ccb3b2c?s=48 kdmsnr
6
2.8k
1b863be3048c82d20ea84abcce33dc36?s=48 schktjm
0
150
E6143330e12cd226c3dab99f3fe8cb3e?s=48 yanaemon
1
140
D9e4d5a4b36f83fbde1076815df1362f?s=48 bmack
0
170
C9ab1175a6981a2f67ce8d08aa17c15a?s=48 mpilquist
0
120

Featured

See All Featured
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
78b475797a14c84799063c7cd073962f?s=48 holman
458
270k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
189
8.2k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.8k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
189
17k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
215
16k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
28
3.1k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
350k
245cee81a9c424266e5e401d844ea881?s=48 lara
587
60k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
282d599b414022eba5096510f675b6e2?s=48 chrislema
169
14k

Transcript

  1. ©2018 Wantedly, Inc. "QPMMPͷ঺հͱ͜Ε͔Β *OUSPEVDUJPOPG"QPMMPBOEUIF'VUVSF JSϑϨʔϜϫʔΫ × ϏΞόογϡ ॳ৺ऀษڧձ in

    ळ༿ݪ 4th.Aug.2018 - Kodai Nakamura

  2. ©2018 Wantedly, Inc. "QPMMPͷ঺հͱ͜Ε͔Β *OUSPEVDUJPOPG"QPMMPBOEUIF'VUVSF JSϑϨʔϜϫʔΫ × ϏΞόογϡ ॳ৺ऀษڧձ in

    ळ༿ݪ 4th.Aug.2018 - Kodai Nakamura

  3. ©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software

    Engineer at Wantedly, inc. ৽ଔ JavaScript, TypeScript, React, Rails, Ruby

  4. ©2018 Wantedly, Inc. (SBQI2-ͷͨΊͷϥΠϒϥϦͷ঺հͰ͢

  5. ©2018 Wantedly, Inc. ໨࣍ ‣(SBQI2- "QPMMP ‣"QPMMPͷ͜Ε͔Β

  6. ©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ஗͍ϞόΠϧར༻ͷ૿Ճ  3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢Δͷʹෳ਺ͷϦΫΤετ͕ඈͿ  ඞཁͷͳ͍ϑΟʔϧυ΋ؚ·Εͯ͠·͏

     (SBQI2-ͩͱɺ౓ͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ  3FBDU7VF"OHVMBSJ04"OESPJEʜ  ֤ը໘͝ͱʹඞཁͳσʔλ͸ҟͳΔ ‣ ։ൃαΠΫϧͷߴ଎Խ  ϑϩϯτΤϯυͷཁ๬ʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷ௿Լ

  7. ©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ஗͍ϞόΠϧར༻ͷ૿Ճ  3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢Δͷʹෳ਺ͷϦΫΤετ͕ඈͿ  ඞཁͷͳ͍ϑΟʔϧυ΋ؚ·Εͯ͠·͏

     (SBQI2-ͩͱɺ౓ͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ  3FBDU7VF"OHVMBSJ04"OESPJEʜ  ֤ը໘͝ͱʹඞཁͳσʔλ͸ҟͳΔ ‣ ։ൃαΠΫϧͷߴ଎Խ  ϑϩϯτΤϯυͷཁ๬ʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷ௿Լ

  8. ©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ஗͍ϞόΠϧར༻ͷ૿Ճ  3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢Δͷʹෳ਺ͷϦΫΤετ͕ඈͿ  ඞཁͷͳ͍ϑΟʔϧυ΋ؚ·Εͯ͠·͏

     (SBQI2-ͩͱɺ౓ͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ  3FBDU7VF"OHVMBSJ04"OESPJEʜ  ֤ը໘͝ͱʹඞཁͳσʔλ͸ҟͳΔ ‣ ։ൃαΠΫϧͷߴ଎Խ  ϑϩϯτΤϯυͷཁ๬ʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷ௿Լ

  9. ©2018 Wantedly, Inc. (SBQI2- ‣ ωοτϫʔΫͷ஗͍ϞόΠϧར༻ͷ૿Ճ  3&45ͩͱɺҰͭͷը໘ͷσʔλΛऔಘ͢Δͷʹෳ਺ͷϦΫΤετ͕ඈͿ  ඞཁͷͳ͍ϑΟʔϧυ΋ؚ·Εͯ͠·͏

     (SBQI2-ͩͱɺ౓ͷϦΫΤετͰඞཁͳϑΟʔϧυͷΈΛऔಘͰ͖Δ ‣ 'SPOUFOE'SBNFXPSL1MBUGPSNͷ૿Ճ  3FBDU7VF"OHVMBSJ04"OESPJEʜ  ֤ը໘͝ͱʹඞཁͳσʔλ͸ҟͳΔ ‣ ։ൃαΠΫϧͷߴ଎Խ  ϑϩϯτΤϯυͷཁ๬ʹ߹Θͤͯ3&45ͷ"1*͢Δඞཁ͕͋Δˠ։ൃαΠΫϧͷ௿Լ

  10. ©2018 Wantedly, Inc. (SBQI2- ‣ 2VFSZ ‣ .VUBUJPO ‣ 4VCTDSJQUJPO

  11. ©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

  12. ©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 ฦΓ஋

  13. ©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

  14. ©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

  15. ©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

  16. ©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Ҏ֎

  17. ©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Ҏ֎

  18. ©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> );

  19. ©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 } } `;

  20. ©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> );

  21. ©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> );

  22. ©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> );

  23. ©2018 Wantedly, Inc. ͜Ε͔ΒͲ͏ͳΔʁ

  24. ©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

  25. ©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

  26. ©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; }, } }

  27. ©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ʹରͯ͠

  28. ©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ʹରͯ͠

  29. ©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ʹରͯ͠

  30. ©2018 Wantedly, Inc. ·ͱΊ ‣ SFBDUBQPMMPศར ‣ 3FBDU4VTQFOTFͱ߹Θͤͯඇಉظ௨৴Ͱ͖ΔΑ͏ʹͳΔ ‣ BQPMMPMJOLTUBUF࢖͑͹ɺSFEVYͳͯ͘΋TUBUF؅ཧָ͕ʹͳΔ͔΋