Save 37% off PRO during our Black Friday Sale! »

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

1cef832be53ef398756f0937fbd6e0df?s=47 Taiga Sano
April 11, 2018

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

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

1cef832be53ef398756f0937fbd6e0df?s=128

Taiga Sano

April 11, 2018
Tweet

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