Riot.js in WPD-Week

Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa React͕ϝϯυΫαΠ๻ΒͷͨΊͷϑϩϯτΤϯυ

cognitom

HJUIVCDPNDPHOJUPN

ࠓ೔ɺ࿩͢͜ͱ

w 3JPUKTͱ͸ w 3JPUͰίϯϙʔωϯτΛॻ͘ w ίϯϙʔωϯτ)5.-෦඼ w 3JPUΛ΋͏গ͠ ΍͍͞͠ લ൒
ΊΜͲ͍ ޙ൒ w ࠷ۙͷϑϩϯτΤϯυ͸ɺͳͥ  ϝϯυΫαΠͷ͔ w Ͳ͏͢Δ

૝ఆΦʔσΟΤϯε

3JPUKTͱ͸

೥݄WFS

ۙ೔WFS

࠷΋γϯϓϧͰɺ͍ܰ 6*ϥΠϒϥϦ

খ͍͜͞ͱ͸ɺળ

͚ͬ͜͏ਓؾ

ίΞίϛολʔͷډ৔ॴ

Կ͕Ͱ͖Δͷ

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ
͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF#VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB $ZDMFKT

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ
͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF#VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB $ZDMFKT ٕज़ελοΫͷதͷɺίίɻ

ίϯϙʔωϯτΛ࡞Ε·͢ <div> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: ੖Ε</li> <li>ؾԹ: 10౓</li>
<li>࣪౓: 30%</li> </ul> </div> <weather type=“clear” temperature=“10” humidity=“30%” /> ੖Ε 10౓ 30%

3JPUKT͸ͲΜͳਓ޲͚

ʮઆ໌ॻಡ·ͳ͍ਓʯ޲͚ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠

SJPUKTDPNQMBZ ΍ͬͯΈΑ͏

3JPUKT͸ɺ طଘٕज़ͰʮίϯϙʔωϯτʯΛ ࣮ݱ͢ΔͨΊͷɺ࠷΋γϯϓϧͳ Ξϓϩʔνɻ

͑ͬɺίϯϙʔωϯτͬͯ ผ໊ʮΧελϜλάʯ ͔͋ͨ΋৽͍͠)5.-ཁૉΛɺ ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ

3JPUͰίϯϙʔωϯτΛॻ͘

<weather> </weather> HTML JS CSS ఆٛ͢ΔλάͰғΉ͚ͩ weather.tag

<weather> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: { types[opts.type] }</li> <li>ؾԹ:
{ opts.temperature }౓</li> <li>࣪౓: { opts.humidity }</li> </ul> <sctipt> this.types = { clear: ‘੖Ε’ } </script> <style scoped> :scope { display: block; } </style> </weather> HTML JS CSS

<weather> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: { types[opts.type] }</li> <li>ؾԹ:
{ opts.temperature }౓</li> <li>࣪౓: { opts.humidity }</li> </ul> <sctipt> this.types = { clear: ‘੖Ε’ } </script> <style scoped> :scope { display: block; } </style> </weather> HTML JS CSS ͔͗Γͳ͘ɺ)5.-ͦͷ΋ͷ

index.html riot.js weather.tag app.tag ϑΝΠϧߏ੒ ˞΋ͬͱ΋୯७ͳέʔε

<html> <body> <weather></weather> <script src=“riot.js”></script> <script src=“weather.tag” type=“tag”></script> <script> riot.mount(‘weather’,
{ type: ‘clear’, temperature: 10, humidity: ’30%’ }) </script> <body> </body> ௚઀Ϛ΢ϯτ ͜͜ʹϚ΢ϯτ

<html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag” type=“tag”></script> <script src=“weather.tag”
type=“tag”></script> <script> riot.mount(‘app’) </script> <body> </body> ؒ઀Ϛ΢ϯτ <app> <weather type=“clear” temperature=“10” humidity=“30%” /> </app> ΄ͱΜͲɺεΫϦϓτΛॻ͔ͳͯ͘ࡁΉ ͜͜ʹϚ΢ϯτ

ίʔμʔͷ෼୲͸Ͳ͏ͳΔͷ

ैདྷͷॻ͖ํ ਫฏ෼ۀ CSS HTML JS Template Template Template

3JPUͷॻ͖ํ ਨ௚౷߹ CSS HTML JS Template Template Template CSS JS
CSS JS CSS JS Tag A Tag B Tag C

w ෆඞཁʹόϥ͚͍ͯͨ΋ͷ͕ɺͻͱͭʹ w )5.-ɾ+4ɾ$44ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ w #&.Αɺ͞Α͏ͳΒ ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘ ʮίϯϙʔωϯτʯʹ

ίϯϙʔωϯτ)5.-෦඼

<nandemo-iindayo /> <div> </div>

)5.-ʹ͓͚Δʮؔ਺ʯ <weather type=“clear” temperature=“10” humidity=“30%” /> <div> <img src=“clear.svg” />
<ul> <li>ۭ΋Α͏: ੖Ε</li> <li>ؾԹ: 10౓</li> <li>࣪౓: 30%</li> </ul> </div> ੖Ε 10౓ 30%

ίϯϙʔωϯτ㲈XFCDPNQPOFOUT 8FCඪ४ʹ͢Δಈ͖΋ 3JPU 3FBDU "OHVMBS 1PMZNFS

ਖ਼௚ɺ͍ͭʹͳΔ͔෼͔Βͳ͍

ίϯϙʔωϯτWTςϯϓϨʔτ

ίϯϙʔωϯτ ςϯϓϨʔτ )5.-΁ͷม਺ຒΊࠐΈ :&4 :&4 ΧελϜλάͱͯ͠ৼΔ෣͏ :&4 /0 ϏϡʔϩδοΫ ϏϡʔͷϦΞϧλΠϜมߋ
:&4 /0 ϏδωεϩδοΫ /0 /0 ίϯϙʔωϯτWTςϯϓϨʔτ ॻ͍ͪΌμϝ

“Templates separate technologies, not concerns.” ʮςϯϓϨʔτ͕੾Γ෼͚͍ͯͨͷ͸ɺ ໰୊͡Όͳٕͯ͘ज़ͩʯ CZ'BDFCPPLͷதͷਓ

Ϗϡʔ ϏδωεϩδοΫ ϏϡʔϩδοΫ Ϗϡʔ ϏδωεϩδοΫ ϏϡʔϩδοΫ ίϯϙʔωϯτ ςϯϓϨʔτ

ίϯϙʔωϯτWTK2VFSZ

ίϯϙʔωϯτWTK2VFSZ )5.-͕ඳը͞ΕΔ Πϕϯτ͕ى͖Δ )5.-͕ඳը͞ΕΔ K2VFSZͰॻ͖׵͑Δ Πϕϯτ͕ى͖Δ

ίϯϙʔωϯτ K2VFSZ )5.-ͷѻ͍ એݴత ॻ͍ͨ·Μ· ࠩ෼Λૢ࡞  Ͳ͏ม͑Δ͔ σʔλͷྲྀΕ σʔλˠϏϡʔ جຊతʹ͸
ͪ͝Όͪ͝Ό ίϯϙʔωϯτWTK2VFSZ

3JPUΛ΋͏গ͠

܁Γฦ͠ͱσʔλ <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> <ul> <li each={ fruits
}>{ name }</li> </ul> <script> this.fruits = [ { name: ‘Apple’ }, { name: ‘Orange’ }, { name: ‘Banana’ } ] </script>

Πϕϯτϋϯυϥ <input value={ username } onchange={ change }> <script> this.username
= ‘MEGANE’ this.change = e => { username = e.target.value } </script>

4DPQFE$44 <p>WP-D Week</p> <style scoped> :scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */
} p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ } </style>

͋ͱ͸ɺυΩϡϝϯτݟͯ

࠷ۙͷϑϩϯτΤϯυ͸ ͳͥϝϯυΫαΠͷ͔

ϑϩϯτΤϯυ͕೉͍͠ +BWB4DSJQU͕೉͍͠

೉͠͞⁞ จ๏͕ɺ׬શʹϕπϞϊ

ʮͳʜԿΛݴ͍ͬͯΔͷ͔ ɹΘ͔ΒͶʔͱࢥ͏͕ɺ  ɹ͓Ε΋ԿΛ͞Εͨͷ͔Θ͔Βͳ͔ͬͨʯ

map(), reduce(), forEach(), some()… for (of), Object.keys() Promise().then() function* (),
yield, async/await const, let, { foo, bar } import foo from ‘foo’, export default foo ͳʹ͜ͷ֎ࠃޠ

೉͠͞  ςετͱ͔ɺλεΫͱ͔

λεΫϥϯφʔ ςετϦϯλʔ ͦͷଞʜ

೉͠͞⁠ OQNͱϞδϡʔϧ

໿ສ ύοέʔδ

import add from ‘./add’ const x = add(1, 2) export
default function add (a, b) { return a + b } ผϑΝΠϧ͔Β ಡΈࠐΊΔ

೉͠͞⁡ ϙϦϑΟϧͱίϯύΠϧ όϯυϧ

#BCFM #BCFM #BCFM #BCFM #BCFM &4 &4 &4 &4 $ISPNF
4BGBSJ 'JSFGPY &EHF /PEF ϙϦϑΟϧ ࣮૷લʹػೳΛઌऔΓ

ίϯύΠϧ

͓͢͢Ί όϯυϥʔɺ͍Ζ͍Ζɻ

೉͠͞⁢ Կʹ੝Γ্͕ͬͯΔͷ͔ Θ͔ΒͶ͑

൙ཞ͢ΔμΠΞάϥϜɺ ܁Γ޿͛ΒΕΔۭதઓ

੍࣌ΛखʹೖΕͭͭ͋Δ +BWB4DSJQU ࠓேͷ෉්ͷձ࿩͔Β

چੈքͷ+BWB4DSJQU͸ɺ ΋͏๨Ε͍ͯͩ͘͞ɻ ΋͏·ͬͨ͘ผͷݴޠͰ͢ɻ ʮͨ͠ͳΈʯͱ͔ʮখखઌʯͰͲ͏ʹ͔ͳΔ΋ͷͰ͸ͳ͘ͳΓ·ͨ͠ɻ

͋Δ͍͸ʜ  ·ͱ΋ͳϓϩάϥϜݴޠͱͯ͠ɺ ࢖ΘΕΔΑ͏ʹͳͬͨɻ

Ͳ͏͢Δ

બ୒ࢶ⁞ มԽΛɺָ͠Ή ڧ͍ͯݴ͑͹ʮΦΠϥʔͷެࣜʯ͕ ൃݟ͞Ε͔ͨͷΑ͏ͳ໘ന͕͞ɺ ࠓͷ+BWB4DSJQUʹ͸͋Δ

બ୒ࢶ  ͦͬͱด͡Δ ṷ͸ṷ԰ɻख͸ग़͞ͳ͍ɻ ೥ޙ͘Β͍ʹɺ΋͏Ұ౓ݟʹདྷΔΑɻ

બ୒ࢶ⁠ ద౓ͳڑ཭ײͰ ϑϩϯτͷɺϏϡʔ͚ͩʹݶఆ͢Δɻ K2VFSZఔ౓ͷڑ཭ײͰ઀͢Δɻ

3JPU͸ɺ ʮϑϩϯτ͚ͩ΍Δʯ ͱ͍͏બ୒ࢶΛఏڙͯ͘͠ΕΔ ʹϑϧελοΫʹͳΓ͗͢ͳ͍

5IBOLZPV ࣭໰ΛͲ͏ͧ

Riot.js in WPD-Week

Riot.js in WPD-Week

More Decks by Tsutomu Kawamura

Other Decks in Programming

Featured

Transcript