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
WebベースでアプリライクなUI/UXが実現できる「PWA×SPA」という選択肢
Search
t-iri
October 11, 2019
Programming
3
1.3k
WebベースでアプリライクなUI/UXが実現できる「PWA×SPA」という選択肢
PWA(with AMP🤔?) + SPA = 次代のUI & UX !!
t-iri
October 11, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
2
8.2k
Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025
marcoroth
0
190
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 1
philipschwarz
PRO
0
100
無秩序からの脱却 / Emergence from chaos
nrslib
1
8.1k
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
21
16k
予防に勝る防御なし(2025年版) - 堅牢なコードを導く様々な設計のヒント / Growing Reliable Code PHP Conference Fukuoka 2025
twada
PRO
39
13k
開発生産性が組織文化になるまでの軌跡
tonegawa07
0
190
アーキテクチャと考える迷子にならない開発者テスト
irof
9
3.3k
r2-image-worker
yusukebe
1
180
Feature Flags Suck! - KubeCon Atlanta 2025
phodgson
0
160
Level up your Gemini CLI - D&D Style!
palladius
1
110
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
agatan
6
8.9k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Balancing Empowerment & Direction
lara
5
760
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Six Lessons from altMBA
skipperchong
29
4.1k
How to Ace a Technical Interview
jacobian
280
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Docker and Python
trallard
46
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
A Tale of Four Properties
chriscoyier
162
23k
Facilitating Awesome Meetings
lara
57
6.6k
Transcript
8FCϕʔεͰΞϓϦϥΠΫͳ 6*ʗ69͕࣮ݱͰ͖Δ ʮ18"º41"ʯͱ͍͏બࢶ ݄ .PCJMF$SFX/JJHBUB
8)0*4
ɹʮΕͬϨεϙϯγϒʂʯ 8)0*4*1ΞυϨευϝΠϯ໊ͷར༻ऀΛݕࡧ͢ΔͨΊͷΈͰ͢ɻ ͍Γ͞Θˏ$ÛOFMXPSL ✓ ৽ׁʹҠॅ͍͍ͯͩͨ͠ ✓ 8FC͍͍ͩͨ ✓ ۀݴޠʮ1)1ʷ.Z42-ʯʮ81ʯ ✓
&$αʔϏεʮ৽ׁૹܭըʯ ✓ ؔ৺ࣄʮ"84ʯ ϞόΠϧͱ͍͑
ʘʔΜʗ ͝ΊΜͳ͍͞
ͪΐͬͱ͚͔ͩͩΒʜ ʮ৽ׁૹܭըʯ ▸ ߹ݴ༿ɿถ͔͠ͳ͍ͱɺࢥ͏ͳΑɻ ▸ ৽ׁݝ࠷େڃͷ࢈ૹܕ͓औΓدͤ&$αΠτ ▸ ӡӦɿגࣜձࣾ$ÛOFMXPSLʢچɿ߹ಉձࣾૹܭըʣ ▸ ։࢝ɿʙ
▸ ग़ళऀɿʗɿʢ4,6ɿ ʙʣ ▸ ྲྀ௨ֹʢʣɿԯ ສԁ ▸ ൃૹ݅ʢʣɿ ݅ ▸ ͝ར༻ՄೳͳϓϥοτϑΥʔϜɿ8FCɾϞόΠϧΞϓϦ
ΞϓϦ͋Γ㽂 J04"OESPJEˠ 8FCˠ 8FC7JFXʂ
ຊલͷΞφϯε ͷίϯηϓτ ɾ18"ʁ41"ʁ಄Ͱཧ͕͍͍͍ͭͯͳ͍ਓ͚ ɾ֓೦తͳཁૉଟΊɻ༻ޠͷΠϝʔδΛ಄ʹ ɾ18"ʷ41"౿Έग़͢Ұาʂ ಛஈ৮Εͳ͍͜ͱ ɾݴޠ͕Ͳ͏ͱ͔ίʔυతͳਂ۷Γ ɾ࣮࣌ͷҙͩͱ͔ςΫχΧϧͳ໘ ɾωΠςΟϒΞϓϦͱͷൺֱʢͰ͖ͳ͍ʣ
ຊ
จࣈଟ͗͢ͳ͍ 4&0 4/4 ($1 "41 $1$ 4&4 &'0 8&# $.4
-57 8% 4&. $1" 14% 044 944 "1* 888 18" ".1 41"
Կ͔ଟ͍ʂ
".1ͱ ".1ʜ"DDFMFSBUFE.PCJMF1BHFT ▸ ͯ͠ɿଋ͞ΕͨϞόΠϧരΩϟογϯά ▸ ͍ํɿʮ͏ͪͷ8FCαΠτɺ".1ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMF ▸ ࣌ظɿʙ
▸ తʢϢʔβʣɿ ʮද্ࣔʯͱʮΤϯήʔδϝϯτͷ্ʯ ▸ తʢఏڙଆʣɿ ʮΧϧʔηϧදࣔʯͱʮ4&0ޮՌʯ ▸ #JOHɿ0,ʢ݄ʙʣɹ:BIPPɿ0,ʢʣ
ྫ͑ʁ
".1ͱ ʮே৽ฉʯ ʮ࢈ܦχϡʔεʯ ʮຖ৽ฉʯ ɹˠهࣄίϯςϯπܥ
".1ͱ ʮே৽ฉʯ ʮ࢈ܦχϡʔεʯ ʮຖ৽ฉʯ ɹˠهࣄίϯςϯπܥ ΞΫηε͢Δͱ (PPHMFυϝΠϯʢʂʣͷ Ωϟογϡϖʔδ IUUQTXXXHPPHMFDPNBNQTXXXBTBIJDPN
Ͳ͏Δͷʁ
".1ͱ )5.-ʴ$44ʴ+BWB4DSJQU ʢ".1༷͔ͭΠϯϥΠϯʹݶΔʣ EPDUZQFIUNM IUNMBNQMBOHlKBz IFBE TDSJQUBTZODTSDldWKTzTDSJQU TUZMFBNQCPJMFSQMBUFͳΜ͔͍ͬͺ͍TUZMF TUZMFBNQDVTUPNCPEZ\EJTQMBZOPOF^TUZMF CPEZ
I)")")"I BNQJNBHFTSDlBCDKQHzXJEUIlzIFJHIUlzBNQJNBHF BNQZPVUVCFBNQZPVUVCF CPEZ
".1ͱ Θ͋͋͋͋
".1ͱ ಾͷڋ൱ײ
".1ͱ ɾ".1ͷޡղΛ১͢Δ IUUQTEFWFMPQFSTKQHPPHMFCMPHDPN BNQIUNM ʼ͍·".1".1Ͱ͋Γɺ"DDFMFSBUFE.PCJMF1BHFT ʢߴϞόΠϧϖʔδʣΛࢦ͢ͷͰͳ͘ͳ͍ͬͯ·͢ɻ ".1ϞόΠϧ͚ͩͷͷͰ͋Γ·ͤΜɻ ͓͓ͬ͏
18"ͱ 18"ʜ1SPHSFTTJWF8FC"QQT ▸ ͯ͠ɿ8FCʹΞϓϦͷ69ɻಀ͢ͳϢʔβʔߴΊΖ$7ʂ ▸ ͍ํɿʮ͏ͪͷ8FCαΠτɺ18"ରԠͤͨ͞Αʯ ▸ ओಋɿ(PPHMFɹ࣌ظɿʙ ▸ ݴޠɿͱʹ͔͘+BWB4DSJQU
▸ 44-ඞਢɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ (PPHMFʹΑΔৗ࣌44-ӡಈɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ʙ$ISPNF͔Βશ)551αΠτʹܯࠂ ▸ େࣄͳ͜ͱɿʮϒϥβʯΛհͯ͠ಈ࡞͢Δ ▸ ಋೖࣄྫɿʮ5XJUUFSʯʮ*OTUBHSBNʯʮ1JOUFSFTUʯɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ʮ4VVNPʯʮ3FUUZά ϧϝχϡʔεʯʮܦిࢠ൛ʯʜ
ཧ
ʮ'BTUʯ ʮ*OUFHSBUFEʯ ʮ3FMJBCMFʯ ʮ&OHBHJOHʯ '*3& ͩ Google 18"ͱ'*3&
'BTUɿߴੑ Google 18"ͱ'*3& ಡΈࠐΈʹʮඵʯҎ্ֻ͔ΕʮׂʯͷϢʔβ͕͢Δɻ ϖʔδαΠζɾϦιʔεʑ૿͑ͯΔɻগ͠અ͠ΖΑɻ ͦͷͨΊʹ4FSWJDF8PSLFSʹΑΔ&GGFDUJWFͳ$BDIFઓུΛʜ
ͳΜͯʁ
*OUFHSBUFEɿ04ڃͷಈ࡞ײ Google 18"ͱ'*3& ʮϗʔϜը໘ʯ͔ΒىಈɻϒϥβˠλϒͩͳΜͯ͏ݹ͍ɻ ʮϑϧεΫϦʔϯʯͰϦονͳମݧɻ8FC"1*ͰࠩΛ͚ͭΖɻ ωΠςΟϒΞϓϦͷಈ࡞ײ໋͕ɻϒϥβΛײͤ͡͞ΔͳΑɻ
ϞόΠϧͰྑ͍ͷͰ ·͋·͋
3FMJBCMFɿ৴པੑ Google 18"ͱ'*3& ωοτϫʔΫঢ়ଶʹґΒͳ͍ىಈɾૢ࡞͕Մೳɻେࣄɻ ௨৴ڥ͕҆ఆͨ͠ࠃɾҬ͔Γͩͱࢥ͏ͳΑɻ ͦͷͨΊʹ4FSWJDF8PSLFS͕$MJFOU4JEFͷ1SPYZͱͯ͠ಇʜ
·ͨɺͳΜ͔Ͱ͖ͯͨ
&OHBHJOHɿ௫ΜͰ์͞ͳ͍ Google 18"ͱ'*3& ʮϗʔϜը໘ʯͰىಈɻखܰ͞Ͱັྃɻ"QQ4UPSF͏ෆཁɻ ΞϓϦͷڑײɻʮϓογϡ௨ʯΛ׆༻ͯ͠8FCαΠτͩɻ ͦͷͨΊʹ8FC"QQ.BOJGFTUΛཱͯͯ4DSFFO*DPOΛʜ
0, (PPHMF
ڧҾʹ·ͱΊͨ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ4FSWJDF8PSLFSʯ Ωʔϫʔυɿʮ8FC"QQ.BOJGFTUʯ Ωʔϫʔυɿʮ8FC1VTI/PUJpDBUJPOTʯ Ωʔϫʔυɿʮ-JHIUIPVTFʯ Ωʔϫʔυɿʮ0GqJOF&YQFSJFODFʯ Ωʔϫʔυɿʮ"EEUP)PNF4DSFFOʯ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ4FSWJDF8PSLFSʯ ɾ18"ͷΩϞɻωοτϫʔΫϓϩΩγʢ1SPYZɿཧਓʣ ɾͷόοΫάϥϯυ্Ͱಈ࡞͢ΔεΫϦϓτ ɾ+BWB4DSJQUͰ࡞ɻ8FC8PSLFSͷͭ ɾଆͷΩϟογϡΛ੍ޚՄೳ ɾʮ)5514ʯPOMZ ɾ͋͘·ͰϒϥβΛհͯ͠ಈ࡞ ɾ8FCϖʔδͱҟͳΔಠࣗϥΠϑαΠΫϧ
18"ͱΩʔϫʔυू Ҿ༻ݩɿ$SFBUJOH0GqJOF'JSTU8FC"QQTXJUI4FSWJDF8PSLFST IUUQTBVUIDPNCMPHDSFBUJOHPGqJOFpSTUXFCBQQTXJUITFSWJDFXPSLFST
18"ͱΩʔϫʔυू Ҿ༻ݩɿ4FSWJDF8PSLFSͷհ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQSJNFSTTFSWJDFXPSLFST ʮ*OTUBMMJOH͕ྃʯ ˠΞηοτͷΩϟογϡྃɻ ΞϓϦͱͯ͠Πϯετʔϧ͞Ε ͨঢ়ଶʂ ʮ*EMFʯ ˠόοΫάϥϯυػঢ়ଶ
18"ͱΩʔϫʔυू 4FSWJDF8PSLFSͷొํ๏ ɾ໊শҙͷ+4ϑΝΠϧΛ࡞ʢྫ͑TXKTʣ ɾάϩʔόϧΦϒδΣΫτʮ/BWJHBUPSʯʹTFSWJDF8PSLFS͕ଘࡏ͢ ΕSFHJTUFS Λίʔϧʂతͳهड़ˣΛՃ if ('serviceWorker' in navigator)
{ window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful }, function(err) { // registration failed :( }); }); } ɾϑΝΠϧͷઃஔσΟϨΫτϦˠେࣄʢείʔϓ͕ܾ·Δʣ ˠσ ΟϨΫτϦຖʹҟͳΔ4FSWJDF8PSLFSొՄೳ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ8FC"QQ.BOJGFTUʯ ɾΞϓϦͱͯ͠ͷએݴϑΝΠϧʮNBOJGFTUKTPOʯ ɾJDPOใΒTUBSU@VSMΒ ɾදࣔܗࣜʢEJTQMBZʣͷࢦఆ ˠʮGVMMTDSFFOʯʮTUBOEBMPOFʯʮNJOJNBMVJʯʜ ɾΧϥʔใΕͣʹ ˠʮUIFNF@DPMPSʯʮCBDLHSPVOE@DPMPSʯ ɾPSJFOUBUJPOͶ
18"ͱΩʔϫʔυू ϞόΠϧΞϓϦײ ˡهड़ྫ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ"EEUP)PNF4DSFFOʯ ɾʮϗʔϜը໘ʹՃʯɻ͏Μ ɾγϣʔτΧοτ࡞ͱԿ͕͕ͪ͏ͷʁ ɾݟͨํ͕ૣ͍ΑͶʁ ͏Μ☺
18"ͱΩʔϫʔυू ը໘খͯ͘͞ ͝ΊΜͳ͍͞ʜ Άͪͬͱͳ :FT)PNF4DSFFO ͍͢͝Ͷʂ ʢΨΫΨΫͯ͠·͢Ͷʣ ը໘্෦ͷ ΞυϨεόʔ͕ͳ͍ʂ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ8FC1VTI/PUJpDBUJPOTʯ ɾΞϓϦͷఆ൪ɻϓογϡ௨ʢ1VTI"1*ʣ ɾ4FSWJDF8PSLFSͷʢόοΫάϥϯυॲཧʣ ɾ8FCքʹଘࡏ͠ͳ͔ͬͨըظతػೳ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ8FC1VTI/PUJpDBUJPOTʯ ɾΞϓϦͷఆ൪ɻϓογϡ௨ʢ1VTI"1*ʣ ɾ4FSWJDF8PSLFSͷʢόοΫάϥϯυॲཧʣ ɾ8FCքʹଘࡏ͠ͳ͔ͬͨըظతػೳ ϞόΠϧΞϓϦײ ˡهड़ྫ
ͪͳΈʹ
18"ͱΩʔϫʔυू ͍ͬͺ͍͋ΔͶʮ8FC"1*ʯ ɾ$BNFSB"1*ʜΧϝϥ ɾ(FPMPDBUJPO"1*ʜҐஔใ ɾ8FC"VEJP"1*ʜΦʔσΟΦ੍ޚɾϚΠΫ ɾ8FC#MVFUPPUI"1*ʜηϯαʔσʔλ ɾ8FC4IBSF"1*ʜϖʔδγΣΞ ɾ1BZNFOU3FRVFTU"1* 8FC1BZNFOUT ʜ͏ʔΜֵ໋త
ͳͲͳͲʢͬͱ͋ΔΑʂʣɻJ04ޙखؾຯ
ΔΑ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ0GqJOF&YQFSJFODFʯ ɾΦϑϥΠϯମݧɻωοτ͕ΕͯͱΓ͋͑ͣಈ͘ʂ ɾͪ͜Β4FSWJDF8PSLFSͷ ˠΦϑϥΠϯ࣌ͷڍಈΛઃܭՄೳ ˠదͳΩϟογϡܭըʹΑΓ&OHBHJOHΛଛΘͳ͍ ˠ͓ͦΒ͘Ұ൪಄Λ·ͤΔྖҬɻ࣮ଆͷ͕Θ ΕΔՕॴʢͲ͜·ͰΛΩϟογϡൣғͱ͢Δ͔ʁ"1*ઃ ܭʁσʔλઃܭʁʣ
18"ͱΩʔϫʔυू Ωʔϫʔυɿʮ-JHIUIPVTFʯ ɾ18"ͷ։ൃʢࠪʣπʔϧ ɾ8FC"QQMJDBUJPOͱͯ͠ͷଥɾਖ਼ੑΛνΣοΫ ɾ$ISPNFͷ֦ுػೳͰͺͺͬͱར༻Մ ɾ/PEFϞδϡʔϧ͋Γ ɾ"MM*O0OF(PPHMF
͍͏͓ෲ͍ͬͺ͍ ͬͯΈΑ͏ʂ
18"Λͭͬͯ͘ΈΔ ͡ΊͯͷϓϩάϨογϒΣϒΞϓϦ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVS pSTUQXBQQ IMKB ɾڥߏஙΊΜͲ͍ˠ(MJUDIͰ0, ɾϖʔδͦͦ͜͜ϘϦϡʔϜ ɾͱ͍͑ɺ͘͘͞͞ਐΊͯʙ͘Β͍ʁ ɾΠϝʔδΛ௫Ήͷʹ͍ͬͯ͜ ɾͳΜͱ͍͏͔ϗεϐλϦςΟ͕͍͢͝
18"Λͭͬͯ͘ΈΔ
͏͓ʔ 18"Λͭͬͯ͘ΈΔ
18"Λͭͬͯ͘ΈΔ
Ͱ͖ͨʂ
18"είΞ ຬʜʂ 18"ͦͷଞ ʮ"QQTDPQFʯʢ18"ͷ·ͱΊαΠτతͳʣ
18"ͦͷଞ 18"ΛऔΓר͘ ɾ"QQMFͷରԠʜ͗͢ʜʁ ɾ(PPHMF1MBZ4UPSFͰ৴Ͱ͖Δͧʂ ɾ.JDSPTPGU4UPSF͍͚Δͧʂʢͨͩ͠&EHFͷΈʣ ɾ݁ہετΞ͔Α ɾ".1ͱབྷΊΑ͏ͥ ˠʮ".1XJUI18"ʯʮ".1UP18"ʯˠ͏Θ͋͋͋ ɾͲΕબͿʁओཁϥΠϒϥϦɾϑϨʔϜϫʔΫ ˠ8PSLCPY
(PPHMF "OHVMBS3FBDU /FYUKT 7VF /VYUKT ˠ͜Εͱ͍ͬͨਖ਼߈๏ͳ͠ɻ͝Γ͝ΓࣗલͰ࣮Մ
41"
41"ͱ 41"ʜ4JOHMF1BHF"QQMJDBUJPO ▸ ͯ͠ɿ8FCͷषΈΛऔΓআ͘ɻը໘ϫϯλονඇಉظνΣϯδϟʔ ▸ ิɿϖʔδભҠͳ͠ʹ୯ҰͷϖʔδͰίϯςϯπΛಈతΓସ͑ ▸ ͍ํɿʮ͏ͪͷ8FCαΠτɺ41"ରԠͤͨ͞Αʯ ▸ ࣌ظɿʙʁ͘Β͍͔Β
▸ ݴޠɿͱʹ͔͘+BWB4DSJQU ▸ എܠɿɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ 3*"ʢ3JDI*OUFSOFU"QQMJDBUJPOʣͷସٕज़ͱ͕ͯ͠ू·Δɻ )5.-ʢಛʹΠϯλϥΫςΟϒίϯςϯπʣͷීٴʹΑͬͯΑΓҙࣝ͞ ΕΔΑ͏ʹɻࢧ͑ࠎͱͳ͍ͬͯΔͷ"KBYɾ8FC4PDLFUɻɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ ʮ(PPHMF.BQʯˠͳʹ͜Εɻ͍ͭಡΈࠐΜͰΜͷɻ ▸ େࣄͳ͜ͱɿ6*ΠέͯΔɻ͕ɺ4&0ʢಛʹϝλʣʹཁҙʂ
8FCͷषΈ ͱ
8FCͷषΈ ͜ΕʮಉظʯભҠ ˣ͜͜ʹ ΓସΘΓʢભҠʣ࣌ʹը໘ҰॠϗϫΠτʹ
Ұํɺ
8FCͷषΈ ͜Ε͕ʮඇಉظʯɻ͍͍Ͷ ˣ͜͜ʹ Ұ͋Ε͕ճΔ͜ͱͷͳ͍շదϩʔσ Οϯά w w
શମͰݟͯΈΑ͏
41"Πϝʔδ
૬ੑͷྑ͍ ΞʔΩςΫνϟʢߏஙϞσϧʣ
41"ͱ૬ੑൈ܈ Ҿ༻ɿ"QQ4IFMMϞσϧ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTBSDIJUFDUVSFBQQTIFMM IMKB "QQ4IFMMϞσϧ ˣ Ωϟογϡ͠ͱ͚ྑ͘Ͷʁ ΜͰඇಉظͰऔಘɾΓସ͑Εྑ͘Ͷˣ ˣ 4FSWJDF8PSLFSʂ
ˣ ͍࣍ճҎ߱രʙ ͲͷϖʔδͰҰॹ͡ΌͶʁ
จࣈ௨Γ ΞϓϦʹͳͬͪΌͬͨΑ
·ͱΊ
จࣈ௨Γ ΞϓϦʹͳͬͪΌͬͨΑ
18" XJUI".1 41" ࣍ͷ6*69
גࣜձࣾΫʔωϧϫʔΫ Ͱ ࠾༻Λ͕Μ͍ͬͯ·͢