Tweet
Tweet

Slide 1

Slide 1 text

·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ 2015.06.06 (͍͍ͩͨ)৽ଔΤϯδχΞ޲͚ٕज़ަྲྀձ vol.3

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Slide 4

Slide 4 text

͜Μ͹Μ͸ hoge17296 Ͱ͢ʂʂʂʂʂ

Slide 5

Slide 5 text

hoto
 17296

Slide 6

Slide 6 text

ͱ͏ͱ͏ϓϩάϥϚྺ
 10 ೥໨ʹಥೖ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

ͦΕͰ΋ 10 ೥Ͱ ͍Ζ͍Ζͳ΋ͷΛݟ͖ͯͨ

Slide 9

Slide 9 text

ΫϥΠΞϯταΠυ JS ۙ୅࢙

Slide 10

Slide 10 text

ʙ 2004 ೥ • JS ͸ʮ Web ʹͪΐͬͱಈ͖ΛՃ͑Δ΋ͷʯ • ʮJS͕ಈ͔ͳ͍؀ڥͷ͜ͱ΋
 ɹߟ͑ͳ͖ΌμϝͰ͠ΐʂʂʂʯ • Ϧονͳ͜ͱ͸ Flash Ͱ΍Ε

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Flash ԫۚ࣌୅

Slide 15

Slide 15 text

ਓੜͷઈ௖

Slide 16

Slide 16 text

2005 ೥

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Ajax ͷ஀ੜ • ࣮͸ੲ͔Β͚͋ͬͨͲ஌ΒΕ͍ͯͳ͔ͬͨ
 XMLHttpRequest ͕ Google Maps ʹΑͬͯ
 ࠶ൃݟ͞ΕͯҰ༂༗໊ʹ • Ajax (Asynchronous JavaScript + XML) ͱ͍͏
 ݴ༿͕ੜ·ΕΔ • ͔͠͠·ͩ·ͩෑډ͕ߴ͍

Slide 19

Slide 19 text

2006 ೥

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

jQuery ͷিܸ • ΫϥΠΞϯταΠυϓϩάϥϛϯάͷෑډΛ
 ѹ౗తʹԼ͛ͨ • DOM ૢ࡞ • Πϕϯτॲཧ • Ϋϩεϒϥ΢β • Ajax

Slide 22

Slide 22 text

$()

Slide 23

Slide 23 text

͋·͍͋·͍ γϯλοΫε γϡΨʔ

Slide 24

Slide 24 text

jQuery ৬ਓ͕ࣾձ໰୊ʹ ʮ͜ΕάʔάϧΈ͍ͨʹ
 ɹΪϡΠʔϯͬͯײ͡Ͱ
 ɹͰ͖ΔΑͶʁʯ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

...ͱ͸ݴ͑ͳ͍ • ͳ·͡ jQuery ͕͋Ε͹ͦͦ͜͜ग़དྷͯ͠·͏ • ͪΐͬͱάάΕ͹ϓϥάΠϯ͕མͪͯΔ • ग़དྷΔΑ͏ͳؾ͕ͯ͠͠·͏ • ʮग़དྷͯ౰ͨΓલʯͱͯ͠ཁٻ͞ΕΔ

Slide 27

Slide 27 text

ͳʹ͕ͭΒ͍͔

Slide 28

Slide 28 text

͢΂ͯͷ DOM ͷঢ়ଶ؅ཧ • Ͳͷ DOM ͕ࠓͲΜͳ஋Λ͍࣋ͬͯΔ͔ • Ͳͷ DOM ͔ΒԿͷΠϕϯτ͕ൃՐ͢Δ͔ • ͜ͷ஋͕มΘͬͨΒͲͷ DOM Λ
 ॻ͖׵͑ͳ͍ͱ͍͚ͳ͍͔

Slide 29

Slide 29 text

ίϯϙʔωϯτ͕૿͑Δͨͼ ߟ͑Δ΂͖͜ͱ͕ ࢦ਺ؔ਺తʹ૿͍͑ͯ͘ ϓϩάϥϛϯά

Slide 30

Slide 30 text

Ұ෦ͷ༏Εͨ৬ਓʹ͔͠ ੒͠ಘͳ͍௒ઈٕ޼

Slide 31

Slide 31 text

ͦͯ͠ 2010 ೥

Slide 32

Slide 32 text

Single Page Application

Slide 33

Slide 33 text

Single Page Application • HTML5 ͷ history.pushState ʹΑͬͯ
 URL ͷಈతॻ͖׵͕͑Մೳʹ • ϖʔδભҠͱ͍͏֓೦Λ௒ӽͨ͠
 ΫϥΠΞϯταΠυϓϩάϥϛϯάͷۃ஍

Slide 34

Slide 34 text

ྫ ʮSPAͰ࡞ͬͯͶʂʂʂʯ ʮͰ΋ history.back ͯ͠΋લͷϏϡʔͷ
 ɹεΫϩʔϧҐஔอ࣋ͯ͠Δͷ౰વͩ͠
 ɹ৘ใ΋ߋ৽͞ΕͯΔΑͶʂʂʂʯ

Slide 35

Slide 35 text

΋͸΍ ਓؒۀͰ͸ͳ͍

Slide 36

Slide 36 text

͜Μͳ΋ͷ͕ ”౰ͨΓલ”ͱͯ͠ ཁٻ͞ΕΔੈͷத͸ ઈରʹؒҧ͍ͬͯΔ

Slide 37

Slide 37 text

Զ͸ ΋͏

Slide 38

Slide 38 text

2014 ೥

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

React • Facebook ੡ͷ UI ϥΠϒϥϦ • ϑϨʔϜϫʔΫ͡Όͳ͍ • ಛ௃ • ϦΞΫςΟϒϓϩάϥϛϯά • Virtual DOM

Slide 41

Slide 41 text

΋͏ DOM ૢ࡞͠ͳ͍͍ͯ͘ • มߋ͕͋ͬͨΒ HTML શମΛॻ͖׵͑Δ • ৗʹ࠷৽ͷঢ়ଶͷ DOM Λ
 ϨϯμϦϯά͠ଓ͚Ε͹͍͍͚ͩ • React ͕಺෦Ͱ diff / patch ͯ͘͠ΕΔ͔Β
 ஗͘ͳ͍

Slide 42

Slide 42 text

DEMO http://bit.ly/mtg_timer

Slide 43

Slide 43 text

ʮࣄ͋Δຖʹ࠷৽ͷ HTML Λ
 ϨϯμϦϯά͢Δʯ ʁʁʁ

Slide 44

Slide 44 text

͜ΕͬͯੲϖʔδભҠͰ ΍͍ͬͯͨ͜ͱ͡Όͳ͍͔

Slide 45

Slide 45 text

γϯϓϧͰݹ͍ ͜ͷ֓೦ͦ͜ ਖ਼͔ͬͨ͠

Slide 46

Slide 46 text

΅ͨͪ͘͸ ͪΐͬͱ࿪ΜͰ͍ͨ ͚ͩͩͬͨΜͩ

Slide 47

Slide 47 text

·ͱΊ • ΅ͨͪ͘͸ DOM ૢ࡞ͱ͍͏
 ۤ௧Λڧ͍ΒΕ͍ͯΔ • ຑༀ (jQuery) ʹΑΔର঱ྍ๏΋ݶք͕དྷ͍ͯΔ • React ʹΑͬͯ΅ͨͪ͘͸ղ์͞ΕΔ

Slide 48

Slide 48 text

ָ͔ͬͨ͋͠ͷࠒʹ໭Ζ͏

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ