$30 off During Our Annual Pro Sale. View Details »

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

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

k-murakami0609

April 01, 2022
Tweet

More Decks by k-murakami0609

Other Decks in Programming

Transcript

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

    View Slide

  2. ࣗݾ঺հ
    ID: k-murakami060
    9

    ͸ͯͳʹೖࣾޙɺϊϕϧνʔϜ
    Ͱຐ๏ͷiΒΜͲͷ։ൃΛ୲
    ౰ɻڈ೥͔ΒΧΫϤϜͷ։ൃʹ
    ܞΘ͍ͬͯΔɻ

    View Slide

  3. ηογϣϯͷ঺հ
    ΧΫϤϜͰ͸ Xslate + jQuery ͔Β React ʹҠߦ͢ΔϓϩδΣΫτΛਐΊ͍ͯ
    ·͢ɻ͜ΕΛਐΊΔʹ͋ͨͬͯɺݕ౼ॳظʹϓϩτλΠϓΛ࡞Δͱ͍͏બ୒
    Λ͠·ͨ͠ɻ(Ұ೥΄Ͳલͷ࿩
    )

    ͜ͷηογϣϯͰ͸ɺϓϩτλΠϓΛߦ͏ʹࢸͬͨܦҢ΍ૂ͍ɺ·ͨޙ൒Ͱ
    ͸શମͷਐΊํͳͲΛ঺հͰ͖ͨΒͱࢥ͍·͢ɻ


    ิ଍) Xslate͸ Perl ͷςϯϓϨʔτΤϯδϯ

    View Slide

  4. ΧΫϤϜ͸ࠓޙ5೥10೥ͱܧଓͯ͠ӡ༻͍ͯ͘͜͠ͱΛߟ͑Δඞཁ͕͋Δ


    ౰໘͸ϑϧϚΠάϨʔγϣϯ͸ܭը͞Ε͓ͯΒͣɺݱঢ়ͷαʔϏεΛܧଓͯ͠։
    ൃɾӡ༻͍ͯ͘͠ܗΛͱ͍ͬͯ͘


    ͜Εʹର͢ΔΞϓϩʔνͱͯ͠ɺΠϯϑϥɺΞϓϦέʔγϣϯ྆໘Ͱͦͷ࣌ʑ
    ʹଈͨ͠ߏ੒ʹগͣͭ͠੾Γସ͍͑ͯ͘
    ͳͥ React ҠߦΛਐΊ͍͔ͨ
    React ҠߦͷΠϯηϓγϣϯσοΩʹ͋ΔʮզΘΕ͸ͳͥ͜͜ʹ͍Δͷ͔(Why1)ʯ͕୺తͰΘ͔
    Γ΍͍͢

    View Slide

  5. ● Perl ୤ग़ΛਐΊͯߦ͖͍ͨ


    ○ ͦͷ଍͕͔Γͱͯ͠ɺ·ͣϑϩϯτΤϯυͱόοΫΤϯυ
    ͷ෼཭Λߦ͍͍ͨͱ͍͏࿩ʹͳͬͨ


    ● ຐ๏ͷiΒΜͲͱΞʔΩςΫνϟΛἧ͍͑ͨ


    ● React ͷ΄͏͕ੜ࢈ੑ͕ѹ౗తʹߴ͍


    ○ ຐ๏ͷiΒΜͲͷܦݧ͔ΒɺΤϯδχΞɾσβΠφʔڞʹͦ
    ͏͍ͬͨ࿩ʹͳͬͨ
    ͳͥ React Ҡߦ͕બ͹Εͨͷ͔

    View Slide

  6. ● ϓϩτλΠϐϯάΛͯ͠ΧΫϤϜͷͱ͋ΔϖʔδΛ৽͍͠Ξʔ
    ΩςΫνϟͰ࣮૷ͯ͠ΈΔ


    ● ظؒ͸1ϲ݄ఔ౓


    ○ ظؒΛ̎ͭʹ෼͚ͯɺผͷΞʔΩςΫνϟΛݕূͨ͠
    Ͳ͏΍ͬͯ React Ҡߦͷݕ౼ΛਐΊ͔ͨ

    View Slide

  7. ● ͕࣌ؒແݶͩͱແݶʹࢼ͍ͨ͜͠ͱ͕ग़ͯ͘ΔͷͰͦͷରࡦ


    ○ ҠߦͷաఔͰ΋΍Γͨ͘ͳͬͯɺείʔϓ͕ແବʹ޿͘ͳΔ
    ͜ͱ΋๷͛ͨ


    ● ݱ࣮໰୊ͱͯ͠͸ɺαϙʔλʔζύεϙʔτͱ͍͏େ͖ͳػೳ
    ͷϦϦʔε͕͋ΔͨΊɺ͜ͷظؒΛ௒ա͗͢͠ΔͱReact΁ͷҠ
    ߦࣗମΛҰ୴ఘΊΔඞཁ͕͋ͬͨ
    ϓϩτλΠϓͷظؒΛ1ϲ݄ͱઃఆͨ͠ཧ༝

    View Slide

  8. ϓϩτλΠϓͷૂ͍

    View Slide

  9. ϦΞʔΩςΫνϟʹ͓͚Δࣦഊͱ͸
    ● ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γશ෦
    ΍Γ௚͠ʹͳΔ


    ● ։ൃ଎౓Λ্͛ΒΕͯͳ͍


    ○ ٕज़બఆͷے͕ྑ͘ͳ͍/ա৒ʹ৽ٕज़Λ٧ΊࠐΈ͗͢Δ


    ○ Ҡߦ్͕தͰࢭ·ͬͯ͠·͍ɺ৽چ͕ࠞͬͨ͟ঢ়ଶͰ։ൃ/
    ӡ༻Λଓ͚ͳͯ͘͸͍͚ͳ͍

    View Slide

  10. ϓϩτλΠϓΛ࡞ΔϝϦοτ
    ● ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ


    ● ص্͚ͩߟ͍͑ͯΔ͚ͩΑΓɺݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕
    Ͱ͖Δ


    ● ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ

    View Slide

  11. ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ
    ● طଘϓϩμΫτʹಋೖ͢Δ৔߹ʹ͸ɺڭՊॻͲ͓Γʹߦ͔ͳ͍
    ෦෼͕͋Δ


    ● ϓϩτλΠϐϯάΛ௨ͯ͡໢ཏతͳݕ౼ࣄ߲ҰཡΛҭͯΒΕΔ

    View Slide

  12. ݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕Ͱ͖Δ
    ● ࣮ࡍʹಈ͔ͯ͠ΈͯΘ͔Δ͜ͱ͕͋Δ


    ● ࣮૷ΛνʔϜϝϯόʔʹΈͯ΋Β͏͜ͱͰҙݟΛ΋Β͍΍͘͢
    ͳΔ

    View Slide

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

    View Slide

  14. ● ϓϩτλΠϓ͕ޮՌతͰ͸ͳ͍͔ͱࢥ͍ͬͯΔɻ


    ○ ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γ
    શ෦΍Γ௚͠ʹͳΔ


    ■ -> ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ


    ○ ։ൃ଎౓Λ্͛ΒΕͯͳ͍


    ■ -> ϓϩτλΠϓΛ͖ͨͨ୆ͱ͢Δ͜ͱͰɺνʔϜϝϯ
    όʔͷҙݟΛฉ͍ͯόϥϯεײ֮Λ͔֬ΊΔ͜ͱ͕Ͱ͖
    Δ
    ϦΞʔΩςΫνϟʹ͓͚Δࣦഊ΁ͷରԠํ๏

    View Slide

  15. ϓϩτλΠϓͷਐΊํ

    View Slide

  16. ݕ౼͢΂͖ҰཡΛ༻ҙͯ͠ɺ༏ઌॱҐ͕ܾ·Ε͹ྑ͍ɻ


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

    View Slide

  17. ● ͍͖ͳΓ໢ཏతʹλεΫΛग़͢ͷ͸೉͔ͬͨ͠ͷͰɺॳख͸Ϙ
    τϜΞοϓͰߟ͑Δ͜ͱʹͨ͠


    ○ ݒ೦఺ΛͱΓ্͋͑ͣ͛·ͬͨ͘


    ■ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ
    ■ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ
    ■ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ
    ■ …
    ݕ౼ࣄ߲Ұཡͷ࡞Γํ

    View Slide

  18. ● ͦΕΛݩʹδϟϯϧͰάϧʔϐϯάͯ͠ɺ͞Βʹ࿙Ε͍ͯΔ΋
    ͷ͕ͳ͍͔Λߟ͑ͯ௥Ճ͍ͯͬͨ͠ɻ


    ● ·ͨϓϩτλΠϓΛ࡞͍ͬͯΔ͏ͪʹݕ౼͍ͨ͠΋ͷ͕ग़͖ͯ
    ͨ৔߹ʹ͸ɺͲΜͲΜ͜ͷҰཡʹ௥Ճͯ͠ߦͬͨ
    ݕ౼ࣄ߲Ұཡͷ࡞Γํ2

    View Slide

  19. ༏ઌॱҐͷߟ͑ํ
    ● ํ਑͕มΘͬͨ࣌ͷӨڹൣғ͕େ͖͍΋ͷɺ࡞ͬͯΈͳ͍ͱΑ
    ͘Θ͔Βͳ͍΋ͷΛϐοΫΞοϓͨ͠


    ○ ࣦഊ͠ͳ͍͜ͱΛ༏ઌ͢Δํ਑


    ● ·ͨɺݕূ͍ͯ͘͠͏ͪʹɺΘ͔Δঢ়ଶʹͳͬͨΒਂ௥͍͸͠
    ͳ͔ͬͨ


    ○ ϓϩτλΠϓͰ࡞Γ੾Δඞཁ͸ͳ͍ͷͰ

    View Slide

  20. ● ظؒΛ2ͭʹ෼͚ͯɺϓϩτλΠϓΛ2छྨ࡞ͬͨ


    ○ Next.js + GraphQL Λ࢖͏ύλʔϯ


    ○ XslateͱReact͕ڞଘ͢Δύλʔϯ
    ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ

    View Slide

  21. ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ

    View Slide

  22. ● ྆ऀͷλεΫ؅ཧతͳҧ͍͸࡞ۀͷείʔϓ


    ○ τϨʔυΦϑεϥΠμʔͰɺσϦόϦʔ͕Ұ൪༏ઌ౓͕ߴ
    ͘ɺ඼࣭΋མͱͨ͘͠ͳ͍͕ɺείʔϓ͸খͯ͘͞͠ྑ͍ͱ
    ͍͏࿩͕͋ͬͨ


    ○ σϦόϦʔ͕༏ઌ͞Εͨཧ༝͸ɺ൒೥ޙ͘Β͍ʹαϙʔλʔ
    ζύεϙʔτͱ͍͏େ͖ΊͷػೳϦϦʔε͕ܭը͞Ε͍ͯͨ
    ͨΊ
    ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ

    View Slide

  23. શମͷਐΊํ

    View Slide

  24. React ҠߦϓϩδΣΫτͷશମײ
    1. νʔϜ಺ͰReactҠߦ͢Δ͜ͱͷ߹ҙ͕ߦΘΕΔ
    2. ޻਺֬อ͢Δ
    3. ٕज़બఆɺϓϩτλΠϓ࡞੒ɺϩʔυϚοϓͷ࡞੒͢Δ


    4. ϑϩϯτΤϯυͷج൫Λ࣮૷͢Δ
    5. Ұ෦ͷϖʔδʹల։͢Δ
    6. શ෦ͷϖʔδʹల։͠ऴΘΔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. ● ظؒ
    ○ 2िؒ * 2


    ● ΍ͬͨ͜ͱ
    ○ 2ύλʔϯͷϓϩτλΠϓΛ࡞ͬͨ
    ■ Next.js + GraphQL Λ࢖͏ύλʔϯ


    ■ XslateͱReact͕ڞଘ͢Δύλʔϯ


    ○ ݕ౼ࣄ߲ҰཡΛ͕࣌ؒڐ͢ݶΓ্͔Βࢼ͍ͯͬͨ͠
    ϓϩτλΠϐϯά

    View Slide

  29. ϓϩτλΠϐϯά
    ● ྑ͔ͬͨ͜ͱ
    ○ ظؒΛ2ͭʹ෼͚ͨ͜ͱͰࣗಈతʹ޲͖௚Γ͕Ͱ͖ͨ


    ○ ݕ౼ࣄ߲ҰཡΛ࡞ͬͯ༏ઌ౓ॱҐ͚ͮͨ͜͠ͱ


    ■ ≒ ௨ৗͷ։ൃͱಉ͡Α͏ʹλεΫ؅ཧͨ͜͠ͱ


    ○ σβΠφʔʹཁ๬Λฉ͖ʹߦͬͨ͜ͱ


    ○ (ޙͰΘ͔ͬͨ͜ͱ͚ͩͲ) બ͹Εͳ͔ͬͨύλʔϯͷݕূ
    ͕ޙʑੜ͖Δ͜ͱ͕͋ͬͨ

    View Slide

  30. ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ
    ● ظؒ
    ○ 1िؒ


    ● ΍ͬͨ͜ͱ
    ○ ͻͨ͢ΒADRΛॻ͍ͨ͜ͱ


    ○ શ෦ͷϖʔδʹల։׬ྃ·Ͱͷେࡶ೺ͳϩʔυϚοϓΛॻ
    ͍ͨ͜ͱ


    ○ εςʔΫϗϧμʔΛશһूΊͯձΛ։͍ͨ

    View Slide

  31. ςΩετϕʔεͷܰྔͳςϯϓϨʔτΛ࢖༻ͯ͠ɺΞʔΩςΫνϟ্ͷઃܭ൑
    அΛه࿥͢Δɻ


    ܰྔͳΞʔΩςΫνϟσγδϣϯϨίʔυʢArchitecture Decision Recordsɿ
    ADRʣ͸ɺ࣮੷ͷ͋ΔΞʔΩςΫνϟख๏ʹର͢Δ։ൃऀدΓͷΞϓϩʔν
    ͩɻઃܭ൑அΛه࿥͍ͯ͘͜͠ͱͰɺͦΕΒΛڞ༗͠෼ੳ͢Δ͜ͱ͕༰қʹͳ
    Δɻ


    ҙࢥܾఆͷཤྺΛ࢒͢͜ͱͰɺݱࡏͷΞʔΩςΫνϟʹ͍ͭͯͷίϯςΩετ
    Λɺͦͷաఔͱ݁ͼ͚ͭͯఏڙͰ͖Δɻ
    ADRͱ͸
    ※ Michael Keeling. Design it . גࣜձࣾΦϥΠϦʔɾδϟύϯ. 2019೥. 404p

    View Slide

  32. View Slide

  33. ● Next.js + GraphQL ʹ͢΂͖͔ɺXslateͱReact͕ڞଘ͢ΔΑ͏ʹ͢΂
    ͖͔


    ● CSRΛ༗ޮʹ͢Δ͔


    ● ΩϟογϡͲ͏͢Δ͔


    ● CSS͸ͲΜͳٕज़Λ࢖͏͔


    ● ਪ঑ϒϥ΢βϙϦγʔΛͲ͏͢Δ͔


    ● ReactԽલޙϖʔδͷϧʔςΟϯάͷํ๏΍੾Γସ͑ΛͲ͏࣮ݱ͢Δ͔


    ● WebViewͰදࣔ͞Ε͍ͯΔ΋ͷ͸Ͳ͏͢Δ͔ʁ


    ● etc…
    ADRʹॻ͍ͨ͜ͱ

    View Slide

  34. ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ
    ● ྑ͔ͬͨ͜ͱ
    ○ ADRΛॻ͍ͨ͜ͱ


    ■ ϑΥʔϚοτ͕ॻ͖΍͔ͬͨ͢


    ■ ్தܦա͕ slack ʹྲྀΕ͍ͯͨͷͰɺձʹ޲͚ͯࢥߟΛঃʑ
    ʹ։ࣔͰ͖ͨ


    ■ ్தͰϝϯόʔ͔Β൓Ԡ͕΋Β͑ΔͷͰɺυΩϡϝϯτͷ෼
    ྔΛௐ੔Ͱ͖ͨ


    ○ େࡶ೺ͳϩʔυϚοϓΛΈΜͳͰΈΔ͜ͱͰɺن໛ײΛڞ༗Ͱ͖
    ͨΓɺ௚ۙͷ࿩ͳͷ͔ະདྷͷ࿩ͳͷ͔Λ੔ཧͰ͖ͨ

    View Slide

  35. ● ظؒ
    ○ 1೔


    ● ΍ͬͨ͜ͱ


    ○ λεΫʹ෼ղͯ͠ϓϩδΣΫτ؅ཧπʔϧʹ഑ஔͨ͠


    ● ྑ͔ͬͨ͜ͱ
    ○ ϓϩτλΠϓͰݕ౼ࣄ߲ҰཡΛ࡞͍ͬͯͨͨΊɺλεΫ෼
    ղ͕༰қͩͬͨ
    ϑϩϯτج൫࣮૷ʹඞཁͳλεΫΛ෼ղͯ͠ɺεέδϡʔϧʹམͱ͢

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide