2016年JavaScriptにどっぷり浸かって学んだこと

by potato4d(Hanatani Takuma)

Slide 1

Slide 1 text

2016೥JavaScriptʹ Ͳͬ΀Γਁֶ͔ͬͯΜͩ͜ͱ #frontkansai 2016.09 TAKUMA Hanatani(Potato4d) ͋Δ͍͸JavaScriptා͘ͳ͔ͬͨ࿩

Slide 2

Slide 2 text

ࣗݾ঺հ Ֆ୩୓ຏ(@potato4d) w #frontkansai #wbkyoto ͷਓ w SCOUTER inc.ͰVue.jsͰSPAॻ͍ͨΓ΋ w དྷ೥͔ΒࣾձਓʹͳΔͬΆ͍ w εϥΠυ͸SpeakerDeckʹ্͛ΔΑ͏ͷ ςΩετ͕ଟ͍ͷͰจࣈ͸ಡ·ͳͯ͘ྑ ͍λΠϓͷ΍ͭͰ͢

Slide 3

Slide 3 text

ࠓ೔࿩͢͜ͱ • CM w ࢲ͕ϑϩϯτΤϯυʹڵຯΛ࣋ͭ·Ͱͷ࿩ w ࢲ͕ϑϩϯτΤϯυʹڵຯΛ͔࣋ͬͯΒͷ࿩ w ཁॴཁॴͰͷٕज़ͷมભ • CM

Slide 4

Slide 4 text

Ұ೔ͷӫཆ͕׬શʹऔΕΔʂ ׬શ৯COMPൃചதʂ https://comp.jp גࣜձࣾCOMP

Slide 5

Slide 5 text

఻͍͑ͨ͜ͱ w ϑϩϯτΤϯυා͘ͳ͔ͬͨ w ϑϩϯτΤϯυͷਓ΋৔ॴʹΑͬͯ͸ා͘ͳ͔ͬ ͨ

Slide 6

Slide 6 text

http://nagashi.me

Slide 7

Slide 7 text

w جຊతʹPHPϕʔεͰશ෦ղܾ w JavaScript͸AjaxٴͼDOMૢ࡞ͷΈʹར༻ w ϚʔΫΞοϓΤϯδχΞ+PHPΈ͍ͨͳঢ়ଶ w Node.js͸λεΫϥϯφʔ౳ͷศརπʔϧͷར༻ͷ ҝͷར༻͕த৺ ϑϩϯτΤϯυʹؔΘΔલ 2015.12

Slide 8

Slide 8 text

w ͪͳΈʹ Onsen UI͕࢖͍ͨͯ͘AngularJSΛར༻͢ Δ΋͏·͍͜ͱ࢖͍͜ͳͤͣྲྀΕʹ w Onsen UIͷαϯϓϧ͔Βࠓͷߏ੒ΛͳΜͱͳ͘͸ ஌ͬͨͭ΋ΓʹͳΔ w ੍࡞ձࣾͷεΩϧϕʔεͰ͸ɺࠓޙͭΒ͍͜ͱΛͳ Μͱͳ͘࡯࢝͠ΊΔ ϑϩϯτΤϯυʹؔΘΔલ 2015.12

Slide 9

Slide 9 text

׽͸໧ͬͯjQuery

Slide 10

Slide 10 text

ϑϩϯτΤϯυͱͷग़ձ͍ w jQueryഉআͷӡಈ͕֤஍ͰਐΜͰ͍ͨͷͰ׶͑ͯ jQueryͰ࿩ͨ͢ΊͱϐβΛ৯͍ʹ#frontkansai΁ w ͜ͷ࣌ʹϑϩϯτΤϯυΊͬͪΌ͓΋͠Ζͦ͏΍Μʂ ͱײͯ͡ϑϩϯτ΁ͷҠߦΛܾҙ w ಉ࣌ʹJavaScriptΛଘ෼ʹ͔͚Δ؀ڥʹ͍͘͜ͱ΋ܾ ҙ 2015.12

Slide 11

Slide 11 text

ϞμϯJavaScript΁ͷಓ

Slide 12

Slide 12 text

w গͣͭ͠ݱ୅తͳJavaScriptΛֶͼͩ͢ w ͸͡Ί͸Node.jsͰͷQoL޲্ͱɺHTML5ͷ஥ྑ ͍ͯ͘͠ΔྖҬ͔Βͷ֎ງຒΊ྆ํͰਐΊͨ w ݁Ռతʹ͸͸͡Ί͔ΒϑϩϯτΤϯυͷJS-FWͰ ਐΊͨ΄͏͕ྑ͔ͬͨͷͰɺ͕࣍ॏཁ ϞμϯJavaScript΁ͷಓ ʙ2016.03,04

Slide 13

Slide 13 text

Vue.jsͱͷग़ձ͍

Slide 14

Slide 14 text

w ϑϩϯτΤϯυʹؔΘΔલ͔ΒTwitterͷ஌Γ߹͍ ʹѪ޷Ո͕͍ͯͳΜ͔ੌ͍ͱ͸ࢥ͍ͬͯͨ • PHP࣌୅͔Β(SymfonyͳͲ େن໛ϑϨʔϜϫʔΫ ͕ۤखͩͬͨͷͰஸ౓खࠒͰར༻͢Δ͜ͱʹ w Vue.jsʹΑͬͯগͣͭ͠JavaScriptͱ஥ྑ͘ͳΕͨ Vue.jsͱͷग़ձ͍ 2016.04ʙ

Slide 15

Slide 15 text

w ES2015จ๏ ίϯϙʔωϯτࢥߟ webpackͷ -loaderͳͲɺϞμϯͳٕज़͸Vue.jsΛ௨͠ ֶͯΜͩ w ࠷௿ݶ࢖͏ʹ͸ϒϥ΢βͰͦͷ··ಡΈࠐΜͰ΋ Πέͯɺ࢖͍౗͢ʹ͸NodeϕʔεͰ৭ʑग़དྷΔ ؒޱ͕޿͘Ԟ͕ਂ͍ͷֶ͕Ϳʹ͸࠷ద Vue.jsͱͷग़ձ͍ 2016.04ʙ

Slide 16

Slide 16 text

w ݱঢ়ɺ།Ұݱ৔Ͱͷಋೖʹઌ೔੒ޭͯͦ͠͏͍ ͏ҙຯͰ΋ίετ͕௿ͯ͘ྑ͔ͬͨ w จ๏ࣗମͷܰ͞ɺ෯޿͞ɺখ೉͍͠ઃܭΛ͠ͳ ͯ͘΋ͦΕͳΓʹடং͕ੜ·ΕΔลΓ͔Βɺ jQueryͷ࣍ͷҰาʹ͸࠷దͩͱࢥ͍ͬͯΔ Vue.jsͱͷग़ձ͍ 2016.04ʙ

Slide 17

Slide 17 text

ଓɾϞμϯJavaScript΁ͷಓ

Slide 18

Slide 18 text

w ESͷʮStage 0Ͱ΋ରԠͯ͠Δ͔ΒͦΕͰॻ͍ͯʯͱݴ ΘΕͨΓɺReactΛ ୹ظ͚ͩ ࣮༻͢Δ͜ͱʹͳͬͨΓ w Node.jsͷϞδϡʔϧ͔ΒESͷimport/export΁ w let/const, Arrow Function, PromiseลΓ͚ͩ͡Όͳ͍ES ͷهड़΁ ଓɾϞμϯJavaScript΁ͷಓ 2016.07ʙNow

Slide 19

Slide 19 text

͜͜·Ͱ͍ͭͯ͜Εͨཧ༝

Slide 20

Slide 20 text

JavaScriptܥྻͰͷษڧձͰͷొஃ

Slide 21

Slide 21 text

w ษڧձͰ࿩͢ͱ͍͏͜ͱ͸ɺ1࿮෼ͷՁ஋Λఏڙ͢ Δͱ͍͏͜ͱ w Ͱ͖Δ͔Ͱ͖ͳ͍͔͸ผͱͯ͠ɺͦ͜ͷͨΊʹ࠷େ ݶ౒ΊΑ͏ҙࢤ͕Ұ൪੒௕ʹܨ͕ͬͨ w ୯ʹϞνϕ্͕͕Βͳͯ͘΋5%% ొஃۦಈ։ൃ ͠ ͩ͢ͱઈର΍Δͱ͍͏͜ͱ΋͋Δ ษڧձͰ࿩͢ॏཁੑ

Slide 22

Slide 22 text

w ొஃ͚ͩͰͳ͘ɺQiitaͰ΋े෼ޮՌ͸͋ͬͯɺͱʹ ͔͘Publish͢Δͷ͕ॏཁ͔΋ w ਓͷ໨ʹͭ͘ͱ͜ΖͰɺ੿ͯ͘΋ɺੌ͘ͳͯ͘΋ɺ গͣͭ͠֎ʹ޲͚Δ͜ͱͰɺҙ͕ࣝժੜ͑ͯ͘Δ w ͲΜͲΜ֎޲͖ʹൃ৴͍͖͍ͯͨ͠͠ɺͦ͏͠ଓ͚ Δ͜ͱ͕ࣗ෼ʹͱͬͯͷՁ஋ͱͳΔ ษڧձͰ࿩͢ॏཁੑ