Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

cognitom

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

HJUIVCDPNDPHOJUPN

Slide 5

Slide 5 text

ࠓ೔ɺ࿩͢͜ͱ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

૝ఆΦʔσΟΤϯε

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

3JPUKTͱ͸

Slide 10

Slide 10 text

೥݄WFS

Slide 11

Slide 11 text

ۙ೔WFS

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

খ͍͜͞ͱ͸ɺળ

Slide 14

Slide 14 text

͚ͬ͜͏ਓؾ

Slide 15

Slide 15 text

ίΞίϛολʔͷډ৔ॴ

Slide 16

Slide 16 text

Կ͕Ͱ͖Δͷ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 ٕज़ελοΫͷதͷɺίίɻ

Slide 19

Slide 19 text

ίϯϙʔωϯτΛ࡞Ε·͢
  • ۭ΋Α͏: ੖Ε
  • ؾԹ: 10౓
  • ࣪౓: 30%
੖Ε 10౓ 30%

Slide 20

Slide 20 text

3JPUKT͸ͲΜͳਓ޲͚

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

SJPUKTDPNQMBZ ΍ͬͯΈΑ͏

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

  • ۭ΋Α͏: { types[opts.type] }
  • ؾԹ: { opts.temperature }౓
  • ࣪౓: { opts.humidity }
this.types = { clear: ‘੖Ε’ } :scope { display: block; } HTML JS CSS

Slide 29

Slide 29 text

  • ۭ΋Α͏: { types[opts.type] }
  • ؾԹ: { opts.temperature }౓
  • ࣪౓: { opts.humidity }
this.types = { clear: ‘੖Ε’ } :scope { display: block; } HTML JS CSS ͔͗Γͳ͘ɺ)5.-ͦͷ΋ͷ

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

riot.mount(‘weather’, { type: ‘clear’, temperature: 10, humidity: ’30%’ }) ௚઀Ϛ΢ϯτ ͜͜ʹϚ΢ϯτ

Slide 32

Slide 32 text

riot.mount(‘app’) ؒ઀Ϛ΢ϯτ ΄ͱΜͲɺεΫϦϓτΛॻ͔ͳͯ͘ࡁΉ ͜͜ʹϚ΢ϯτ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Slide 40

Slide 40 text

)5.-ʹ͓͚Δʮؔ਺ʯ
  • ۭ΋Α͏: ੖Ε
  • ؾԹ: 10౓
  • ࣪౓: 30%
੖Ε 10౓ 30%

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

ਖ਼௚ɺ͍ͭʹͳΔ͔෼͔Βͳ͍

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

ίϯϙʔωϯτWTK2VFSZ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

3JPUΛ΋͏গ͠

Slide 52

Slide 52 text

܁Γฦ͠ͱσʔλ
  • Apple
  • Orange
  • Banana
  • { name }
this.fruits = [ { name: ‘Apple’ }, { name: ‘Orange’ }, { name: ‘Banana’ } ]

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

4DPQFE$44

WP-D Week

:scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */ } p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ }

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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 ͳʹ͜ͷ֎ࠃޠ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

೉͠͞⁠ OQNͱϞδϡʔϧ

Slide 65

Slide 65 text

໿ສ ύοέʔδ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

ίϯύΠϧ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Ͳ͏͢Δ

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

બ୒ࢶ  ͦͬͱด͡Δ ṷ͸ṷ԰ɻख͸ग़͞ͳ͍ɻ ೥ޙ͘Β͍ʹɺ΋͏Ұ౓ݟʹདྷΔΑɻ

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

5IBOLZPV ࣭໰ΛͲ͏ͧ