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
2017年 WebFrontendの今後と変化への対応(社内向け)
Search
Taketoshi Aono(青野健利 a.k.a brn)
July 05, 2017
Technology
2
280
2017年 WebFrontendの今後と変化への対応(社内向け)
Web Frontendは現在非常に変化が激しい業界です。
そこで今後どのような技術がトレンドになるか、
その変化にどうついていけばいいか
を社内向けに発表しました。
Taketoshi Aono(青野健利 a.k.a brn)
July 05, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Technology
See All in Technology
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
120
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
130
わたしのOSS活動
kazupon
2
330
The Future of SEO: The Impact of AI on Search
badams
0
260
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
2
700
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
170
日経のデータベース事業とElasticsearch
hinatades
PRO
0
200
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
180
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
6
1.9k
分解して理解する Aspire
nenonaninu
2
710
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
330
Featured
See All Featured
Music & Morning Musume
bryan
46
6.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
4 Signs Your Business is Dying
shpigford
182
22k
How GitHub (no longer) Works
holman
314
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Embracing the Ebb and Flow
colly
84
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Scaling GitHub
holman
459
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Transcript
2017 Guide of Web Frontend
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
ؿٗٝزؒٝسך ➙ה➙䖓鷄ֲח 湡תּ׃ֻ㢌ؿٗٝزؒٝسך䪮遭٥زٖٝسװח 鷄ְַֽחծ剑㣐✲זֿהָ֮կ כ㛇燉ד֮կ וז鹌⻉٥㢌⻉㛇燉ך琎ꅾיד׃ַזְկ 䪮遭٥زٖٝسך葺׃䝤׃鋅䫙ֻח javascript٥css٥htmlך㛇燉׃ַ㔿ֿהկ ؿٗٝزؒٝسָ晙䩛ך儗➿כ傀ח穄גְկ
؝،䪮遭
ServiceWorker Service Wokerהכծwhatwgח״ג㹀纏ׁWebך➬圫דծ Webل٦آךغحؙؚٓؐٝسד⹛⡲ׅ➬穈կ ServiceWorkerⵃ欽ֿׅהדծַאגכjavascriptַ鍗 ֿהךדֹזַծـٓؐؠךطحزٙ٦ؙؙٔؒأزח ➜Ⰵֿׅהָדֹ״ֲחזկ ת䖓鶢ׅPWAהְֲ罋ִ倯ך؝،הז䪮遭ד֮ծ ➙䖓妀ַׇזְ䪮遭הז〳腉䚍ָ넝ְկ
Browser ServiceWorker Server fetch event fetch if no cache Caced
response response Browser ServiceWorker install event waiting ⴱ㔐 ✳㔐湡⟃꣬
ES6 Modules ES6 ModulesכEcmascript 6ד㹀纏ׁծ javascriptךٌآُ٦ٕ➬圫կ ֿתד窟♧ׁٌآُ٦ٕ➬圫ָ㶷㖈׃זַ javascript⚅歲חאְח窟♧涸זٌآُ٦ٕ➬圫ָ㹋鄲ׁկ 植㖈Safari٥Google Chrome
Canary M60+ד⹛⡲ׅկ script type="module"鷄⸇ׁկ
import fs from 'fs'; import util from '../util'; import {
Anything } from '../something'; export class MainClass { }
import './Bmodule' import './Dmodule' Module A import './Cmodule' Module B
Module C Module D
ES2017 Ecmascriptך剑倜➬圫կ 2017/07/03ٔٔ٦أկ async٥await瘝ךꬊず劍Ⳣ椚堣腉ծ Object.entries瘝ךِ٦ذ؍ٔذ؍ ך鷄⸇կ Atomic/SharedArrrayBuffer瘝ךوٕ ثأٖحس㹋鄲ך鷄⸇կ 暴חasync٥awaitכַֿךꬊず 劍Ⳣ椚ך⚥呌הזגֻךז
ךדծ椚鍑כ䗳갭կ
async function request() {! return await fetch('https://ex.com/');! }! ! async
function main() {! const result = await request();! const json = await result.json();! console.log(json);! }! ! main();!
Typescript & Flowtype 㘗➰ֹךjavascript鎸鶢דֹկ Typescriptכjavascriptה✼䳔䚍כ֮ ָծ ⴽ鎉铂ה׃ג杝甧׃ג㶷㖈׃ծ Flowtypeכ傀㶷ךjavascriptח䖓➰ ד㘗㹀纏ֿׅהָדֹկ
WebAssembly ـٓؐؠ♳ד㹋遤〳腉זغ؎ز؝٦سך➬圫կ 植㖈GoogleChromeד㹋遤〳腉կ C++װRustַ؝ٝػ؎ֿٕׅהדـٓؐؠ♳ד㹋遤〳腉זغ ؎شٔ欰䧭ֿׅהָדֹկ 鸞䏝כת涪㾜鷿♳ָծ♧鿇ـٓؐؠ٦ي瘝ח䱰欽ׁ㨣 גְկ
HTTP/2.0 HTTP/2.0כGoogleךspdyָ魦ה זծHTTP/1.1ך䖓竰կ Webך넝鸞⻉湡䭷׃ג㹋鄲ׁծ 2015䎃ח➬圫ָ䪫钠ׁկ HTTP/1.1ך剑㣐ך㉏겗ד֮1䱸 竲֮ךػؿؓ٦وٝأ何㊣ ׅծ أزٔ٦يⵃ欽׃ծ䱸竲㢳ꅾ ⻉ֿׅהדծ넝鸞ז鷏「⥋〳
腉ח׃կ
Client Server Client Server Client request style.css response style.css request
index.js response index.js HTTP/1.1 Client Server1 Client request style.css request index.js response style.css response index.js HTTP/2.0
PWA Progressive Web Application Progressive Web ApplicationהכծGoogleח״ג䲿㈖ׁ ״،فٔٓ؎ؙזWeb،فٔ؛٦ءّٝךֿהדծ ServiceWorkerח״؝ٝذٝخٍؗحءُװApp Shellػة٦
ٝⵃ欽׃鏣鎘遤ֲֿהדծ״넝鸞ד،فٔך״ֲח澓 儗חل٦آ邌爙ֿׅהָ〳腉חזկ 暴חApp Shellח涸ז邌爙銲稆תהגServiceWorkerד Cacheֿׅהד㛇劤涸זٖ؎،ؐزָ澓儗ח圓眠ׁ״ֲ חזկ
Endpoint 1 Endpoint 2 Endpoint 3 ServiceWorker Browser Content Server
index.html Navigation Header Footer App shell Reuqest if not cached Precache other pages Get content Get cached content Minimum stable static content
AMP accelerated mobile pages AMPהכGoogleח״ג㹋鄲٥䱿㤺ׁגְ넝鸞זٌغ؎ٕ ل٦آךֿהדծ鸐䌢ךjavascript٥htmlכ⢪欽דֹזְ➿ חծ澓儗חل٦آָ邌爙ׁ圫ז넝鸞זل٦آ⡲䧭〳腉ז 䪮遭կ ׃ծGoogleח钠㹀ׁةؚ٥js׃ַ⹛ַזְךדծ Googleח㔲ְ鴥ת䪮遭ד֮הְֲ钠陎כ׃גְֶ倯ָ
ְְկ
ׁח劢勻פ
Foreign Fetch ServiceWorker3rd partyسً؎ٝOriginךٖأهٝأقحتח 䭷㹀ֿׅהדծ3rd PartyךService Workerָ涫ꐮדֹկ ׁח3rd PartyךService Workerכⴽل٦آַؙٔؒأزׁ
גؙٔؒأز⯓ָずׄזלⱄⵃ欽ׁկ תׁחًر؍،埆倖ׅծ䎢デ禸ךjavascriptةؚחֲגא ֽך堣腉ד֮կ ׃ծתOrigin Triralsזךד⢪ִזְָ…
Ad Server Browser ServiceWorker Client A Media response header Link
sw.js; rel="serviceworker" 3rd party ServiceWorker Client B Media
ES2018 Async Iterationծdynamic importծ Rest/Spread Property瘝ך堣腉鷄⸇կ 暴חAsync Iterationכꬊず劍Ⳣ椚 㣐ֹֻ㢌⻉ׇׁךד銲岣湡կ
async function wait(t) {! return new Promise(resolve => setTimeout(resolve, t))!
}! async function* infinity() {! for (let i = 0;;i++) {! yield i;! }! }! ! async function main() {! for await (const count of infinity()) {! console.log(count);! await wait(1000);! }! }! ! main();!
WebComponents ShadowDOMח״ג⼒ⴖأ؝٦فך⚥חHTML+javascript +stylesheetמהתהח׃גծ؝ٝه٦طٝز⻉ׅ䪮遭կ import⢪ג铣鴥ֿהד㢩鿇؝ٝه٦طٝزٗ٦سׅ ֿהָדֹկ GoogleChromeַOperaד؟ه٦زׁגֶծך➭ـٓؐؠ כת鿇ⴓ涸ז؟ه٦ز׃ַזְկ Polymer⢪ֲֿהד植㖈ד㹋ꥷח⢪ֲֿהָדָֹծװכ ط؎ذ؍ـח⹛⡲׃זְה䗍㦩ז挿ָ㢳ְךדծ؟ه٦ز䖉 ַկ
Component A html css javascript index.html <a-element> Shadow DOM <b-element>
Shadow DOM <c-element> Shadow DOM Component A html css javascript Component A html css javascript
וֲ㢌⻉ח㼎䘔ַׅ
実装 All in one angularjs/vueך圫זׅץגך⦜鋅 גֻؿٖ٦يٙ٦ؙⵃ欽ׅկ • CLIخ٦ٕإحزחזגְגקה ו⦜鋅גֻךד嚂կ •
刿倜ׁꥷחתה،حفر٦ز ׃זֽלזזְךד穠圓鳞ְկ • ְאתדًٝذַׁ♶僇 Incremental reactך圫ז⽃堣腉ٓ؎ـٓٔ穈 さׇג稢ַֻ،حفر٦زկ • 㥨ֹזػ٦خ穈さׇג穈דְ ֽկ • ،حفر٦زָ؎ًؙٝٔٝزחדֹ ךד䕦갟䫇ִկ • 荈ⴓד،٦ؗذؙثַٍ罋ִזֽ לזזְկ • ٓ؎ـٓٔך鋅噰ָ㣐㢌
基礎/背景を理解する javascriptך㛇燉统䖤ׅկ javascriptך➬穈椚鍑ׅկ Browser/html/CSS椚鍑ׅկ Web Frontendך胜兝椚鍑ׅ կ
㛇燉魦חאֽֿהדծ胜兝ָ椚鍑דֹ״ֲחזկ 胜兝椚鍑ֿׅהד倜ז堣腉ָ鷄⸇ׁגծ ך⹛堣ַָկ ⹛堣ַַָ⢪ְ倯٥ㆸ㷕ַկ זך堣腉ָ֮ךַծזךؿٖ٦يٙ٦ָؙ㶷 㖈ׅךַծ䠐椚鍑ׅ䗳銲ָ֮կ 涺ָ⢪גְַ⢪ֲךדכזְկ Stop Hype driven
development ! http://qiita.com/devneko/items/4f748253b2e2cd1192b1
情報を追う • Twitter • ⹈䓼⠓ • GitHub/tc39 • GitHub/whatwg •
JSer.info • blog • GitHub
䞔㜠חꟼ׃גכծTwitterד؝،ז➂䱱׃גؿؓٗ٦ׅ ךָ♧殢傍ְַ׃זְկ ֮הכծGitHub/tc39/proposal-xxx滗ծ GitHub/whatwg/xxx滗ծ הִ֮׆GitHubחכLiveז䞔㜠ְָםְ֮ךד䌢ח ،ٝذشכגֶֻץֹկ ֮הכJser.infoװぐ珏blog٥Qiita鋅կ
⹈䓼⠓ ⹈䓼⠓כծ⳿ל魦חאֻהְֲךדכזְկ 荈ⴓָ⡦ח莆ָ֮גծ➙וזٖكٕזךַծ⡦劍䖉׃ג ְֻךַכׇֹׁקֲָ葺ְկ 䥪鋵⠓ׯה➂ה鑧ׁזְהְֽדכ䠐ָזְկ 䙼ְⴖג㡮ַֽגծְז䞔㜠❛䳔ׅץ׃կ 刿חLTח涫㠡׃׃ג荈ⴓך椚鍑״帾ך״ְկ
まとめ 䪮遭鷄ֲך㣐✲ֽוծ崧遤ח崧ׁ搀ְ圫ח岣䠐կ 穠㽷כ㖑⸂ָٌظ鎉ֲךד䪮遭⸂ך䎿♳־׃ַկ ֮הכ،ؐزفحزה؎ٝفحزךغٓٝأח孡אְֽկ