2019.2.19 Rakus Meetup Tokyo #2 フロントエンドNight発表資料
طଘ8FCΞϓϦέʔγϣϯͷ3FBDUKTద༻3BLVT.FFUVQ5PLZPϑϩϯτΤϯυ/JHIU&JJDIJ.JUB
View Slide
w&JJDIJ.JUBw" !FJDIJTBOEFOwָָ໌ࡉ։ൃ՝ϦʔυΤϯδχΞೖࣾw#MPHIUUQTHZP[BCFFSwEFWυϝΠϯങ͍͍ͨࣗݾհ
୲αʔϏεͷ͝հ
w ։ൃͨ͠ͷޙͰ͢w ࠷৽ͷػೳʢIPPLTͳͲʣͷग़͖ͯ·ͤΜ͡Ίʹ
w ʢͰ͢ɻνʔϜϦʔμʔʣw 0͞ΜʢϚϚ͞ΜΤϯδχΞɻࠓճͷओʣw 4͞Μʢࠓճಛʹग़൪ͳ͠ʣˠͭ·ΓখنͳνʔϜ࣌ͷνʔϜମ੍
ாථͷϨΠΞτΛϢʔβ͕ઃఆग़དྷΔͱ͍͏ɺ6*͕ͪΐͬͱෳࡶͳػೳཁ͕͍݅ࠐΜͰ͖·ͨ͠ɻ֎෦ઃܭΛແࣄऴ͑ɺৄࡉઃܭϨϏϡʔΛ͍ͯͨ͋͠Δͷग़དྷࣄʜಋೖʹࢸͬͨܦҢ
0͞ΜɿಋೖʹࢸͬͨܦҢ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ
0͞Μɿ0͞ΜɿಋೖʹࢸͬͨܦҢ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ
0͞Μɿ0͞ΜɿɿಋೖʹࢸͬͨܦҢ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͑ͬʂʁ
0͞Μɿ0͞Μɿɿ0͞ΜɿಋೖʹࢸͬͨܦҢ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͑ͬʂʁ
0͞Μɿ0͞Μɿɿ0͞ΜɿɿಋೖʹࢸͬͨܦҢ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻͪΐͪΐͪΐʂʁ͑ͬʂʁ
ͭΒ͍ʢԕ͍ʣ
ࠓ·Ͱͱಉ͡Α͏ʹK2VFSZͰ࣮ͨ͠Β͍༧ײ͔͠͠ͳ͍ɻ͕ͩͦΕK2VFSZ͕ѱ͍༁Ͱͳ͍ɻෳࡶͳσʔλΛ%0.ʹ࣋ͨͤΔͷਏ͍͠ɺෳࡶͳ%0.Λૢ࡞͢Δͷ͍͠ʜಋೖʹࢸͬͨܦҢ
ਓྨʹ%0.Λѻ͏ͷ͗͢͠Δ
˞ݸਓͷײͰ͢3FBDUKTී௨ʹྲྀߦ͍ͬͯͨɻ"OHVMBSKTͱޓੑ͕ͳ͍͕ग़ͯͪΐͬͱख͕ग़͠ʹ͍͘ঢ়گ7VFKTࠓޙྲྀߦΓͦ͏ͳײͩͬͨ͡ʢ͜͜·ͰྲྀߦΔͱࢥͬͯͳ͔͕ͬͨʣˠݸਓతʹ3FBUKTͷͩͬͨɻ࣌ͷτϨϯυΛৼΓฦΔͱ͜ͷࠒ
֮͑Δ͜ͱ͕গͳͯ͘γϯϓϧ+49ͷݟͨͷΠϯύΫτͱཪෲʹɺ͓͖֮͑ͯ͘ه๏ͳͲ͔ͳΓগͳ͍ɻˠطଘͷ+BWB4DSJQUͷ͕ࣝ࠷େݶ׆͔ͤΔɻ3FBDUKTΛબͨ͠ཧ༝class App extends Component {render() {return (Hello World)}}
ϚʔΫΞοϓΛγϯϓϧʹอͯΔͨͩͰ͑͞ΰνϟ͍͍ͭͯΔKTQʹϑϩϯτΤϯυϥΠϒϥϦಠࣗͷه๏Λࠞࡏͤͨ͘͞ͳ͔ͬͨ˞ίʔυงғؾͰ͢ɻ3FBDUKTΛબͨ͠ཧ༝Name:Hello {{yourName}}!
ྲྀߦ͍ͬͯͨϒϩάهࣄͳͲใʹࠔΒͳ͍ɻ҆ͳཧ༝Ͱ͕͢ɺྲྀߦ͍ͬͯΔͷʹཧ༝͕͋Δɻྑ͍ͱࢥ͑ΔͷͳΒ͋͑ͯٯΒ͏ඞཁͳ͍ɻؾܰʹ࡞Γ͠Ͱ͖ͳ͍ͷͰʢಛʹUP#ͷαʔϏεͳͷͰʣ͙͢ഇΕΔͷΛ࠾༻͢Δͷਏ͍3FBDUKTΛબͨ͠ཧ༝
3FBDUKTΛ࠾༻͢Δʹ͋ͨͬͯ؆୯ͳνʔϜπʔϧΛ࡞ͬͯΈ·ͨ͠ɻ3FBDUKT͚ͩͩͱࢠͷ$PNQPOFOUؒͷTUBUFͱQSPQTͷཧ͕͘͢͝େมͩͬͨͷͰ࠷ॳ͔ΒSFBDUSFEVYΛ͏͜ͱΛબɻˠখ͘͞࡞ͬͯࢼ͢ͷॏཁ3FEVYΛબͨ͠ཧ༝
3FBDU3FEVYͰߦͧ͘ʂ
3FBDUͷαϯϓϧίʔυ&4͕ΘΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ͕͢ɺݩʑ&4ͳݱͳͷͰମܥతʹֶΜͰ͓͍ͨํ͕ޮ͕ྑ͍ͱߟ͑·ͨ͠ɻࣗझຯͰ͍֮͑ͯͨͷͰߨࢣͱͳΓɺ&4ษڧձΛ։࠵ɻࣄલ४උʢ&4ͷֶशʣӳޠ͕ۤͰͳ͚Εɺ#BCFMͷެࣜυΩϡϝϯτྑ͍͔ͱࢥ͍·͢-FBSO&4IUUQTCBCFMKTJPEPDTFOMFBSOڭࡐʹ8FC%#13&447PMΛ༻
&OIBODFE0CKFDU-JUFSBMTࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏var foo = 0;var obj = {foo};// {foo: foo} ͱઃఆͨ͠ͷͱಉ͡// Computed (dynamic) property namesvar key = "foo";var obj = {[key]: 0,[key + "_bar"]: 1};
4QSFBE0QFSBUPSࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏var obj = {a:1, b:2};var obj2 = {...obj,c: 3};// { a:1, b:2, c:3 }var [one, two, three] = [1, 2, 3]%FTUSVDUVSJOHTUBUFΛߋ৽͢Δͱ͖ʹΑ͘ΘΕΔ
0SFJMMZͷʮೖ3FBDUʯΛճ͠ಡΈ͠·ͨ͠ɻ˞ࠓͱͳͬͯ༰ݹ͍Ͱ͢ɻ࣌͜ͷຊ͔͠ͳ͔ͬͨͱهԱɻࣄલ४උʢ3FBDUKTͷֶशʣެࣜαΠτ͔ɺ8FCͷهࣄͰྑ͍ͱࢥ͍·͢ɻ
2JJUBͷهࣄΛݟͳ͕Βֶश͠·ͨ͠3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅIUUQTRJJUBDPNLJJUBJUFNTBGCDGCࣄલ४උʢ3FEVYͷֶशʣ
ͦͷޙɺͻͨ͢ΒάάͬͯௐͨɻʢଟɺҰճۙ͘άά͍ͬͯͨʣˠมԽ͕ܹ͘͠ݹ͍ใଟ͔ͬͨͷͰෳαΠτͰ֬ೝ͢Δඞཁ͕͋ΓɺͦΕ͕େมͩͬͨɻ࣮ࡍʹίʔυΛॻ͖࢝ΊΔ
࣮ࡍͬͯΈͯ
SFOEFS͞Εͳ͍ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺΕΔͱצҧ͍͍ͯͨ͠ɻɾTUBUFΛॻ͖͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨϋϚͬͨ͜ͱclass App extends Component {constructor() {super();this.state = {input: “͜ΜʹͪΘ”};}componentWillRecieveProps(nextProps) {this.setState({input : nextProps.input})}}ίϯετϥΫλҰ͔͠ݺΕͳ͍ͷͰɺຖճॲཧ͍ͨ͠ͷϥΠϑαΠΫϧϝιουʹॻ͔ͳ͍ͱμϝ4UBUFͷߋ৽TFU4UBUF ΛΘͳ͍ͱμϝ
όάͷΓ͚͕͔ͬͨ͠ɹಉ͡ඇಉظॲཧ͕̎ճಈ͍ͯ͠·͏͕ൃੜɻ3FBDU3FEVYͷόάͩͱࢥ͍ͬͯͨΒɺ+BWBଆͷόάͩͬͨͱɻ݁ہαʔόαΠυͷॲཧʹ͕͕͋ͬͨɺ1SPNJTFपΓͷॲཧΛࢄʑٙͬͯ͠·ͬͨɻϋϚͬͨ͜ͱ
*&Ͱಈ͔ͳ͍ͣͬͱ$ISPNFͰσόοά͓ͯ͠Γɺ։ൃޙʹ*&ͰςετΛ࢝ΊͨΒಈ͔ͳͯ͘ྦˠOPEFMJTUGPS&BDI1SPNJTF͕ରԠ͍ͯ͠ͳ͍ɹCBCFMQPMZpMMͰࣄͳ͖ΛಘΔɻϋϚͬͨ͜ͱ
ηογϣϯ͕ΕΔαʔόʔଆʹॲཧ͕ඈͳ͍͕͍࣌ؒͨΊɺηογϣϯΕʹͳΓ͘͢ฤू༰͕ඈΜͩͱϢʔβ͔Β͕ۤʜ 3FBDUͷͰͳ͍Ͱ͕͢ʣࣗಈอଘػೳΛΈࠐΈ·ͨ͠ɻϋϚͬͨ͜ͱ
✨K2VFSZͱͷڞଘK2VFSZͷ΄͏͕ศརͳͱ͜ΖͬͨɻK26FSZ6*ͷ%% ϦαΠζ αϜωΠϧͳͲͨ͜͠ͱ
✨ඈͼඈͼʹSFOEFS͍ͨ͠طଘKTQ෦ͷҰ෦Λ͍͔ͨͬͨͷͰɺϧʔτϨϯμϦϯάͤͣɺαϒπϦʔΛ͖ͳͱ͜ʹϨϯμϦϯά͢Δ3FBDUίϯϙʔωϯτΛ࡞͠·ͨ͠ɻطଘͷ+41ͷλά෦ͳͲΛ͏ඞཁ͕͋ͬͨͨΊɻͪΐͬͱτϦοΩʔͳ͜ͱΛ͍ͯ͠Δɻࢀߟ63-IUUQTRJJUBDPNULSLUJUFNTDFBBGFBGͨ͜͠ͱ͜͜ΛrenderADD ͜͜Λrender
σʔλཧͷҰݩԽ͕ग़དྷͨTUBUFʹΑΓσʔλΛҰݩཧͰ͖ͨ͜ͱͰɺՄಡੑɾอकੑ্͕͕ͬͨͬͯΈͯΑ͔ͬͨ͜ͱ
ίϯϙʔωϯτ୯ҐͷઃܭʹϝϦοτ͕͋ͬͨw ઃܭ͍͢͠w ίʔυಡΈ͍͢w ྲྀ༻͍͢͠w ͕͋ͬͨͱ͖ͷӨڹൣғগͳ͍ͬͯΈͯΑ͔ͬͨ͜ͱ
όά͕গͳ͔ͬͨ3FBDUىҼͷຊ൪όάग़͍ͯͳ͍ͬͯΈͯΑ͔ͬͨ͜ͱ
3FBDUKTͷόʔδϣϯΞοϓͷਵ࣮·ͩWܥΛ͓ͬͯΓɺݱࡏɺWܥͷόʔδϣϯΞοϓରԠதɻʢDPNQPOFOU8JMM3FDFJWF1SPQTͳ͘ͳͬͨΓഁյతͳมߋ͕͋ͬͯগͭ͠Β͍ʣࠓޙͷ՝
ଞػೳͷల։৽ػೳʹ͍ͭͯ3FBDUΛ͏͖͔ΜͰ͍Δɻͦͷޙɺ͞΄ͲෳࡶͰͳ͍ը໘Λ3FBDUΛΘͣʹ࡞͕ͬͨɺऴΘͬͯΈΔͱ3FBDUͬͨํ͕ྑ͔ͬͨͱͷࠓޙͷ՝
σΟϨΫτϦߏϑΝΠϧߏݱঢ়ɺDPNQPOFOUBDUJPOSFEVDFS̍ͭͷKTYϑΝΠϧʹॻ͍͍ͯ·͕͢ɺଞػೳʹల։͢ΔͳΒϑΝΠϧΛ͚ͳ͍ͱ͍͚ͳ͍ࠓޙͷ՝
ࣗಈςετ3FBDU$PNQPOFOUࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍ࠓޙͷ՝
ɾࣄલ४උ͋·Γ͍Βͳ͍͕ɺϧʔϧΛ֮͑Δ·ͰͦΕͳΓʹେมͩͬͨɾͬͨϝϦοτे͋ͬͨɻɾݹ͍γεςϜΛ৽͍ͯ͘͠Ξϓϩʔνͱͯ͠ঃʑʹ3FBDUʹஔ͖͍͑ͯ͘ͷྑ͍͔͠Ε·ͤΜ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠