Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エンジニアになる覚悟
Search
Yosuke Furukawa
PRO
June 23, 2018
Programming
85
28k
エンジニアになる覚悟
Leveragesで発表したエンジニアになる覚悟の話です。
Yosuke Furukawa
PRO
June 23, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
210
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
10
5k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.6k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
310
Removing Corepack
yosuke_furukawa
PRO
9
1.9k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
3k
Strip Types と Storage
yosuke_furukawa
PRO
4
480
Module Harmony について
yosuke_furukawa
PRO
4
1.9k
LTのやり方
yosuke_furukawa
PRO
16
2.9k
Other Decks in Programming
See All in Programming
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
tanishiking
0
130
Ruby and LLM Ecosystem 2nd
koic
1
1.4k
コードレビューをしない選択 #でぃーぷらすトウキョウ
kajitack
3
1.2k
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
o0h
PRO
0
170
見せてもらおうか、 OpenSearchの性能とやらを!
shunta27
1
150
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
150
GoのDB アクセスにおける 「型安全」と「柔軟性」の両立 - Bob という選択肢
tak848
0
280
LM Linkで(非力な!)ノートPCでローカルLLM
seosoft
0
270
おれのAgentic Coding 2026/03
tsukasagr
1
120
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
okashoi
0
240
AI 開発合宿を通して得た学び
niftycorp
PRO
0
180
AIと共にエンジニアとPMの “二刀流”を実現する
naruogram
0
100
Featured
See All Featured
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.3k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
270
The Curious Case for Waylosing
cassininazir
0
280
Deep Space Network (abreviated)
tonyrice
0
97
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Visualization
eitanlees
150
17k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
330
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
390
Building Applications with DynamoDB
mza
96
7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
A Modern Web Designer's Workflow
chriscoyier
698
190k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
400
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!!!