「ホームページ屋さん」とJavaScriptの未来。

by Toro_Unit (Hiroshi Urabe)

Slide 1

Slide 1 text

ʮϗʔϜϖʔδ԰͞Μʯ ͱJavaScriptͷະདྷɻ Toro_Unit / 2016.10.15 @ ळͷJavaScriptࡇɹin mixi ʙळͷJavaScriptऩ֭ࡇʙ 1

Slide 2

Slide 2 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ1 Ͱ΋ग़਎͸܈അɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 2

Slide 3

Slide 3 text

Slide 4

Slide 4 text

$ whoami ͜͡͠ΐ͏͔͍ 4

Slide 5

Slide 5 text

Toro_Unit / ઎෦ ߛ Freelance Frontend Engineer / Web Designer WordPress plugin and theme developer 27 years old. I love sake and OSS! Github: @torounit Twitter: @Toro_Unit 5

Slide 6

Slide 6 text

ͭ·Γ 6

Slide 7

Slide 7 text

஍ํͷϗʔϜϖʔδ԰͞ΜͰ͢ɻ 7

Slide 8

Slide 8 text

ࠓ·Ͱͷ͓࢓ࣄ ओʹ௕໺ݝͷ੍࡞ձࣾ࣌୅ ( 2009.09 ~ 2015.12 ) 8

Slide 9

Slide 9 text

΍͖ͬͯͨ͜ͱ • HTML&CSS ։ൃ / ͨ·ʹWebσβΠϯ • JavaScript͸jQueryͰΰϦΰϦܥɻ • CMS ςʔϚ੍࡞ • ( 9ׂํ WordPress or MovableType / ͨ·ʹDrupalͱ͔...etc ) • CMS ΧελϚΠζɾϓϥάΠϯ੍࡞ • ( ΧελϜϑΟʔϧυΊͬͪΌ࡞ͬͨΓɺPHPΊͬͪΌॻ͍ͨΓ ) • ؀ڥ͸΄ͱΜͲϨϯλϧαʔόʔ (LAMP) 9

Slide 10

Slide 10 text

΍ͬͯͳ͍͜ͱ • γϯάϧϖʔδΞϓϦέʔγϣϯ • WEBαʔϏε։ൃ • εϚϗΞϓϦ։ൃ • γεςϜ։ൃ 10

Slide 11

Slide 11 text

ʮϗʔϜϖʔδ԰͞Μʯʹͱͬͯͷ JavaScriptͱ͸ɻ 11

Slide 12

Slide 12 text

ͪΐͬͱͨ͠ΞχϝʔγϣϯΛͭ͘ΔͨΊͷ΋ͷʂ GoogleMap ʹϐϯΛཱͯͨΓ͢ΔͨΊͷ΋ͷʂ 12

Slide 13

Slide 13 text

ͭ·Γ 13

Slide 14

Slide 14 text

Slide 15

Slide 15 text

ϗʔϜϖʔδ԰͞Μ͸͜͏ࢥͬͯΔΜ͡Ό... ͋͘·Ͱ๻ͷײ૝Ͱ͢ɻ • ʮReact/Angular/riot/Vue.js ͱ͔࠷໊ۙલ͸ݟΔ͚Ͳͳʹͦ Εඒຯ͍͠ͷʁʯ • ʮΞϓϦ԰͞Μ͕͔ͭ͏΋ͷͩΑͶʔʯ • ʮ͋Μ·Γؔ܎ͳ͍ΑͶʔʯ 15

Slide 16

Slide 16 text

...Ͱ΄Μͱʹ͍͍ͷʁ ʮͦΜͳ૷උͰେৎ෉͔ʁʯ 16

Slide 17

Slide 17 text

ͪΐͬͱ͜͜10೥ऑͷUIͷมભΛৼΓฦͬͯΈ·͠ΐ͏ɻ 17

Slide 18

Slide 18 text

࡞ͬͨ͜ͱ͋Δਓ͸݁ߏډΔΜ͡Όແ͍Ͱ͠ΐ͏͔ʁ • υϩϫʔϝχϡʔɾλϒɾΞίʔσΟΦϯɾίϯςϯπεϥΠμʔ • ແݶεΫϩʔϧ • ϦΞϧλΠϜͳϑΥʔϜͷόϦσʔγϣϯ • ՄมάϦου • Ϩεϙϯγϒ • ...etc 18

Slide 19

Slide 19 text

WEBαΠτͰ΋JavaScriptΛ౰ͨΓલʹར༻͢ΔΑ͏ʹɻ • JSΛແޮʹ͢Δͷ͕ਈ࢜ɾ॔ঁͷᅂΈͩͬͨ࣌୅͸Կॲ΁΍ Βɻ • Flashશ੝ͷ͋ͷࠒ͕ջ͔͍͠ɻ • JS͕ແޮͳ؀ڥͳͨΊͰ͸ແ͘ɺΞΫηγϏϦςΟͷͨΊʹ ͪΌΜͱHTMLΛॻ࣌͘୅ʹɻ 19

Slide 20

Slide 20 text

͜ͷ਺೥Ͱ͍Ζ͍ΖਐԽͯ͠·͢ΑͶ 20

Slide 21

Slide 21 text

• ͜Ε͔Β΋UI΁ͷཁٻ͸͖ͬͱ্͕Γଓ͚Δɻ • σβΠφʔ͔Βɾސ٬͔Βͷཁٻ΋্͕Γଓ͚ΔΑͶɻ(ԕ͍ ໨) 21

Slide 22

Slide 22 text

ͨͱ͑͹͜Μͳͷ 22

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Good Morning Sunshine • gms.life • new barlance ͷWEBϚΨδϯ • CMS͕ग़ྗͨ͠JSONΛAjaxͰऔ͖ͬͯͯɺReactͰϨϯμϦ ϯάɻ 24

Slide 25

Slide 25 text

΄͔ʹ΋͜Μͳͷ • ustwo.com • άϩʔόϧల։͍ͯ͠Δւ֎ͷσβ ΠϯελδΦɻ • όοΫΤϯυ͸WordPressɻϑϩϯ τΤϯυ͸ɺReact + SSRɻ • github.com/ustwo/ustwo.com- frontend 25

Slide 26

Slide 26 text

WEBαΠτ্ʹΞϓϦΈ͍ͨͳ΋ͷ͕ ͋ΔΑ͏ͳࣄྫ΋૿͖͑ͯͨɻ 26

Slide 27

Slide 27 text

Slide 28

Slide 28 text

dressup-navi.net https://dressup-navi.net/parts/8039/ • WordPressͰͷهࣄ্ʹɺ4୒ͷΫΠζɻ • WP REST API + React + Redux 28

Slide 29

Slide 29 text

jQuery͚ͩͰؤுΕΔɾɾɾʁ ͓Ε͸ΉΓ 29

Slide 30

Slide 30 text

ϝδϟʔͳCMS΋REST APIΛ౥ࡌ͢ΔΑ͏ʹ • WP REST API • Movable Type Data API • ...etc 30

Slide 31

Slide 31 text

͜͏͍ͬͨදݱ͕౰ͨΓલʹͳΔ͔΋͠Εͳ͍ɻ ɹͳΒͳ͍͔΋͠Εͳ͍ɻ 31

Slide 32

Slide 32 text

ͦΕͰ΋WEBͰͷදݱ͸ਐԽ͠ଓ͚Δ͸ͣɻ ཁ๬΋...ʢԕ͍໨ʣ 32

Slide 33

Slide 33 text

ͦΕΛ࣮ݱ͢Δͷ͸ɺHTMLŋCSS ͦͯ͠ɺJavaScirpt 33

Slide 34

Slide 34 text

jQuery is not evil. • jQueryͰे෼ͳ͜ͱແཧͯ͠ؤுΔඞཁ͸ແ͍ɻ • ͪΐͬͱͨ͜͠ͱΛ΍ΔͷʹjQuery͸ຊ౰ʹ࠷ߴɻ • Ͱ΋ɺjQuery͕ແ͍ͱԿ΋ग़དྷͳ͍͍ͬͯ͏ͷ͸ͨͿΜͭΒ ͍ɻ 34

Slide 35

Slide 35 text

·ͱΊ • WEBαΠτͰ΋JSϑϨʔϜϫʔΫΛ࢖͏͜ͱ΋͋ΔΑɻ • ΞϓϦΈ͍ͨͳදݱ͸૿͑Δ͔΋Αɻ • ͦ͏ͳͬͨͱ͖ɺjQuery͔͠෢ث͕ແ͍ͱͭΒ͍͔΋Αɻ 35

Slide 36

Slide 36 text

ͱΓ͋͑ͣɺTodoΞϓϦͱ͔ͷࣸܦ͔Β࢝ΊΔɻ ͜ΕҎ্ઌӶԽ͢Δલʹ৮ͬͱ͜͏ͥɻ 36

Slide 37

Slide 37 text

਺͋Δબ୒ࢶͷத͔ΒjQueryΛʮબ୒ग़དྷΔʯΑ͏ʹͳΖ͏ɻ 37

Slide 38

Slide 38 text

͓ΘΓɻ ࠙਌ձͰ·͓ͨ࿩͠·͠ΐ͏ɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 38