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

チームで取り組む Singe Page Application

チームで取り組む Singe Page Application

y8 2017 spring Shibuya

Okamuuu

May 27, 2017
Tweet

More Decks by Okamuuu

Other Decks in Programming

Transcript

  1. νʔϜͰऔΓ૊Ή

    4JOHMF1BHF"QQMJDBUJPO
    :TQSJOHJO4IJCVZB
    !PLBNVVV

    View Slide

  2. ͋Β͢͡
    w αʔόʔαΠυ͔ΒϑϩϯτΤϯυͷੈք΁
    w ཱͪҐஔ͕มΘͬͨࣄʹΑͬͯؾ͍ͮͨࣄ
    w ϑϩϯτΤϯυ͸աࠅ͚ͩͲॏཁ
    w Ͳ͏΍ཱͬͯͪ޲͔͏΂͖͔ߟ͑·ͨ͠

    View Slide

  3. "HFOEB
    w 41"ͷྲྀߦͱϞμϯͳϑϩϯτΤϯυ
    w 6*69σβΠφʔ͕ٻΊΒΕΔ
    w ϑϩϯτΤϯυͰਓࡐ͕ෆ଍
    w ղܾࡦΛߟ͑Δ

    View Slide

  4. 4JOHMF1BHF"QQMJDBUJPO
    ͕ྲྀߦͨ͠എܠ

    View Slide

  5. 8αʔϏε͕ϦονԽ
    w 'BDFCPPL͸ը໘ભҠͯ͠΋νϟοτ΢Οϯυ΢͸ด͡ͳ͍
    w 4PVOE$MPVE͸ը໘ભҠͯ͠΋࠶ੜதͷԻָ͸్੾Εͳ͍
    w 8FCΞϓϦ͕ωΠςΟϒΞϓϦฒΈͷ6*69Λཁٻ͞ΕΔΑ͏ʹͳ͖ͬͯͨ
    w จࣈ΍ը૾͚ͩͷදݱͰ͸෺଍Γͳ͘ͳ͍ͬͯΔ
    w ϦονͰ͋Δ͜ͱ͕ઈରͰ͸ͳ͍͕ɺϦονͳ6*69͕޷·ΕΔ܏޲͕͋Δ

    View Slide

  6. Ϧονͳ6*Λࢧ͑Δٕज़
    w ߴ͍ཁٻʹԠ͑ΒΕΔٕज़͕ొ৔͖ͯͨ͠
    w ߴ଎ʹಈ࡞͢ΔԾ૝%0.͕஫໨ΛूΊͨ
    w 3FBDUKT͸τϥϯεύΠϧͯ͠࢖͏ඞཁ͕͋Δ
    w ར༻͢Δଆʹ։ൃ؀ڥΛߏங͢ΔεΩϧ͕ඞཁʹͳ͖ͬͯͨ
    w ϞμϯͳϑϩϯτΤϯυΤϯδχΞ͕ొ৔

    View Slide

  7. ϞμϯͳϑϩϯτΤϯυ
    w &4΍5ZQF4DSJQUͳͲͰهड़͢ΔΑ͏ʹͳͬͨ
    w ίʔυΛ͖ͪΜͱϞδϡʔϧԽ͢ΔΑ͏ʹͳͬͨɻ
    w +BWBTDSJQUΛϏϧυͯ͠࢖͏Α͏ʹͳͬͨɻ
    w Ծ૝%0.͕౰ͨΓલʹͳ͖ͬͯͨ
    w ΋͏αʔόʔαΠυ͕ยखؒͰK2VFSZΛॻ࣌͘୅Ͱ͸ͳ͘ͳͬͨ

    View Slide

  8. ͜͜·Ͱͷ·ͱΊ
    w 4JOHMF1BHF"QQMJDBUJPO͕ྲྀߦͨ͠
    w ͦΕʹ൐ٕͬͯज़తͳཁٻ͕ߴ·ͬͨ
    w ཁٻʹԠ͑ΔΤϯδχΞ͕ొ৔͖ͯͨ͠
    w ͨͩ͠ɺͦͷཁٻʹ͸6*69σβΠϯؚ͕·Ε͍ͯΔʜ
    w ΤϯδχΞΛҰਓޏ͚ͬͨͩͰ͸ཁٻΛશͯຬͨ͢ࣄ͕Ͱ͖ͳ͍

    View Slide

  9. 6*69σβΠφʔ͕ٻΊΒΕΔ

    View Slide

  10. 6*69σβΠφʔͱ͸
    w (PPHMFͷ.BUFSJBM%FTHJOͷΑ͏ͳ6*Λߟ͑Δਓ
    w Ϣʔβʔ͕ؾ࣋ͪྑ͍ϞʔγϣϯεϐʔυΛߟ͑ͨΓ
    w ΞχϝʔγϣϯʹҙຯΛ࣋ͨͤͨΓ
    w ΦϒδΣΫτͷग़ݱɾҠಈɾมܗʹܧଓੑΛ͏Μ͵Μ
    Λߟ͑ͨΓ
    w σβΠϯͱϓϩάϥϛϯάͷ྆ํͷಛੑ͕ඞཁ

    View Slide

  11. 'MBTIFS
    w ੩తͳը໘Ͱຬ଍͠ͳ͍Ϣʔβʔ΁ͷରॲ͸'MBTIͷ໾ׂͩͬͨɻ
    w ͣͬͱલ͔Β6*69Λڧ͘ҙࣝͯ͠։ൃ͍ͯͨ͠
    w ΠϥετϨʔλʔΛૢΓ
    w ΞΫγϣϯεΫϦϓτͰϓϩάϥϛϯάΛ͠
    w λΠϜϥΠϯͰΞχϝʔγϣϯΛੜΈग़͢
    w 4JOHMF1BHF"QQMJDBUJPOʹ͸࠷ߴͷਓࡐ͔΋͠Εͳ͍͕
    w ωΠςΟϒΞϓϦͱ͔΍͍ͬͯΔͰ͠ΐ͏Ͷ

    View Slide

  12. 8σβΠφʔ
    w 'MBTI͕͋Δ͜Ζ͸ओʹ੩తͳ8ը໘Λߟ͑Δਓͩͬͨ
    w 8σβΠφʔ΋6*69Λڧ͘ҙࣝ͢Δඞཁੑ͕Ͱ͖ͯͨ
    w σβΠφʔͳͷͰ6*69ͷྑ͠ѱ͕͠Θ͔Δ͕࣮૷ͷ࢓ํ͕Θ͔Βͳ͍
    w ࣮૷͕Ͱ͖ͳ͍ͱɺτϥΠΞϯυΤϥʔΛॏͶͯਪᏏ͢Δ͜ͱ͕ग़དྷͳ
    ͍
    w K2VFSZ࣌୅͸࣮૷Ͱ͖Δ8σβΠφʔ͕ͨ͘͞Μ͍ͨ
    w 4JOHMF1BHF"QQMJDBUJPO͕ྲྀߦ͠ɺٕज़తͳোน͕ߴ͘ͳͬͯ͠·ͬ
    ͨ

    View Slide

  13. ٕज़తͳোน
    Կނ͔ಓ۩͕ൃ໌͞Εଓ͚Δʜ
    CPXFS OQN ZBSO HSVOU HVMQ CSPXTFSJGZ
    XFCQBDL SPMMVQ GVTFCPY $P⒎FF4DSJQU
    5ZQF4DSJQU 'MPX #BCFM #BDLCPOF
    ,OPDLPVU &NCFS "OHVMBS 7VFKT 3FBDUKT
    3JPUKT 3FEVY 3Y+4ʜ

    View Slide

  14. ۙ೥ͷ8σβΠφʔͷ೰Έ
    w 8ͷϦονԽʹ൐͍ɺσβΠφʔ΋ษڧ͢Δࣄ͕૿͖͑ͯͨ
    w ͦΜͳ࠷தίʔυ͕ॻ͚ͳ͍σβΠφʔ͸౫ଡ͞ΕΔͱڴ͞ΕΔ
    w σβΠϯͷษڧΛ͍͕ͨ͠ϓϩάϥϜͷษڧ΋͠ͳ͚Ε͹͍͚ͳ
    ͍ʜ

    View Slide

  15. ͜͜·Ͱͷ·ͱΊ
    w 4JOHMF1BHF"QQMJDBUJPO͕ྲྀߦͨ͠
    w ͦΕʹ൐ٕͬͯज़తͳཁٻ͕ߴ·ͬͨ
    w ཁٻʹԠ͑ΔΤϯδχΞͷ஍Ґ͕޲্ͨ͠
    w ͨͩ͠ɺͦͷཁٻʹ͸6*69σβΠϯؚ͕·Ε͍ͯΔʜ
    w ϓϩάϥϜ͕ಘҙͳσβΠφʔʹظ଴͕ߴ·Δ
    w ΩϟονΞοϓͤ͞Δͷ͸ίετ͕ߴ͍

    View Slide

  16. ϑϩϯτΤϯυͰ
    ਓࡐ͕ෆ଍

    View Slide

  17. ϑϩϯτΤϯυ͸๩͍͠
    w ৽͍ٕ͠ज़Λษڧ͠ଓ͚Δඞཁ͕͋Δ
    w ը໘ભҠΛߟ͑ͨΓ
    w αʔόʔαΠυͱ8FC"1*Λߟ͑ͨΓ
    w ϓϥϯφʔ΍σβΠφʔͱը໘ʹ͍ͭͯંিͨ͠Γ
    w ࣮૷Ҏ֎Ͱ͔ͳΓ࣌ؒΛফඅ͢Δ

    View Slide

  18. ΋͏Ұਓޏ͍͍ͨ
    w ձࣾʹ͓ئ͍ͯ͠ٻਓΛ͔͚ͯ΋Β͏͕
    w Ϛον͢Δਓࡐ͕ݟ͔ͭΒͳ͍ͱͷฦ౴
    w )5.- $44 +BWB4DSJQUͩͬͨΒਓ͍Δ͚Ͳ
    w τϥϯεύΠϧͨ͠ΓϞδϡʔϧΛόϯυϧͨ͠
    ΓλεΫϥϯφʔͰ͍͍ײ͡ʹ͢Δਓ͸ݟ͔ͭΒ
    ͳ͍ʜ

    View Slide

  19. ͜͜·Ͱͷ·ͱΊ
    w 4JOHMF1BHF"QQMJDBUJPO͕ྲྀߦͨ͠
    w ͦΕʹ൐ٕͬͯज़తͳཁٻ͕ߴ·ͬͨ
    w ཁٻʹԠ͑ΔΤϯδχΞͷ஍Ґ͕޲্ͨ͠
    w ͨͩ͠ɺͦͷཁٻʹ͸6*69σβΠϯؚ͕·Ε͍ͯΔʜ
    w σβΠφʔ΋ٕज़తͳཁٻ͕ߴ·ͬͨ
    w σβΠφʔʹϑϩϯτΤϯυք۾ͷ৘ใΛΩϟονΞοϓͤ͞Δͷ͸ίετ͕ߴ͍
    w 4JOHMF1BHF"QQMJDBUJPOʹରԠՄೳͳΤϯδχΞ͕ෆ଍͍ͯ͠Δ
    w ͦͷͨΊ࡞ۀ͕஗Ε͕ͪʹͳΔɻϑϩϯτΤϯυ͕։ൃͷϘτϧωοΫʹͳ͍ͬͯΔɻ

    View Slide

  20. ղܾࡦΛߟ͑Δ

    View Slide

  21. ໰୊఺
    w 6*69ʹ·Ͱਫ਼௨͍ͯ͠ΔϑϩϯτΤϯυΤ
    ϯδχΞ͕΄΅͍ͳ͍
    w ϑϩϯτΤϯυΤϯδχΞ͕ෆ଍͍ͯ͠Δ
    w 6*69͕ಘҙͳσβΠφʔ͸ϓϩάϥϛϯά
    ͕ۤख

    View Slide

  22. ղܾࡦ
    w ίϯϙʔωϯτͰ੹຿Λ෼཭ͯ͠૬ޓิ׬͢Δ
    w σβΠφʔ͸σβΠϯΛɺΤϯδχΞ͸ΤϯδχΞϦϯάΛ
    w ίϯϙʔωϯτΛσβΠφʔʹ࡞੒ͯ͠΋Β͏
    w ΤϯδχΞ͸ίϯϙʔωϯτΛड͚औΓɺ8FCΞϓϦΛߏங͢Δ
    w ΤϯδχΞ͸ίϯϙʔωϯτΛߏங͢Δ؀ڥΛσβΠφʔʹఏڙ͢Δ

    View Slide

  23. ͏·͍ͬͨ͘ͷ͔ʁ
    w 3FBDUKTͰ΍ͬͯΈ·ͨ͠ɻ
    w ͨͩ͠ɺσβΠφʔ͞ΜͰ͸ͳ͘ɺ)5.-ίʔμʔ͞Μʹ͓ئ͍͠·ͨ͠ɻ
    w 3FBDUKTࣗମ͸+BWB4DSJQUͷίʔυதʹ)5.-λάΛॻ͚ΔͷͰίʔ
    μʔ͞Μ͕֮͑Δࣄ͕গͳ͔ͬͨ
    w 4UBUFMFTTͳ3FBDU$PNQPOFOUΛ࡞ͬͯ΋Β͑ΔΑ͏ʹͳͬͨ
    w 6*69ΛͲ͏͢Δ໰୊͸ղܾͰ͖ͳ͔͕ͬͨʜ
    w ϑϩϯτΤϯυ͕ϘτϧωοΫͱͳΔ໰୊͸ղফͨ͠

    View Slide

  24. ۩ମతʹ΍ͬͨࣄ
    w IUUQRJJUBDPNPLBNVVVJUFNT
    DDCGCBDEBCDFF
    w IUUQTPLBNVVVHJUIVCJPQSBDUJDFTUPSZCPPL
    w DSFBUFSFBDUBQQͱSFBDUTUPSZCPPL͕ଘࡏͨͨ͠
    Ί࣮ࡍʹίʔυΛॻ͖࢝ΊΔ·Ͱͷखॱ͕୹͔͘͢Μͩ

    View Slide

  25. OQNJHDSFBUFSFBDUBQQHFUTUPSZCPPL
    DSFBUFSFBDUBQQIFMMPSFBDU
    DEIFMMPSFBDU
    HFUTUPSZCPPL
    OQNSVOTUPSZCPPL
    ؆୯

    View Slide

  26. ·ͱΊ
    w 8FCͷϦονԽ͕ਐΉͨΊɺاۀ͸ϑϩϯτΤϯυͷઓಆྗ͕ߴ͍νʔϜ
    Λ཰͍Δඞཁ͕͋Δ
    w ϑϩϯτΤϯυ͸ΤϯδχΞͱσβΠφʔ͕ྗΛ߹ΘͤΔඞཁ͕͋Γ·͢ɻ
    w ͦΕͧΕ͕ྗΛൃشͰ͖ΔΑ͏ʹόοΫΞοϓ͢Δମ੍Λ੔͑·͠ΐ͏
    w 41"Λ࢝ΊΔલʹɺͲ͏΍Ε͹νʔϜ͕ڧ͘ͳΔ͔ɺ΋͏Ұ౓ߟ͑ͯ͸͍
    ͔͕Ͱ͠ΐ͏͔ɻ

    View Slide

  27. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide