Pro Yearly is on sale from $80 to $50! »

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

7e56a691cfb413e0f6e631791f33fe54?s=47 misumi
April 27, 2017

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

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

7e56a691cfb413e0f6e631791f33fe54?s=128

misumi

April 27, 2017
Tweet

Transcript

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

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

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

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

  5. "ʧǁǞǡ

  6. ޟƭƥ؎ƮǡȪDZɀȕĹ • ܗ͢ǁȄȬȲȹɄȌɄƢ৘ƷɱƢƹƵ۶ • ȚȐȕɱDŽȂɀȤȸȀɄȖǨ΋ơƭƼǕƵ۶ • ȄȬȲȹɄȌɄǚӵ޺ƽ͢ǗƼ΋ƥƾƁƷǝƚ؎΋ Ưǡ 3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    ƵƶƁӖƭƚƧƿƁƫƯƢǁܗ͢ƯƤǡDŽƽüƂ ȂɀȤȸDž૔͜Ƣ˖ǠƵƚǘDŽƮǙǀơƹƵǠƯǡ ƭüƂ
  7. [ ޟƭƥ؎ƮǡȪDZɀȕĺ • ˖ǠƵƚǯȤȷDŽ޺ળǨӵச • ǯȤȷDŽक௬ • ȷȷɄȆǔƽ 3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    আơǁ೉ೊЀƶƧƿƁ͢׏ઊǁDžƚƣǀǠ॑٥ƯѨ طƾƭƼDžƣljƭƚüƂ ۶ജƢơơƹƼ٫يDŽϛળסƂ "JSCOC
  8. [ ޟƭƥ؎ƮǡȪDZɀȕĻ • Ǟƥ˚ǥǢƼǡǯȤȷDŽȔȃDZɀǚ΋ƣƶƧǨग़ˊ ƼǕǡ • ȯȐǼƶƧ˖ƹƼǕǡ • ࣉǁ޺ળDžǀƚƧƿ 3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ

    3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ மƵ॑ƢƽƣƵǠƁ΋ƣƢƘǡƾஸƹƼƼޟƭƚก ȶDZȣȶȷǨ˚ƞdžƁƧƹƩƜਅίǁƽƣƷǙƜƂ ʫ۞DžƩDŽ౬ǠǨޟƭƥ؎ƮǡȪDZɀȕǁƯǡƂ
  9. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ • ƺǔƻƚƵƾƩ • ƺǔƻƚƵƾƩDŽஷ߽ ʫ۞ௗƯƩƾ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ȗȠǿɄȄȴɀ • ȗȠǿɄȄȴɀƚǣƚǣ

    • ಧǩƶȶDZȣȶȷ மƵ॑Ǩƺƥǡ • /BUJWF#BTF • 6*ȀɀȪɄȚɀȕ്ƽமƵ॑ǚ΋ƣǨƺƥǡƾޟ
  10. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ

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

  12. ȔȝȐǽƿƜƯǩDŽ • ǵȶɄȮȐȈɄȅǨǽǽǡƶƧƽDžƿƜǁǘƩƜǁ ǘü 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ  $NE %ƽȮȘȲɄƢ৘ƷɱƢǡ 

    Ƌ%FCVH+43FNPUFMZƌǨಧٌ  ȣȶdzȃƽƋ3FBDU/BUJWF%FCVHHFSƌƢ৘Ʒ ɱƢǡ  ȀɀȊɄȸƽƚǣƚǣமǢǡ
  13. 3FBDU/BUJWF%FCVHHFS • Ʃǩǀघ൧ • ȢǮȠȀɀDŽ૬ǁࠗ؋ 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ੨ ԫ λϒΛબ୒ͯ͠Δͱ͖

    ଞͷλϒΛ։͍ͯΔͱ͖ γϛϡϨʔλʔͷಈ͖͕΋ͬ͞Γ͢Δ փ γϡϛϨʔλʔ͕ىಈͯ͠ͳ͍ͱ͖
  14. غ΋ƽȷȺɄȖüผ • ȔȢǶȸȕƽDžغ΋ƽȷȺɄȖ • ҌܑƭƼߥйغ΋ȷȺɄȖDžƫƯƢǁǗǩƿƚ 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ  $NE %ƽȮȘȲɄƢ৘ƷɱƢǡ

     Ƌ&OBCMF-JWF3FMPBEƌǨಧٌ  ǵȔǰȌƽȢǮDZȸǨ˭ӝ  ȄȬȲȹɄȌɄƢ૔΋ƽȷȺɄȖƫǢǡ
  15. 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕǔƾǗ • ǵȶɄȮȐȈɄȅDŽ̫ܛ • 3FBDU/BUJWF%FCVHHFSǨƺơƜ • -JWF3FMPBEǨ0/ǁƯǡ 3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ƩDŽƺǨǚǡƶƧƽǘƁƶƚnjȯȎȦɄȄȴɀƢҌǥǠǔƭƵƂ

    ʰǁǘങाǨ˧ͥǁƭƼƥǢǡǘDŽƢƘǡơǘƭǢǔƱǩƂ
  16. ȗȠǿɄȄȴɀ

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

    QY (PPHMF 5XJUUFS *OTUBHSBN
  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ȣȶȷƢƠغౙƂ
  19. ௒ƭƼǕƵƺ 3FBDU/BWJHBUJPO ȗȠǿɄȄȴɀ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • ƶƚƵƚDŽƩƾDžƽƣǡƂ೔ǃƁȌȣฆȆȼDZȤǘงƁɲơǟƁȖȺȼɄ • ȀȬȲȘȓǰڇƭǟƭƚυઉ3FBDUKT3FBDU/BUJWFNFFUVQǯɀǾɄȕఴЙǁ৲ƞƵƚ 3FBDU/BUJWF3PVUFS'MVY •

    ˚ƚǚƯƚ • ɬԍǀீʔƢƘƹƼƘǠƢƵƚυઉ3FBDU/BUJWF3PVUFS'MVYǨ˚ƹƼǕǔƱǩơɾɾɾผ 3FBDU/BUJWF/BWJHBUJPO • ඹ޺ળƹǓƚ • Ԝ̱ƢƺǟơƹƵüฆJ04ǀǟ"QQ%FMFHBUFNƾƚƜȢǮDZȸǨ˰ߐƯǡא஫ ƢƘǡ
  20. ƿDŽȗȠǿɄȄȴɀƢƚƚผ ȗȠǿɄȄȴɀ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • 3FBDU/BWJHBUJPOơ3FBDU/BUJWF3PVUFS'MVYƢǞƫƳ Ɯฆ܈ӱ • ȖǺȲȮɀȕǚȂɀȤȸȀɄȖǨǕǢdžǥơǡ • 3FBDU/BWJHBUJPODžǞǠȚDZȓǰȣƹǓƚDZȮɄȅ


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

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

    மƵ॑ǚ΋ƣƢƽƣǡƾޟƭƚƂ ޺ળDžǀƚǁƭƼǘƁǯȤȷ˖ƹƼǡ؎ƢƽǡƂ ࣉǁǯDZȔǰǯǀƚƜƷDžƁமƵ॑˖ƹƼಖǩƽǕǡDŽǘǯȷƂ
  23. /BUJWF#BTFƾƚƜDŽƢƘǠǔƯ மƵ॑Ǩƺƥǡ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ • Ǟƥ˚ǥǢǡ6*ȀɀȪɄȚɀȕƢƚǣƚǣऐ؋ƫǢƼƚǡ • DZɀȪɄȕƭƼȖǺȲȮɀȕಇǠܒƧdžਅίǁ˚ƞǡ • Ƙǡ঵։DŽமƵ॑DžƩǢƽ0, IUUQTOBUJWFCBTFJP

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

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

     $POUBJOFS )FBEFS )FBEFS $POUBJOFS   ^ dলུd )FBEFS͕ ௥Ճ͞Εͨ
  26. ʰǁǘɾɾɾ மƵ॑Ǩƺƥǡ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ JNQPSU\)FBEFS $POUBJOFS #PEZ -FGU 3JHIU 5JUMF 

    #VUUPO *DPO^GSPNOBUJWFCBTF )FBEFSҎ֎ʹ΋-FGU 3JHIU΍*DPOͳͲ௥Ճ λΠτϧ΍ ΞΠίϯ΋௥Ճ -FGU 3JHIUƽ՗ϟǁಾੳƂ *DPOƽǯDZȀɀǨಾੳƽƣǡƂ
  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
  28. -JTUǁம͘ƭǨ மƵ॑Ǩƺƥǡ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ JNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTF JUFN%JWJEFS௥Ճ ȷȆȕǁம͘ƭǨƺƧǡDŽǘਅίƂ dলུd -JTU

    -JTU*UFNJUFN%JWJEFS 5FYUԘম͖෺5FYU -JTU*UFN -JTU
  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
  30. ƩǢƦǟƚǀǟ $44ƽܒƧƳƜผผ

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

    ǨܒƚƼƚƧdžޟǁƽƣǡ
  32. ʰǁǘƵƥƫǩऐ؋ƫǢƼƚǔƯ • ȩȌɀ • ȢǶɄȭഝಌ • ǸɄȖ • ȌȣฆȆȼDZȤƽ͝ǠܖƞǟǢǡǚƺǘง •

    ȆȡȗɄ மƵ॑Ǩƺƥǡ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ ௙ƭƥDž/BUJWF#BTFDŽȖǺȲȮɀȕȂDZȕƽƂ
 ƷǝƚƷǝƚജಜƹƼǡDŽƽࠗ؋üƂ ജಜƚǨமƺƧƵǟȤȸȷǼ౾ǢǔƯƂ ·ͩ·ͩͨ͘͞Μʜ IUUQTHJUIVCDPN(FFLZ"OUTOBUJWFCBTFEPDT
  33. ȂɀȤȸǨƺƥƹƼǕƵ

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

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

  36. %FNP

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

    ϑϦʔϫʔυݕࡧͱ λάݕࡧ
  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
  39. 813&45"1*ǁƺƚƼDžü • ̊ࢠǁǘʤಹƽ8PSE$BOQ,ZPUPƢങ̐ƫǢǔƯ • 813&45"1*ǨDžƮǗƁ8PSE1SFTTǁബǟưƚǣƚǣǀௗƢઓƧǡơǘ
 ฆȌDZȭȆǾȅȲɄȸDžƩǢơǟง • ȆȌȐȢǚƹƼǔƯฆƵƶDŽӷ˄ƽƯกง ǔƾǗ 3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ

    շܘ ۞ ˃ѨทʤಹҔӣ IUUQTLZPUPXPSEDBNQPSH
  40. ƠǥǠ  3FBDULZPUPW