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

Transcript

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

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

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

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

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

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

   ௿ίετͰૉૣ͍վળ͕Ͱ͖Δ؀ڥ + ཧ૝

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

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

   ϞοΫ ΞΠσΞΛ۩ମԽ ࣮ࡍʹࣗ෼Ͱ·ͱΊͯݟͯΈ͍ͨ ͦͷ্ͰϕετͳύλʔϯΛݟ͚͍ͭͨ G

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

10. 10 ج൫ͱͯ͠3FDU
    /BUJWF render() { return <Text>Hello</Text>; } ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ EFWFMPQFS 1SPUPUZQF
    -BCT

    ΞΠσΞͷՁ஋ݕূ
    ઐ༻ͷωΠςΟϒΞϓϦ

11. 11 ج൫ͱͯ͠3FDU
    /BUJWF render() { return <Text>Hello</Text>; } ΫοΫύουΞϓϦͷػೳ͕Ұ௨Γଗ͍ͬͯΔ EFWFMPQFS 1SPUPUZQF
    -BCT

    ΞΠσΞͷՁ஋ݕূ
    ઐ༻ͷωΠςΟϒΞϓϦ Կ͜Ε࠷ߴͰ͸ʜ

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

    ڙͰ͖Δʣ

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

    G G

14. ࣮ࡍʹ৮ͬͯ΋Βͬͯ 14 ·ͱΊΔػೳྑ͍ʂ ± ·ͱΊΔର৅ΛϨγϐͷΈʹͨ͠ΒͲ͏ͩΖ͏ʁ࡞ͬͯΈΑ͏ɻ ͍Ζ͍Ζ·ͱΊΒΕΔ͜ͱΛߟ͚͑ͯͨͲɺ ΊͬͪΌ͍͍͡ΌΜ ± ͚Ͳ·ͱΊΔର৅͕ଟͯͪ͘ΐͬͱ໘౗ɻɻ →

    Ծઆ͕֬৴ʹ ϑΟʔυόοΫ͔Β͙͢վળҊΛग़ͯ͠ࢼͤΔ

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

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

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

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