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

Transcript

1. Hatena Engineer Seminar #19 id: ϓϩτλΠϓฤ ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़ 2022.03.30 k-murakami0609
2. ࣗݾ঺հ ID: k-murakami060 9 ͸ͯͳʹೖࣾޙɺϊϕϧνʔϜ Ͱຐ๏ͷiΒΜͲͷ։ൃΛ୲ ౰ɻڈ೥͔ΒΧΫϤϜͷ։ൃʹ ܞΘ͍ͬͯΔɻ
3. ηογϣϯͷ঺հ ΧΫϤϜͰ͸ Xslate + jQuery ͔Β React ʹҠߦ͢ΔϓϩδΣΫτΛਐΊ͍ͯ ·͢ɻ͜ΕΛਐΊΔʹ͋ͨͬͯɺݕ౼ॳظʹϓϩτλΠϓΛ࡞Δͱ͍͏બ୒ Λ͠·ͨ͠ɻ(Ұ೥΄Ͳલͷ࿩ ) ͜ͷηογϣϯͰ͸ɺϓϩτλΠϓΛߦ͏ʹࢸͬͨܦҢ΍ૂ͍ɺ·ͨޙ൒Ͱ ͸શମͷਐΊํͳͲΛ঺հͰ͖ͨΒͱࢥ͍·͢ɻ ิ଍) Xslate͸ Perl ͷςϯϓϨʔτΤϯδϯ
4. ΧΫϤϜ͸ࠓޙ5೥10೥ͱܧଓͯ͠ӡ༻͍ͯ͘͜͠ͱΛߟ͑Δඞཁ͕͋Δ ౰໘͸ϑϧϚΠάϨʔγϣϯ͸ܭը͞Ε͓ͯΒͣɺݱঢ়ͷαʔϏεΛܧଓͯ͠։ ൃɾӡ༻͍ͯ͘͠ܗΛͱ͍ͬͯ͘ ͜Εʹର͢ΔΞϓϩʔνͱͯ͠ɺΠϯϑϥɺΞϓϦέʔγϣϯ྆໘Ͱͦͷ࣌ʑ ʹଈͨ͠ߏ੒ʹগͣͭ͠੾Γସ͍͑ͯ͘ ͳͥ React ҠߦΛਐΊ͍͔ͨ React ҠߦͷΠϯηϓγϣϯσοΩʹ͋ΔʮզΘΕ͸ͳͥ͜͜ʹ͍Δͷ͔(Why1)ʯ͕୺తͰΘ͔ Γ΍͍͢
5. • Perl ୤ग़ΛਐΊͯߦ͖͍ͨ ◦ ͦͷ଍͕͔Γͱͯ͠ɺ·ͣϑϩϯτΤϯυͱόοΫΤϯυ ͷ෼཭Λߦ͍͍ͨͱ͍͏࿩ʹͳͬͨ • ຐ๏ͷiΒΜͲͱΞʔΩςΫνϟΛἧ͍͑ͨ • React ͷ΄͏͕ੜ࢈ੑ͕ѹ౗తʹߴ͍ ◦ ຐ๏ͷiΒΜͲͷܦݧ͔ΒɺΤϯδχΞɾσβΠφʔڞʹͦ ͏͍ͬͨ࿩ʹͳͬͨ ͳͥ React Ҡߦ͕બ͹Εͨͷ͔
6. • ϓϩτλΠϐϯάΛͯ͠ΧΫϤϜͷͱ͋ΔϖʔδΛ৽͍͠Ξʔ ΩςΫνϟͰ࣮૷ͯ͠ΈΔ • ظؒ͸1ϲ݄ఔ౓ ◦ ظؒΛ̎ͭʹ෼͚ͯɺผͷΞʔΩςΫνϟΛݕূͨ͠ Ͳ͏΍ͬͯ React Ҡߦͷݕ౼ΛਐΊ͔ͨ
7. • ͕࣌ؒແݶͩͱແݶʹࢼ͍ͨ͜͠ͱ͕ग़ͯ͘ΔͷͰͦͷରࡦ ◦ ҠߦͷաఔͰ΋΍Γͨ͘ͳͬͯɺείʔϓ͕ແବʹ޿͘ͳΔ ͜ͱ΋๷͛ͨ • ݱ࣮໰୊ͱͯ͠͸ɺαϙʔλʔζύεϙʔτͱ͍͏େ͖ͳػೳ ͷϦϦʔε͕͋ΔͨΊɺ͜ͷظؒΛ௒ա͗͢͠ΔͱReact΁ͷҠ ߦࣗମΛҰ୴ఘΊΔඞཁ͕͋ͬͨ ϓϩτλΠϓͷظؒΛ1ϲ݄ͱઃఆͨ͠ཧ༝
8. ϓϩτλΠϓͷૂ͍
9. ϦΞʔΩςΫνϟʹ͓͚Δࣦഊͱ͸ • ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γશ෦ ΍Γ௚͠ʹͳΔ • ։ൃ଎౓Λ্͛ΒΕͯͳ͍ ◦ ٕज़બఆͷے͕ྑ͘ͳ͍/ա৒ʹ৽ٕज़Λ٧ΊࠐΈ͗͢Δ ◦ Ҡߦ్͕தͰࢭ·ͬͯ͠·͍ɺ৽چ͕ࠞͬͨ͟ঢ়ଶͰ։ൃ/ ӡ༻Λଓ͚ͳͯ͘͸͍͚ͳ͍
10. ϓϩτλΠϓΛ࡞ΔϝϦοτ • ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ • ص্͚ͩߟ͍͑ͯΔ͚ͩΑΓɺݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕ Ͱ͖Δ • ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ
11. ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ • طଘϓϩμΫτʹಋೖ͢Δ৔߹ʹ͸ɺڭՊॻͲ͓Γʹߦ͔ͳ͍ ෦෼͕͋Δ • ϓϩτλΠϐϯάΛ௨ͯ͡໢ཏతͳݕ౼ࣄ߲ҰཡΛҭͯΒΕΔ
12. ݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕Ͱ͖Δ • ࣮ࡍʹಈ͔ͯ͠ΈͯΘ͔Δ͜ͱ͕͋Δ • ࣮૷ΛνʔϜϝϯόʔʹΈͯ΋Β͏͜ͱͰҙݟΛ΋Β͍΍͘͢ ͳΔ
13. ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ • ج൫࣮૷࣌͸ଟਓ਺Ͱ΍ͬͯ΋ίϯϑϦΫτͯ͠࡞ۀ͕εέʔ ϧ͠ͳ͍͜ͱ͕Α͋͘Δ
14. • ϓϩτλΠϓ͕ޮՌతͰ͸ͳ͍͔ͱࢥ͍ͬͯΔɻ ◦ ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γ શ෦΍Γ௚͠ʹͳΔ ▪ -> ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ ◦ ։ൃ଎౓Λ্͛ΒΕͯͳ͍ ▪ -> ϓϩτλΠϓΛ͖ͨͨ୆ͱ͢Δ͜ͱͰɺνʔϜϝϯ όʔͷҙݟΛฉ͍ͯόϥϯεײ֮Λ͔֬ΊΔ͜ͱ͕Ͱ͖ Δ ϦΞʔΩςΫνϟʹ͓͚Δࣦഊ΁ͷରԠํ๏
15. ϓϩτλΠϓͷਐΊํ
16. ݕ౼͢΂͖ҰཡΛ༻ҙͯ͠ɺ༏ઌॱҐ͕ܾ·Ε͹ྑ͍ɻ ͕ɺൣғ͕޿͍ͨΊ໢ཏతͳݕ౼ࣄ߲ҰཡΛ༻ҙ͢Δͷ͕೉͘͠ɺ ࢼ͍ͨ͜͠ͱ΋ଟ͍ͨΊ༏ઌॱҐΛܾΊΔ΋ͷ೉͍͠ɻ ԿΛݕূ͢΂͖͔ߟ͑Δ
17. • ͍͖ͳΓ໢ཏతʹλεΫΛग़͢ͷ͸೉͔ͬͨ͠ͷͰɺॳख͸Ϙ τϜΞοϓͰߟ͑Δ͜ͱʹͨ͠ ◦ ݒ೦఺ΛͱΓ্͋͑ͣ͛·ͬͨ͘ ▪ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ ▪ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ ▪ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ ▪ … ݕ౼ࣄ߲Ұཡͷ࡞Γํ
18. • ͦΕΛݩʹδϟϯϧͰάϧʔϐϯάͯ͠ɺ͞Βʹ࿙Ε͍ͯΔ΋ ͷ͕ͳ͍͔Λߟ͑ͯ௥Ճ͍ͯͬͨ͠ɻ • ·ͨϓϩτλΠϓΛ࡞͍ͬͯΔ͏ͪʹݕ౼͍ͨ͠΋ͷ͕ग़͖ͯ ͨ৔߹ʹ͸ɺͲΜͲΜ͜ͷҰཡʹ௥Ճͯ͠ߦͬͨ ݕ౼ࣄ߲Ұཡͷ࡞Γํ2
19. ༏ઌॱҐͷߟ͑ํ • ํ਑͕มΘͬͨ࣌ͷӨڹൣғ͕େ͖͍΋ͷɺ࡞ͬͯΈͳ͍ͱΑ ͘Θ͔Βͳ͍΋ͷΛϐοΫΞοϓͨ͠ ◦ ࣦഊ͠ͳ͍͜ͱΛ༏ઌ͢Δํ਑ • ·ͨɺݕূ͍ͯ͘͠͏ͪʹɺΘ͔Δঢ়ଶʹͳͬͨΒਂ௥͍͸͠ ͳ͔ͬͨ ◦ ϓϩτλΠϓͰ࡞Γ੾Δඞཁ͸ͳ͍ͷͰ
20. • ظؒΛ2ͭʹ෼͚ͯɺϓϩτλΠϓΛ2छྨ࡞ͬͨ ◦ Next.js + GraphQL Λ࢖͏ύλʔϯ ◦ XslateͱReact͕ڞଘ͢Δύλʔϯ ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ
21. ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ
22. • ྆ऀͷλεΫ؅ཧతͳҧ͍͸࡞ۀͷείʔϓ ◦ τϨʔυΦϑεϥΠμʔͰɺσϦόϦʔ͕Ұ൪༏ઌ౓͕ߴ ͘ɺ඼࣭΋མͱͨ͘͠ͳ͍͕ɺείʔϓ͸খͯ͘͞͠ྑ͍ͱ ͍͏࿩͕͋ͬͨ ◦ σϦόϦʔ͕༏ઌ͞Εͨཧ༝͸ɺ൒೥ޙ͘Β͍ʹαϙʔλʔ ζύεϙʔτͱ͍͏େ͖ΊͷػೳϦϦʔε͕ܭը͞Ε͍ͯͨ ͨΊ ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ
23. શମͷਐΊํ
24. React ҠߦϓϩδΣΫτͷશମײ 1. νʔϜ಺ͰReactҠߦ͢Δ͜ͱͷ߹ҙ͕ߦΘΕΔ 2. ޻਺֬อ͢Δ 3. ٕज़બఆɺϓϩτλΠϓ࡞੒ɺϩʔυϚοϓͷ࡞੒͢Δ 4. ϑϩϯτΤϯυͷج൫Λ࣮૷͢Δ 5. Ұ෦ͷϖʔδʹల։͢Δ 6. શ෦ͷϖʔδʹల։͠ऴΘΔ
25. ϓϩτλΠϐϯά෦෼Λ͞Βʹ෼ׂ 1. ΍Γ͍ͨ͜ͱ΍ݱঢ়ͷ՝୊ΛϦετԽ͢Δ 2. ΠϯηϓγϣϯσοΩͷ࡞੒ 3. ϓϩτλΠϐϯά 4. ํ਑ΛܾΊͯνʔϜʹ߹ҙΛͱΔ 5. ϑϩϯτΤϯυͷج൫ͷ࣮૷ʹ޲͚ͯλεΫ෼ׂ
26. ΍Γ͍ͨ͜ͱ΍ݱঢ়ͷ՝୊ΛϦετԽ͢Δ • ظؒ ◦ 3࣌ؒ • ΍ͬͨ͜ͱ ◦ ԿͰ΋͍͍ͷͰࢥͬͨ͜ͱΛՕ৚ॻ͖Ͱॻ͖ग़ͨ͠ ▪ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ ▪ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ ▪ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ • ྑ͔ͬͨ͜ͱ ◦ ͜Ε͔Βͷٞ࿦ͷ͖ͨͨ୆ʹͳͬͨ
27. ΠϯηϓγϣϯσοΩͷ࡞੒ • ظؒ ◦ 2࣌ؒ • ΍ͬͨ͜ͱ ◦ ΠϯηϓγϣϯσοΩΛ࡞੒ͨ͠ • ྑ͔ͬͨ͜ͱ ◦ ࿩͠߹͍ͷ͖͔͚ͬʹͳͬͨ ◦ τϨʔυΦϑεϥΠμʔͷ͓͔͛ͰPOͱͷೝ͕ࣝἧͬͨ ◦ ༻ޠͷ੔ཧ͕ਐΜͩ
28. • ظؒ ◦ 2िؒ * 2 • ΍ͬͨ͜ͱ ◦ 2ύλʔϯͷϓϩτλΠϓΛ࡞ͬͨ ▪ Next.js + GraphQL Λ࢖͏ύλʔϯ ▪ XslateͱReact͕ڞଘ͢Δύλʔϯ ◦ ݕ౼ࣄ߲ҰཡΛ͕࣌ؒڐ͢ݶΓ্͔Βࢼ͍ͯͬͨ͠ ϓϩτλΠϐϯά
29. ϓϩτλΠϐϯά • ྑ͔ͬͨ͜ͱ ◦ ظؒΛ2ͭʹ෼͚ͨ͜ͱͰࣗಈతʹ޲͖௚Γ͕Ͱ͖ͨ ◦ ݕ౼ࣄ߲ҰཡΛ࡞ͬͯ༏ઌ౓ॱҐ͚ͮͨ͜͠ͱ ▪ ≒ ௨ৗͷ։ൃͱಉ͡Α͏ʹλεΫ؅ཧͨ͜͠ͱ ◦ σβΠφʔʹཁ๬Λฉ͖ʹߦͬͨ͜ͱ ◦ (ޙͰΘ͔ͬͨ͜ͱ͚ͩͲ) બ͹Εͳ͔ͬͨύλʔϯͷݕূ ͕ޙʑੜ͖Δ͜ͱ͕͋ͬͨ
30. ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ • ظؒ ◦ 1िؒ • ΍ͬͨ͜ͱ ◦ ͻͨ͢ΒADRΛॻ͍ͨ͜ͱ ◦ શ෦ͷϖʔδʹల։׬ྃ·Ͱͷେࡶ೺ͳϩʔυϚοϓΛॻ ͍ͨ͜ͱ ◦ εςʔΫϗϧμʔΛશһूΊͯձΛ։͍ͨ
31. ςΩετϕʔεͷܰྔͳςϯϓϨʔτΛ࢖༻ͯ͠ɺΞʔΩςΫνϟ্ͷઃܭ൑ அΛه࿥͢Δɻ ܰྔͳΞʔΩςΫνϟσγδϣϯϨίʔυʢArchitecture Decision Recordsɿ ADRʣ͸ɺ࣮੷ͷ͋ΔΞʔΩςΫνϟख๏ʹର͢Δ։ൃऀدΓͷΞϓϩʔν ͩɻઃܭ൑அΛه࿥͍ͯ͘͜͠ͱͰɺͦΕΒΛڞ༗͠෼ੳ͢Δ͜ͱ͕༰қʹͳ Δɻ ҙࢥܾఆͷཤྺΛ࢒͢͜ͱͰɺݱࡏͷΞʔΩςΫνϟʹ͍ͭͯͷίϯςΩετ Λɺͦͷաఔͱ݁ͼ͚ͭͯఏڙͰ͖Δɻ ADRͱ͸ ※ Michael Keeling. Design it . גࣜձࣾΦϥΠϦʔɾδϟύϯ. 2019೥. 404p
33. • Next.js + GraphQL ʹ͢΂͖͔ɺXslateͱReact͕ڞଘ͢ΔΑ͏ʹ͢΂ ͖͔ • CSRΛ༗ޮʹ͢Δ͔ • ΩϟογϡͲ͏͢Δ͔ • CSS͸ͲΜͳٕज़Λ࢖͏͔ • ਪ঑ϒϥ΢βϙϦγʔΛͲ͏͢Δ͔ • ReactԽલޙϖʔδͷϧʔςΟϯάͷํ๏΍੾Γସ͑ΛͲ͏࣮ݱ͢Δ͔ • WebViewͰදࣔ͞Ε͍ͯΔ΋ͷ͸Ͳ͏͢Δ͔ʁ • etc… ADRʹॻ͍ͨ͜ͱ
34. ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ • ྑ͔ͬͨ͜ͱ ◦ ADRΛॻ͍ͨ͜ͱ ▪ ϑΥʔϚοτ͕ॻ͖΍͔ͬͨ͢ ▪ ్தܦա͕ slack ʹྲྀΕ͍ͯͨͷͰɺձʹ޲͚ͯࢥߟΛঃʑ ʹ։ࣔͰ͖ͨ ▪ ్தͰϝϯόʔ͔Β൓Ԡ͕΋Β͑ΔͷͰɺυΩϡϝϯτͷ෼ ྔΛௐ੔Ͱ͖ͨ ◦ େࡶ೺ͳϩʔυϚοϓΛΈΜͳͰΈΔ͜ͱͰɺن໛ײΛڞ༗Ͱ͖ ͨΓɺ௚ۙͷ࿩ͳͷ͔ະདྷͷ࿩ͳͷ͔Λ੔ཧͰ͖ͨ
35. • ظؒ ◦ 1೔ • ΍ͬͨ͜ͱ ◦ λεΫʹ෼ղͯ͠ϓϩδΣΫτ؅ཧπʔϧʹ഑ஔͨ͠ • ྑ͔ͬͨ͜ͱ ◦ ϓϩτλΠϓͰݕ౼ࣄ߲ҰཡΛ࡞͍ͬͯͨͨΊɺλεΫ෼ ղ͕༰қͩͬͨ ϑϩϯτج൫࣮૷ʹඞཁͳλεΫΛ෼ղͯ͠ɺεέδϡʔϧʹམͱ͢
36. • ࿙Ε͕গͳ͍λεΫҰཡ͕͋ͬͨͷͰɺ؅ཧ্εϜʔζͩͬͨ • ผͷϝϯόʔʹλεΫΛҕৡ͠΍͔ͬͨ͢ ◦ αϯϓϧίʔυ͸͜ΕͳͷͰɺ͍͍ײ͡ʹ͔ͬ͜Αͯ͘͘͠ ͍ͩͬͯ͞ݴ͑͹ऴΘͬͨ • ج൫࣮૷࣌ʹ͏·͘ಈ࡞͠ͳ͔ͬͨ৔߹ʹɺϓϩτλΠϓͱ͍ ͏طʹಈ͍͍ͯΔ΋ͷΛࢀরͰ͖ͨ ج൫։ൃޙʹৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ
37. Ұ೥ޙ͔ΒৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ • ʮϦΞʔΩςΫνϟʹ͓͚Δࣦഊʯʹ͋ΔΑ͏ͳɺํ਑͕ؒ ҧ͍ͬͯͨΊ΍Γ௚͠͸ൃੜ͠ͳ͔ͬͨͷͰɺϓϩτλΠϓΛ ௨ͯ͡ਫ਼౓ͷߴ͍ݕূ͕Ͱ͖ͨͱߟ͍͑ͯΔ
38. ·ͱΊʙϓϩτλΠϓʙ • ϦΞʔΩςΫνϟʹ͓͚ΔࣦഊΛ๷͙ͨΊʹɺϓϩτλΠϓ͕ ༗ޮͩͱߟ͍͑ͯ·͢ • ૣΊʹ஍ཕΛ౿ΊͨΓɺखΛಈ͔͢͜ͱͰݕূͷਫ਼౓͕͕͋ Γɺ࡞ͬͨίʔυΛޙͷϑΣΠζͰ࢖͑ͨΓ͠·͢
39. ·ͱΊʙϓϩτλΠϓͷਐΊํʙ • ໢ཏతͳλεΫҰཡΛ࡞Δ͜ͱɺ༏ઌॱҐͷ࣠ΛͲ͏͢Δ͔͸ ೉͍͠Ͱ͕͢ɺେ੾ͳ͜ͱͩͱࢥ͍ͬͯ·͢ • ϓϩτλΠϓͰ͸ɺແݶʹ΍Γ͍ͨ͜ͱ͕͋ΔͷͰ࣌ؒΛ۠੾ Δͷ͕͓͢͢ΊͰ͢ • ϓϩτλΠϓͷ࣌ʹ͸ɺADRͷ࢖༻΍ීஈͷϓϩδΣΫτ؅ཧ Ͱ࢖͍ͬͯΔख๏Λ࢖͏ͷΛ͓קΊ͠·͢