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
640
Web開発者のためのクロスプラットフォームアプリ開発
7nohe
4
2.1k
Other Decks in Technology
See All in Technology
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
390
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
240
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
150
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
300
Goでマークダウンの独自記法を実装する
lag129
0
220
広島発!スタートアップ開発の裏側
tsankyo
0
250
EKS Pod Identity における推移的な session tags
z63d
1
210
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
410
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
184
54k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Six Lessons from altMBA
skipperchong
28
4k
The Language of Interfaces
destraynor
160
25k
Unsuck your backbone
ammeep
671
58k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Building an army of robots
kneath
306
46k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Review Best Practice
trishagee
70
19k
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ͰͬͯΈΑ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠