React NativeでナビゲーションのライブラリやUIコンポーネント集を使って楽しくなってくるまでの話です。 言葉足らずでうまく伝えられなかったところはブログに書きました。 https://blog.mismithportfolio.com/web/reactkyoto1
3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ3FBDULZPUPW
View Slide
ȬȆȬƀȌǼȫ!NJTVNJ@UBLVNBCMPHNJTNJUIQPSUGPMJPDPNNJTNJUI՛ਸʬ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽ
2ޟƭƥ؎ƮǡƹƼผ
"ʧǁǞǡ
ޟƭƥ؎ƮǡȪDZɀȕĹ• ܗ͢ǁȄȬȲȹɄȌɄƢƷɱƢƹƵ۶• ȚȐȕɱDŽȂɀȤȸȀɄȖǨơƭƼǕƵ۶• ȄȬȲȹɄȌɄǚӵƽ͢ǗƼƥƾƁƷǝƚ؎Ưǡ3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗƵƶƁӖƭƚƧƿƁƫƯƢǁܗ͢ƯƤǡDŽƽüƂȂɀȤȸDž͜Ƣ˖ǠƵƚǘDŽƮǙǀơƹƵǠƯǡƭüƂ
[ޟƭƥ؎ƮǡȪDZɀȕĺ• ˖ǠƵƚǯȤȷDŽળǨӵச• ǯȤȷDŽक௬• ȷȷɄȆǔƽ3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗআơǁೊЀƶƧƿƁ͢ઊǁDžƚƣǀǠ॑٥ƯѨطƾƭƼDžƣljƭƚüƂ۶ജƢơơƹƼ٫يDŽϛળסƂ"JSCOC
[ޟƭƥ؎ƮǡȪDZɀȕĻ• Ǟƥ˚ǥǢƼǡǯȤȷDŽȔȃDZɀǚƣƶƧǨग़ˊƼǕǡ• ȯȐǼƶƧ˖ƹƼǕǡ• ࣉǁળDžǀƚƧƿ3FBDU/BUJWFƢޟƭƥ؎Ʈǡǔƽผ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗமƵ॑ƢƽƣƵǠƁƣƢƘǡƾஸƹƼƼޟƭƚกȶDZȣȶȷǨ˚ƞdžƁƧƹƩƜਅίǁƽƣƷǙƜƂʫ۞DžƩDŽ౬ǠǨޟƭƥ؎ƮǡȪDZɀȕǁƯǡƂ
3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ• ƺǔƻƚƵƾƩ• ƺǔƻƚƵƾƩDŽஷ߽ʫ۞ௗƯƩƾ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗȗȠǿɄȄȴɀ• ȗȠǿɄȄȴɀƚǣƚǣ• ಧǩƶȶDZȣȶȷமƵ॑Ǩƺƥǡ• /BUJWF#BTF• 6*ȀɀȪɄȚɀȕ്ƽமƵ॑ǚƣǨƺƥǡƾޟ
3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ
ǵȶɄȮȐȈɄȅƢƩǥƚ• ǗƹƷǙహƥǀǡ• ƵƚƭƵǵȶɄƮǙǀƥƼǘग़ƹహǁ3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗǵȶɄȮȐȈɄȅǨǽǽǢdžஷ߽ࠒDžƽƼƥǡƂƶƚƵƚDŽǵȶɄDžȞȌɄɀΚƫǢǡDŽƽؕǢग़ƹహǁǀƹƼඵƥƧƿƁǔưǽǽǣƜƂ
ȔȝȐǽƿƜƯǩDŽ• ǵȶɄȮȐȈɄȅǨǽǽǡƶƧƽDžƿƜǁǘƩƜǁǘü3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ $NE%ƽȮȘȲɄƢƷɱƢǡ Ƌ%FCVH+43FNPUFMZƌǨಧٌ ȣȶdzȃƽƋ3FBDU/BUJWF%FCVHHFSƌƢƷɱƢǡ ȀɀȊɄȸƽƚǣƚǣமǢǡ
3FBDU/BUJWF%FCVHHFS• Ʃǩǀघ൧• ȢǮȠȀɀDŽ૬ǁࠗ؋3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ੨ԫλϒΛબͯ͠Δͱ͖ଞͷλϒΛ։͍ͯΔͱ͖γϛϡϨʔλʔͷಈ͖͕ͬ͞Γ͢Δփ γϡϛϨʔλʔ͕ىಈͯ͠ͳ͍ͱ͖
غƽȷȺɄȖüผ• ȔȢǶȸȕƽDžغƽȷȺɄȖ• ҌܑƭƼߥйغȷȺɄȖDžƫƯƢǁǗǩƿƚ3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ $NE%ƽȮȘȲɄƢƷɱƢǡ Ƌ&OBCMF-JWF3FMPBEƌǨಧٌ ǵȔǰȌƽȢǮDZȸǨ˭ӝ ȄȬȲȹɄȌɄƢƽȷȺɄȖƫǢǡ
3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕǔƾǗ• ǵȶɄȮȐȈɄȅDŽ̫ܛ• 3FBDU/BUJWF%FCVHHFSǨƺơƜ• -JWF3FMPBEǨ0/ǁƯǡ3FBDU/BUJWFDŽƺǔƻƣȪDZɀȕ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗƩDŽƺǨǚǡƶƧƽǘƁƶƚnjȯȎȦɄȄȴɀƢҌǥǠǔƭƵƂʰǁǘങाǨ˧ͥǁƭƼƥǢǡǘDŽƢƘǡơǘƭǢǔƱǩƂ
ȗȠǿɄȄȴɀ
ǯȤȷDŽȗȠǿɄȄȴɀƚǣƚǣȗȠǿɄȄȴɀ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ4UBDL্ʹॏͳ͍ͬͯ͘%SBXFSࠨӈ͔Βग़ͯ͘Δͭ5BCλϒΓସ͑εϫΠϓͰΓସ͑ΒΕΔλϒQY(PPHMF5XJUUFS*OTUBHSBN
ȗȠǿɄȄȴɀDžǸǷȆǟƭƚü• 3FBDU/BWJHBUJPO• 3FBDU3PVUFS/BUJWF• /BUJWF/BWJHBUJPOฆ"JSCOCง• 3FBDU/BUJWF3PVUFS'MVY• 3FBDU/BUJWF/BWJHBUJPOฆ8JYงȗȠǿɄȄȴɀ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗȶDZȣȶȷϪƢǸǷȆƂǽǽȶȠȷȓǰƢȱȝƚƂ/BWJHBUPSƾơ/BWJHBUPS*04ƾơƘǡƧƿƁǚƹLJȶDZȣȶȷƢƠغౙƂ
ƭƼǕƵƺ3FBDU/BWJHBUJPOȗȠǿɄȄȴɀ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ• ƶƚƵƚDŽƩƾDžƽƣǡƂǃƁȌȣฆȆȼDZȤǘงƁɲơǟƁȖȺȼɄ• ȀȬȲȘȓǰڇƭǟƭƚυઉ3FBDUKT3FBDU/BUJWFNFFUVQǯɀǾɄȕఴЙǁ৲ƞƵƚ3FBDU/BUJWF3PVUFS'MVY• ˚ƚǚƯƚ• ɬԍǀீʔƢƘƹƼƘǠƢƵƚυઉ3FBDU/BUJWF3PVUFS'MVYǨ˚ƹƼǕǔƱǩơɾɾɾผ3FBDU/BUJWF/BWJHBUJPO• ඹળƹǓƚ• Ԝ̱ƢƺǟơƹƵüฆJ04ǀǟ"QQ%FMFHBUFNƾƚƜȢǮDZȸǨ˰ߐƯǡאƢƘǡ
ƿDŽȗȠǿɄȄȴɀƢƚƚผȗȠǿɄȄȴɀ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ• 3FBDU/BWJHBUJPOơ3FBDU/BUJWF3PVUFS'MVYƢǞƫƳƜฆ܈ӱ• ȖǺȲȮɀȕǚȂɀȤȸȀɄȖǨǕǢdžǥơǡ• 3FBDU/BWJHBUJPODžǞǠȚDZȓǰȣƹǓƚDZȮɄȅ ȧɄȅDŽֺƾơƿǢƢƚƚơDžߐ॓͜ơǟǀƚƂಙ։ܡǀDŽƽƾǁơƥ˚ƹƼƚƣǔƭǝƜƂȣȺǽ৭ƽ̶ܙƭƼƥƶƫƚƂ
மƵ॑Ǩƺƥǡ
3FBDU/BUJWFDŽமƵ॑ǚƣǨƺƥǡ• 3FBDU/BUJWFDž$44ƽܒƧǡกࣖࣉƶƧƿü• ȶDZȣȶȷƢமƺơǡƾਅίǁ• ȗȠǿɄȄȴɀǁ;ƞƼƁȹDZǯdzȕǨ˖ǡƾǯȤȷƹǓƥǀƹƼƥǡமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗமƵ॑ǚƣƢƽƣǡƾޟƭƚƂળDžǀƚǁƭƼǘƁǯȤȷ˖ƹƼǡ؎ƢƽǡƂࣉǁǯDZȔǰǯǀƚƜƷDžƁமƵ॑˖ƹƼಖǩƽǕǡDŽǘǯȷƂ
/BUJWF#BTFƾƚƜDŽƢƘǠǔƯமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ• Ǟƥ˚ǥǢǡ6*ȀɀȪɄȚɀȕƢƚǣƚǣऐ؋ƫǢƼƚǡ• DZɀȪɄȕƭƼȖǺȲȮɀȕಇǠܒƧdžਅίǁ˚ƞǡ• Ƙǡ։DŽமƵ॑DžƩǢƽ0,IUUQTOBUJWFCBTFJP(JU)VCελʔ"QBDIF-JDFOTF
/BUJWF#BTFDŽ̏மƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗZBSOBEEOBUJWFCBTFOQNJOTUBMMOBUJWFCBTFTBWFΠϯετʔϧSFBDUOBUJWFMJOLωΠςΟϒͱͷґଘؔΛϦϯΫ͢Δ
˚ƚۖமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗJNQPSU\)FBEFS $POUBJOFS^GSPNOBUJWFCBTFඞཁͳͷΛΠϯϙʔτdলུdSFOEFS \SFUVSO $POUBJOFS)FBEFS)FBEFS$POUBJOFS^dলུd)FBEFS͕Ճ͞Εͨ
ʰǁǘɾɾɾமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗJNQPSU\)FBEFS $POUBJOFS #PEZ -FGU 3JHIU 5JUMF #VUUPO *DPO^GSPNOBUJWFCBTF)FBEFSҎ֎ʹ-FGU 3JHIU*DPOͳͲՃλΠτϧΞΠίϯՃ-FGU 3JHIUƽϟǁಾੳƂ*DPOƽǯDZȀɀǨಾੳƽƣǡƂ
-JTUமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗJNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTF-JTU -JTU*UFNΛՃޮDŽȷȆȕDŽமƵ॑ƢਅίǁƂdলུd-JTU-JTU*UFN5FYUԘλϯম͖5FYU-JTU*UFN-JTU
-JTUǁம͘ƭǨமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗJNQPSU\ʜলུ -JTU -JTU*UFN^GSPNOBUJWFCBTFJUFN%JWJEFSՃȷȆȕǁம͘ƭǨƺƧǡDŽǘਅίƂdলུd-JTU-JTU*UFNJUFN%JWJEFS5FYUԘম͖5FYU-JTU*UFN-JTU
-JTUǁȂȭȚDZȸǚ१εǘமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗdলུd-JTU-JTU*UFNJUFN%JWJEFS5IVNCOBJMTRVBSFTJ[F\^TPVSDF\SFRVJSF ը૾ύε^#PEZ5FYUԘλϯম͖5FYU#PEZ3JHIU*DPOOBNFBSSPXGPSXBSE3JHIU-JTU*UFN-JTU
ƩǢƦǟƚǀǟ$44ƽܒƧƳƜผผ
"OESPJEऐǘமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ• /BUJWF#BTFDŽƚƚƾƩǣDžɫƺDŽȀɄȖƽJ04ƾ"OESPJEDŽɻۖǨ˖ƹƼƥǢǡƾƩǣ• J04ǚ"OESPJEDŽமƵ॑DŽಜƚǨઉƞǀƥƼǞƥǀǡ• ѝঌDž/BUJWF#BTFǁʻƱƼƁਸ਼ơƚ௪ۂDž౼;ƽ$44ǨܒƚƼƚƧdžޟǁƽƣǡ
ʰǁǘƵƥƫǩऐ؋ƫǢƼƚǔƯ• ȩȌɀ• ȢǶɄȭഝಌ• ǸɄȖ• ȌȣฆȆȼDZȤƽ͝ǠܖƞǟǢǡǚƺǘง• ȆȡȗɄமƵ॑Ǩƺƥǡ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗƭƥDž/BUJWF#BTFDŽȖǺȲȮɀȕȂDZȕƽƂ ƷǝƚƷǝƚജಜƹƼǡDŽƽࠗ؋üƂജಜƚǨமƺƧƵǟȤȸȷǼ౾ǢǔƯƂ·ͩ·ͩͨ͘͞ΜʜIUUQTHJUIVCDPN(FFLZ"OUTOBUJWFCBTFEPDT
ȂɀȤȸǨƺƥƹƼǕƵ
ȗȠǿɄȄȴɀฉ/BUJWF#BTF• ȗȠǿɄȄȴɀƾ/BUJWF#BTFǨ˚ƞdžƘǡ։DŽǘDŽDžƽƣƘƢǡ• 4UBDLฆǀǠงƾȌȣDž3FBDU/BWJHBUJPO• ȷȆȕǚȆȼDZȤƽ͝ǠܖǥǡȌȣƁȥȐȍɄǀƿDž/BUJWF#BTFȂɀȤȸǨƺƥƹƼǕƵ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
813&45"1*ǘ̱ǢƼǕǡ• 8PSE1SFTTDŽீʔȔɄȌǀƿǨώ׆ƽƣǡ"1*• 8PSE1SFTTƽ˖ƹƵȣȺǽǨǯȤȷΚƭƼǕǡฆ$PEF(SJEǯȤȷǕƵƚǀǚƺ• ீʔɫளȧɄȅǚǸȓȁȷǨȆȼDZȤƽ͝ǠܖƞƁޑਲȧɄȅǀƿȂɀȤȸǨƺƥƹƼǕƵ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗ
%FNP
ਅίǀȣȺǽȷɄȍɄǯȤȷȂɀȤȸǨƺƥƹƼǕƵ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗهࣄҰཡϖʔδهࣄΛબ͢ΔͱهࣄৄࡉεϫΠϓૢ࡞͔ΧςΰϦͷλϒΛબ͢Δͱ৽ணΧςΰϦͷΓସ͑ݕࡧϖʔδͰϑϦʔϫʔυݕࡧͱλάݕࡧ
ਅίǁǯȤȷƢƽƣƵ• ܗˏബ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
813&45"1*ǁƺƚƼDžü• ̊ࢠǁǘʤಹƽ8PSE$BOQ,ZPUPƢങ̐ƫǢǔƯ• 813&45"1*ǨDžƮǗƁ8PSE1SFTTǁബǟưƚǣƚǣǀௗƢઓƧǡơǘ ฆȌDZȭȆǾȅȲɄȸDžƩǢơǟง• ȆȌȐȢǚƹƼǔƯฆƵƶDŽӷ˄ƽƯกงǔƾǗ3FBDU/BUJWFƢޟƭƥ؎ƮǡǔƽDŽௗշܘ ۞˃ѨทʤಹҔӣIUUQTLZPUPXPSEDBNQPSH
ƠǥǠ3FBDULZPUPW