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
810
JAMstackアーキテクチャを用いたモダンWebサイト開発
daiki7nohe
June 29, 2019
Tweet
Share
More Decks by daiki7nohe
See All by daiki7nohe
React NativeとFlutterでアプリを開発して見えた今と未来
7nohe
0
490
Web開発者のためのクロスプラットフォームアプリ開発
7nohe
4
1.9k
Other Decks in Technology
See All in Technology
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
300
Webセキュリティのあるきかた
akiym
12
3.9k
Making Linux sucks less
ennael
PRO
0
500
Semantic Kernel の Agent 機能試してみた!
okazuki
1
100
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.5k
業務ヒアリングと知識の呪い
tamai_63
0
130
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
150
山手線一周のパフォーマンス改善
suzukahr
0
120
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
3
580
入門 バックアップ
ryuichi1208
17
5k
RAGの性能を評価しよう
kurahara
1
280
スクラム導入の舞台裏:QAエンジニアがスクラムマスターになるまで
bubo1201
0
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
360
19k
We Have a Design System, Now What?
morganepeng
49
7.1k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Rails Girls Zürich Keynote
gr2m
93
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Facilitating Awesome Meetings
lara
49
6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
KATA
mclloyd
27
13k
How GitHub (no longer) Works
holman
311
140k
Designing the Hi-DPI Web
ddemaree
279
34k
The Mythical Team-Month
searls
218
43k
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ͰͬͯΈΑ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠