Upgrade to Pro — share decks privately, control downloads, hide ads and more …

frontend_bearbash_3.pdf

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

 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
840
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
1
590
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
2
890
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
4
930
8ad58ff2bfccf7b4c07b34000c1d6afd?s=48 kdnk
0
400

Other Decks in Programming

See All in Programming
35c967f46d1a70f36be363da373f2491?s=48 myshmeh_
0
1.2k
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
110
7437b838338581b08ca72340b05475b9?s=48 abt
0
360
0aac627116c6e2a87b9ae179500801df?s=48 stormcat24
0
1.1k
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
560
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
10
1.8k
F0012066f4fad79deb33bf5e9799b557?s=48 francescostrazzullo
0
140
198d69383210fbec8c6bea4a35863c9d?s=48 tippy
0
580
655e620122d83015d6363506970a71d5?s=48 haruu_iq
0
490
D840733454bebebb5d6f0a2d95754897?s=48 aokabic
1
160
7ef3cd04888c6d17f34d43e29ec3d46f?s=48 caarlos0
0
180
Bd7bd8f154dbbbdc40af37d59baec53b?s=48 marushosummers
0
760

Featured

See All Featured
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
482
150k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
10
1k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
16k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
39
1.3k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
107
6.4k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
235
930k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
121
16k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
28
2.6k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
710
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.1k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k

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؅ཧָ͕ʹͳΔ͔΋