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
March 26, 2018
Programming
27
17k
今後のフロントエンドについて(仮)
bonfire frontendで発表した今後のフロントエンドの話です。
Yosuke Furukawa
PRO
March 26, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
930
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
200
What's new in AppKit on macOS 26
1024jp
0
130
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
型で語るカタ
irof
0
350
テスト駆動Kaggle
isax1015
1
480
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
880
TypeScriptでDXを上げろ! Hono編
yusukebe
1
410
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
150
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
Featured
See All Featured
Docker and Python
trallard
44
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
ࠓޙͷϑϩϯτΤϯυ (Ծ) @Lodge Yahoo Japan 2018/03/26 Yosuke FURUKAWA
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ࠓ͔ͿΓͦ͏ɾɾɾ
ͳΔ͘ࢿྉ͔ͿΒͳ͍Α͏ ʹ͠·͢ʂʂʂʂ
ʮࠓޙʯΈ͍ͨͳ֬ͷ͍ ͯ͠ΞϨͳͷͰɺʮࠓʯ ϦΫϧʔτͰͬͯΔ͜ͱΛ ͠·͢ɻ
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ྲྀ: • ࢛ظ͝ͱʹٕज़ॻΛಡΉ • खΛಈֶ͔ͯ͠Ϳ • গͳ͘ͱ̍ͭ৽͍͠ݴޠΛֶͿ
• ΞτϓοτΛܧଓతʹߦ͏ ϑϩϯτΤϯυͷ߹
ϑϩϯτΤϯυͰ৺͕͚Δࣄ • ΞϓϦέʔγϣϯΛ࡞Ζ͏ • ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜ࡞Βͳ͍
ΞϓϦέʔγϣϯΛ࡞Ζ͏
Create Application /PEFֶԂࡇ ॳࢀՃޙʹҙࣝߴ·ͬͯ࡞
·͊·͊ͷڹ
Create Application • ͔ͦ͜Βௐࢠʹͬͯͨ͘͞Μ࡞
Ұ௨ΓNode.jsͬͯԿ͔࡞ ΕΔΑ͏ʹͳͬͨ
Create Application • ࡞ͬͨΒհ͠·ͬͨ͘ɻ
ͳΜͰ͜Μͳ͜ͱ͔ͯͨ͠ʁ
A. ָ͍͔͠Β
࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ
Կॲ͔Ͱݟͨ͜ͱ͋Δਤ ࡞Δ ͳΜ͔ษڧ͢Δ ൃද͢Δ ϑΟʔυόοΫ Β͏ ͜͏͍͏ϥΠϑαΠΫϧͰ ָ͘͠ͳ͖ͬͯͨɻ
None
Կࣄָ͠Ή͜ͱॏཁ
ඇػೳཁ݅ʹͩ͜ΘΖ͏
ඇػೳཁ݅ • ηΩϡϦςΟ • XSS/XSRF/DoS etc • ੑೳ • SPA/PWA/AMP
etc • ϝϯςφϯαϏϦςΟ • ςετॻ͘/e2e/storyboard etc
ػೳཁ݅Λຬͨͯ͠ظʹ ΘΕΔதͰͲ͜·Ͱඇػೳཁ ݅ΛೖΕࠐΊΔ͔ͱ͍͏ͷ͕ ΤϯδχΞͷҰछͷೳྗ
ͷ߹
ύϑΥʔϚϯενϡʔχϯά େ͖ͩͬͨ
όοΫΤϯυͷσʔλϕʔε ͱ͔શจݕࡧ෦ͷνϡʔχ ϯάͬͯresponseͷ࣌ؒΛ ͘͢Δͷ͕ࣄͩͬͨɻ 1 sec => 300ms ʹͨ͜͠ͱ
Ͱ
ରԠϒϥβΛ IE => Chrome ʹ֦େͨ͠ͱ͖ͷ͜ͱ
രʹͳͬͨ
ϑϩϯτΤϯυͷٕज़͕ਐา ͢Δͱͷͬͯͨ͜ͱޡ ࠩʹมΘ͍ͬͯͬͨɻɻɻ
ඇػೳཁ݅Ͱੜ͖͍ͯͨࣗ ͕ॳΊͯܦݧͨ͠িܸ
࣮ࡍʹUXΛ࠷ߴʹ͢ΔͳΒ ϑϩϯτ͔ΒόοΫΤϯυ· Ͱશ෦ࣝΔඞཁ͕͋ΔΜͩͱ ͬͨ
None
ϦΫΤετ͔ΒϨεϙϯε·ͰͰͳ͘ɺϖʔδ͕ಡΈ ࠐ·Ε࢝Ί͔ͯΒϢʔβʔͷظΛಘΔ·Ͱɻ
͔ͦ͜ΒϑϩϯτΤϯυʹڵຯ Λ࣋ͬͨ • Node.jsJavaScriptֶ΅͏ͱͯͬͯͨ͠Β ָ͘͠ͳͬͯͬͯͨ • ϑϩϯτͰͳΜ͔ΞϓϦ࡞͍͕ͬͯͨɺ࣮ ࡍʹస৬ͯ͠ػձΛ࡞࣮ͬͯࢪͨ͠ • ͔͚ͯɺͰ͖ΔΑ͏ʹͳͬͨ
ඇػೳཁ݅ʹͩ͜ΘΖ͏ɻ
ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍ • Dev / Ops Ͱͳ͘ Dev Ops • Engineer
/ Designer Ͱͳ͘ Engineer Designer • Backend / Frontend Ͱͳ͘ Backend Frontend
ࣝʹ֞ࠜΛ࡞Βͳ͍ • ཧIࣈܕΑΓTࣈܕ • Ұݸ࣠Λ࡞͔ͬͯͦ͜Β͛Δ
ࣝʹ֞ࠜΛ࡞Βͳ͍ • Tࣈܕͷਓ͕૿͍͖͍ͯͨ͠ɻ • զʑͷֶͿ͜ͱଟ͍ɺͰTࣈܕͷਓ͕૿͑ΕͦͷΧόʔͰ ͖Δɻ Designer FE BE
ͷ߹
ׂͱͳΜͰ͖ • Πϯϑϥ͖ • όοΫΤϯυ͖ • ϓϩάϥϛϯάݴޠͦͷͷ͖ • ϓϩμΫτΛߏங͢Δͷ͖ •
σβΠϯܥͷπʔϧษڧͯ͠Δ
ׂͱͳΜͰ͖ • Πϯϑϥ͖ • όοΫΤϯυ͖ • ϓϩάϥϛϯάݴޠͦͷͷ͖ • ϓϩμΫτΛߏங͢Δͷ͖ •
σβΠϯܥͷπʔϧษڧͯ͠Δ ͳΜͰΔඞཁͳ͍ɺͰ ح৺ʹ֞ࠜ࡞ͬͯ΄͘͠ͳ͍ɻ
ࣝʹ֞ࠜΛ࡞Βͳ͍
ࣝʹ֞ࠜΛ࡞Βͳ͍ • ͪ;Δ 13 ר ࡩ ਯʮ͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍ΘΑʯ
·ͱΊ
·ͱΊ • ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυͨͩը໘Λ࡞ Δ͚ͩͷਓ͡Όͳ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏
• ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏
·ͱΊ • ϦΫϧʔτςΫϊϩδʔζͷϑϩϯτΤϯυͨͩը໘Λ࡞ Δ͚ͩͷਓ͡Όͳ͍ • αΠτશମͷϢʔβϏϦςΟɾύϑΥʔϚϯεΛ্͛Δਓ • ৺͕͚ͯ΄͍͜͠ͱ • ΞϓϦέʔγϣϯΛ࡞Ζ͏
• ඇػೳཁ݅ʹͩ͜ΘΖ͏ • ࣝʹ֞ࠜΛ࡞Βͳ͍Α͏ʹ͠Α͏ ͜ΕͱܾΊͨಓͰΒͳͯ͘ ྑ͍͜ͱͳΜ͔̍ͭͳ͍
Thank You!!!