Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
エンジニアになる覚悟
Search
Yosuke Furukawa
PRO
June 23, 2018
Programming
29k
85
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
エンジニアになる覚悟
Leveragesで発表したエンジニアになる覚悟の話です。
Yosuke Furukawa
PRO
June 23, 2018
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Webの地図
yosuke_furukawa
PRO
6
4.3k
XHTMLが残したもの
yosuke_furukawa
PRO
2
710
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
400
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
290
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5.3k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.8k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
360
Removing Corepack
yosuke_furukawa
PRO
9
2k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3.2k
Other Decks in Programming
See All in Programming
自分的「カンファレンスの楽しみ方」
syumai
0
200
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
theoriatec2024
1
470
go-spidermonkeyでAIエージェントのCode Modeを実装する
syumai
3
1.5k
業務時間外もAIに働いてもらう話
colorful12
3
10k
LoopHub - ローカルで動く GitHub で、AI と共同開発
jugyo
1
530
[DroidKaigi 2026] Bring your own phones to Gradle Managed Devices
f2lk
0
120
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
tomoyakitaura
4
1.1k
What We Talk About When We Talk About XP
m_seki
2
570
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
nogu66
0
150
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
halunoyo
0
450
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
yusuga
1
440
スマート反転とウェブアクセシビリティ
camiha
0
200
Featured
See All Featured
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
480
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
990
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
410
The innovator’s Mindset - Leading Through an Era of Exponential Change - McGill University 2025
jdejongh
PRO
1
330
Believing is Seeing
oripsolob
1
220
30 Presentation Tips
portentint
PRO
1
390
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.7k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Deep Space Network (abreviated)
tonyrice
0
300
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
980
Transcript
ΤϯδχΞʹͳΔ֮ޛ 2018/06/23 @ ώΧϦΤ Leverages
Twitter: @yosuke_furukawa Github: yosuke-furukawa
2018/11/23 - 24 Node ֶԂࡇ։࠵
ΤϯδχΞʹͳΔ
https://recruit-tech.co.jp/blog/2017/06/07/bootcamp2017/
None
ాਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ Γ͞Μύʔτ
ాਓ͞Μύʔτ ʹ͠ΉͶ͋͞Μύʔτ Զύʔτ क͞Μύʔτ ΤϯδχΞͷ৺ߏ͔͑ΒΞϓϦέʔ γϣϯͷத·ͰΔ
https://speakerdeck.com/rtechkouhou/javascript-bootcamp
JavaScript Bootcamp Ͱڭ͑ͯ ͍Δ͜ͱ • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ δχΞ" ͷఆٛͯ͘ਂ͍ •
HTML/CSS/JSΛۦͯ͠ΫϥΠΞϯτΛ࡞Δ *͚ͩͰͳ͍* • ωοτϫʔΫͷࣝαʔόͷجૅࣝ༗͢Δ্ ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ ύϑΥʔϚϯεΛ্͛Δਓ
ϦΫϧʔτςΫϊϩδʔζͷ ϑϩϯτΤϯυΤϯδχΞ
None
None
None
HTML CSS JS ΣϒΛߏ͢Δݴޠ Backend Language (Java, Go)
DOM Cookie DevTools ϒϥβΛߏ͢Δ༰ CSSOM window navigator Headers
DNS URL HTTP(S) ωοτϫʔΫ WebSocket TCP TLS HTTP/2
Cache Critical- Rendering Path Metrics Tools ύϑΥʔϚϯε Memory CPU I/O
XSS CSRF SQL Injection ηΩϡϦςΟ DoS TLS/SSL
React Angular Redux JS Frameworks Vue.js Polymer
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
େมͰ͢Ͷ
Ͱɺ͜Ε͕(ϦΫϧʔτͷ) ϑϩϯτΤϯυΤϯδχΞ ʹͳΔɺͱ͍͏͜ͱͰ͢ɻ
ϑϩϯτ͚ͩͰ͜Ε͚ͩͷ ͕ࣝඞཁɺόοΫΤϯυؚ ΊΔͱ΄΅ແݶͷ͕࣌ؒඞཁ
ແݶͷதͰ༗ݶͷॲཧΛ͢Δ ͷʹඞཁͳͷϚϯύϫʔͰ ղܾ͢ΔͷͰͳ͘ɺ Ϟνϕʔγϣϯ
ͷ߹
શ෦Λ͓ͬͯ͘ඞཁͳ͍ɺ ͱ͍͏ͷͷɺେମͬͯΔ
ৄ͘͠ͳ͍ͷͰ͋ͬͯ 60%ҐͳΒେମͤΔ
Ͳ͏ͬͨΒ͜͏ͳΕΔͷ͔ʁ • ۚݴ
ٕज़ΛֶͿͷͰͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ
• ΞτϓοτΛܧଓతʹߦ͏
ٕज़ΛֶͿͷͰͳ͘ɺٕज़ͷ ֶͼํΛֶͿ • twadaྲྀ: • ࢛ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ
• ΞτϓοτΛܧଓతʹߦ͏ ͷ߹
ΤϯδχΞͰ৺͕͚Δࣄ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜ࡞Βͳ͍
1. ΞϓϦέʔγϣϯΛ࡞Ζ͏
Create Application /PEFֶԂࡇ ॳࢀՃޙʹҙࣝߴ·ͬͯ࡞
·͊·͊ͷڹ
Create Application • ͔ͦ͜Βௐࢠʹͬͯͨ͘͞Μ࡞
Ұ௨ΓNode.jsͬͯԿ͔࡞ ΕΔΑ͏ʹͳͬͨ
Create Application • ࡞ͬͨΒհ͠·ͬͨ͘ɻ
ͳΜͰ͜Μͳ͜ͱ͔ͯͨ͠ʁ
A. ָ͍͔͠Β
࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ
Կࣄָ͠Ή͜ͱॏཁ
ͨͩͨ·ʹ͜Μͳ͜ͱΛݴΘ ΕΔ͜ͱ͋Δ
3FBDUͱ͔7VFKTͱ͔ҰͰྲྀߦΓഇΓ͕มΘΔ ͷΛΔͷ࣌ؒతʹ͍ͬͨͳ͍ 3BJMTษڧͯ͠·͢ͱ͔$BLF1)1ษڧͯ͠·͢ͱ ͔ݴ͏ͷΊΖɺதͰԿͯ͠Δ͔Θ͔͔ͬͯΒ͑ 999Φϫίϯɺ:::͑ ;;;ͷ͕͍͍ͧ
3FBDUͱ͔7VFKTͱ͔ҰͰྲྀߦΓഇΓ͕มΘΔ ͷΛΔͷ࣌ؒతʹ͍ͬͨͳ͍ 3BJMTษڧͯ͠·͢ͱ͔$BLF1)1ษڧͯ͠·͢ͱ ͔ݴ͏ͷΊΖɺதͰԿͯ͠Δ͔Θ͔͔ͬͯΒ͑ 999Φϫίϯɺ:::͑ ;;;ͷ͕͍͍ͧ Ұฉ͔ͳͯ͘ྑ͍
൷Λ͍ͯ͠ΔਓΑΓԿ͔ Λ࡞͍ͬͯΔਓͷ͕ѹతʹ ଚ͍ɺϞνϕʔγϣϯΛམͱ ͢ඞཁͳ͍
ݟͨΓฉ͍ͨΓͯ͠ಘͨࣝ ΑΓॻ͍ͨΓಈ͔ͨ͠Γ͠ ͯಘͨܦݧͷ͕ੜ͖ͨใ
ٕज़ʹݶΓ͕ͳ͍ɺͲΜͳ ͷʹϝϦοτͱσϝϦο τ͋Δ͠ɺͦΕΒͬͯ Έͳ͍ͱຊΘ͔Βͳ͍ɻ
ͬͯΈͯࣗʹٕ͋ͬͨज़ Λݟ͚͍ͭͯ͘ͷ͕ॏཁ
2. ඇػೳཁ݅ʹͩ͜ΘΖ͏
ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP
etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc
ػೳཁ݅Λຬͨͯ͠ظʹ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ
ͷ߹
ύϑΥʔϚϯενϡʔχϯά େ͖ͩͬͨ
ύϑΥʔϚϯενϡʔχϯά • όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ ͷνϡʔχϯάͬͯresponseͷ࣌ؒΛ ͘͢Δͷ͕ࣄͩͬͨɻ
ύϑΥʔϚϯενϡʔχϯά • όοΫΤϯυͷσʔλϕʔεͱ͔શจݕࡧ෦ ͷνϡʔχϯάͬͯresponseͷ࣌ؒΛ ͘͢Δͷ͕ࣄͩͬͨɻ ͕͜͜Զͷઓ͏ॴ
Ͱ
ରԠϒϥβΛ IE => Chrome ʹ֦େͨ͠ͱ͖ͷ͜ͱ
രʹͳͬͨ
ϑϩϯτΤϯυͷٕज़͕ਐา ͢Δͱͷͬͯͨ͜ͱޡ ࠩʹมΘ͍ͬͯͬͨɻɻɻ
ඇػೳཁ݅Ͱੜ͖͍ͯͨࣗ ͕ॳΊͯܦݧͨ͠িܸ
࣮ࡍʹUXΛ࠷ߴʹ͢ΔͳΒ ϑϩϯτ͔ΒόοΫΤϯυ· Ͱશ෦ࣝΔඞཁ͕͋ΔΜͩͱ ͬͨ
None
ϦΫΤετ͔ΒϨεϙϯε·ͰͰͳ͘ɺϖʔδ͕ಡΈ ࠐ·Ε࢝Ί͔ͯΒϢʔβʔͷظΛಘΔ·Ͱɻ
͔ͦ͜ΒϑϩϯτΤϯυʹڵຯ Λ࣋ͬͨ • Node.jsJavaScriptֶ΅͏ͱͯͬͯͨ͠Β ָ͘͠ͳͬͯͬͯͨ • ϑϩϯτͰͳΜ͔ΞϓϦ࡞͍͕ͬͯͨɺ࣮ ࡍʹస৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠ • ͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ
ඇػೳཁ݅ʹͩ͜ΘΖ͏ɻ
ඇػೳཁ݅ʹͩ͜ΘΔͱجૅ ͷ͜ͱΛΔඞཁ͕ग़ͯ͘Δ
ඇػೳཁ݅ • ੑೳ => ϒϥβͷதͷಈ͖ɺCPUɺmemoryɺωοτϫʔΫɺ ΞϧΰϦζϜ etc etc • ηΩϡϦςΟ
=> OS, middlewareͷதͷಈ͖ɺCPU, memory, etc etc • ϝϯςφϯαϏϦςΟ => ઃܭɺݴޠ༷ɺςετɺΞʔΩςΫνϟɺ etc etc
ඇػೳཁ݅ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ͦͷޙͰඇػೳཁ݅ʹͩ͜ΘΖ͏ • ͦ͏͢ΔͱجૅͱԠ༻ͷ྆ํʹৄ͍͠ਓʹͳ ΕΔ
3. ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍ • Dev / Ops Ͱͳ͘ Dev Ops • Engineer
/ Designer Ͱͳ͘ Engineer Designer • Backend / Frontend Ͱͳ͘ Backend Frontend
ࣝʹ֞ࠜΛ࡞Βͳ͍ • ཧIࣈܕΑΓTࣈܕ • Ұݸ࣠Λ࡞͔ͬͯͦ͜Β͛Δ
ࣝʹ֞ࠜΛ࡞Βͳ͍ • Tࣈܕͷਓ͕૿͍͖͍ͯͨ͠ɻ • զʑͷֶͿ͜ͱଟ͍ɺͰTࣈܕͷਓ͕૿͑ΕͦͷΧόʔͰ ͖Δɻ Designer FE BE
ͷ߹
ׂͱͳΜͰ͖ • Πϯϑϥ͖ • όοΫΤϯυ͖ • ϓϩάϥϛϯάݴޠͦͷͷ͖ • ϓϩμΫτΛߏங͢Δͷ͖ •
σβΠϯܥͷπʔϧษڧͯ͠Δ
ׂͱͳΜͰ͖ • Πϯϑϥ͖ • όοΫΤϯυ͖ • ϓϩάϥϛϯάݴޠͦͷͷ͖ • ϓϩμΫτΛߏங͢Δͷ͖ •
σβΠϯܥͷπʔϧษڧͯ͠Δ ͳΜͰΔඞཁͳ͍ɺͰ ح৺ʹ֞ࠜ࡞ͬͯ΄͘͠ͳ͍ɻ
ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍ • ͪ;Δ 13 ר ࡩ ਯʮ͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍ΘΑʯ
֮ޛΛ࣋ͱ͏ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝΛᩦཉʹ࣋ͬͯௐΑ͏ • ͜ΕΛܧଓతʹΓଓ͚Α͏
֮ޛΛ࣋ͱ͏ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝΛᩦཉʹ࣋ͬͯௐΑ͏ • ͜ΕΒΛܧଓతʹΓଓ͚Α͏ ྑ͍ΤϯδχΞʹͳΔͷʹۙಓͳΜ
͔ແ͍͠ɺ֮ޛΛ࣋ͭඞཁ͕͋Δ
·ͱΊ
·ͱΊ • ϑϩϯτΤϯυΤϯδχΞͨͩը໘Λ࡞Δ͚ͩͷਓ͡Όͳ ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛߟ͑Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏
• ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏
·ͱΊ • ϑϩϯτΤϯυΤϯδχΞͨͩը໘Λ࡞Δ͚ͩͷਓ͡Όͳ ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛߟ͑Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏
• ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏ ͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍
Thank You!!!