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

500日のトライエラーから生まれた大規模設計ノウハウ / Frontend Conferenc...

OKUNOKENTARO
December 08, 2018

500日のトライエラーから生まれた大規模設計ノウハウ / Frontend Conference Fukuoka 2018

2018/12/8 Frontend Conference Fukuoka 2018にて発表した資料です。

OKUNOKENTARO

December 08, 2018
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

  1. w 8FC.VTJDٕज़Λ༻͍ͨαʔϏεͷ্ཱͪ͛ w େن໛ϑϩϯ τΤϯυͷઃܭ ɾ ։ൃ ɾ ίʔ υ

    ϨϏϡʔ w ίϯαϧςΟ ϯά ɾ ొஃ ɾ ࣥච w "OHVMBS೔ຊϢʔβʔձ෭ΦʔΨφΠβ
 OHLZPUPΦʔΨφΠβ
  2. w ࠜຊతઃܭʹજΉϠό͍ w όοΫΤϯ υͷ؀ڥ ɾ ௨৴ w 63-ͷઃܭ w

    ໨ඪύϑ ΥʔϚϯε w ϑϩϯ τΤϯυ ɾ ϑ ϨʔϜϫʔΫͷબ୒ w ΞΫηγϏϦςΟ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  3. w όοΫΤϯ υͷΠϯλϑΣʔε w 3&45"1* (SBQI2- wʮ͍·͸ʙʙ͚ͩͲɺ কདྷతʹʙʙʯ 
 ͳͲͱฉ͖͑ͯͨ͜Βܯռ

    w ϑϩϯ τΤϯυ ɾ όοΫΤϯ υڞʹ
 ؾܰʹೖΕସ͑ΒΕͳ͍ͷͰ৻ॏʹͳΔ΂͖Օॴ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  4. w ௨৴ج൫͸ϓϩ τλΠ ϐϯά͢΂͖ w Ұ཯Ͱૹ৴͢΂͖ϔομ͸͋Δ $%/͸࢖͏ ʁ  w

    $PPLJFͷ࢓༷͸ݻΊͯ͋Δ  w Τϥʔϋϯ υ Ϧ ϯά ɾ ϙϦγʔ͸Կ  w ػೳྔ࢈ޙͷஈ֊ͩͱɺ ͪΌͿ୆ฦ͠ڃͷ޻਺͕͔͔Δ w ͋Γ͕͚ͪͩͲϓϩ τλΠ ϓͷԆ௕ઢ্ͷ··։ൃ͠ଓ͚ͳ͍ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  5. w ଟݴޠରԠ w ԿΧࠃޠʹରԠ ʁ  w ݴޠσʔλ͸Ͳ͔͜Βऔಘ ʁ 

    w λΠϜκʔϯͷѻ͍͸ ʁ ௨՟දهͷՕॴ͸ ʁ  w 35- 3JHIUUPMFGU จԽݍ͸ؾʹ͠ͳ͘ ͍͍ͯ ʁ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  6. w 9)3ͷΩϟϯηϧѻ͍ w ແବଧͪϦΫΤε τ͸Ͳ͏΍ͬͯࡹ͘ ʁ  w unsubscribeͰ͖ͯΔ ʁ

    ϝϞϦ ϦʔΫͯ͠ͳ͍ ʁ  w 8PSLFS͸࢖͏ ʁ  w ΦϯϝϞϦ ɾ Ωϟογϡͷѻ͍͸ ʁ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  7. w 63-पΓ ΋৻ॏʹ w ӡ༻։࢝͢ΔͱϢʔβʹෛ୲Λֻ͚ΔͨΊมߋ͠ʹ͍͘ w /a/b/cͱఆΊͨͱ͖/a/bʹΞΫηεͨ͠ΒԿ͕ى͜Δ ʁ  w

    ϦμΠ ϨΫ τ͠ΖͱݴΘΕͨͱ͖ʹ࣮૷Մೳ ʁ  w ιʔ τঢ়ଶ΍ݕࡧϫʔ υ͸Ͳ͏දݱ͢Δ ʁ ΫΤϦύϥϝʔλ ʁ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  8. w ύϑ ΥʔϚϯε໨ඪ͸ ʁ ͦΕʹର͢Δཁ݅਺͸ ʁ  w શ෦੝Γ41"ʹ͠Α ͏

    ͱͯ͠ͳ͍ ʁ  w ʮը໘ભҠΛ൐ΘͣදࣔΛࠩ͠ସ͍͑ͨʯ ͚ͩͰ͸ͳ͍  w ֎໺͔Β ʮ41"ʹ͠Α ͏ʯ ͱ͍͏੠͕ฉ͑ͨ͜Β
 Կ͕͍ͨ͠ͷ͔ཁώΞϦϯά ࠜຊతઃܭϑΣʔζͰͷରࡦ
  9. w 1FSGPSNBODF#VEHFU w ʮ·ͣ͸ಈ͘ ΋ͷΛ࡞ͬͯɺ ύϑ ΥʔϚϯεܭଌ͸͋ͱͰʯ 
 ͱ͍͏ߟ͑Λ͍࣋ͬͯΔਓ͸ଟ͍ w

    ͻͨ͢Β࡞Δͱվળ࣌ʹख஗Εͳ͜ͱ΋ w ࠜຊతߴ଎Խʹଟେͳ޻਺ֻ͕͔Δɺ ͳͲ w ࠷ॳ͔Βݶք஋ΛఆΊ͓ͯ͘ w ͨͩ͠ૣ͗͢Δա౓ͳ࠷దԽ΋ආ͚Δ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  10. w ϑ ϨʔϜϫʔΫΛͲ͏͢Δ͔ w ਖ਼௚ͳΜͰ΋͍͍ w ͨͩ͠ೖΕସ͑ʹ͍͘ w "OHVMBS΍/VYUKT͸٧Ί߹ΘͤͰͦΕʹै͓͚ͬͯ͹Α͍ w

    3FBDU͸पลϥΠ ϒϥ Ϧͷબ୒ࢶ͕ଟ͘ݰਓ޲͚ wʮ7JFXΛͲ͏͢Δ͔ʯ ͕ܾ·Δ͚ͩͰଞʹ΍Δ͜ͱ͸ࢁ΄Ͳ͋Δ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  11. w ࠜຊతઃܭϑΣʔζ͸֎໺ͷϠδͩΒ͚ w ϠδΛ໧ΒͤΔઆಘྗ ʢ೔ࠒͷ஌ࣝʣ  w ຊ࣭Λݟൈ͖ɺ Ͳ͏͍͏ٕज़બఆΛ͢Δ͔ w

    ͜ͷϑΣʔζ͸গਓ਺ɺ ߴ଎ʹҙࢥܾఆ͢Δ w Ϡδ௨ΓʹਐΊΔͱҊ݅ޙ൒ʹͬ͠΃ฦ͕͘͠ Δέʔε༗Γ ࠜຊతઃܭϑΣʔζͰͷରࡦ
  12. w த௕ظઃܭͰຊ౰ʹඞཁͳεΩϧ w ઃܭεΩϧΑ Γ ΋࣏ࣗεΩϧ w ఉͷ݈߁࣏҆ͷྑ͍νʔϜߴ͍ੜ࢈ੑ w ϑ

    ϨʔϜϫʔΫ΋ɺ ΞʔΩςΫνϟ΋
 νʔϜͷੜ࢈ੑΛ্͛ΔͨΊ த௕ظઃܭϑΣʔζͰͷରࡦ
  13. w ਫͱίʔ υͷ඼࣭͸௿͍ํʹྲྀΕΔ w ์͓ͬͯ͘ ͱίʔ υͷ඼࣭͸௿Լ͠ଓ͚Δ w ίϐϖ w

    ಈ͚͹Α͠ίʔ υ w ੹຿ແࢹͷཻ౓ɺ ਆΫϥε த௕ظઃܭϑΣʔζͰͷରࡦ
  14. w ಈ͍ͯΔ͔Β͍͍ ʁ Ͱ΋ʜ w ػೳमਖ਼ ɾ ௥Ճ࣌ʹ௧͍໨ΛݟΔ wʮͪΐͬͱ௥Ճ͢Δ͚ͩͰ͠ΐ ʁ

    ʯ ͱݴΘΕͯணखͯ͠ΈͨΒʜ w ΊͪΌ͘ ͪΌ೉ղ w Ͳ͔͜ΒखΛ෇͚ͨΒ͍͍͔ த௕ظઃܭϑΣʔζͰͷରࡦ
  15. w ͜ΕΛ๷͙ͨΊʹ w ίʔ υ ϨϏϡʔΛ͢Δ w ίʔ υͷ඼࣭ʹ໨ΛޫΒͤΔ͚ͩͰͳ͘ɺ 


    νʔϜͷ඼࣭ʹ໨ΛޫΒͤΔ த௕ظઃܭϑΣʔζͰͷରࡦ
  16. "ࢯ ಈ͘ ίʔ υΛߴ଎ʹ࣮૷ +BWB4DSJQUͱ͖ͯ͠Ε͍ͳίʔ υΛॻ͘ ϓϩδΣΫ τݹདྷͷ෩शʹԊ͏ͷ͸ۤख #ࢯ ࢓༷ͷཧղ͕ૣ͘

    ϓϩ τλΠ ϐϯά͕ಘҙ όϥϯεΑ ࣮͘૷Ͱ͖Δ͕ έΞϨεϛε͕ଟ͍ ͜Ε͸ϑΟ ΫγϣϯͰ͢ɻ ࣮ࡏͷਓ෺ ɾ ஂମͱ͸Ұ੾ؔ܎͋Γ ·ͤΜɻ
  17. "ࢯ ಈ͘ ίʔ υΛߴ଎ʹ࣮૷ +BWB4DSJQUͱ͖ͯ͠Ε͍ͳίʔ υΛॻ͘ ϓϩδΣΫ τݹདྷͷ෩शʹԊ͏ͷ͸ۤख #ࢯ ࢓༷ͷཧղ͕ૣ͘

    ϓϩ τλΠ ϐϯά͕ಘҙ όϥϯεΑ ࣮͘૷Ͱ͖Δ͕ έΞϨεϛε͕ଟ͍ $ࢯ ࠷৽ͷϓϩάϥϛϯά ɾ ύϥμΠϜʹۤઓ ࢖͍ํ͸ཁϑΥϩʔ ม਺΍ؔ਺ͷ໊෇͚Ͱख͕ࢭ· Γ͕ͪ ͜Ε͸ϑΟ ΫγϣϯͰ͢ɻ ࣮ࡏͷਓ෺ ɾ ஂମͱ͸Ұ੾ؔ܎͋Γ ·ͤΜɻ
  18. w νʔϜϝϯόʔʹ͸ಘख ɾ ෆಘख͕͋Δ w શһ ʢࣗ෼΋ؚΊʣ ͳʹ͔͠ΒͷΫη͕͋Δͱ৺ಘΔ w ׬શʹۉ࣭ͳϨϏϡʔ͸ఘΊΔ

    w ϨϏϡΠʔ͝ͱʹඍົͳई౓ͷࠩ
 ʢUZQPΛΑ ͘͢Δਓɺ ໊෇͚͕ۤखͳਓɺ ͳͲʣ  w ͜͜͸৴པؔ܎ͷߏஙͰղܾ த௕ظઃܭϑΣʔζͰͷରࡦ
  19. w εΩʔϜΛಋೖ͢Δͱ w ຽओతʹจ۟ΛݴΘͤͳ͍ w ʮԶ͸͕͍͍ͬͪ͜ͱࢥ͏ Μ͚ͩͲʜʯ ͱϞϠϞϠͤ͞ͳ͍ w ΏΔΏΔͰ΋ΨνΨνͰ΋μϝɺ

    ݸͷݟۃΊ͕ॏཁ w ڧ͍ਓͷύϑ ΥʔϚϯεΛଛͶͣʹ
 ۤखͳਓ΋҆৺ͯ͠։ൃͰ͖Δઈົͳόϥϯεʹ ҙࢥܾఆলུεΩʔϜ
  20. w ن໿Λಋೖ w εϙʔπʹ͸ϧʔϧ
 ʢฏ౳ͳ৚݅ԼͰָ͘͠ڝٕʣ  w ӡసʹ͸ಓ࿏ަ௨๏
 ʢແடংͳӡస͸ੜ໋ʹؔΘΔʣ 

    w νʔϜ։ൃʹ΋ن໿Λಋೖ͢Δ w ҆શͳϓϩάϥϜͷҡ࣋ɺ ҆৺շదͳੜ࢈ੑͷҡ࣋ ҙࢥܾఆলུεΩʔϜ
  21. w ٬؍తࠜڌ ʁ  w ͓͓Αͦೝ஌͞Ε͍ͯΔΤϯδχΞϦ ϯάͷ఩ֶ w ઌਓͷ఩ֶ͸஌ݟͷմ w

    40-*%ݪଇ ʢΦϒδΣΫ τࢦ޲ݪଇ͚ͩͲؔ਺ͷઃܭͰ΋༗༻ʣ  w :"(/* ,*44 %3:
 ʢඞཁʹͳΔ·Ͱ࣮૷͢Δͳɺ γϯϓϧʹ͠Ζɺ ܁Γฦ͠͸ආ͚Ζʣ ҙࢥܾఆলུεΩʔϜ
  22. w ίʔ υ ϨϏϡʔ͸٬؍తʹ w ϨϏϡʔ͸࣮૷ऀ΁ͷݸਓ߈ܸͷ৔Ͱ͸ͳ͍ w ʮԶ͸ͳΜ͔͜ͷॻ͖ํΠϠʯ ͸ w

    CSBODIͷࠩ෼ʹજΉຊ࣭Λղऍ্ͨ͠Ͱίϝϯ τ w ϨϏϡΞʔɺ ϨϏϡΠʔͱ΋ʹೝ஌͢Ε͹ҙࢥܾఆίε τμ΢ϯ w ϨϏϡΞʔ΋ਓؒͳͷͰർΕΔ
 ཧ૝͸ࣗಈԽͰ͖Δͱ͜ΖΛࣗಈԽ ҙࢥܾఆলུεΩʔϜ
  23. w ϑϩϯ τΤϯ υͰ࠾༻͢Δͷ͸ਖ਼௚೉͍͠ w ࣍ͷঢ়گͰ͸͏ · ͘ճΒͳ͍ w όοΫΤϯ

    υଆͷݱঢ়͕%%%ʹແ಴ண w όοΫΤϯ υ͕ϑϩϯ τΤϯ υͱͷίϛϡχέʔγϣϯԼʹແ͍
 ʢผձࣾͳͲʣ  w ࢓༷ͷશ༰Λཧղ͍ͯ͠Δਓ͕օແ ҙࢥܾఆলུεΩʔϜ
  24. w υϝΠϯۦಈઃܭʹग़ͯ͘ Δख๏ͷҰ෦Λഈआ w %%%Λ ʮ׬ᘳʹʯ ࠾༻͢Δʹ͸ɺ ͔ͳΓશମతͳҙࢥ౷Ұ͕ඞཁ w ׬ᘳʹ࠾༻͠Α

    ͏ ͱ͠ͳ͍ w %%%΍ɺ ͦͷؔ࿈ٕज़ͷதͰ༗༻ͱ͞Ε͍ͯΔ΋ͷΛ࠾༻͢Δ ҙࢥܾఆলུεΩʔϜ
  25. w $234 $PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPO  w %C$ %FTJHOCZ$POUSBDU  w ΦϒδΣΫ

    τࢦ޲ΤΫααΠζ w ϢϏΩλεݴޠ w ͓·͚ ɿ Ϧʔμϒϧίʔ υʹै͏ ҙࢥܾఆলུεΩʔϜ
  26. w $234 $PNNBOE2VFSZ3FTQPOTJCJMJUZ4FHSFHBUJPO  w %C$ %FTJHOCZ$POUSBDU  w ΦϒδΣΫ

    τࢦ޲ΤΫααΠζ w ϢϏΩλεݴޠ w ͓·͚ ɿ Ϧʔμϒϧίʔ υʹै͏ ҙࢥܾఆলུεΩʔϜ
  27. w ौ୩Ӻͷ࠶։ൃ͸Ұ൩ͰऴΘΒͳ͍ w Ϧ ϑΝΫλ Ϧ ϯά΋Ұ൩ͰऴΘΒͳ͍ w Կ͕ෆศͳͷ͔ٞ࿦͢Δ w

    ͳͥϦ ϑΝΫλ Ϧ ϯά͢΂͖ͳͷ͔ݕ౼͢Δ w وॏͳ޻਺Λඅ΍ͨ͢Ίɺ ϖΠ ϥΠϯΛ൑அ த௕ظઃܭϑΣʔζͰͷରࡦ
  28. w Ϧ ϑΝΫλ ϦϯάΛ໨తʹ͢Δͳ w खஈͷ໨తԽΛආ͚Δ w ΤϯδχΞͷຬ଍ͷͨΊ͚ͩͰਐΊͳ͍ w Ϧ

    ϑΝΫλ Ϧϯάͷઌʹ໨తΛ࣋ͯ w νʔϜͷڞ௨ͷ໨త͸ ʁ  w ྑ͖ϓϩμΫ τΛ࡞Γ඼࣭ΛߴΊଓ͚Δ͜ͱ த௕ظઃܭϑΣʔζͰͷରࡦ
  29. w ϩδοΫΛॻ͘ࡍ͸ςε τ͠΍͍࣮͢૷Ͱ͋Δ΂͖ w ςε τ͕ॻ͖ʹ͍࣮͘૷ʹ͸Կ͔໰୊͕જΜͰ͍Δ w Ξϯνύλʔϯͷʹ͓͍ w ʮಛఆͷॲཧΛςε

    τ಺Ͱ࣮ߦ͢Δͱෆ౎߹͕͋Γ ·͢ʯ  w ʮςε τίʔ υΛॻͨ͘Ίͷ४උίʔ υ͕௕͍Ͱ͢ʯ ୹ظઃܭϑΣʔζͰͷରࡦ
  30. w ίʔ υ͸ ʢ૬ରతʹʣ ݹ͘ͳΔ w ֎తཁҼϥΠ ϒϥ Ϧͷਐาɺ ৽"1*௥Ճɺ

    ഁյతมߋ w ಺తཁҼҊ݅ͷ࢓༷มߋɺ ߟྀ࿙Εൃ֮ɺ ࣗ਎ͷεΩϧ޲্ ୹ظઃܭϑΣʔζͰͷରࡦ
  31. w ୹ظઃܭͱத௕ظઃܭͷݟۃΊ w ֎໺͔Βฉ͖͑ͯͨ͜Βܯռ͢Δ಺༰ w ʮ͜͜Λฤूͨ͠Βɺ ͬͪ͜ͷද͕ࣔมΘΓ ·͢ʯ  w

    ʮ͜ͷ஋͸MPDBM4UPSBHFʹ֨ೲ͓ͯ͘͠ඞཁ͕͋Γ ·͢ʯ  w Өڹൣғ͕ಛఆͷڱ͍είʔϓʹด͡ͳ͘ͳ్ͬͨ୺
 ࢹ࠲Λ ʮ؆୯ʹࣺͯΒΕͣෛ࠴Խ͍ͯ͘͠ ΋ͷʯ ʹ੾Γସ͑Δ ୹ظઃܭϑΣʔζͰͷରࡦ