Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ࠓޙͷϑϩϯτΤϯυ (Ծ) @Lodge Yahoo Japan 2018/03/26 Yosuke FURUKAWA
Slide 2
Slide 2 text
Twitter: @yosuke_furukawa Github: yosuke-furukawa
Slide 3
Slide 3 text
ࠓ͔ͿΓͦ͏ɾɾɾ
Slide 4
Slide 4 text
ͳΔ͘ࢿྉ͔ͿΒͳ͍Α͏ ʹ͠·͢ʂʂʂʂ
Slide 5
Slide 5 text
ʮࠓޙʯΈ͍ͨͳ֬ͷ͍ ͯ͠ΞϨͳͷͰɺʮࠓʯ ϦΫϧʔτͰͬͯΔ͜ͱΛ ͠·͢ɻ
Slide 6
Slide 6 text
https://recruit-tech.co.jp/blog/2017/06/07/bootcamp2017/
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
ాਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ क͞Μύʔτ
Slide 9
Slide 9 text
ాਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ क͞Μύʔτ ΤϯδχΞͷ৺ߏ͔͑ΒΞϓϦέʔ γϣϯͷத·ͰΔ
Slide 10
Slide 10 text
https://speakerdeck.com/rtechkouhou/javascript-bootcamp
Slide 11
Slide 11 text
JavaScript Bootcamp Ͱڭ͑ͯ ͍Δ͜ͱ • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ δχΞ" ͷఆٛͯ͘ਂ͍ • HTML/CSS/JSΛۦͯ͠ΫϥΠΞϯτΛ࡞Δ *͚ͩͰͳ͍* • ωοτϫʔΫͷࣝαʔόͷجૅࣝ༗͢Δ্ ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ ύϑΥʔϚϯεΛ্͛Δਓ
Slide 12
Slide 12 text
ϦΫϧʔτςΫϊϩδʔζͷ ϑϩϯτΤϯυΤϯδχΞ
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
HTML CSS JS ΣϒΛߏ͢Δݴޠ Backend Language (Java, Go)
Slide 17
Slide 17 text
DOM Cookie DevTools ϒϥβΛߏ͢Δ༰ CSSOM window navigator Headers
Slide 18
Slide 18 text
DNS URL HTTP(S) ωοτϫʔΫ WebSocket TCP TLS HTTP/2
Slide 19
Slide 19 text
Cache Critical- Rendering Path Metrics Tools ύϑΥʔϚϯε Memory CPU I/O
Slide 20
Slide 20 text
XSS CSRF SQL Injection ηΩϡϦςΟ DoS TLS/SSL
Slide 21
Slide 21 text
React Angular Redux JS Frameworks Vue.js Polymer
Slide 22
Slide 22 text
HTML CSS JS DOM Cookie DevTools CSSOM window navigator Headers DNS URL HTTP(S) WebSocket TCP TLS React Redux Memory CPU I/O DoS TLS/SSL
Slide 23
Slide 23 text
େมͰ͢Ͷ
Slide 24
Slide 24 text
͜Ε͕(ϦΫϧʔτͷ) ϑϩϯτΤϯυΤϯδχΞ ʹͳΔɺͱ͍͏͜ͱͰ͢ɻ
Slide 25
Slide 25 text
ͷ߹
Slide 26
Slide 26 text
શ෦Λ͓ͬͯ͘ඞཁͳ͍ɺ ͱ͍͏ͷͷɺେମͬͯΔ
Slide 27
Slide 27 text
ৄ͘͠ͳ͍ͷͰ͋ͬͯ 60%ҐͳΒେମͤΔ
Slide 28
Slide 28 text
Ͳ͏ͬͨΒ͜͏ͳΕΔͷ͔ʁ • ۚݴ
Slide 29
Slide 29 text
ٕज़ΛֶͿͷͰͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ • ΞτϓοτΛܧଓతʹߦ͏
Slide 30
Slide 30 text
ٕज़ΛֶͿͷͰͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ • ΞτϓοτΛܧଓతʹߦ͏ ϑϩϯτΤϯυͷ߹
Slide 31
Slide 31 text
ϑϩϯτΤϯυͰ৺͕͚Δࣄ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜ࡞Βͳ͍
Slide 32
Slide 32 text
ΞϓϦέʔγϣϯΛ࡞Ζ͏
Slide 33
Slide 33 text
Create Application /PEFֶԂࡇ ॳࢀՃޙʹҙࣝߴ·ͬͯ࡞
Slide 34
Slide 34 text
·͊·͊ͷڹ
Slide 35
Slide 35 text
Create Application • ͔ͦ͜Βௐࢠʹͬͯͨ͘͞Μ࡞
Slide 36
Slide 36 text
Ұ௨ΓNode.jsͬͯԿ͔࡞ ΕΔΑ͏ʹͳͬͨ
Slide 37
Slide 37 text
Create Application • ࡞ͬͨΒհ͠·ͬͨ͘ɻ
Slide 38
Slide 38 text
ͳΜͰ͜Μͳ͜ͱ͔ͯͨ͠ʁ
Slide 39
Slide 39 text
A. ָ͍͔͠Β
Slide 40
Slide 40 text
࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ
Slide 41
Slide 41 text
Կॲ͔Ͱݟͨ͜ͱ͋Δਤ ࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Կࣄָ͠Ή͜ͱॏཁ
Slide 44
Slide 44 text
ඇػೳཁ݅ʹͩ͜ΘΖ͏
Slide 45
Slide 45 text
ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc
Slide 46
Slide 46 text
ػೳཁ݅Λຬͨͯ͠ظʹ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ
Slide 47
Slide 47 text
ͷ߹
Slide 48
Slide 48 text
ύϑΥʔϚϯενϡʔχϯά େ͖ͩͬͨ
Slide 49
Slide 49 text
όοΫΤϯυͷσʔλϕʔε ͱ͔શจݕࡧ෦ͷνϡʔχ ϯάͬͯresponseͷ࣌ؒΛ ͘͢Δͷ͕ࣄͩͬͨɻ 1 sec => 300ms ʹͨ͜͠ͱ
Slide 50
Slide 50 text
Ͱ
Slide 51
Slide 51 text
ରԠϒϥβΛ IE => Chrome ʹ֦େͨ͠ͱ͖ͷ͜ͱ
Slide 52
Slide 52 text
രʹͳͬͨ
Slide 53
Slide 53 text
ϑϩϯτΤϯυͷٕज़͕ਐา ͢Δͱͷͬͯͨ͜ͱޡ ࠩʹมΘ͍ͬͯͬͨɻɻɻ
Slide 54
Slide 54 text
ඇػೳཁ݅Ͱੜ͖͍ͯͨࣗ ͕ॳΊͯܦݧͨ͠িܸ
Slide 55
Slide 55 text
࣮ࡍʹUXΛ࠷ߴʹ͢ΔͳΒ ϑϩϯτ͔ΒόοΫΤϯυ· Ͱશ෦ࣝΔඞཁ͕͋ΔΜͩͱ ͬͨ
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
ϦΫΤετ͔ΒϨεϙϯε·ͰͰͳ͘ɺϖʔδ͕ಡΈ ࠐ·Ε࢝Ί͔ͯΒϢʔβʔͷظΛಘΔ·Ͱɻ
Slide 58
Slide 58 text
͔ͦ͜ΒϑϩϯτΤϯυʹڵຯ Λ࣋ͬͨ • Node.jsJavaScriptֶ΅͏ͱͯͬͯͨ͠Β ָ͘͠ͳͬͯͬͯͨ • ϑϩϯτͰͳΜ͔ΞϓϦ࡞͍͕ͬͯͨɺ࣮ ࡍʹస৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠ • ͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ
Slide 59
Slide 59 text
ඇػೳཁ݅ʹͩ͜ΘΖ͏ɻ
Slide 60
Slide 60 text
ࣝʹ֞ࠜΛ࡞Βͳ͍
Slide 61
Slide 61 text
ࣝʹ֞ࠜΛ࡞Βͳ͍ • Dev / Ops Ͱͳ͘ Dev Ops • Engineer / Designer Ͱͳ͘ Engineer Designer • Backend / Frontend Ͱͳ͘ Backend Frontend
Slide 62
Slide 62 text
ࣝʹ֞ࠜΛ࡞Βͳ͍ • ཧIࣈܕΑΓTࣈܕ • Ұݸ࣠Λ࡞͔ͬͯͦ͜Β͛Δ
Slide 63
Slide 63 text
ࣝʹ֞ࠜΛ࡞Βͳ͍ • Tࣈܕͷਓ͕૿͍͖͍ͯͨ͠ɻ • զʑͷֶͿ͜ͱଟ͍ɺͰTࣈܕͷਓ͕૿͑ΕͦͷΧόʔͰ ͖Δɻ Designer FE BE
Slide 64
Slide 64 text
ͷ߹
Slide 65
Slide 65 text
ׂͱͳΜͰ͖ • Πϯϑϥ͖ • όοΫΤϯυ͖ • ϓϩάϥϛϯάݴޠͦͷͷ͖ • ϓϩμΫτΛߏங͢Δͷ͖ • σβΠϯܥͷπʔϧษڧͯ͠Δ
Slide 66
Slide 66 text
ׂͱͳΜͰ͖ • Πϯϑϥ͖ • όοΫΤϯυ͖ • ϓϩάϥϛϯάݴޠͦͷͷ͖ • ϓϩμΫτΛߏங͢Δͷ͖ • σβΠϯܥͷπʔϧษڧͯ͠Δ ͳΜͰΔඞཁͳ͍ɺͰ ح৺ʹ֞ࠜ࡞ͬͯ΄͘͠ͳ͍ɻ
Slide 67
Slide 67 text
ࣝʹ֞ࠜΛ࡞Βͳ͍
Slide 68
Slide 68 text
ࣝʹ֞ࠜΛ࡞Βͳ͍ • ͪ;Δ 13 ר ࡩ ਯʮ͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍ΘΑʯ
Slide 69
Slide 69 text
·ͱΊ
Slide 70
Slide 70 text
·ͱΊ • ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυͨͩը໘Λ࡞ Δ͚ͩͷਓ͡Όͳ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏
Slide 71
Slide 71 text
·ͱΊ • ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυͨͩը໘Λ࡞ Δ͚ͩͷਓ͡Όͳ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏ ͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍
Slide 72
Slide 72 text
Thank You!!!