React Nativeで作る「触れるプロトタイプ」の活用

2018.02.10に開催されたCookpad TechConfのLTで発表したスライド資料です

Transcript

1. ࠤ໺େՏ
   ౤ߘ։ൃ෦
   React NativeͰ࡞Δ
   ʮ৮ΕΔϓϩτλΠϓʯͷ׆༻
   

   View Slide

2. ͩΕʁ
   2
   ࠤ໺ େՏ
   2017೥4݄ ΫοΫύου৽ଔೖࣾ
   @sn_taiga
   ౤ߘ։ൃ෦ σβΠφʔ
   

   View Slide

3. ৮ΕΔϓϩτλΠϓͬͯʁ
   3
   

   View Slide

4. 4
   ϓϩτλΠϓΛ࡞Δ໨తɿཱͯͨԾઆ΍ΞΠσΞΛݕূ͢Δ
   ৮ΕΔϓϩτλΠϓ
   ʹ
   ࣮ࡍͷσʔλΛѻ͍
   ຊ෺ʹ͍ۙମݧΛ΋ͱʹݕূͰ͖ΔϓϩτλΠϓ
   

   View Slide

5. 5
   ϝϦοτ
   σϝϦοτ
   •೔ৗੜ׆ͰυοάϑʔσΟϯάͰ͖Δ
   
   •࣭ͷߴ͍ϑΟʔυόοά͕ಘΒΕΔ
   •ѹ౗తʹ։ൃίετ͕͔͔Δ
   
   •Ձ஋ݕূ͍ͨ͠ਓͱ࣮૷͢Δਓ͕Ұக͠ͳ͍έʔε͕ଟ͍
   ˠݕূ/վળͷαΠΫϧΛૉૣ͘·Θͤͳ͍
   

   View Slide

6. 6
   ϝϦοτ
   σϝϦοτ
   •೔ৗੜ׆ͰυοάϑʔσΟϯάͰ͖Δ
   
   •࣭ͷߴ͍ϑΟʔυόοά͕ಘΒΕΔ
   •ѹ౗తʹ։ൃίετ͕͔͔Δ
   
   •Ձ஋ݕূ͍ͨ͠ਓͱ࣮૷͢Δਓ͕Ұக͠ͳ͍έʔε͕ଟ͍
   ˠݕূ/վળͷαΠΫϧΛૉૣ͘ߦ͑ͳ͍
   ։ൃϑΣʔζ΍໨తʹ߹Θͤͯద੾ʹ࢖͏
   લఏ
   ௿ίετͰૉૣ͍վળ͕Ͱ͖Δ؀ڥ
   + ཧ૝
   

   View Slide

7. 7
   ྉཧ·ͱΊ
   ࣗ෼ͷϨγϐΛ೚ҙʹ·ͱΊͯ
   
   ϚΠϖʔδʹެ։Ͱ͖Δ
   ڈ೥8݄ʹػೳϦϦʔε
   

   View Slide

8. 8
   ࣗ෼ͷྉཧΛςʔϚͰදݱͨ͠Γݟ
   ฦͨ͠Γ͍͚ͨ͠Ͳɺݱঢ়ཷΊΕ͹
   ͨΊΔ΄ͲࢄΒ͔ͬͯ͠·͏
   Ϣʔβʔͷ
   ՝୊΍ԾઆΛ੔ཧ
   ࣗ෼ͷྉཧΛ೚ҙʹ·ͱΊΒΕΔ
   ͜ͱʹՁ஋͕͋Δ
   ϖʔύʔϞοΫ ΠϯλϥΫγϣϯ
   
   ϞοΫ
   ΞΠσΞΛ۩ମԽ
   
   
   ࣮ࡍʹࣗ෼Ͱ·ͱΊͯݟͯΈ͍ͨ
   ͦͷ্ͰϕετͳύλʔϯΛݟ͚͍ͭͨ
   G
   

   View Slide

9. ϓϩτλΠϓ؀ڥͷ঺հ
   9
   

   View Slide

10. 10
    ج൫ͱͯ͠3FDU/BUJWF
    render() { return Hello; }
    ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ
    EFWFMPQFS
    1SPUPUZQF-BCT
    ΞΠσΞͷՁ஋ݕূઐ༻ͷωΠςΟϒΞϓϦ
    

    View Slide

11. 11
    ج൫ͱͯ͠3FDU/BUJWF
    render() { return Hello; }
    ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ
    EFWFMPQFS
    1SPUPUZQF-BCT
    ΞΠσΞͷՁ஋ݕূઐ༻ͷωΠςΟϒΞϓϦ
    Կ͜Ε࠷ߴͰ͸ʜ
    

    View Slide

12. Կ͕࠷ߴʁ
    12
    •ʢωΠςΟϒʹൺ΂ͯʣٕज़తͳෑډ͕௿͍
    
    • WebͷϚʔΫΞοϓʹ׳Ε͍ͯΕ͹σβΠφʔͰ΋਌͠Έ΍͍͢ه๏ͰView
    ΍ελΠϧͷ࡞੒͕Ͱ͖Δ
    
    • ίϯϙʔωϯτ୯ҐͰϏϡʔ͕؅ཧ͞Ε͍ͯͯཧղ͠΍͍͢
    
    •iOS, AndroidͦΕͧΕʹ഑෍Ͱ͖Δʢςελʔ͕ීஈ࢖͍ͬͯΔ؀ڥͰΞϓϦΛఏ
    ڙͰ͖Δʣ
    

    View Slide

13. ࢖༻ྫ
    13
    Φʔφʔ݉ΤϯδχΞ σβΠφʔ
    UIΛݕ౼ ݕূ
    ࣮૷
    ػೳͷେ࿮Λ࣮૷
    ϓϩμΫγϣϯͷ
    ։ൃ΁
    G G
    

    View Slide

14. ࣮ࡍʹ৮ͬͯ΋Βͬͯ
    14
    ·ͱΊΔػೳྑ͍ʂ
    ±
    ·ͱΊΔର৅ΛϨγϐͷΈʹͨ͠ΒͲ͏ͩΖ͏ʁ࡞ͬͯΈΑ͏ɻ
    ͍Ζ͍Ζ·ͱΊΒΕΔ͜ͱΛߟ͚͑ͯͨͲɺ
    ΊͬͪΌ͍͍͡ΌΜ
    ±
    ͚Ͳ·ͱΊΔର৅͕ଟͯͪ͘ΐͬͱ໘౗ɻɻ
    → Ծઆ͕֬৴ʹ
    ϑΟʔυόοΫ͔Β͙͢վળҊΛग़ͯ͠ࢼͤΔ
    

    View Slide

15. ࣮ࡍʹ৮ͬͯ΋Βͬͯ
    15
    ࠓ3άϦουද͚ࣔͩͲ2άϦουʹͨ͠ΒͲ͏ͩΖ͏
    ࣮ࡍͷσʔλΛ࢖͍ͭͭखݩͰ͙͢ݕূͰ͖Δ
    2ʹͯ͠Έ͚ͨͲݟฦָͯ͘͠͠ͳ͍ͳɺ3ʹ͠Α͏ɻ
    

    View Slide

16. ϝϦοτ/σϝϦοτ
    16
    σβΠφʔͰ΋৮ΕΔϓϩτλΠϓͷ؆୯ͳ࣮૷͕ՄೳʹͳΓɺ
    ࣭ͷߴ͍ݕূ⁶վળΛҰ೚ͯ͠ૉૣ͘ߦ͑Δ
    
    
    ෳࡶͳը໘΍Ξχϝʔγϣϯͷදݱ͸ͮ͠Β͍
    

    View Slide

17. ·ͱΊ
    17
    •ʮ৮ΕΔϓϩτλΠϓʯΛ࢖ͬͨυοάϑʔσΟϯά΍ɺগਓ਺
    Ͱૉૣ͍ݕূ/վળͰ͖Δ؀ڥΛ׆༻͠ɺϢʔβʔͷମݧ޲্·Ͱ
    མͱ͠ࠐΜͰ͍Δɻ
    •࣭ͷߴ͍ݕূ͕Ͱ͖Δ൓໘ɺ։ൃίετ͕ߴ͍ͷͰɺద੾ͳ
    ϑΣʔζ΍໨తͰ࡞Δ͜ͱɺଞͷϓϩτλΠϓख๏ͱͷ࢖͍෼͚
    ͸ඞਢ
    ͱ͸͍͑
    

    View Slide

18. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide