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
920
JAMstackアーキテクチャを用いたモダンWebサイト開発
daiki7nohe
June 29, 2019
Tweet
Share
More Decks by daiki7nohe
See All by daiki7nohe
社内でのAIコーディング実践と効果
7nohe
0
45
AIコーディング導入の舞台裏 ~Fusicが組織全体でAI活用を実現できた理由~
7nohe
0
240
React NativeとFlutterでアプリを開発して見えた今と未来
7nohe
0
660
Web開発者のためのクロスプラットフォームアプリ開発
7nohe
4
2.1k
Other Decks in Technology
See All in Technology
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
5
1.2k
組織全員で向き合うAI Readyなデータ利活用
gappy50
1
350
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
670
SOTA競争から人間を超える画像認識へ
shinya7y
0
470
様々なファイルシステム
sat
PRO
0
240
知覚とデザイン
rinchoku
1
580
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
110
Azure Well-Architected Framework入門
tomokusaba
1
130
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Dify on AWS 環境構築手順
yosse95ai
0
130
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Docker and Python
trallard
46
3.6k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Context Engineering - Making Every Token Count
addyosmani
8
300
A designer walks into a library…
pauljervisheath
209
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
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ͰͬͯΈΑ͏ʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠