class-component.js

DMBTTDPNQPOFOUKT ೔໺ᖒ׻໵!LULDPN

୭ʁ w ໊લ೔໺ᖒ׻໵ ͻͷ͞ΘΑ͠΍ w ৬ۀϑϩϯτΤϯυΤϯδχΞ w ΤϯδχΞྺ೥͙Β͍ w
ϖοτσάʔ ͶͣΈ Yඖ

ܦྺ খ͞ͳ8FC੍࡞ձࣾ" ೥ খ͞ͳ8FC੍࡞ձࣾ# ೥
೥ ϑϦʔϥϯε ̎೥    

DMBTTDPNQPOFOUKT ͷ঺հ

DMBTTDPNQPOFOUKTJT w 7JFXϑϨʔϜϫʔΫ w 8SJUUFOJO+BWB4DSJQU w K2VFSZϓϥάΠϯ w ϛχϑΝΠͯ͠,#

DMBTTDPNQPOFOUKTJTOPU w 7JSUVBM%PNϥΠϒϥϦ w 'MVY࣮૷ w OFXMBOHVBHF

ྫ5)&5*.&3

ࢀߟ3FBDUͷ5JNFS σϞ

DMBTTDPNQPOFOUͷ5JNFS σϞ

DMBTTDPNQPOFOUͷ5JNFS DMBTTDPNQPOFOUͱͯ͠ొ࿥ 5JNFSΛදݱ͢ΔKTͷΫϥε σϞ

DMBTTDPNQPOFOUͷ5JNFS DMBTTDPNQPOFOUͱͯ͠ొ࿥ lUJNFSzΫϥεΛ࣋ͬͨTQBOλά͕ 5JNFSDMBTTʹఆٛ͞Εͨৼ෣͍Λ͢Δ 5JNFSΛදݱ͢ΔKTͷΫϥε σϞ

ίϯηϓτ

ίϯηϓτ ී௨ͷEPN XJUIK2VFSZ FH bUJNFS` +4ͷDMBTT FHDMBTT5JNFS\ʜ^

ίϯηϓτ ී௨ͷEPN XJUIK2VFSZ FH bUJNFS` +4ͷDMBTT FHDMBTT5JNFS\ʜ^ ࢀরՄ ࢀরՄ

DMBTTDPNQPOFOUKTͷ࢓ࣄ͸ ˣ͜ΕΛ ͜Εˣʹ͢Δ͜ͱ

τϦΨʔ w EJWDMBTTlUJNFSzEJW

τϦΨʔ w EJWDMBTTlUJNFSzEJW IUNMͷDMBTTͰొ࿥͞ΕͨDPNQPOFOU໊ ͱҰக͢Δ΋ͷΛDMBTTDPNQPOFOUͱͯ͠ ॳظԽ͢Δɻ Ұக͠ͳ͍΋ͷʹରͯ͠͸Կ΋͠ͳ͍

ิ଍ w جຊ͸IUNMͷDMBTTʹ൓Ԡ͢ΔܗͰ͕͢ɺ  +4͔Βಈతʹ࡞Γ͍ͨ৔߹͸ɺ    bTQBO` DD bUJNFS`  
  ͷΑ͏ͳ࡞Γํ΋Ͱ͖·͢

ॳظԽͰى͜Δ͜ͱ

ॳظԽͰى͜Δ͜ͱ ొ࿥ͨ͠+4$MBTTΛFMFNFOUҾ਺ͰOFX

ॳظԽͰى͜Δ͜ͱ ొ࿥ͨ͠+4$MBTTΛFMFNFOUҾ਺ͰOFX @@DD@JOJU@@ؔ਺Λ͍࣋ͬͯΕ͹ͦΕΛݺͿ ແ͚Ε͹FMFNϓϩύςΟʹFMFNFOUΛηοτ

ॳظԽͰى͜Δ͜ͱ ొ࿥ͨ͠+4$MBTTΛFMFNFOUҾ਺ͰOFX @@DD@JOJU@@ؔ਺Λ͍࣋ͬͯΕ͹ͦΕΛݺͿ ແ͚Ε͹FMFNϓϩύςΟʹFMFNFOUΛηοτ ΠϕϯτॳظԽ

ॳظԽͰى͜Δ͜ͱ ొ࿥ͨ͠+4$MBTTΛFMFNFOUҾ਺ͰOFX @@DD@JOJU@@ؔ਺Λ͍࣋ͬͯΕ͹ͦΕΛݺͿ ແ͚Ε͹FMFNϓϩύςΟʹFMFNFOUΛηοτ ΠϕϯτॳظԽ ॳظԽࡁΈͷ͠Δ͠Λ͚ͭΔ

ॳظԽͰى͜Δ͜ͱ ొ࿥ͨ͠+4$MBTTΛFMFNFOUҾ਺ͰOFX @@DD@JOJU@@ؔ਺Λ͍࣋ͬͯΕ͹ͦΕΛݺͿ ແ͚Ε͹FMFNϓϩύςΟʹFMFNFOUΛηοτ ΠϕϯτॳظԽ ॳظԽࡁΈͷ͠Δ͠Λ͚ͭΔ FMFNFOUͷதʹDPFMFNFOUΛอଘ ޙͰऔΓग़͢༻

֓೦తʹ͸্ͷॲཧͰ ˣΛ΍ͬͨ͜ͱʹͳΓ·͢

ͪͳΈʹ

ิ଍ w DPFMFNFOUΠϯελϯεʹରͯ͠ɺରԠ͢Δ FMFNFOUͷ਺͸ඞͣݸ    w DPFMFNFOUͷछผ͕ҧ͑͹ɺͭͷFMFNFOUʹ ෳ਺ͷDPFMFNFOU͕ରԠ͢Δ͜ͱ͸͋Γಘ·͢ ˡ͜͏͍͏ͷ͸μϝ ˡ͜Ε͸ΞϦ

ิ଍ w DMBTTDPNQPOFOUࣗମ͸.7$.71 .77.qVYͳͲɺͲͷΞʔΩςΫνϟͰ  ࢖͏͔ʹ͍ͭͯ͸ಛʹنఆ͍ͯ͠·ͤΜɻ w .7 ͷ71$7. .Ҏ֎ͷύʔτ ͱ͠
ͯ࢖͏͜ͱ͸Մೳͷ͸ͣ

TUBUJD"1*ݸ JOTUBODF"1*ݸ EFDPSBUPSTݸ

4UBUJD"1* DDؔ਺ w DD ίϯϙʔωϯτ໊ ࣮૷Ϋϥε Ͱొ࿥ w
EJWDMBTTlΫϥεΫϥεʜzEJWͱ͍͏ λά͕͋ͬͨͱ͖ʹɺΫϥε/ͷதͰίϯϙʔ ωϯτొ࿥͞Εͨ΋ͷ͕͋Δ࣌ɺࣗಈతʹ࣮૷ Ϋϥεͱඥ෇͍ͨঢ়ଶͰॳظԽ͞ΕΔ λά͸ͳΜ Ͱ΋ྑ͍

4UBUJD"1* DDJOJU w DDJOJU ը໘಺ͷDDΛॳظԽ͠·͢  QKBYͳͲͰಈతʹ௥Ճ͞ΕΔ৔߹ʹར༻͢Δ

*OTUBODF"1*T GODDʹఆٛ͞ΕΔ΋ͷ EPNDD ίϯϙʔωϯτ໊ EPNΛಈతʹDD ʹ͢Δ ໭Γ஋͸EPNࣗ਎
EPNDDHFU ίϯϙʔωϯτ໊ EPN͔ΒDD Λऔಘ͢Δ ແ͍৔߹͸UISPX EPNDDJOJU ίϯϙʔωϯτ໊ EPNΛಈత ʹDDʹ͢Δ ໭Γ஋͸DPFMFNFOU

૬ޓࢀরʹ͍ͭͯ ࢀরՄ ࢀরՄ

૬ޓࢀরʹ͍ͭͯ ࢀরՄ ࢀরՄ ্ͷ"1*Ͱ૬ޓࢀর͞Ε·͢ FMFNDDHFU ໊લ UIJTFMFN

EFDPSBUPST w !PO Πϕϯτ໊ w ϝιουΛΠϕϯτϋϯυϥͱͯ͠ొ࿥ w !PO Πϕϯτ໊
BU ηϨΫλ w ϝιουΛηϨΫλͰߜͬͨΠϕϯτϋϯυ ϥͱͯ͠ొ࿥

EFDPSBUPST ྫ class Foo {  @on(‘click’).at(‘.btn’)  onClick(e) {  // .btn
ΫϦοΫ࣌ͷॲཧ  }  } <div class=“foo”>  <button class=“btn”>Click!</btn>  </div>

EFDPSBUPST w !FNJU Πϕϯτ໊ pSTU w ϝιουͷ࠷ॳʹΠϕϯτͷτϦΨʔΛ௥Ճ w !FNJU Πϕϯτ໊
MBTU w ϝιουͷ࠷ޙʹΠϕϯτͷτϦΨʔΛ௥Ճ w QSPNJTFΛฦͨ͠৔߹͸SFTPMWFޙʹτϦΨ

EFDPSBUPST ྫ class Foo {  @emit(‘foo-update’).last  start() {  return new
Promise(resolve => {  // ͜͜ͷॲཧ͕ resolve ͞Εͨ࣌ʹ  // foo-update Πϕϯτ͕ emit ͞ΕΔ  })  }  }

஫ҙ w Ҏ্͕WYͷެ։"1*Ͱ͕͢ɺࠓޙมΘΔՄ ೳੑ΋͋Γ·͢ɻ w EFDPSBUPST͸CBCFMQMVHJOUSBOTGPSN EFDPSBUPSTMFHBDZͰUSBOTQJMFͯ͠ಈ͘Α͏ ʹ࣮૷͞Ε͍ͯ·͕͢ɺEFDPSBUPSTࣗମ͕࢓༷ ͱͯ͠pY͞Ε͍ͯͳ͍ͨΊཁ஫ҙɻ

࢓༷આ໌͸Ҏ্Ͱ͢

࣮૷ͷ࿩

ΞʔΩςΫνϟ

ઃܭํ਑ w %%% w ϨΠϠʔυΞʔΩςΫνϟ w Πϯϑϥ૚υϝΠϯ૚  ΞϓϦέʔγϣϯ૚"1*૚  ʹ෼͚ͯߟ͑Δ

υϝΠϯϞσϧ ݸ w $MBTT$PNQPOFOU$POpHVSBUJPO w DMBTTDPNQPOFOUͷॳظԽʹඞཁͳ৘ใΛอ࣋ w ίϯϙωϯτ໊$PFMFNFOUͷΫϥεͳͲ w -JTUFOFS*OGP
w Πϕϯτϋϯυϥͷ৘ใΛอ࣋ w Πϕϯτ໊ϋϯυϥࣗମηϨΫλͳͲ

ΞϓϦέʔγϣϯ૚ Ϋϥε w $MBTT$PNQPOFOU.BOBHFS w TUBUJD"1*୲౰ DDͷొ࿥ɺॳظԽͳͲ w $MBTT$PNQPOFOU$POUFYU
w JOTUBODF"1*୲౰ FMFNFOU͔ΒDDͷऔΓ ग़͠ͳͲ

"1*૚ w DD w GODD w EFDPSBUPST w Ϣʔβʔʹ࿐ग़͢Δ"1*ͱΞϓϦ૚Λͭͳ͙ ໾ׂ

Πϯϑϥ૚ w ͳ͠ K2VFSZࣗମ͕Πϯϑϥ૚ͱͯ͠ػೳ͢Δ ͷͰɺಛʹ͜ͷϨΠϠʔͷॲཧΛॻ͘ඞཁ͕ͳ ͍

ςετ

ςετπʔϧ w LBSNB ϒϥ΢βϥϯφʔ w NPDIB ςετϥϯφʔ w
DIBJQPXFSBTTFSU Ξαʔγϣϯ w ϞοΫϑϨʔϜϫʔΫ͸ඞཁͳ͔ͬͨͷͰ࢖͍ͬͯ·ͤΜɻ

ςετํ਑ w ެ։"1*͚ͩςετ͍ͯ͠·͢ɻ w ·ͣެ։"1*ͷςετΛॻ͍͍ͯͨΒɺDPWFSBHF͕ ʹͳͬͯɺԼͷϨΠϠʔͷςετΛॻ͘ؾ͕ແ͘ͳͬ ͨͨΊɻ w ࠓޙػೳ͕૿͖͑ͯͨΒԼͷϨΠϠʔ υϝΠϯ૚Ξϓ
Ϧ૚ ͷςετΛ௥Ճ͢Δ͔΋͠Ε·ͤΜɻ

πʔϧ঺հ

ͦͷଞπʔϧ w FTMJOU TUBOEBSEελΠϧ ελΠϧνΣοΧ w CBCFM FTτϥϯεύΠϥ
w CSPXTFSJGZ όϯυϥ w JTQBSUB ΧόϨοδ

$*πʔϧ w DJSDMFDJ ςετͷ࣮ߦ w DPEFDPW ΧόϨοδ෼ੳ w
CJUIPVOE ίʔυ඼࣭෼ੳ w HSFFOLFFQFS ґଘੑอक w ˢݸਓతʹࠓ+4Ͱ044Λॻ্͘Ͱϕετͱ ࢥ͍ͬͯΔߏ੒

ࢀߟࢿྉ

DMBTTDPNQPOFOUKTΛ ࢖ͬͯॻ͔Ε͍ͯΔϓϩάϥϜͷྫ w DMBTTDPNQPOFOUUPEPNWD w NVMUJqJQ w QVODIFS w MPOHESFBNDPSF
ύζϧήʔϜ

5IBOLTGPSMJTUFOJOH LULDMBTTDPNQPOFOU

class-component.js

class-component.js

More Decks by Yoshiya Hinosawa

Other Decks in Programming

Featured

Transcript