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

サイボウズWebフロントエンド脱レガシーの今までとこれから

 サイボウズWebフロントエンド脱レガシーの今までとこれから

UIT meetup vol.12『リニューアル戦略発表会(一部から全部まで)』 - connpass
https://uit.connpass.com/event/201312/

Hiroyuki ANAI

March 10, 2021
Tweet

More Decks by Hiroyuki ANAI

Other Decks in Programming

Transcript

  1. !QJSPTJLJDL
    αΠϘ΢ζ
    8FCϑϩϯτΤϯυ୤ϨΨγʔͷ
    ࠓ·Ͱͱ͜Ε͔Β
    8FE

    6*5NFFUVQWPMʰϦχϡʔΞϧઓུൃදձ Ұ෦͔Βશ෦·Ͱ
    ʱ

    View Slide

  2. !QJSPTJLJDL
    w αΠϘ΢ζגࣜձࣾ
    ϑϩϯτΤϯυΤΩεύʔτνʔϜʢिʣ
    גࣜձࣾ;FOFΤϯδχΞʢिʣ
    w ࣗ༝ͳಇ͖ํͰ͖ΔαΠϘ΢ζɺΑ͍
    w ෱ԬʹॅΜͰ͍·͢👨
    Ϗʔϧ͕޷͖Ͱ͢🍺
    w ೥݄ʹೖࣾɺ
    ͣͬͱվળ΍୤ϨΨγʔΛ΍ͬͯ·͢
    ݀Ҫ޺޾
    ࠷ۙҿΜͰ͏·͔ͬͨ΍ͭ
    3FWJTJPO.PPO8PMG

    View Slide

  3. w ࠓ·Ͱͷ࿩
    w αΠϘ΢ζͷϑϩϯτΤϯυΤΩεύʔτνʔϜͰ
    ਐߦதͷ୤ϨΨγʔʹ͍ͭͯ
    w ΍ͬͨ͜ͱɾ΍͍ͬͯΔ͜ͱ
    w ٕज़తͳ͋Ε͜Ε
    w ݸਓతͳڭ܇
    w ͜Ε͔Βͷ࿩
    w ࠓޙͷ՝୊
    w ˞ίʔυ͸΄ͱΜͲग़͖ͯ·ͤΜ

    View Slide

  4. ࠓ·Ͱͷ࿩

    View Slide

  5. w αΠϘ΢ζͷϑϩϯτΤϯυΛ
    ࠷ߴʹ͢Δ
    w 8FCϑϩϯτΤϯυͷ؍఺͔Β
    ϓϩμΫτΛࢧԉ͢ΔνʔϜ
    w ೥݄ʹ஀ੜ
    w ݱࡏ໊
    ౦ژਓɺ෱Ԭਓɺେࡕਓ

    ϑϩϯτΤϯυ
    ΤΩεύʔτνʔϜ
    ͜͜ˢ
    ʮαΠϘ΢ζͷϑϩϯτΤϯυΤΩεύʔτνʔϜͷ঺հʯΑΓൈਮ
    IUUQTCMPHDZCP[VJPFOUSZ

    View Slide

  6. αΠϘ΢ζͷϓϩμΫτ
    ΞϓϦɿσʔλϕʔεɺ৘ใڞ༗ɺίϛϡχέʔγϣϯΛͻͱͭʹ
    άϧʔϓ΢ΣΞɿେاۀ޲͚؅ཧػೳΛ౥ࡌ
    άϧʔϓ΢ΣΞɿதখاۀ޲͚͔ΜͨΜΒ͘Β͘άϧʔϓ΢ΣΞ
    ϝʔϧڞ༗ɿಧ͍ͨϝʔϧΛෳ਺ਓͰڞ༗Ͱ͖Δπʔϧ

    View Slide

  7. αΠϘ΢ζͷϓϩμΫτ
    ΞϓϦɿσʔλϕʔεɺ৘ใڞ༗ɺίϛϡχέʔγϣϯΛͻͱͭʹ
    άϧʔϓ΢ΣΞɿେاۀ޲͚؅ཧػೳΛ౥ࡌ
    άϧʔϓ΢ΣΞɿதখاۀ޲͚͔ΜͨΜΒ͘Β͘άϧʔϓ΢ΣΞ
    ϝʔϧڞ༗ɿಧ͍ͨϝʔϧΛෳ਺ਓͰڞ༗Ͱ͖Δπʔϧ
    ͍ͭ΋ˢͷͭͷϓϩμΫτͷվળΛओʹߦ͍ͬͯΔͷͰ
    ࠓ೔͸͜ͷͭʹ͍ͭͯ࿩͠·͢ɻ

    View Slide

  8. ΍ͬͨ͜ͱɾ΍͍ͬͯΔ͜ͱ Ұ෦

    LJOUPOFͷελοΫ೥ࠒˠݱࡏ
    w $MPTVSF5PPMT
    w όʔδϣϯ͸΍΍ݹΊ
    w ಠࣗύον͋Γ
    w 4BTT$PNQBTT
    w +4)JOU
    w FUD
    w 5ZQF4DSJQUɾ3FBDU؀ڥʹҠߦத
    w $MPTVSF5PPMTΞοϓσʔτத
    w ಠࣗύονͷҰ෦͸ຊՈʹϚʔδࡁ
    w ୤$PNQBTT
    w &4-JOU
    w QSFUUJFSͷಋೖ

    View Slide

  9. ΍ͬͨ͜ͱɾ΍͍ͬͯΔ͜ͱ Ұ෦

    ΨϧʔϯͷελοΫ೥ࠒˠݱࡏ
    w 1)1K2VFSZɺҰ෦:6*
    w ϞόΠϧ͸K2VFSZ.PCJMF
    w ੜͷ$44
    w :6*ΛࣙΊΔରԠத
    w K2VFSZʹҰຊԽ
    w Ұ෦ͷෳࡶͳ6*͸3FBDUʹҠߦ
    w K2VFSZ.PCJMFΛ54ɾ3FBDU؀ڥʹ
    Ҡߦத
    w 4BTTԽɻTUZMFMJOUͷಋೖ

    View Slide

  10. Ҡߦʹؔ͢Δٕज़తͳ࿩
    ҠߦͷਐΊํ
    w ΄ͱΜͲͷϖʔδ͕41"Ͱ͸ͳ͍ͷͰɺϖʔδͣͭஔ͖׵͍͑ͯΔ
    w ίʔυϕʔε͕ڊେͳͷͰɺ
    "45Λ࢖ͬͨࣗಈม׵طଘࢿ࢈ͷྲྀ༻ͷಓ΋୳ٻ͕ͨ͠ɺ
    طଘࢿ࢈ͷྲྀ༻͸ͳΔ΂͘ߦΘͣʹஔ͖׵͍͑ͯΔ

    View Slide

  11. Ҡߦʹؔ͢Δٕज़తͳ࿩
    ҠߦͰؾΛ͚͍ͭͯΔ఺
    w BZతʹσάϨΛى͜͞ͳ͍Α͏ʹؾΛ͚͍ͭͯΔ
    w $MPTVSF-JCSBSZͱK2VFSZ.PCJMFɺBZతʹ͸Α͘Ͱ͖͍ͯΔ఺͕ଟʑ͋Δ
    w BZνʔϜͱ࿈ܞ͠ɺݱঢ়ͷ͍͍఺ɾѱ͍఺Λ੔ཧ
    w BZతʹ͍͍఺͸ͦͷ··ʹɺѱ͍఺͸վળ͢Δ

    View Slide

  12. ݸਓతͳڭ܇
    ઐ໳νʔϜ͕͋ͬͯΑ͔ͬͨ࿩
    w ϓϩμΫτ։ൃͱ͸ผʹ୤ϨΨγʔɾվળΛ΍Δਓһ͕ډͯΑ͔ͬͨ
    w ٕज़తʹҰےೄͰ͍͔ͳ͍͜ͱ͕ଟʑ͋Γɺ
    ͦͷ౎౓ɺௐࠪͨ͠ΓઓུΛ࿅Δඞཁ͕͋ͬͨ
    w "45ʹΑΔࣗಈม׵΍ϚΠΫϩϑϩϯτΤϯυͳͲɺ
    ઑͬͨΞϓϩʔνΛࢼͯ͠ݕ౼͢Δ༨༟͕͋ͬͨ

    View Slide

  13. ݸਓతͳڭ܇
    ͳΔ΂͘খ͘͞ਐΊΔ
    w Ұ౓ʹଟ͘ͷ͜ͱΛ΍Ζ͏ͱ͢Δͱ
    13͕େ͖͘ͳͬͯɺϚʔδ·Ͱʹ͕͔͔࣌ؒΓ͕ͪ
    w ˠϚʔδઌϒϥϯνͱͷဃ཭͕େ͖͘ͳͬͯ͠·͍ɺਏ͍
    w ˠϚʔδ࣌ͷϨϏϡʔ͕ਏ͍FUD
    w ॻ੶ϞϊϦε͔ΒϚΠΫϩαʔϏε΁ষ
    ʮϑΟʔυόοΫ͕ಘ΍͍͢ɺࣦഊͨ͠ͱ͖ʹϩʔϧόοΫ͠΍͍͢ʯ

    View Slide

  14. 8%#13&44WPM
    ಛूʮϑϩϯτΤϯυ୤ϨΨγʔʯ
    ʹ৭ʑॻ͍ͨͷͰڵຯ͕͋Ε͹
    ͥͻಡΜͰΈ͍ͯͩ͘͞🙏

    View Slide

  15. αΠϘ΢ζͷ୤ϨΨγʔ͸
    ·ͩ࢝·ͬͨ͹͔Γ💪

    View Slide

  16. ͜Ε͔Βͷ࿩

    View Slide

  17. ࠓޙͷ՝୊
    ෳࡶͳ6*ͷҠߦ
    w ྫ͑͹ɺLJOUPOFͷϦονςΩετΤσΟλʔ
    w Ϣʔεέʔε͕ಛघͳͷͰɺطଘͷ044Ͱஔ͖׵͑Δͷ͕೉͍͠
    w ௕͘޲͖߹͏ඞཁ͕͋Γͦ͏
    w ଞʹ΋LJOUPOFͷΞϓϦฤूʢϑΥʔϜ࡞੒ʣ΍ɺ
    ΨϧʔϯͷεέδϡʔϧදࣔɾฤूͳͲ
    w طଘͷίʔυΛϥοϓ͢ΔͳͲͯ͠ҠߦΛޙճ͠ʹ͢Δɺ
    ͳͲͷઓུ͕ඞཁʹͳΔ͔΋

    View Slide

  18. ࠓޙͷ՝୊
    ϢʔβʔΧελϚΠζ΁ͷରԠ
    w Ϣʔβʔ͕+4$44Λ௥Ճͯ͠ɺ
    LJOUPOF΍Ψϧʔϯͷը໘্Ͱ࣮ߦͰ͖Δػೳ͕͋Δ
    w 3FBDU͸ɺ3FBDU֎͔Βͷ%0.ૢ࡞ͱ૬ੑ͕ѱ͍ͷͰɺ
    ৽͍͠ελοΫҠߦޙʹϢʔβʔΧελϚΠζΛͲͷΑ͏ʹ࣮ݱ͢Δ͔
    w LPCBࢯ͕୳ڀ͍ͯ͠ΔͷͰɺڵຯ͕͋Δํ͸ͥͻೖࣾ͠·͠ΐ͏

    View Slide

  19. ࠓޙͷ՝୊
    /೥ޙɺ୤ϨΨγʔΛ͠ͳ͍ͨΊʹ͸Ͳ͏͢Ε͹͍͍͔ʁ
    w #UP#͸ଉ͕௕͍
    w LJOUPOF೥ɺΨϧʔϯ೥ɺ0⒏DF೥Ҏ্ʂ
    w ͳʹ΋ରࡦ͠ͳ͚Ε͹ɺ
    ͨͿΜ·ͨ/೥ޙʹ୤ϨΨγʔͯͦ͠͏ͱ͍͏ෆ҆

    View Slide

  20. /೥ޙɺ୤ϨΨγʔΛ͠ͳ͍ͨΊʹ͸Ͳ͏͢Ε͹͍͍͔ʁ
    ʮαϘͬͨʯ͔Βࠓ͕͋ΔΘ͚͡Όͳ͍
    w Ή͠ΖɺϓϩμΫτͷ੒௕ʹूத͍ͯ͠Δͱ
    ʮͦΕ͸ϢʔβʔʹՁ஋Λఏڙ͍ͯ͠Δͷ͔ʯ
    Έ͍ͨͳؾ͕࣋ͪৗʹಇ͘ͷͰɺ
    ϢʔβʔՁ஋͕໌֬Ͱ͸ͳ͍վળ͕ޙखʹճΔͷ͸࢓ํͳ͍
    w Ͳ͏͢Δ͔ʁҊ
    w վળΛճ͠΍͍͢؀ڥɾจԽͮ͘Γ
    w վળͷλΠϛϯάΛϧʔϧԽ
    w ϨΨγʔ౓߹͍ΛՄࢹԽFUD

    View Slide

  21. /೥ޙɺ୤ϨΨγʔΛ͠ͳ͍ͨΊʹ͸Ͳ͏͢Ε͹͍͍͔ʁ
    վળΛճ͠΍͍͢؀ڥɾจԽͮ͘Γ
    w 5FTUJOH5SPQIZͰ͍͏*OUFHSBUJPO5FTUΛ૿΍͢
    w յΕͯͳ͍͜ͱ͕อূͰ͖Ε͹ɺվળΛճ͠΍͘͢ͳΔ͸ͣ
    w UFTUJOHMJCSBSZʴ"3*"Ͱద౓ʹ༡ͼͷ͋Δ݁߹ςετ͕ॻ͚ΔͷͰɺ
    *OUFHSBUJPO5FTUΛ૿΍͍ͨ͠
    w ϘʔΠεΧ΢τϧʔϧͷීٴ
    w ػೳ։ൃͷ͍ͭͰʹվળͰ͖Ε͹৺ཧతʹָͦ͏

    View Slide

  22. /೥ޙɺ୤ϨΨγʔΛ͠ͳ͍ͨΊʹ͸Ͳ͏͢Ε͹͍͍͔ʁ
    վળͷλΠϛϯάΛϧʔϧԽ
    w ॻ੶ʮਐԽతΞʔΩςΫνϟʯͷϥΠϒϥϦɾϑϨʔϜϫʔΫͷఆٛ
    w ϥΠϒϥϦ։ൃऀͷίʔυ͕ݺͼग़͢΋ͷ
    w ϑϨʔϜϫʔΫ։ൃऀͷίʔυΛݺͼग़͢΋ͷ
    w ϑϨʔϜϫʔΫͷมߋ͸ΞϓϦʹӨڹ͠΍͍͢ɺස౓ߴΊͰߋ৽͢΂͖
    w ྫ͑͹ʮϑϨʔϜϫʔΫ͸ϚΠφʔόʔδϣϯͰ௥ैʯΈ͍ͨͳϧʔϧͰ
    վળͷλΠϛϯάΛܾΊͪΌ͏

    View Slide

  23. /೥ޙɺ୤ϨΨγʔΛ͠ͳ͍ͨΊʹ͸Ͳ͏͢Ε͹͍͍͔ʁ
    ϨΨγʔ౓߹͍ΛՄࢹԽ
    w ϨΨγʔͷ౓߹͍͕ͲΕ͘Β͍Ͱɺ
    ͦΕΛղফ͢ΔͷʹͲΕ͘Β͍޻਺͕ඞཁͳͷ͔ɺ͕෼͔Βͳ͍ͱ
    ͍ͭɾͲͷఔ౓޻਺Λׂ͘΂͖͔ͷτϨʔυΦϑ͕Ͱ͖ͳ͍
    w ॻ੶ʮਐԽతΞʔΩςΫνϟʯ͕ώϯτʹͳΓͦ͏ͳؾ͕͍ͯ͠Δ
    w దԠ౓ؔ਺Λ؂ࢹͯ͠ɺϓϩμΫτ͕ਐԽ͍ͨ͠ํ޲ʹ޲͔͍ͬͯΔ͔

    View Slide

  24. ͳʹ͔͍͍औΓ૊Έ͕
    ͋ͬͨΒͥͻڭ͍͑ͯͩ͘͞🙏

    View Slide

  25. ·ͱΊ

    View Slide

  26. w αΠϘ΢ζͷ8FCϑϩϯτΤϯυͷ୤ϨΨγʔ͸
    ·ͩ΍Δ͜ͱ͕͍ͬͺ͍͋Δ
    w #UP#͸ଉ͕௕͍ɻ
    ϨΨγʔʹ޲͖߹͏͜ͱ͕#UP$ΑΓଟ͍͔΋͠Εͳ͍
    w Ҡߦͨ͠ޙ͕ຊ൪ɻ
    ೔ʑͷվળΛͲ͏΍ͬͯ͏·͘ճ͔͢͸ࠓޙ΋՝୊
    w ϑϩϯτΤϯυΤΩεύʔτνʔϜͷ׆ಈ͸ࠓޙ΋ॏཁͦ͏

    View Slide

  27. ୤ϨΨγʔҎ֎΋৭ʑ΍ͬͯ·͢
    w %FWFMPQFS&YQFSJFODFͷํͷ%9
    w σβΠϯγεςϜFUD
    w $ZCP[V'SPOUFOE.POUIMZΛ
    ຖ݄:PV5VCF-JWFͰ഑৴த
    w IUUQTDZCP[VHJUIVCJP
    GSPOUFOENPOUIMZ
    8FSFIJSJOH💪
    αΠϘ΢ζϑϩϯτΤϯυΤΩεύʔτνʔϜʹ͍ͭͯ4QFBLFS%FDL
    IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUGSPOUFOEFYQFSUUFBN

    View Slide

  28. ͓ΘΓ
    🍺͋Γ͕ͱ͏͍͟͝·ͨ͠🍺

    View Slide