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

フロントエンド刷新をプロジェクトとして進める際に気をつけていること

koba04
May 17, 2023

 フロントエンド刷新をプロジェクトとして進める際に気をつけていること

プロジェクトについて下記を参照ください
https://blog.cybozu.io/archive/category/%E3%83%95%E3%83%AD%E3%83%AA%E3%82%A2

koba04

May 17, 2023
Tweet

More Decks by koba04

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυ࡮৽ΛϓϩδΣΫτ
    ͱͯ͠ਐΊΔࡍʹؾΛ͚͍ͭͯΔ
    ͜ͱ
    ! L P C B
    ϑ ϩ ϯ τ Τ ϯ υ ͷ ٕ ज़ త ෛ ࠴ Έ Μ ͳ Ͱ ֶ Ϳ - V O D I - 5

    View Slide

  2. !LPCB

    ɾαΠϘ΢ζ
    ɾ೥ೖࣾ
    ɾLJOUPOF ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτϦʔμʔ
    ɾ044
    ɾ.BJOUBJOFS483 SFBDUUSBOTJUJPOHSPVQ KBSFBDUEFWʜ
    ɾ$SFBUPS483%FW5PPMTʜ
    ɾ$POUSJCVUPS3FBDU /FYUKTʜ
    ࢀߟ
    ָ͠͞΋ා͞΋੒௕ͷྐʹͳΔɻಠֶ͔Βελʔτͨ͠ϑϩϯτΤϯυΤϯδχΞͱͯ͠ͷΩϟϦΞ

    View Slide


  3. L J O U P O F ͷ
    ϑ ϩ ϯ τ Τ ϯ υ ࡮ ৽
    ϓ ϩ δ Σ Ϋ τ ʹ ͭ ͍ ͯ

    View Slide


  4. ։ൃͷ஌͕ࣝͳͯ͘΋
    ۀ຿ʹ߹ΘͤͨγεςϜΛ
    ͔ΜͨΜʹ࡞੒Ͱ͖Δ
    Ϋϥ΢υαʔϏε
    ౦ূϓϥΠϜ্৔اۀͷ̏ࣾʹ͕̍ࣾ LJOUPOF Λར༻த ˞೥݄࣌఺

    View Slide

  5. LJOUPOF ͷϑϩϯτΤϯυ࡮৽ʢϑϩϦΞʣ

    ೥ͷϦϦʔεҎདྷɺ$MPTVSF5PPMTͰߏங͞Ε͍ͯΔ LJOUPOF ͷ
    ϑϩϯτΤϯυΛ 3FBDUͳͲͷٕज़Ͱ࡮৽͢ΔϓϩδΣΫτͰ͢ɻ
    ೥ ݄ਖ਼ࣜελʔτɻ
    ݱࡏ͸ νʔϜʢ⚛ 🌟 🐚ʣʹ෼͔Εͯ׆ಈதͰ͢ɻ

    View Slide

  6. ϑϩϦΞ CMPHDZCP[VJP

    LJOUPOFϑϩϯτΤϯυϦΞʔΩςΫνϟϓϩδΣΫτͰେ੾ʹ͍ͯ͠Δ͜ͱ
    ϢʔβʔମݧΛ࠷ߴʹ͢ΔLJOUPOF%FTJHO4ZTUFNTΛͭͬͯ͘·͢
    1MBZXSJHIU7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ 7JTVBM3FHSFTTJPO5FTU
    UZQFTDSJQUHFOFSBUPSΛར༻ͯ͠ɺ)5.-ʹຒΊࠐΜͩ +40/σʔλΛϑϩϯτΤ
    ϯυͰܕ҆શʹѻ͏
    LJOUPOFͷ಺෦Λʢͬͦ͜Γʣ3FBDUʹஔ͖׵͑ΔνʔϜ͕͋Δͬͯϗϯτʁ
    LJOUPOFͷΞΫηγϏϦςΟվળͱ&4-JOUϧʔϧͷ੔උ
    ਓ͕ࢀՃ͢ΔϓϩδΣΫτͰܻҧ͍ͷύϑΥʔϚϯεΛൃش͢ΔͨΊͷνʔϜσβ
    Πϯ
    εΫϥϜνʔϜͰ࣮ફ͍ͯ͠ΔιϩϓϩͱϞϒϓϩΛཱ྆ͨ͠ε΢Υʔϛϯάͷ঺հ
    ࠷଎ͰϑϩϯτΤϯυΛ࡮৽͢ΔͨΊͷ։ൃϑϩʔ
    LJOUPOFϑϩϯτΤϯυ࡮৽ʹ͓͍ͯͷ 8FCύϑΥʔϚϯεํ਑
    ΤϯδχΞͱͷڑ཭͕ۙ͘ͳ͍͍ͬͯ͜ͱͨ͘͞ΜͩͬͨQAͷ࿩
    ৽ଔͰϚΠΫϩϑϩϯτΤϯυΛܦݧͯ͠Έͯ
    ࣮૷ྫ͔ΒݟΔ 3FBDUͷςετͷॻ͖ํ
    ৽ଔͰඈͼࠐΜͩϑϩϯτΤϯυ࡮৽ϓϩδΣΫτֶ͕ͼͩΒ͚ͩͬͨ࿩
    ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτΛ੒ޭʹಋͨ͘Ίͷςετख๏ͷ঺հ
    ϑϩϯτΤϯυͷςετίʔυΛॻ͘ͱ͖ʹେ੾ʹ͍ͯ͠Δ͜ͱ
    LJOUPOFͷڞ௨ϔομʔ෦෼ͷ 3FBDUԽʹ੹೚Λ࣋ͭνʔϜͷ঺հʂ
    νʔϜϝτϦΫεͱײ৘σʔλΛ׆༻ͨ͠ʮ;Γ͔͑ΓʯͷखҾ͖
    ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ։ൃαΠΫϧΛՃ଎͢ΔσϓϩΠύΠϓϥΠϯͷ
    վળ
    σβΠϯγεςϜߏஙʹ͓͚ΔΦʔφʔͷॏཁੑʛsakitoʛnote
    νʔϜશһͰӽڥͯ͠௅Ή"֩ͳΔ"σβΠϯγεςϜʛτϏ / KazuhiroTobitaʛnote
    ͩΕ΋͕࢖͑Δઃఆը໘ʹ─kintoneͷϑϩϯτΤϯυ࡮৽ͱΞΫηγϏϦςΟʛαΠϘ
    ΢ζ σβΠϯ&Ϧαʔνʛnote
    σβΠϯγεςϜͷεΫϥϜϚελʔ͕1೥Ͱ࣮ફͨ͠νʔϜϏϧσΟϯάʛαΠϘ΢
    ζ σβΠϯ&Ϧαʔνʛnote
    ΤϯδχΞͱͷڑ཭͕ۙ͘ͳ͍͍ͬͯ͜ͱͨ͘͞ΜͩͬͨQAͷ࿩
    ৽ଔͰϚΠΫϩϑϩϯτΤϯυΛܦݧͯ͠Έͯ
    kintone ΞϓϦ࡞੒ϑΥʔϜͷ UI ͷঢ়ଶ؅ཧͷϥΠϒϥϦબఆ

    View Slide


  7. ࡮ ৽ ϓ ϩ δΣ Ϋ τ Ͱ
    ؾ Λ ͭ ͚ ͯ ͍ Δ ͜ ͱ

    View Slide

  8. ຊ౰ʹϓϩδΣΫτͱͯ͠΍Δඞཁ͕͋Δͷ͔ߟ͑Δ

    ɾձࣾ΍ϓϩμΫτͷঢ়ଶʹΑͬͯҟͳΔ͸ͣ
    ɾຊ౰ʹେن໛ʹ΍Δඞཁ͕͋Δʁ
    ɾϑϩϦΞͷ৔߹
    ɾ$MPTVSF5PPMTͷϩοΫΠϯɺΧελϚΠζ΁ͷӨڹ͔Β
    ೉қ౓͕ߴࣗ͘વʹஔ͖׵͕͑ਐΉ͜ͱͳ͔ͬͨ
    ɾ࠾༻ɾֶशίετɾϝϯςφϯεੑͳͲϓϩμΫτͷܧଓੑΛ
    ڴ͔͢ϦεΫʹͳ͍ͬͯͨ

    View Slide

  9. ΰʔϧΛڞ༗͢Δ

    ɾࣗ෼ͨͪͷղܾ͍ͨ͠໰୊Λڞ༗͢Δ
    ɾݸʑͷ൑அͷج४ͱͳΔͷͰॏཁ
    ɾϑϩϦΞͷ৔߹
    શͯͷϖʔδ͕ 3FBDUʹΑͬͯදࣔ͞Ε͍ͯΔ
    ϑϩϯτΤϯυ͕ٕज़తʹ΋νʔϜతʹ΋෼ׂ͞Ε͍ͯΔ
    Ϣʔβʔମݧʹؔ͢Δࢦඪʹର͢Δܭଌ͕ߦΘΕ͓ͯΓɺ
    νʔϜͷؔ৺ຖʹͳ͍ͬͯΔ

    View Slide

  10. Ձ஋؍Λڞ༗͢Δ

    ɾΰʔϧ͚ͩͰ͸ڞ༗Ͱ͖ͳ͍࣮ݱ͍ͨ͠ঢ়ଶ΍Ձ஋؍Λڞ༗͢Δ
    ɾ֤ϝϯόʔ͕൑அ͢Δࡍͷج४ͱͳΔ
    ɾϑϩϦΞͷ৔߹
    ࣾ಺֎ʹରͯ͠ΦʔϓϯͰ͋Δ
    8FCͷมԽΛड͚ೖΕ௥ैͰ͖Δ
    ੹຿Λ໌֬ʹͯ͠ɺνʔϜͰಠཱͨ͠ҙࢥܾఆ͕Ͱ͖Δ
    ୭΋͕։ൃʹࢀՃͰ͖Δ
    ΤΩεύʔτ͕ઐ໳ੑΛൃشͰ͖Δ
    ௅ઓͰ͖Δ ࣦഊͰ͖Δ

    View Slide

  11. ࠷ڧͷΞʔΩςΫνϟͰ͸ͳ͘ม͑΍͍͢ΞʔΩςΫνϟ

    ɾٕज़తͳ࡮৽͸͜ΕͰ࠷ޙͰ͸ͳ͍
    ɾΰϦΰϦʹݻΊͨ࠷ڧͷΞʔΩςΫνϟͰ͸ͳ͘ɺม͑Δ͜ͱΛલఏʹ
    ͨ͠ߏ੒ʹ
    ɾϑϩϦΞͷ৔߹
    ɾࠓޙϓϩδΣΫτԽ͢Δ͜ͱͳ͘࡮৽Ͱ͖Δঢ়ଶΛ໨ࢦ͍ͯ͠Δ
    ɾͭͷ .POPSFQP Ͱͳ͘νʔϜ୯ҐͰ .POPSFQP Λߏ੒
    ˠಠཱੑ ޮ཰ੑ ʹΑΔ൑அ

    View Slide

  12. ֤νʔϜʹ໌֬ͳ໨తΛ

    ɾ֤νʔϜ͕ࣗ෼ͷνʔϜ͔͠ୡ੒Ͱ͖ͳ͍ΰʔϧΛ͍࣋ͬͯΔ
    ɾ҆қͳڞ௨ج൫νʔϜΛආ͚Δ
    ɾඞཁͰ͋Ε͹ಛఆͷ໨తͨΊ͚ͩʹ݁੒͞Εͨ୹ظνʔϜΛ࡞Δ
    ɾϑϩϦΞͷ৔߹
    ɾϓϩδΣΫτॳظʹ &&ΛͲ͏͢Δ͔Λݕ౼͢Δ୹ظνʔϜ
    ɾϢʔβʔମݧͳͲΞϓϦέʔγϣϯશମͷؔ৺ຖʹ͍ͭͯ͸ͦͷ
    ͨΊͷνʔϜΛ࡞Δ

    View Slide

  13. 8IZɾ୅ସҊΛه࿥͢Δ

    ɾ8IZ΍࠾༻͞Εͳ͔ͬͨ୅ସҊΛ৘ใͱͯ͠࢒͢
    ˠܽଛ͕ͪ͠ˍޙʑॏཁʹ
    ɾ"%3 "SDIJUFDUVSBM%FDJTJPO3FDPSET
    ͱͯ͠࢒͢࢓૊ΈΛ੔උ͢Δ
    ɾϑϩϦΞͷ৔߹
    ɾଟ͘ͷܾஅ͸ "%3ͱͯ͠ه࿥͞Ε͍ͯΔ
    ɾ֤νʔϜͷ "%3ɺϓϩδΣΫτશମͷ "%3ͳͲ༷ʑ
    ˠݸͷ "%3͕͋Δ ݱࡏ

    View Slide

  14. 5IBOLZPV

    ɾγχΞϑϩϯτΤϯυΤϯδχΞ ϑϩϦΞ

    ɾϑϩϯτΤϯυΤϯδχΞʢϑϩϦΞʣ
    ɾϑϩϯτΤϯυΤΩεύʔτ
    👉 DZCP[VDPKQSFDSVJU We are hiring!!!

    View Slide