Webフレームワークとともに利用するWeb components / JSConf.jp おかわり

Slide 1

Slide 1 text

8FCϑϨʔϜϫʔΫͱͱ΋ʹ ར༻͢Δ8FC$PNQPOFOUT +4$POGKQ͓͔ΘΓ/PEFֶԂ࣌ݶ໨ 'FC5BNBEB"LJIJSP TQSJOHSBJOJOH

Slide 2

Slide 2 text

୭ʁ w 5BNBEB"LJIJSPTQSJOHSBJOJOH w 8FCϑϩϯτΤϯυΤϯδχΞ w 044։ൃ 7JWMJPTUZMF w ໊ݹ԰ࡏॅ w ޷͖ͳ$44ϓϩύςΟɿQPJOUFSFWFOUT IUUQTHJUIVCDPNTQSJOHSBJOJOH

Slide 3

Slide 3 text

ΞδΣϯμ w 8FCDPNQPOFOUTʹ͍ͭͯ w 8FCDPNQPOFOUTͷͭΒΈ w ͦΕʹରͯ͠ݱ࣌఺Ͱࢲ͕ͨͪͰ͖Δ͜ͱ

Slide 4

Slide 4 text

8FCDPNQPOFOUTʹ͍ͭͯ w ಠࣗͷ)5.-ཁૉʮ$VTUPN FMFNFOUTʯΛ࡞੒͢ΔͨΊͷٕज़ w 4IBEPX%0.΍UFNQMBUFɺ TMPUཁૉͳͲɺෳ਺ͷٕज़ཁૉͷ ू·Γ

Slide 5

Slide 5 text

8FCDPNQPOFOUTͷҙٛ w ͢΂ͯ8FCඪ४ͷٕज़ɾ"1*ͷΈͰ࣮ݱ͍ͯ͠Δ w ͜Ε·Ͱ3FBDUͳͲͷ8FCϑϨʔϜϫʔΫΛ࢖Θͳ͍ͱ࡞੒Ͱ͖ͳ ͔ͬͨʮίϯϙʔωϯτʯ͕ɺ8FCٕज़ͷΈͰ࡞ΕΔΑ͏ʹͳΔʜʜ ͔΋

Slide 6

Slide 6 text

͜͜·Ͱ͸8FCDPNQPOFOUTͷ ཧ૝ͷ࿩

Slide 7

Slide 7 text

࣮ࡍɺ8FCDPNQPOFOUTʹ͍ͭͯͲͷΑ͏ʹ ࢥͬͯΔʁ w 8FCDPNQPOFOUTࣗମ͸ͦΕ΄Ͳ৽͍ٕ͠ज़Ͱ͸ͳ͍ w पΓͷҙݟΛ·ͱΊΔͱʮ΍Γ͍ͨ͜ͱ͸Θ͔Δ͕ɺݱ࣮తʹ͸৭ʑ ೉͍͠ʯ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC"1*$VTUPN&MFNFOU3FHJTUSZ

Slide 8

Slide 8 text

8FCDPNQPOFOUTͷ೉͍͠఺ w ૉͷ8FC"1*͚ͩͰ8FCDPNQPOFOUΛ࣮૷͢Δͷ͸େมʁ w ଞͷ8FCϑϨʔϜϫʔΫͱ૊Έ߹Θͤͯ࢖͑ͳ͍ʁ w $MJFOUTJEF+BWB4DSJQUͷଘࡏΛલఏͱͨ͠"1* w 443ɺ34$ʹ͸ରԠͰ͖ͳ͍ʁ w 4IBEPXCPVOEBSZͷ໰୊

Slide 9

Slide 9 text

ૉͷ8FC"1*͚ͩͰ8FC DPNQPOFOUΛ࣮૷͢Δͷ͸େมʁ

Slide 10

Slide 10 text

8FCDPNQPOFOUT͸Ұ͔Β࡞Δ΋ͷʁ w 8FCDPNQPOFOUTΛ࡞Δʹطଘͷ8FCϑϨʔϜϫʔΫΛ࢖Θͳ͍ɺ Ͱ͸ͳ͍ w طଘͷ8FCϑϨʔϜϫʔΫͷ$VTUPNFMFNFOUTϏϧυػೳΛ࢖͏ 7VFKT 4WFMUF 4PMJE 1SFBDU w ࠷ॳ͔Β$VTUPNFMFNFOUTͱͯ͠Ϗϧυ͢Δ͜ͱΛ໨తͱͨ͠ϑ ϨʔϜϫʔΫ -JU 4UFODJM

Slide 11

Slide 11 text

ͲͪΒͷํ਑Ͱ࣮૷͢Δ΂͖ʁ w έʔεʹ΋ΑΔ͕ɺՄೳͰ͋Ε͹ޙऀͷϑϨʔϜϫʔΫΛબ୒͢΂͖ w 8FCDPNQPOFOUTͷٕज़ʹ࠷దԽ͞Ε͓ͯΒͣɺόϯυϧαΠζ ໘Ͱෆར w ͦͷϑϨʔϜϫʔΫ͕কདྷʹΘͨͬͯ$VTUPNFMFNFOUTΤΫε ϙʔτػೳΛαϙʔτ͢Δͱ͸ݶΒͳ͍ w લऀ͕༗ޮͳྫɿݩ͔ΒͦͷϑϨʔϜϫʔΫͰ։ൃ͍ͯͨ͠8FCΞϓ ϦΛͦͷ··$VTUPNFMFNFOUTԽ͢ΔΑ͏ͳέʔε

Slide 12

Slide 12 text

-JUͷجຊతͳ࢖͍ํ -JU&MFNFOUͱ͍͏ΫϥεΛFYUFOE͢Δ ͜ͱͰίϯϙʔωϯτΛఆٛ QSPQFSUZσίϨʔλʔΛ͚ͭͨΫϥε ϑΟʔϧυʹରͯ͠ϦΞΫςΟϏςΟ͕ ಇ͘ IUNMλά෇͖ςϯϓϨʔτϦςϥϧΛ ࢖ͬͯςϯϓϨʔτΛఆٛ͠ɺSFOEFS ϝιου͔ΒϨϯμϦϯά݁ՌΛฦ͢

Slide 13

Slide 13 text

-JUͷ"1*ઃܭ w σίϨʔλʔ΍ΫϥεΛۦ࢖͓ͯ͠ΓɺҰൠతͳ8FCϑϨʔϜϫʔΫ ͱൺֱͯ͠ͱ͖ͬͭͮΒ͍"1*ͷΑ͏ʹݟ͑Δ͕ʜʜ w -JUͷ"1*͸͔ͳΓϓϦϛςΟϒͳ෦෼·Ͱ෼ׂ͞Ε͍ͯΔ w )5.-ϨϯμϦϯά-JU&MFNFOU MJUIUNM w ϦΞΫςΟϏςΟ3FBDUJWF&MFNFOU w ϑϨʔϜϫʔΫͱ͍͏ΑΓ͸ɺ)5.-&MFNFOUΫϥεʹศརͳϝ ιουΛ௥Ճͨ͠ϥΠϒϥϦूͱ͍͏දݱ͕͍ۙ

Slide 14

Slide 14 text

-JUΛ༻͍ͨ։ൃͷελϯε w ެࣜυΩϡϝϯτͷ಺༰͸͋͘·Ͱ࣮૷ͷҰྫ w ιʔείʔυΛಡΜͰ͍͘ͱɺ-JUͷ"1*͸ҙਤతʹ෼ׂͯ͠ར༻Ͱ ͖ΔΑ͏ʹͳ͍ͬͯΔ͜ͱ͕Θ͔Δ w -JUͷؾʹೖΒͳ͍෦෼͸ࣗ෼Ͱ࡞Ε͹ྑ͍

Slide 15

Slide 15 text

IUUQTTQFBLFSEFDLDPNMZDPSQUFDI@ KQHVBOMJIVBNJBOYJBOHLFVJLPOQPOFOUPOPTIFKJXFC DPNQPOFOUTEFIVSFNVXBLVGFJZJDVOXPNV[IJTV ஫ɿൃදதͷ಺༰ʹ͸ݱ࣌఺ͷख๏ɾҙݟͱҰ෦ҟͳΔ఺΋͋Γ·͢

Slide 16

Slide 16 text

ྫɿ;BH w ϑϨʔϜϫʔΫඇґଘͳίϯϙʔωϯτϥΠϒϥϦ w "SL6*ɿ;BHKTΛ࢖༻ͨ͠)FBEMFTT6*MJCSBSZ w ίϯϙʔωϯτͷঢ়ଶ؅ཧΛ;BHKTʹҠৡ͢Δ͜ͱͰɺ-JUʹର͢Δֶ शίετΛ͔͚Δ͜ͱͳ͘ίϯϙʔωϯτͷৼΔ෣͍Λ࣮૷ IUUQT[BHKTDPN

Slide 17

Slide 17 text

;BHͷϑϨʔϜϫʔΫந৅Խ TFSWJDF BQJ QSPQT QSPQT &MFNFOU &MFNFOU .BDIJOFEF fi OJUJPO useMachine() .connect() .getInputProps() .getLabelProps() normalizeProps() normalizeProps() .BDIJOF VQEBUFE ;BHͷεςʔτ؅ཧ͸ಛఆͷ8FCϑϨʔϜϫʔΫͷ ࣮૷ʹґଘ͠ͳ͍ઃܭʹͳ͍ͬͯΔ 8FCϑϨʔϜϫʔΫݻ༗ͷ࣮૷͸͜ͷ෦෼ͷΈ

Slide 18

Slide 18 text

;BHͱ-JUͷ݁߹ -JUͷϥΠϑαΠΫϧ DPOOFDUFE$BMMCBDLͳͲ ʹ߹Θͤͯ;BHͷεςʔτϚγϯΛߋ৽ ಘΒΕͨQSPQTΦϒδΣΫτΛ΋ͱʹ)5.-&MFNFOU ʹରͯ͠௚઀ଐੑ΍ΠϕϯτϋϯυϥʔΛ௥Ճɾ࡟আ ;BHͷBQJΦϒδΣΫτ͸-JUͷ$POUFYUػೳΛ࢖ͬͯ $VTUPNFMFNFOUؒͰड͚౉͠

Slide 19

Slide 19 text

$VTUPNFMFNFOUͷ)FBEMFTTԽ w Ҏ্ͷίϯϙʔωϯτΛ-JHIU%0.ͱͯ͠ఏڙ͢Δ͜ͱͰɺ )FBEMFTT6*-JCSBSZͱಉ͡ײ֮Ͱ$VTUPNFMFNFOU͕ར༻Ͱ͖Δʂ

Slide 20

Slide 20 text

ଞͷ8FCϑϨʔϜϫʔΫͱ ૊Έ߹Θͤͯ࢖͑ͳ͍ʁ

Slide 21

Slide 21 text

طଘ8FCϑϨʔϜϫʔΫͱͷ૬ੑ w Ҏલ͸໰୊͕ͩͬͨɺղܾͭͭ͋͠Δ w 3FBDU͔Β͸$VTUPNFMFNFOUʹQSPQTΛ౉ͨ͠ͱ͖ͷڍಈ͕վ ળ͠ɺ໰୊ͳ͘࢖͑ΔΑ͏ʹʂ IUUQTDVTUPNFMFNFOUTFWFSZXIFSFDPN IUUQTSFBDUEFWCMPHSFBDUTVQQPSUGPSDVTUPNFMFNFOUT

Slide 22

Slide 22 text

໰୊͸ղܾ͔ͨ͠ʁ w $VTUPNFMFNFOUT͸)5.-&MFNFOUΛFYUFOEͨ͠୯ͳΔ +BWB4DSJQUͷDMBTTͳͷͰɺͦΕ͚ͩͰ͸ͦͷ$VTUPNFMFNFOU͕Ͳ ͷΑ͏ͳଐੑQSPQFSUZΛड͚औΔ͔Λ஌Δखஈ͕ͳ͍ w ʹ5ZQF4DSJQUͷܕͰ$VTUPNFMFNFOUͷQSPQTΛදݱͰ͖ͳ͍ w 8FCϑϨʔϜϫʔΫ͔Β$VTUPNFMFNFOUͰ͋Δ͜ͱΛҙࣝͤͣʹ ࢖͏ʹ͸ɺ͞ΒͳΔ޻෉͕ඞཁ

Slide 23

Slide 23 text

$VTUPNFMFNFOUTNBOJGFTU DFN w $VTUPNFMFNFOUTͷߏ੒΍ϝλσʔλΛએݴతʹදݱ͢Δ+40/ w σϑΝΫτελϯμʔυɺͱ·Ͱ͸ݴ͑ͳ͍͕ɺ 4UPSZCPPLͷ8FCDPNQPOFOUT޲͚GSBNFXPSL͸ DFNͷ಺༰Λ΋ͱʹLOPC΍EPDTΛੜ੒ͨ͠Γ͢Δ IUUQTHJUIVCDPNXFCDPNQPOFOUTDVTUPNFMFNFOUTNBOJGFTU

Slide 24

Slide 24 text

$FNͷੜ੒ w !DVTUPNFMFNFOUTNBOJGFTUBOBMZ[FSΛ࢖͏͜ͱͰɺ -JU&MFNFOU͔ΒDFNΛੜ੒͢Δࣄ͕Ͱ͖Δ͕ʜʜ w ඞવతʹίʔυͷ੩తղੳΛ͢ΔͨΊɺ͔ͳΓෳࡶͳॲཧ w -JUͰඪ४తͳॻ͖ํ͔Β֎ΕΔͱ͏·͘෼ੳͰ͖ͳ͍͓ͦΕ w ಠࣗͷ࣮૷ͰDFNΛੜ੒͢Δ͜ͱʹ IUUQTDVTUPNFMFNFOUTNBOJGFTUOFUMJGZBQQ

Slide 25

Slide 25 text

QSPQTͷநग़ w EF fi OF$PNQPOFOU1SPQTͱ ͍͏ϝιουΛ༻ҙͯ͠ɺͦ ͜ʹܕύϥϝʔλͱͯ͠ QSPQTͷ৘ใΛهड़ w EF fi OF$PNQPOFOU1SPQTࣗ ମ͸Կͷ࣮૷΋࣋ͨͳ͍ؔ਺ ͰɺDFNੜ੒ͷ౎߹ͷͨΊͩ ͚ʹଘࡏ͍ͯ͠Δ

Slide 26

Slide 26 text

ϥούʔίϯϙʔωϯτͷੜ੒ w ੜ੒͞ΕͨDFNΛ΋ͱʹ֤8FCϑϨʔϜϫʔΫͷΠϯλʔϑΣʔεʹ ԊͬͯίʔυΛੜ੒ w Ұݟෳࡶͦ͏͕ͩɺDFNͷੜ੒͑͞Ͱ͖Ε͹ඞཁͳ৘ใ͸ܾ·ͬͨ ϑΥʔϚοτͰ·ͱΊΒΕΔ CVUUPOUT DVTUPNFMFNFOUTKTPO CVUUPOUTY CVUUPOWVF

Slide 27

Slide 27 text

3FBDUͱ7VFKTͷϥούʔίϯϙʔωϯτͷྫ DFNͷதʹ͋Δ"UUSJCVUF &WFOUͷ৘ใΛ΋ͱʹQSPQTͷ ܕΛੜ੒ ͞Βʹɺ7VFKTʹؔͯ͠͸4MPU ͷϥούʔ΋ఏڙ

Slide 28

Slide 28 text

443ɺ34$ʹ͸ରԠͰ͖ͳ͍ʁ

Slide 29

Slide 29 text

443ʹ͸ରԠͰ͖ͳ͍ʁ w %FDMBSBUJWF4IBEPX%0. %4% ʹΑΓٕज़తͳ໰୊͸ղܾ w $VTUPNFMFNFOUTͷதʹTIBEPXSPPUNPEFଐੑΛ࣋ͭ UFNQMBUF͕͋ͬͨ৔߹ɺͦͷ$VTUPNFMFNFOUT͕·ͩ%0.ʹ ొ࿥͞Ε͍ͯͳ͍ঢ়ଶͰ΋ͦͷUFNQMBUF͕4IBEPX%0.ʹΞλο ν͞Εͨ΋ͷͱͯ͠)5.-͕ϨϯμϦϯά͞ΕΔ

Slide 30

Slide 30 text

ಈ࡞ྫ w +4͕ಡΈࠐ·ΕΔؒͷελΠϧΛఆٛ͢Δ͜ͱͰ'06$Λճආ

Slide 31

Slide 31 text

8FCϑϨʔϜϫʔΫͱͷ࿈ܞ ະݕূ w લड़ͷϥούʔίϯϙʔωϯτ಺Ͱ%4%ΛϨϯμϦϯά͢ΔΑ͏ͳί ϯϙʔωϯτ͕ੜ੒Ͱ͖Ε͹ɺࣗಈతʹ֤ϑϨʔϜϫʔΫͷ443ͷ࢓ ૊ΈΛར༻Ͱ͖Δ͸ͣ w 4FSWFSTJEF࣮ߦ༻ʹίϯϙʔωϯτͷॳظϨϯμϦϯά݁ՌΛฦ͢ ϝιουΛ༻ҙ͢Δʁ

Slide 32

Slide 32 text

w 4IBEPXSPPU͸%PDVNFOUSPPUͱ͸ಠཱ͍ͯ͠ΔͨΊɺ4IBEPX %0.USFFΛ௒͑ͯཁૉΛࢀর͢Δ͜ͱ͕Ͱ͖ͳ͍ w JOQVUͱMBCFMͷؔ࿈෇͚ w BSJBMBCFMMFECZ BSJBDPOUSPMTʜ w ϚʔΫΞοϓ΍ΞΫηγϏϦςΟͷ؍఺Ͱ໰୊ 4IBEPXCPVOEBSZͷ໰୊ EJW MBCFM TIBEPXSPPU EJW JOQVU id=input:1 for=input:1 DVTUPNJOQVU

Slide 33

Slide 33 text

4IBEPX%0.ͷݶք w རศੑΛ٘ਜ਼ʹͯ͠ɺ)PTUଆͰએݴͨ͠ཁૉΛTMPUͰड͚౉ͯ͠ղܾ w কདྷతʹ͸ղܾʜʜʁ EJW MBCFM TIBEPXSPPU EJW JOQVU id=input:1 for=input:1 DVTUPNJOQVU TMPU JOQVU IUUQTTBLVQJHJUIVCJPTMJEFTKB @@@XFCDPNQPOFOUTW

Slide 34

Slide 34 text

·ͱΊ w 8FCDPNQPOFOUͱ8FCϑϨʔϜϫʔΫ͸ೋऀ୒ҰͰ͸ͳ͍ w ҙਤతʹݱ࣌఺Ͱར༻Ͱ͖Δखஈʹݶͬͯ঺հ͠·͕ͨ͠ɺ8FC DPNQPOFOUTؔ࿈ͷ৽͍͠ػೳ͸ࠓͰ΋׆ൃʹٞ࿦͞Ε͍ͯ·͢ w ਺೥ޙʹৼΓฦΔͱશવҧ͍ͬͯͦ͏ w ʮ8FCDPNQPOFOUTݩ೥ʯ͕͍ͭདྷΔ͔͸ෆ໌͕ͩɺʮ͍ͭͷ·ʹ ͔8FCDPNQPOFOUTΛ࢖͍ͬͯͨʯ͸ҙ֎ͱ͍͔ۙ΋