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
760
JAMstackアーキテクチャを用いたモダンWebサイト開発
daiki7nohe
June 29, 2019
Tweet
Share
More Decks by daiki7nohe
See All by daiki7nohe
React NativeとFlutterでアプリを開発して見えた今と未来
7nohe
0
340
Web開発者のためのクロスプラットフォームアプリ開発
7nohe
4
1.8k
Other Decks in Technology
See All in Technology
統計的学習理論読み Chapter 2
kmatsui
1
230
オブジェクト指向宗教史
tanakahisateru
14
12k
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
260
AWS アーキテクチャクイズ
yuu26
2
700
10分でわかるfreeeのQA
freee
0
230
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
740
任意コード実行の原理
ffri
0
170
バッチ処理のSLOをどう設計するか
rynsuke
7
560
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
オブジェクト指向CSSが叶えたかったことと、CSSのいま / The aims of Object-oriented CSS and the current state of CSS usage
shinkufencer
11
3.6k
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
GitHub's CSS Performance
jonrohan
1023
450k
Visualization
eitanlees
135
14k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
How GitHub (no longer) Works
holman
301
140k
Code Review Best Practice
trishagee
54
15k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Git: the NoSQL Database
bkeepers
PRO
421
63k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Done Done
chrislema
178
15k
Rails Girls Zürich Keynote
gr2m
91
13k
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ͰͬͯΈΑ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠