プロトタイプ編 Hatena Engineer Seminar #19

by k-murakami0609

Slide 1

Slide 1 text

Hatena Engineer Seminar #19 id: ϓϩτλΠϓฤ ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़ 2022.03.30 k-murakami0609

Slide 2

Slide 2 text

ࣗݾ঺հ ID: k-murakami060 9 ͸ͯͳʹೖࣾޙɺϊϕϧνʔϜ Ͱຐ๏ͷiΒΜͲͷ։ൃΛ୲ ౰ɻڈ೥͔ΒΧΫϤϜͷ։ൃʹ ܞΘ͍ͬͯΔɻ

Slide 3

Slide 3 text

ηογϣϯͷ঺հ ΧΫϤϜͰ͸ Xslate + jQuery ͔Β React ʹҠߦ͢ΔϓϩδΣΫτΛਐΊ͍ͯ ·͢ɻ͜ΕΛਐΊΔʹ͋ͨͬͯɺݕ౼ॳظʹϓϩτλΠϓΛ࡞Δͱ͍͏બ୒ Λ͠·ͨ͠ɻ(Ұ೥΄Ͳલͷ࿩ ) ͜ͷηογϣϯͰ͸ɺϓϩτλΠϓΛߦ͏ʹࢸͬͨܦҢ΍ૂ͍ɺ·ͨޙ൒Ͱ ͸શମͷਐΊํͳͲΛ঺հͰ͖ͨΒͱࢥ͍·͢ɻ ิ଍) Xslate͸ Perl ͷςϯϓϨʔτΤϯδϯ

Slide 4

Slide 4 text

ΧΫϤϜ͸ࠓޙ5೥10೥ͱܧଓͯ͠ӡ༻͍ͯ͘͜͠ͱΛߟ͑Δඞཁ͕͋Δ ౰໘͸ϑϧϚΠάϨʔγϣϯ͸ܭը͞Ε͓ͯΒͣɺݱঢ়ͷαʔϏεΛܧଓͯ͠։ ൃɾӡ༻͍ͯ͘͠ܗΛͱ͍ͬͯ͘ ͜Εʹର͢ΔΞϓϩʔνͱͯ͠ɺΠϯϑϥɺΞϓϦέʔγϣϯ྆໘Ͱͦͷ࣌ʑ ʹଈͨ͠ߏ੒ʹগͣͭ͠੾Γସ͍͑ͯ͘ ͳͥ React ҠߦΛਐΊ͍͔ͨ React ҠߦͷΠϯηϓγϣϯσοΩʹ͋ΔʮզΘΕ͸ͳͥ͜͜ʹ͍Δͷ͔(Why1)ʯ͕୺తͰΘ͔ Γ΍͍͢

Slide 5

Slide 5 text

● Perl ୤ग़ΛਐΊͯߦ͖͍ͨ ○ ͦͷ଍͕͔Γͱͯ͠ɺ·ͣϑϩϯτΤϯυͱόοΫΤϯυ ͷ෼཭Λߦ͍͍ͨͱ͍͏࿩ʹͳͬͨ ● ຐ๏ͷiΒΜͲͱΞʔΩςΫνϟΛἧ͍͑ͨ ● React ͷ΄͏͕ੜ࢈ੑ͕ѹ౗తʹߴ͍ ○ ຐ๏ͷiΒΜͲͷܦݧ͔ΒɺΤϯδχΞɾσβΠφʔڞʹͦ ͏͍ͬͨ࿩ʹͳͬͨ ͳͥ React Ҡߦ͕બ͹Εͨͷ͔

Slide 6

Slide 6 text

● ϓϩτλΠϐϯάΛͯ͠ΧΫϤϜͷͱ͋ΔϖʔδΛ৽͍͠Ξʔ ΩςΫνϟͰ࣮૷ͯ͠ΈΔ ● ظؒ͸1ϲ݄ఔ౓ ○ ظؒΛ̎ͭʹ෼͚ͯɺผͷΞʔΩςΫνϟΛݕূͨ͠ Ͳ͏΍ͬͯ React Ҡߦͷݕ౼ΛਐΊ͔ͨ

Slide 7

Slide 7 text

● ͕࣌ؒແݶͩͱແݶʹࢼ͍ͨ͜͠ͱ͕ग़ͯ͘ΔͷͰͦͷରࡦ ○ ҠߦͷաఔͰ΋΍Γͨ͘ͳͬͯɺείʔϓ͕ແବʹ޿͘ͳΔ ͜ͱ΋๷͛ͨ ● ݱ࣮໰୊ͱͯ͠͸ɺαϙʔλʔζύεϙʔτͱ͍͏େ͖ͳػೳ ͷϦϦʔε͕͋ΔͨΊɺ͜ͷظؒΛ௒ա͗͢͠ΔͱReact΁ͷҠ ߦࣗମΛҰ୴ఘΊΔඞཁ͕͋ͬͨ ϓϩτλΠϓͷظؒΛ1ϲ݄ͱઃఆͨ͠ཧ༝

Slide 8

Slide 8 text

ϓϩτλΠϓͷૂ͍

Slide 9

Slide 9 text

ϦΞʔΩςΫνϟʹ͓͚Δࣦഊͱ͸ ● ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γશ෦ ΍Γ௚͠ʹͳΔ ● ։ൃ଎౓Λ্͛ΒΕͯͳ͍ ○ ٕज़બఆͷے͕ྑ͘ͳ͍/ա৒ʹ৽ٕज़Λ٧ΊࠐΈ͗͢Δ ○ Ҡߦ్͕தͰࢭ·ͬͯ͠·͍ɺ৽چ͕ࠞͬͨ͟ঢ়ଶͰ։ൃ/ ӡ༻Λଓ͚ͳͯ͘͸͍͚ͳ͍

Slide 10

Slide 10 text

ϓϩτλΠϓΛ࡞ΔϝϦοτ ● ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ ● ص্͚ͩߟ͍͑ͯΔ͚ͩΑΓɺݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕ Ͱ͖Δ ● ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ

Slide 11

Slide 11 text

ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ ● طଘϓϩμΫτʹಋೖ͢Δ৔߹ʹ͸ɺڭՊॻͲ͓Γʹߦ͔ͳ͍ ෦෼͕͋Δ ● ϓϩτλΠϐϯάΛ௨ͯ͡໢ཏతͳݕ౼ࣄ߲ҰཡΛҭͯΒΕΔ

Slide 12

Slide 12 text

ݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕Ͱ͖Δ ● ࣮ࡍʹಈ͔ͯ͠ΈͯΘ͔Δ͜ͱ͕͋Δ ● ࣮૷ΛνʔϜϝϯόʔʹΈͯ΋Β͏͜ͱͰҙݟΛ΋Β͍΍͘͢ ͳΔ

Slide 13

Slide 13 text

ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ ● ج൫࣮૷࣌͸ଟਓ਺Ͱ΍ͬͯ΋ίϯϑϦΫτͯ͠࡞ۀ͕εέʔ ϧ͠ͳ͍͜ͱ͕Α͋͘Δ

Slide 14

Slide 14 text

● ϓϩτλΠϓ͕ޮՌతͰ͸ͳ͍͔ͱࢥ͍ͬͯΔɻ ○ ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γ શ෦΍Γ௚͠ʹͳΔ ■ -> ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ ○ ։ൃ଎౓Λ্͛ΒΕͯͳ͍ ■ -> ϓϩτλΠϓΛ͖ͨͨ୆ͱ͢Δ͜ͱͰɺνʔϜϝϯ όʔͷҙݟΛฉ͍ͯόϥϯεײ֮Λ͔֬ΊΔ͜ͱ͕Ͱ͖ Δ ϦΞʔΩςΫνϟʹ͓͚Δࣦഊ΁ͷରԠํ๏

Slide 15

Slide 15 text

ϓϩτλΠϓͷਐΊํ

Slide 16

Slide 16 text

ݕ౼͢΂͖ҰཡΛ༻ҙͯ͠ɺ༏ઌॱҐ͕ܾ·Ε͹ྑ͍ɻ ͕ɺൣғ͕޿͍ͨΊ໢ཏతͳݕ౼ࣄ߲ҰཡΛ༻ҙ͢Δͷ͕೉͘͠ɺ ࢼ͍ͨ͜͠ͱ΋ଟ͍ͨΊ༏ઌॱҐΛܾΊΔ΋ͷ೉͍͠ɻ ԿΛݕূ͢΂͖͔ߟ͑Δ

Slide 17

Slide 17 text

● ͍͖ͳΓ໢ཏతʹλεΫΛग़͢ͷ͸೉͔ͬͨ͠ͷͰɺॳख͸Ϙ τϜΞοϓͰߟ͑Δ͜ͱʹͨ͠ ○ ݒ೦఺ΛͱΓ্͋͑ͣ͛·ͬͨ͘ ■ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ ■ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ ■ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ ■ … ݕ౼ࣄ߲Ұཡͷ࡞Γํ

Slide 18

Slide 18 text

● ͦΕΛݩʹδϟϯϧͰάϧʔϐϯάͯ͠ɺ͞Βʹ࿙Ε͍ͯΔ΋ ͷ͕ͳ͍͔Λߟ͑ͯ௥Ճ͍ͯͬͨ͠ɻ ● ·ͨϓϩτλΠϓΛ࡞͍ͬͯΔ͏ͪʹݕ౼͍ͨ͠΋ͷ͕ग़͖ͯ ͨ৔߹ʹ͸ɺͲΜͲΜ͜ͷҰཡʹ௥Ճͯ͠ߦͬͨ ݕ౼ࣄ߲Ұཡͷ࡞Γํ2

Slide 19

Slide 19 text

༏ઌॱҐͷߟ͑ํ ● ํ਑͕มΘͬͨ࣌ͷӨڹൣғ͕େ͖͍΋ͷɺ࡞ͬͯΈͳ͍ͱΑ ͘Θ͔Βͳ͍΋ͷΛϐοΫΞοϓͨ͠ ○ ࣦഊ͠ͳ͍͜ͱΛ༏ઌ͢Δํ਑ ● ·ͨɺݕূ͍ͯ͘͠͏ͪʹɺΘ͔Δঢ়ଶʹͳͬͨΒਂ௥͍͸͠ ͳ͔ͬͨ ○ ϓϩτλΠϓͰ࡞Γ੾Δඞཁ͸ͳ͍ͷͰ

Slide 20

Slide 20 text

● ظؒΛ2ͭʹ෼͚ͯɺϓϩτλΠϓΛ2छྨ࡞ͬͨ ○ Next.js + GraphQL Λ࢖͏ύλʔϯ ○ XslateͱReact͕ڞଘ͢Δύλʔϯ ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ

Slide 21

Slide 21 text

࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ

Slide 22

Slide 22 text

● ྆ऀͷλεΫ؅ཧతͳҧ͍͸࡞ۀͷείʔϓ ○ τϨʔυΦϑεϥΠμʔͰɺσϦόϦʔ͕Ұ൪༏ઌ౓͕ߴ ͘ɺ඼࣭΋མͱͨ͘͠ͳ͍͕ɺείʔϓ͸খͯ͘͞͠ྑ͍ͱ ͍͏࿩͕͋ͬͨ ○ σϦόϦʔ͕༏ઌ͞Εͨཧ༝͸ɺ൒೥ޙ͘Β͍ʹαϙʔλʔ ζύεϙʔτͱ͍͏େ͖ΊͷػೳϦϦʔε͕ܭը͞Ε͍ͯͨ ͨΊ ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ

Slide 23

Slide 23 text

શମͷਐΊํ

Slide 24

Slide 24 text

React ҠߦϓϩδΣΫτͷશମײ 1. νʔϜ಺ͰReactҠߦ͢Δ͜ͱͷ߹ҙ͕ߦΘΕΔ 2. ޻਺֬อ͢Δ 3. ٕज़બఆɺϓϩτλΠϓ࡞੒ɺϩʔυϚοϓͷ࡞੒͢Δ 4. ϑϩϯτΤϯυͷج൫Λ࣮૷͢Δ 5. Ұ෦ͷϖʔδʹల։͢Δ 6. શ෦ͷϖʔδʹల։͠ऴΘΔ

Slide 25

Slide 25 text

ϓϩτλΠϐϯά෦෼Λ͞Βʹ෼ׂ 1. ΍Γ͍ͨ͜ͱ΍ݱঢ়ͷ՝୊ΛϦετԽ͢Δ 2. ΠϯηϓγϣϯσοΩͷ࡞੒ 3. ϓϩτλΠϐϯά 4. ํ਑ΛܾΊͯνʔϜʹ߹ҙΛͱΔ 5. ϑϩϯτΤϯυͷج൫ͷ࣮૷ʹ޲͚ͯλεΫ෼ׂ

Slide 26

Slide 26 text

΍Γ͍ͨ͜ͱ΍ݱঢ়ͷ՝୊ΛϦετԽ͢Δ ● ظؒ ○ 3࣌ؒ ● ΍ͬͨ͜ͱ ○ ԿͰ΋͍͍ͷͰࢥͬͨ͜ͱΛՕ৚ॻ͖Ͱॻ͖ग़ͨ͠ ■ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ ■ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ ■ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ ● ྑ͔ͬͨ͜ͱ ○ ͜Ε͔Βͷٞ࿦ͷ͖ͨͨ୆ʹͳͬͨ

Slide 27

Slide 27 text

ΠϯηϓγϣϯσοΩͷ࡞੒ ● ظؒ ○ 2࣌ؒ ● ΍ͬͨ͜ͱ ○ ΠϯηϓγϣϯσοΩΛ࡞੒ͨ͠ ● ྑ͔ͬͨ͜ͱ ○ ࿩͠߹͍ͷ͖͔͚ͬʹͳͬͨ ○ τϨʔυΦϑεϥΠμʔͷ͓͔͛ͰPOͱͷೝ͕ࣝἧͬͨ ○ ༻ޠͷ੔ཧ͕ਐΜͩ

Slide 28

Slide 28 text

● ظؒ ○ 2िؒ * 2 ● ΍ͬͨ͜ͱ ○ 2ύλʔϯͷϓϩτλΠϓΛ࡞ͬͨ ■ Next.js + GraphQL Λ࢖͏ύλʔϯ ■ XslateͱReact͕ڞଘ͢Δύλʔϯ ○ ݕ౼ࣄ߲ҰཡΛ͕࣌ؒڐ͢ݶΓ্͔Βࢼ͍ͯͬͨ͠ ϓϩτλΠϐϯά

Slide 29

Slide 29 text

ϓϩτλΠϐϯά ● ྑ͔ͬͨ͜ͱ ○ ظؒΛ2ͭʹ෼͚ͨ͜ͱͰࣗಈతʹ޲͖௚Γ͕Ͱ͖ͨ ○ ݕ౼ࣄ߲ҰཡΛ࡞ͬͯ༏ઌ౓ॱҐ͚ͮͨ͜͠ͱ ■ ≒ ௨ৗͷ։ൃͱಉ͡Α͏ʹλεΫ؅ཧͨ͜͠ͱ ○ σβΠφʔʹཁ๬Λฉ͖ʹߦͬͨ͜ͱ ○ (ޙͰΘ͔ͬͨ͜ͱ͚ͩͲ) બ͹Εͳ͔ͬͨύλʔϯͷݕূ ͕ޙʑੜ͖Δ͜ͱ͕͋ͬͨ

Slide 30

Slide 30 text

ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ ● ظؒ ○ 1िؒ ● ΍ͬͨ͜ͱ ○ ͻͨ͢ΒADRΛॻ͍ͨ͜ͱ ○ શ෦ͷϖʔδʹల։׬ྃ·Ͱͷେࡶ೺ͳϩʔυϚοϓΛॻ ͍ͨ͜ͱ ○ εςʔΫϗϧμʔΛશһूΊͯձΛ։͍ͨ

Slide 31

Slide 31 text

ςΩετϕʔεͷܰྔͳςϯϓϨʔτΛ࢖༻ͯ͠ɺΞʔΩςΫνϟ্ͷઃܭ൑ அΛه࿥͢Δɻ ܰྔͳΞʔΩςΫνϟσγδϣϯϨίʔυʢArchitecture Decision Recordsɿ ADRʣ͸ɺ࣮੷ͷ͋ΔΞʔΩςΫνϟख๏ʹର͢Δ։ൃऀدΓͷΞϓϩʔν ͩɻઃܭ൑அΛه࿥͍ͯ͘͜͠ͱͰɺͦΕΒΛڞ༗͠෼ੳ͢Δ͜ͱ͕༰қʹͳ Δɻ ҙࢥܾఆͷཤྺΛ࢒͢͜ͱͰɺݱࡏͷΞʔΩςΫνϟʹ͍ͭͯͷίϯςΩετ Λɺͦͷաఔͱ݁ͼ͚ͭͯఏڙͰ͖Δɻ ADRͱ͸ ※ Michael Keeling. Design it . גࣜձࣾΦϥΠϦʔɾδϟύϯ. 2019೥. 404p

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

● Next.js + GraphQL ʹ͢΂͖͔ɺXslateͱReact͕ڞଘ͢ΔΑ͏ʹ͢΂ ͖͔ ● CSRΛ༗ޮʹ͢Δ͔ ● ΩϟογϡͲ͏͢Δ͔ ● CSS͸ͲΜͳٕज़Λ࢖͏͔ ● ਪ঑ϒϥ΢βϙϦγʔΛͲ͏͢Δ͔ ● ReactԽલޙϖʔδͷϧʔςΟϯάͷํ๏΍੾Γସ͑ΛͲ͏࣮ݱ͢Δ͔ ● WebViewͰදࣔ͞Ε͍ͯΔ΋ͷ͸Ͳ͏͢Δ͔ʁ ● etc… ADRʹॻ͍ͨ͜ͱ

Slide 34

Slide 34 text

ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ ● ྑ͔ͬͨ͜ͱ ○ ADRΛॻ͍ͨ͜ͱ ■ ϑΥʔϚοτ͕ॻ͖΍͔ͬͨ͢ ■ ్தܦա͕ slack ʹྲྀΕ͍ͯͨͷͰɺձʹ޲͚ͯࢥߟΛঃʑ ʹ։ࣔͰ͖ͨ ■ ్தͰϝϯόʔ͔Β൓Ԡ͕΋Β͑ΔͷͰɺυΩϡϝϯτͷ෼ ྔΛௐ੔Ͱ͖ͨ ○ େࡶ೺ͳϩʔυϚοϓΛΈΜͳͰΈΔ͜ͱͰɺن໛ײΛڞ༗Ͱ͖ ͨΓɺ௚ۙͷ࿩ͳͷ͔ະདྷͷ࿩ͳͷ͔Λ੔ཧͰ͖ͨ

Slide 35

Slide 35 text

● ظؒ ○ 1೔ ● ΍ͬͨ͜ͱ ○ λεΫʹ෼ղͯ͠ϓϩδΣΫτ؅ཧπʔϧʹ഑ஔͨ͠ ● ྑ͔ͬͨ͜ͱ ○ ϓϩτλΠϓͰݕ౼ࣄ߲ҰཡΛ࡞͍ͬͯͨͨΊɺλεΫ෼ ղ͕༰қͩͬͨ ϑϩϯτج൫࣮૷ʹඞཁͳλεΫΛ෼ղͯ͠ɺεέδϡʔϧʹམͱ͢

Slide 36

Slide 36 text

● ࿙Ε͕গͳ͍λεΫҰཡ͕͋ͬͨͷͰɺ؅ཧ্εϜʔζͩͬͨ ● ผͷϝϯόʔʹλεΫΛҕৡ͠΍͔ͬͨ͢ ○ αϯϓϧίʔυ͸͜ΕͳͷͰɺ͍͍ײ͡ʹ͔ͬ͜Αͯ͘͘͠ ͍ͩͬͯ͞ݴ͑͹ऴΘͬͨ ● ج൫࣮૷࣌ʹ͏·͘ಈ࡞͠ͳ͔ͬͨ৔߹ʹɺϓϩτλΠϓͱ͍ ͏طʹಈ͍͍ͯΔ΋ͷΛࢀরͰ͖ͨ ج൫։ൃޙʹৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ

Slide 37

Slide 37 text

Ұ೥ޙ͔ΒৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ ● ʮϦΞʔΩςΫνϟʹ͓͚Δࣦഊʯʹ͋ΔΑ͏ͳɺํ਑͕ؒ ҧ͍ͬͯͨΊ΍Γ௚͠͸ൃੜ͠ͳ͔ͬͨͷͰɺϓϩτλΠϓΛ ௨ͯ͡ਫ਼౓ͷߴ͍ݕূ͕Ͱ͖ͨͱߟ͍͑ͯΔ

Slide 38

Slide 38 text

·ͱΊʙϓϩτλΠϓʙ ● ϦΞʔΩςΫνϟʹ͓͚ΔࣦഊΛ๷͙ͨΊʹɺϓϩτλΠϓ͕ ༗ޮͩͱߟ͍͑ͯ·͢ ● ૣΊʹ஍ཕΛ౿ΊͨΓɺखΛಈ͔͢͜ͱͰݕূͷਫ਼౓͕͕͋ Γɺ࡞ͬͨίʔυΛޙͷϑΣΠζͰ࢖͑ͨΓ͠·͢

Slide 39

Slide 39 text

·ͱΊʙϓϩτλΠϓͷਐΊํʙ ● ໢ཏతͳλεΫҰཡΛ࡞Δ͜ͱɺ༏ઌॱҐͷ࣠ΛͲ͏͢Δ͔͸ ೉͍͠Ͱ͕͢ɺେ੾ͳ͜ͱͩͱࢥ͍ͬͯ·͢ ● ϓϩτλΠϓͰ͸ɺແݶʹ΍Γ͍ͨ͜ͱ͕͋ΔͷͰ࣌ؒΛ۠੾ Δͷ͕͓͢͢ΊͰ͢ ● ϓϩτλΠϓͷ࣌ʹ͸ɺADRͷ࢖༻΍ීஈͷϓϩδΣΫτ؅ཧ Ͱ࢖͍ͬͯΔख๏Λ࢖͏ͷΛ͓קΊ͠·͢