$30 off During Our Annual Pro Sale. View Details »

React Nativeが 楽しく感じるまでの話

April 27, 2017

React Nativeが 楽しく感じるまでの話

React NativeでナビゲーションのライブラリやUIコンポーネント集を使って楽しくなってくるまでの話です。
言葉足らずでうまく伝えられなかったところはブログに書きました。
https://blog.mismithportfolio.com/web/reactkyoto1

April 27, 2017
Tweet

More Decks by ▲

Other Decks in Technology

Transcript

  1. 3FBDU/BUJWFƢ
    ޟƭƥ؎ƮǡǔƽDŽௗ

    3FBDULZPUPW

    View Slide

  2. ȬȆȬƀȌǼȫ
    !NJTVNJ@UBLVNB
    CMPHNJTNJUIQPSUGPMJPDPN
    NJTNJUI
    ૔՛ਸʬ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    View Slide

  3. 3FBDU/BUJWFƢ
    ޟƭƥ؎Ʈǡǔƽ

    View Slide

  4. 2ޟƭƥ؎ƮǡƹƼผ

    View Slide

  5. "ʧǁǞǡ

    View Slide

  6. ޟƭƥ؎ƮǡȪDZɀȕĹ
    • ܗ͢ǁȄȬȲȹɄȌɄƢ৘ƷɱƢƹƵ۶
    • ȚȐȕɱDŽȂɀȤȸȀɄȖǨ΋ơƭƼǕƵ۶
    • ȄȬȲȹɄȌɄǚӵ޺ƽ͢ǗƼ΋ƥƾƁƷǝƚ؎΋
    Ưǡ
    3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ƵƶƁӖƭƚƧƿƁƫƯƢǁܗ͢ƯƤǡDŽƽüƂ
    ȂɀȤȸDž૔͜Ƣ˖ǠƵƚǘDŽƮǙǀơƹƵǠƯǡ
    ƭüƂ

    View Slide

  7. [
    ޟƭƥ؎ƮǡȪDZɀȕĺ
    • ˖ǠƵƚǯȤȷDŽ޺ળǨӵச
    • ǯȤȷDŽक௬
    • ȷȷɄȆǔƽ
    3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    আơǁ೉ೊЀƶƧƿƁ͢׏ઊǁDžƚƣǀǠ॑٥ƯѨ
    طƾƭƼDžƣljƭƚüƂ
    ۶ജƢơơƹƼ٫يDŽϛળסƂ
    "JSCOC

    View Slide

  8. [
    ޟƭƥ؎ƮǡȪDZɀȕĻ
    • Ǟƥ˚ǥǢƼǡǯȤȷDŽȔȃDZɀǚ΋ƣƶƧǨग़ˊ
    ƼǕǡ
    • ȯȐǼƶƧ˖ƹƼǕǡ
    • ࣉǁ޺ળDžǀƚƧƿ
    3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    மƵ॑ƢƽƣƵǠƁ΋ƣƢƘǡƾஸƹƼƼޟƭƚก
    ȶDZȣȶȷǨ˚ƞdžƁƧƹƩƜਅίǁƽƣƷǙƜƂ
    ʫ۞DžƩDŽ౬ǠǨޟƭƥ؎ƮǡȪDZɀȕǁƯǡƂ

    View Slide

  9. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    • ƺǔƻƚƵƾƩ
    • ƺǔƻƚƵƾƩDŽஷ߽
    ʫ۞ௗƯƩƾ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ȗȠǿɄȄȴɀ
    • ȗȠǿɄȄȴɀƚǣƚǣ
    • ಧǩƶȶDZȣȶȷ
    மƵ॑Ǩƺƥǡ
    • /BUJWF#BTF
    • 6*ȀɀȪɄȚɀȕ്ƽமƵ॑ǚ΋ƣǨƺƥǡƾޟ

    View Slide

  10. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ

    View Slide

  11. ǵȶɄȮȐȈɄȅƢƩǥƚ
    • ǗƹƷǙహƥǀǡ
    • ƵƚƭƵǵȶɄƮǙǀƥƼǘग़ƹహǁ
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ǵȶɄȮȐȈɄȅǨǽǽǢdžஷ߽ࠒDžƽƼƥǡƂ
    ƶƚƵƚDŽǵȶɄDžȞȌɄɀΚƫǢǡDŽƽؕǢ
    ग़ƹహǁǀƹƼඵƥƧƿƁǔưǽǽǣƜƂ

    View Slide

  12. ȔȝȐǽƿƜƯǩDŽ
    • ǵȶɄȮȐȈɄȅǨǽǽǡƶƧƽDžƿƜǁǘƩƜǁ
    ǘü
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    $NE%ƽȮȘȲɄƢ৘ƷɱƢǡ
    Ƌ%FCVH+43FNPUFMZƌǨಧٌ
    ȣȶdzȃƽƋ3FBDU/BUJWF%FCVHHFSƌƢ৘Ʒ
    ɱƢǡ
    ȀɀȊɄȸƽƚǣƚǣமǢǡ

    View Slide

  13. 3FBDU/BUJWF%FCVHHFS
    • Ʃǩǀघ൧
    • ȢǮȠȀɀDŽ૬ǁࠗ؋
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    ԫ
    λϒΛબ୒ͯ͠Δͱ͖
    ଞͷλϒΛ։͍ͯΔͱ͖
    γϛϡϨʔλʔͷಈ͖͕΋ͬ͞Γ͢Δ
    փ γϡϛϨʔλʔ͕ىಈͯ͠ͳ͍ͱ͖

    View Slide

  14. غ΋ƽȷȺɄȖüผ
    • ȔȢǶȸȕƽDžغ΋ƽȷȺɄȖ
    • ҌܑƭƼߥйغ΋ȷȺɄȖDžƫƯƢǁǗǩƿƚ
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    $NE%ƽȮȘȲɄƢ৘ƷɱƢǡ
    Ƌ&OBCMF-JWF3FMPBEƌǨಧٌ
    ǵȔǰȌƽȢǮDZȸǨ˭ӝ
    ȄȬȲȹɄȌɄƢ૔΋ƽȷȺɄȖƫǢǡ

    View Slide

  15. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕǔƾǗ
    • ǵȶɄȮȐȈɄȅDŽ̫ܛ
    • 3FBDU/BUJWF%FCVHHFSǨƺơƜ
    • -JWF3FMPBEǨ0/ǁƯǡ
    3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ƩDŽƺǨǚǡƶƧƽǘƁƶƚnjȯȎȦɄȄȴɀƢҌǥǠǔƭƵƂ
    ʰǁǘങाǨ˧ͥǁƭƼƥǢǡǘDŽƢƘǡơǘƭǢǔƱǩƂ

    View Slide

  16. ȗȠǿɄȄȴɀ

    View Slide

  17. ǯȤȷDŽȗȠǿɄȄȴɀƚǣƚǣ
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    4UBDL
    ্ʹॏͳ͍ͬͯ͘
    %SBXFS
    ࠨӈ͔Βग़ͯ͘Δ΍ͭ
    5BC
    λϒ੾Γସ͑
    εϫΠϓͰ੾Γସ͑ΒΕΔλϒ΋
    QY
    (PPHMF
    5XJUUFS
    *OTUBHSBN

    View Slide

  18. ȗȠǿɄȄȴɀDžǸǷȆǟƭƚü
    • 3FBDU/BWJHBUJPO
    • 3FBDU3PVUFS/BUJWF
    • /BUJWF/BWJHBUJPOฆ"JSCOC஢ง
    • 3FBDU/BUJWF3PVUFS'MVY
    • 3FBDU/BUJWF/BWJHBUJPOฆ8JY஢ง
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ȶDZȣȶȷϪƢǸǷȆƂ
    ǽǽȶȠȷȓǰƢȱȝƚƂ
    /BWJHBUPSƾơ/BWJHBUPS*04ƾơƘǡƧƿƁǚƹLJȶDZȣȶȷƢƠغౙƂ

    View Slide

  19. ௒ƭƼǕƵƺ
    3FBDU/BWJHBUJPO
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • ƶƚƵƚDŽƩƾDžƽƣǡƂ೔ǃƁȌȣฆȆȼDZȤǘงƁɲơǟƁȖȺȼɄ
    • ȀȬȲȘȓǰڇƭǟƭƚυઉ3FBDUKT3FBDU/BUJWFNFFUVQǯɀǾɄȕఴЙǁ৲ƞƵƚ
    3FBDU/BUJWF3PVUFS'MVY
    • ˚ƚǚƯƚ
    • ɬԍǀீʔƢƘƹƼƘǠƢƵƚυઉ3FBDU/BUJWF3PVUFS'MVYǨ˚ƹƼǕǔƱǩơɾɾɾผ
    3FBDU/BUJWF/BWJHBUJPO
    • ඹ޺ળƹǓƚ
    • Ԝ̱ƢƺǟơƹƵüฆJ04ǀǟ"QQ%FMFHBUFNƾƚƜȢǮDZȸǨ˰ߐƯǡא஫
    ƢƘǡ

    View Slide

  20. ƿDŽȗȠǿɄȄȴɀƢƚƚผ
    ȗȠǿɄȄȴɀ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • 3FBDU/BWJHBUJPOơ3FBDU/BUJWF3PVUFS'MVYƢǞƫƳ
    Ɯฆ܈ӱ
    • ȖǺȲȮɀȕǚȂɀȤȸȀɄȖǨǕǢdžǥơǡ
    • 3FBDU/BWJHBUJPODžǞǠȚDZȓǰȣƹǓƚDZȮɄȅ

    ȧɄȅDŽֺƾơ
    ƿǢƢƚƚơDžߐ॓͜ơǟǀƚƂ
    ಙ։ܡǀDŽƽƾǁơƥ˚ƹƼƚƣǔƭǝƜƂ
    ȣȺǽ৭ƽ̶ܙƭƼƥƶƫƚƂ

    View Slide

  21. மƵ॑Ǩƺƥǡ

    View Slide

  22. 3FBDU/BUJWFDŽமƵ॑ǚ΋ƣǨƺƥǡ
    • 3FBDU/BUJWFDž$44ƽܒƧǡกࣖࣉƶƧƿü
    • ȶDZȣȶȷƢமƺơǡƾਅίǁ
    • ȗȠǿɄȄȴɀǁ;ƞƼƁȹDZǯdzȕǨ˖ǡƾǯȤ
    ȷƹǓƥǀƹƼƥǡ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    மƵ॑ǚ΋ƣƢƽƣǡƾޟƭƚƂ
    ޺ળDžǀƚǁƭƼǘƁǯȤȷ˖ƹƼǡ؎ƢƽǡƂ
    ࣉǁǯDZȔǰǯǀƚƜƷDžƁமƵ॑˖ƹƼಖǩƽǕǡDŽǘǯȷƂ

    View Slide

  23. /BUJWF#BTFƾƚƜDŽƢƘǠǔƯ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • Ǟƥ˚ǥǢǡ6*ȀɀȪɄȚɀȕƢƚǣƚǣऐ؋ƫǢƼƚǡ
    • DZɀȪɄȕƭƼȖǺȲȮɀȕಇǠܒƧdžਅίǁ˚ƞǡ
    • Ƙǡ঵։DŽமƵ॑DžƩǢƽ0,
    IUUQTOBUJWFCBTFJP
    (JU)VCελʔ
    "QBDIF-JDFOTF

    View Slide

  24. /BUJWF#BTFDŽ࡝̏
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ZBSOBEEOBUJWFCBTF
    OQNJOTUBMMOBUJWFCBTFŠTBWF
    Πϯετʔϧ
    SFBDUOBUJWFMJOL
    ωΠςΟϒͱͷґଘؔ܎ΛϦϯΫ͢Δ

    View Slide

  25. ˚ƚۖ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\)FBEFS $POUBJOFS^GSPNOBUJWFCBTF
    ඞཁͳ΋ͷΛΠϯϙʔτ
    dলུd
    SFOEFS
    \
    SFUVSO
    $POUBJOFS
    )FBEFS
    )FBEFS
    $POUBJOFS


    ^
    dলུd
    )FBEFS͕
    ௥Ճ͞Εͨ

    View Slide

  26. ʰǁǘɾɾɾ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\)FBEFS $POUBJOFS #PEZ -FGU 3JHIU 5JUMF
    #VUUPO *DPO^GSPNOBUJWFCBTF
    )FBEFSҎ֎ʹ΋-FGU 3JHIU΍*DPOͳͲ௥Ճ
    λΠτϧ΍
    ΞΠίϯ΋௥Ճ
    -FGU 3JHIUƽ՗ϟǁಾੳƂ
    *DPOƽǯDZȀɀǨಾੳƽƣǡƂ

    View Slide

  27. -JTU
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTF
    -JTU -JTU*UFNΛ௥Ճ
    ޮ࡝DŽȷȆȕDŽமƵ॑ƢਅίǁƂ
    dলུd
    -JTU
    -JTU*UFN
    5FYUԘλϯম͖5FYU
    -JTU*UFN
    -JTU

    View Slide

  28. -JTUǁம͘ƭǨ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    JNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTF
    JUFN%JWJEFS௥Ճ
    ȷȆȕǁம͘ƭǨƺƧǡDŽǘਅίƂ
    dলུd
    -JTU
    -JTU*UFNJUFN%JWJEFS
    5FYUԘম͖෺5FYU
    -JTU*UFN
    -JTU

    View Slide

  29. -JTUǁȂȭȚDZȸǚ१εǘ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    dলུd
    -JTU
    -JTU*UFNJUFN%JWJEFS
    5IVNCOBJMTRVBSFTJ[F\^
    TPVSDF\SFRVJSF ը૾ύε
    ^
    #PEZ
    5FYUԘλϯম͖5FYU
    #PEZ
    3JHIU
    *DPOOBNFBSSPXGPSXBSE
    3JHIU
    -JTU*UFN
    -JTU

    View Slide

  30. ƩǢƦǟƚǀǟ
    $44ƽܒƧƳƜผผ

    View Slide

  31. "OESPJEऐǘ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    • /BUJWF#BTFDŽƚƚƾƩǣDžɫƺDŽȀɄȖƽJ04ƾ
    "OESPJEDŽɻۖǨ˖ƹƼƥǢǡƾƩǣ
    • J04ǚ"OESPJEDŽமƵ॑DŽಜƚǨઉƞǀƥƼǞƥǀǡ
    • ѝঌDž/BUJWF#BTFǁʻƱƼƁਸ਼ơƚ௪ۂDž౼;ƽ$44
    ǨܒƚƼƚƧdžޟǁƽƣǡ

    View Slide

  32. ʰǁǘƵƥƫǩऐ؋ƫǢƼƚǔƯ
    • ȩȌɀ
    • ȢǶɄȭഝಌ
    • ǸɄȖ
    • ȌȣฆȆȼDZȤƽ͝ǠܖƞǟǢǡǚƺǘง
    • ȆȡȗɄ
    மƵ॑Ǩƺƥǡ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    ௙ƭƥDž/BUJWF#BTFDŽȖǺȲȮɀȕȂDZȕƽƂ

    ƷǝƚƷǝƚജಜƹƼǡDŽƽࠗ؋üƂ
    ജಜƚǨமƺƧƵǟȤȸȷǼ౾ǢǔƯƂ
    ·ͩ·ͩͨ͘͞Μʜ
    IUUQTHJUIVCDPN(FFLZ"OUTOBUJWFCBTFEPDT

    View Slide

  33. ȂɀȤȸǨƺƥƹƼǕƵ

    View Slide

  34. ȗȠǿɄȄȴɀฉ/BUJWF#BTF
    • ȗȠǿɄȄȴɀƾ/BUJWF#BTFǨ˚ƞdžƘǡ঵։DŽǘ
    DŽDžƽƣƘƢǡ
    • 4UBDLฆ೔ǀǠงƾȌȣDž3FBDU/BWJHBUJPO
    • ȷȆȕǚȆȼDZȤƽ͝ǠܖǥǡȌȣƁȥȐȍɄǀƿ
    Dž/BUJWF#BTF
    ȂɀȤȸǨƺƥƹƼǕƵ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    View Slide

  35. 813&45"1*ǘ̱ǢƼǕǡ
    • 8PSE1SFTTDŽீʔȔɄȌǀƿǨώ׆ƽƣǡ"1*
    • 8PSE1SFTTƽ˖ƹƵȣȺǽǨǯȤȷΚƭƼǕǡฆ$PEF(SJEǯȤȷǕƵƚǀǚƺ
    • ீʔɫளȧɄȅǚǸȓȁȷǨȆȼDZȤƽ͝ǠܖƞƁޑਲȧɄȅǀƿ
    ȂɀȤȸǨƺƥƹƼǕƵ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    View Slide

  36. %FNP

    View Slide

  37. ਅίǀȣȺǽȷɄȍɄǯȤȷ
    ȂɀȤȸǨƺƥƹƼǕƵ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    هࣄҰཡϖʔδ
    هࣄΛબ୒͢Δͱ
    هࣄৄࡉ΁
    εϫΠϓૢ࡞͔
    ΧςΰϦͷλϒΛબ୒͢Δͱ
    ৽ண΍ΧςΰϦͷ੾Γସ͑
    ݕࡧϖʔδͰ͸
    ϑϦʔϫʔυݕࡧͱ
    λάݕࡧ

    View Slide

  38. ਅίǁǯȤȷƢƽƣƵ
    • ܗˏബDŽ޺ળƶƧƿƁǯȤȷDžƽƣƵ
    • $44ǨܒơǀƥƼǘȗȠǿɄȄȴɀDŽȶDZȣȶȷƾ
    /BUJWF#BTFǨ˚ƞǢdžƁƘǡ঵։DŽமƵ॑Ƣƽƣǡ
    • மƵ॑ƫƞ˖ǢǢdžƘƾDžǯDZȔǰǯ߅৩
    • 813&45"1*ƾơ˔ơ̴ങƫǢƼǡ"1*Ǩ˚ƜƶƧƽ
    ǘ൧ीƚǘDŽƽƣƳƜ
    ǔƾǗ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    "OESPJE΋Ͱ͖ͯͨ
    +
    ƚǣǩǀȶDZȣȶȷஸƹƼǕǞƜƂ
    ƩDŽǯǸdzɀȕƢƽƣƵƼDŽȶDZȣȶȷǨǞƥȑ
    DZɄȕƭƼǔƯ +4$PBDI !@KTDPBDI

    View Slide

  39. 813&45"1*ǁƺƚƼDžü
    • ̊ࢠǁǘʤಹƽ8PSE$BOQ,ZPUPƢങ̐ƫǢǔƯ
    • 813&45"1*ǨDžƮǗƁ8PSE1SFTTǁബǟưƚǣƚǣǀௗƢઓƧǡơǘ

    ฆȌDZȭȆǾȅȲɄȸDžƩǢơǟง
    • ȆȌȐȢǚƹƼǔƯฆƵƶDŽӷ˄ƽƯกง
    ǔƾǗ
    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
    շܘ ۞
    ˃ѨทʤಹҔӣ
    IUUQTLZPUPXPSEDBNQPSH

    View Slide

  40. ƠǥǠ

    3FBDULZPUPW

    View Slide