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
86
28k
エンジニアになる覚悟
Leveragesで発表したエンジニアになる覚悟の話です。
Yosuke Furukawa
PRO
June 23, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
15
1.8k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
620
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.7k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
8.9k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.4k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.5k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
18
10k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.8k
Other Decks in Programming
See All in Programming
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Product Management LT会_クアンド新家
shinshin
0
210
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
CSC307 Lecture 13
javiergs
PRO
0
150
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
CSC307 Lecture 10
javiergs
PRO
0
310
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Clear Off the Table
cherdarchuk
89
320k
A Philosophy of Restraint
colly
200
16k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Statistics for Hackers
jakevdp
792
220k
The Mythical Team-Month
searls
217
43k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Debugging Ruby Performance
tmm1
71
11k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
The Invisible Side of Design
smashingmag
294
50k
GraphQLとの向き合い方2022年版
quramy
36
13k
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!!!