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

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

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠