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
JAMstackアーキテクチャを用いたモダンWebサイト開発
Search
daiki7nohe
June 29, 2019
Technology
1
900
JAMstackアーキテクチャを用いたモダンWebサイト開発
daiki7nohe
June 29, 2019
Tweet
Share
More Decks by daiki7nohe
See All by daiki7nohe
React NativeとFlutterでアプリを開発して見えた今と未来
7nohe
0
620
Web開発者のためのクロスプラットフォームアプリ開発
7nohe
4
2.1k
Other Decks in Technology
See All in Technology
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
710
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
160
OPENLOGI Company Profile for engineer
hr01
1
34k
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
430
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing for Performance
lara
610
69k
Code Reviewing Like a Champion
maltzj
524
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
BBQ
matthewcrist
89
9.7k
KATA
mclloyd
30
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Site-Speed That Sticks
csswizardry
10
690
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
+".TUBDLΞʔΩςΫνϟ Λ༻͍ͨϞμϯ8FCαΠτ։ൃ 1)1$0/'&3&/$&'6,60," Ӝాɹେو
ࣗݾհ ໊લӜాେو ձࣾגࣜձࣾ'VTJD 5XJUUFS!EBJLJOPIF Ԭࡏॅ
͢͜ͱ +".TUBDLͱʁ ϒϩάΛߏஙͯ͠ΈΔ ͳͥ+".TUBDLͳͷ͔ʁ 'VTJD5FDI#MPH ࠷ޙʹ
+".TUBDLͱʁ
+".TUBDLͱʁ XJLJQFEJB δϟϜ ӳ+BN ͷޠݯɺ৯ͷδϟϜʹ༝དྷ͍ͯ͠Δͱਪଌ͞Ε͓ͯΓɺ lTPNFUIJOHTXFFU TPNFUIJOHFYDFMMFOUzʢ͍ײ͡ɺૉΒ͍͠ײ͡ʣ Λදͨ͠දݱͱͯ͠ʹੜͨ͡ݴ༿ͱ͞Ε͍ͯΔ
+".TUBDLͱʁ ͯ͘ૉΒָ͍͠ේͷͳ͍ +".ηογϣϯͷΑ͏ͳ ΞʔΩςΫνϟʂ
+".TUBDLͱʁ
+".TUBDLͱʁ ܾ·ٕͬͨज़ ָේ ͳ͍ʂ
+".TUBDLͱʁ J A M stack
+".TUBDLͱʁ J A M JavaScript API Markup
J JavaScript ΫϥΠΞϯτͷಈతͳॲཧ ϑϨʔϜϫʔΫࣗ༝ 7BOJMMB+BWB4DSJQUͰ
A API ࠶ར༻Մೳͳ"1* %#ॲཧαʔόʔॲཧશͯ"1* αʔυύʔςΟͰɺࣗ࡞Ͱ͍͍
A API
)FBEMFTT$.4 headlesscms.org
)FBEMFTT$.4
)FBEMFTT$.4
M Markup ࣄલϏϧυ͞Εͨ.BSLVQ 4UBUJD4JUF(FOFSBUPSΛ࣮ͬͯݱ
Data (API) M Markup Build Tool CDN (API) Webhook (API)
σϓϩΠ࣌
Data (API) M Markup Build Tool CDN (API) σϓϩΠ࣌ Webhook
(API)
M Markup Build Tool Data (API) CDN (API) σϓϩΠ࣌ Webhook
(API)
M Markup Build Tool M Data (API) CDN (API) σϓϩΠ࣌
M Markup CDN (API) Build Tool Data (API) M σϓϩΠ࣌
M Markup CDN (API) σϓϩΠޙ Browser M
M Markup σϓϩΠޙ Browser J A A A
ࣄલϏϧυ.BSLVQΛ࣮ݱ͢ΔͨΊͷ 4UBUJD4JUF(FOFSBUPS 44( 4UBUJD(FODPN
ϒϩάΛߏஙͯ͠ΈΔ Version Control, Data HeadlessCMS CDN, Build, Auth Static
Site Generator
ϒϩάΛߏஙͯ͠ΈΔ #VJME &EHF generated by
ϒϩάΛߏஙͯ͠ΈΔ 4UBSUXJUIB5FNQMBUF
ϒϩάΛߏஙͯ͠ΈΔ 4UBSUXJUIB5FNQMBUF Click
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ϒϩάΛߏஙͯ͠ΈΔ
ύϑΥʔϚϯε εέʔϥϏϦςΟ ηΩϡΞ ্͕҆Γ ΑΓྑ͍DX ͳͥ+".TUBDLͳͷ͔ʁ
ύϑΥʔϚϯε Browser HTML Program WordpressͳͲ
ύϑΥʔϚϯε Browser HTML JAMstack
εέʔϥϏϦςΟ WordpressͳͲ Server ߴෛՙʂ
εέʔϥϏϦςΟ CDN JAMstack CDN CDN CDN
ηΩϡΞ Browser Server Database WordpressͳͲ ѱҙͷ͋Δ ϦΫΤετ ߈ܸʂ
ηΩϡΞ Browser A A M ੩తͳϑΝΠϧͷΈ αʔόʔॲཧΒͳ͍ όοΫΤϯυͱ ϑϩϯτΤϯυͷ Database
JAMstack
্͕҆Γ
্͕҆Γ FREE FREE FREE
ΑΓྑ͍%9
Database Build, Hosting, Function Client ΑΓྑ͍%9
Database Build, Hosting, Function Push Notification Payment Client ΑΓྑ͍%9
Database Build, Hosting, Function Push Notification Payment Client ΑΓྑ͍%9
ࣗ༝ʂ
Fusic Tech Blog
Fusic Tech Blog J A M stack IUUQTUFDIGVTJDDPKQ
Fusic Tech Blog
Fusic Tech Blog 1VTI
Fusic Tech Blog )PPL
Fusic Tech Blog )PPL
Fusic Tech Blog #VJME
Fusic Tech Blog M #VJME
Fusic Tech Blog M %FQMPZ
Fusic Tech Blog M %FQMPZ
Fusic Tech Blog
Fusic Tech Blog
Fusic Tech Blog
Fusic Tech Blog چϒϩά ৽ϒϩά
࠷ޙʹ A single page site A giant web app
࠷ޙʹ A single page site A giant web app +".4QPU
'SPN+FTTJDB-PSE&WFSZPOFJTB%FWFMPQFSJO+".TUBDL$POG
+".TUBDLͱʁ ˠ+ɺ"ɺ.ͷج४ʹԊͬͨΞʔΩςΫνϟ ϒϩάΛߏஙͯ͠ΈΔ ˠ̍Ͱ؆୯ʹແྉͰߏஙͰ͖Δʂ ͳͥ+".TUBDLͳͷ͔ʁ ˠ͍ʂڧ͍ʂ҆શʂ͍҆ʂָ͍͠ʂ 'VTJD5FDI#MPH ˠ ࠷ޙʹ ˠ+".4QPUͰͬͯΈΑ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠