フロントエンドエンジニアなら知っておきたい「Jamstack」～入門編～

2021年12月14日に開催されたクリーク･アンド･リバー社（C&R社）主催、「フロントエンドエンジニアなら知っておきたい『Jamstack』～入門編～」のスライドです。

https://www.creativevillage.ne.jp/103727

Transcript

1. >☐ =fI=FI=É㱺I's E☐x¥=n•Jams-ackoÑMh%fg ~dFAÉ¥~ 2021+-4121-71417 174-7.7=1- " • ' 11K¥ @Takazudo →Lt ' 4
2. tEk • > ☐= 1-1=1--17%4 a '¥'-¥EIcÉhCzu3k I txF¥x 1=1211 It • ITÉL H 's tiyti'll he"~l=F¥7¥I Cells 1- Gta ¥7bn" KIN E-its tail Ith • Jamstack > 2 ¥-7 # Is -1=41-2 " . Edt # Is a Inti ELITE.li/IaHEtnEIct-osEIEii ! Erik GH o
3. É¥7 • F.IE#I-=t---i > E' F-the • @ Takazudo J•÷¥¥ ?⃝ • (*¥14771454.4k" • I"✗L7 A - KIT
4. ¥¥o±→t KATH +¥¥ 7¥ 㱺" * → BAT
5. Jamstack > 2 Tot ?
6. Jamstaoksisiitntak • Matt Biilmann • a CEO / Co-founder • 2016 # l= artist JAMstackz" ¥ ,㱺,gyµµ,㱺-,z¥,,,µ⾨ . JAM stack @ * ¥±÷ñi'T
7. ¥217417 £"*££¥=¥ " " ' g-auas.in#eAPt-eMarkup ? JA ?⃝ Ea¥n¥×Y% TTT M it 4¥ .GE/=E5liJ API pre-Rendered Markup JavaScript - _ ÷§iHI " ==ae=3X"¥±¥- ! • ¥¥¥EAl=7K4k3t¥¥B.lt/-TMLl--ttcikXYJKEC . • Eat"¥☒¥T£E=3tt 5551inch # 1-" exile 4C -4
8. Jamstack.tt#*iai-t.=iiiEH--.Web-Kt/TiyE • 2=7-+21-2%-3 ! 4¥¥¥ti= • ¥9¥EAl==aY -14*294=341514 : Eitan . • GEE'aWeb+Kt/WebTi4^¥¥ÉtaF¥¥I¥EJ TATE :# In "<¥24taEI㱺¥Éta¥sh- zthte ( gamstackil 㱺 Next.is#l---5JamsTack ☐¥hE*t Gatsby TEES Jamstaok
9. the a ☒3 ! Eu 's ✗! zh's a ¥÷÷÷:÷:¥÷÷÷¥¥÷÷÷± 㱺÷¥÷÷qM a= Ite Jam stack E ☐ FLIK3 a-> in ¥Ygѱ㱺ÑfpevdopermgM Experience MGÉ¥¥M→=TYm¥
10. Imstack.net#ThT--7iilkh-its~?.--a-.y---a=l-7D-tT- It"I=É=? Gotta i. Yiu 's units . I☒ Elliptic-5-415/3 , • Eli 's -4€ . Kanta F¥F¥HFik¥# ¥44117'¥x' " ¥k9¥kK3 -271--17>2113 , • Jamstack X "'t-1=7149711-4--14 I'¥177#thief . =a¥F¥F¥E¥¥ 43T£ 'S . Jamstack.IE/I----- 1=>42 EE.EE#h3-Ht-Tr3--kit-to(q*1-aFY.EIit)
11. _anstackt¥¥¥t¥tH= = ta-EEEA-AL-iel.FI , 3amstack E ¥A- A- -43 F-☒ f- 4¥ 's ¥I¥ -1=-51--7112 , II't 7-¥4714125' X'I ve 44 5*3--21=1×79-+1- F- aii I-47£ 113 HI f-17- f " (㱺 uz . ¥¥<¥É#A- -43=21--1 IT .
12. Jamstack ¥¥A¥aT=Kn -1--7-1=-1--9 .
13. £n)GitThwiÉhw %MWÉ÷¥¥~fÉNYmIsÑf jmshustieqdt.essmf.mn. .
14. 㱺¥* • Fy¥¥¥, • E=±i€¥k3 㱺 - • ¥EHti" 11mF 't • Pull Request ft * • re: - n n m¥€éI 1¥ .tt#nX4EiE 7aÑl4ui IIhzt-5-l.MY/
15. Buildsw. ᶆ HTML -ÑD Js ☐ ☐☐ ☐ ☐ ☐ <¥¥㱺÷÷÷.㱺.>:.. ( kutlziit-J.ci/i:--.p ⾨÷:÷¥ nhlihl-1=4 HE > 7=11 *Excel-1=4 ☐☐ ☐☐ ☐ ☐ ☐ ☐ ☐☐ ☐ css k ✗ ✗ HTML ᶆ→ ☒ " "+F- ' if -1--11211 css Jthfgh~MMA-srhxac-k.cz - Node .is i☒i3 ¥¥tka€z" U -5--211115=2114-94--4 - - -
16. < I continuous -5 Integration ?⃝ ¥¥&iEEAl==ÑL - Eat ☒ ☒ If ÷-÷÷ :# KHANI 9 9 /¥zn > I -41-1=1%-12 㱺 FTP ex' A=¥tiÉ4i&Tzt ! Itai" ☐ webtt-li-t-t-T-T.tl ! City - IL n ☐ → i *☒⾨i. Him" 㱺 5-nzlt-Eaz-atg-IEE-trit-TPu-t-xt.FI > 235*+1 " . z"€IEa=-"1=pMKz==3LnmmmÑ-Lhzt > (Ftl 't .
17. -1£ f- ti > =/ it (F- 4 9=17 Il - t' (F- 4 ¥¥÷¥¥÷㱺¥ L2 Ctn344 ☐☐*yg#" " "E * #¥ , - ☐ ☐ ☐ ☐ ☐ ☐ ☐ 1£ 㱺it1-¥-58 "¥nmi¥☒→☐ ☐ ☐ ☐ F-Fia HTML -1=9 1T¥# A-4- f- 5- → 5- a- tHTME"the 㱺 ☐ 9-Ii !
18. ᶆ EiTnF7ezL22T-EiGN5@DDNM.Ii , -11-11=-4*21--4592" - - 11th" ! \ , Contents Delivery Network % . : • • • A />u-at>¥mi¥:# • • • ← a ☒ ¥4• • µ*¥Yg ?⃝ time" TT Nettie ¥7k# 1=+1-15-2117'¥.cz AmP ?⃝ 779kt > G-(224 . Verge! D-¥ 7×417 * CII"cDN1=É> 9295512<43+1--5215" 1=>4117-227-2113
19. I-AE-tuey-ZF-xaf-A-z.IE ☒ ¥I3=Zi' . > ☐ =t÷tTEliiyMI=f"I ¥µ¥?Eig 1*+2%1%-15=1-3 . Interface 7ha KFHIT-511%111+4" - - ←→|WebT- /tuNFiYnT- M¥㱺Twi*erA→µ÷f ¥ᶆEM 1-+1" Tt Tt E.☒ 㱺Etat i*i¥¥ µndroid> Web API
20. SPA /Gmaile㱺 ¥29::#x API - ¥"s←☒.¥÷:÷÷*±¥÷ Single Page Application g.gg,µµµ,µ , y*㱺,,,. if i YE N- try 2-1=-2" ERIK 1¥74 F- EE JavaScript TAPI my yµ ¥-9'㱺÷¥* - - hyun HTML *÷÷÷÷?㱺 . "" " " " " " ← t 5±¥¥ He ¥4 # f-F-I-E.to#-'-&FLzclC-71ltih3T--uT-----dz----.ta---c . a-¥iFT¥El¥t . (I -1=1-2-4774 G-T¥a=e )
21. a.im?..iis-*-- "÷÷÷*÷¥ ?⃝ ☒ÉÉlE=㱺°L .FI#4t/1x5/t--3--ETf- 9¥ > ZCKE 's ok . ¥tF¥EGÉ!M .☒ - ¥IaFÉ¥¥EEF¥? M →i→é; Developer stittnlti , - ¥' Etat -4*1*1=157 23>23×517-1*7 >-¥ti¥- ! Developer tiny TE.is#t-9lT--5IIx---
22. teadlessCMS_ :±¥¥±¥÷¥±¥¥¥i¥É:* . Headless ¥¥ F) • " SDKE.li#I..LzctrzliEig-z.- 74-9 CMS CMS 74-ncM5974llE=3_ DB DB qgmhiuzg.gg#y..g. ← it-CMSHF-FREHF.EE#Ec-s435E-3eExl--T J a ← - ¥, ,㱺+*;£;g☒¥㱺. HTML API☐f> EEE.t-tnz-o.no/-I-Ipx4ol--iiiEa1 f T E-¥13 t.yfHTMCE-qytteadksscmsgg.tt#T--G=Al-tH=+-kZ43 . zigzagging← t.tt#---HHF-3II--aI-i-o7llZ3 . ← ¥5k?¥ > 74"yIÉE¥ a AE 4423 IEEd.IT#54k--tnT--4t3
23. JamstackI¥2¥-1a -5¥In F-17- f-i㱺 v2 it I > I3 " Eu I = E z " . . .
24. ✌ F-E"aHTMLo Headless CMSX" ' " """"¥÷÷:÷÷÷ ÷ :÷ :*. ****µ¥㱺÷_*"*" Eti -815T¥-4-4 → '¥¥H¥¥¥§ - =a - ¥477477s"Ékt " fi-ti-H-lkak-I.APIIY-i-7-EERIZJKE-F.TO#
25. É2:GitiH¥z¥t FTPEñ. HTML 't' ☐ ☐ ☐ m push É→☐☐☐☐→ ☐☐ ☐ 751st Developer → LE- push-43-1=-1+2014 ☒ EtE¥triÉi☐TIk3 . kazipushl-t-GEI-tii.TT#T-----t-4 .
26. Ea4.IT#EHs=T---4ttq,gf?fgVl--E----+--E-- M CDN HTML ᶆ 㱺 css /Is / ¥1Bn " → ☐☐ ☐ ☐ • . timing ☐ ☐ ☐ • • • • • • • ← M ☐☐ ☐ • . ☐÷→ . . =ir=u=hTE¥oaE¥¥→"_am5acÑÑTTTh g
27. JamstackI¥2Eta 4-¥ H' Jamstack a ☐ > "
28. IF -1b¥ "± f-A-IE.tw#--iE..,--a-I4ai---.E ! ¥Mfwoɱ㱺Ñhf¥D¥¥¥zmmM s.ie MwÉ¥¥M→=TYm¥
29. ᶇ 17--1--115=-4- ÷¥¥÷÷¥÷eo T-p.it ¢ 4--4 sq - ☐ ← ^ ← n l7"i-aFli# ← A Ñkz€É¥¥¥l=I > 25-27 . > zttf ← A JamstaokT - Thea :¥kñ" -17¥ 've ¥±_¥EAFT=Éa HTML ¥k<tszai:-. {t → ÷!!: }=÷㱺¥?¥=a→㱺thf
30. ÑI¥ ¥⾨¥EGl=tt -64-1--41*5451=4 -43=21*4-811 . 174-a-ti-I-ams-ackl-CZCDNF-IIF-KEI-ICDNP.in ← g) 1→ :-. :-< a n→ . . - ← n v • 77>1279%22-283 C- =tnkEiEtE¥h .µ,¥,,,㱺,yµµ¥,,㱺÷ ,, ,m , * F-Til .EE-53=25%1141-12"ttEani±¥¥-
31. 117+-7=2-01 tail 'aH"PtP¥Ea iii. 92=1--4"¥s*¥-ÑeeciI . 119117*-2--25-4 . Rubyz"EJavaT€Tñz "* |IÉ=Ff㱺=☒ ex' :* :n÷÷→:'"÷㱺*i¥㱺÷ _m¥ ¥Eu !
32. Ñ_→=Zᶄ- SPAECEÑZE . sPAaI¥if 3amsTackn¥d# ᶃᶄᶅᶆ¥zE3kI"E ᶄ 171-4,7-72 ☒u¥T¥2ñ " ÷¥f→H-M D HTML 1--4-51=11,23 l÷T→t7¥¥⾨) ¥- FEET"- At"AA( T¥#9=171--15-7 THIEF * Eh-5k¥-281-221371": %7E-t.AT#EiiiHE.o
33. t.Jams-acka-E.IE# bun eEiTt "" ¥°µ㱺÷ : : - : CDN HTMLLX' -cMsEi1iiy7==EnFwe€ 212¥11 . - 0*+1*4 µ, ,¥¥ , ,㱺g,,,,,µ,,> 7=7 Jamstaok.IE/k'---tzT-Lztx-ih unit - TINIE .int/TMLl--t2--iaKfktn4ht-t--z4-aFK . KEY _Ta¥4£L€tnZI7's-1=4 . → =iu7¥¥F=- txt . > 㱺 *zgyzq * ±±¥÷ : 112915" -8111mHz "tEu
34. OOCMSNEE-AE-qtz3.IE#-EEHti+--3!iok=it-a ⾨㱺a¥s§÷ 1iiiM==t"+7D'-tI=t"nI¥s CMS É >☐=tI=T €1M -474T¥# 12¥23 =zti"5IE4 "_ ᶆ s-ams-ack-i.rs 25h7 1¥74 .fi/-I2---u-f-t TEYTEI-t-IE-H.T-ii.si'☒☒ . Erin'EÉ¥ ⾨ Ea¥ .tk/-tF75tyfiIEus-L4.EtliEnEEl----oE&--h3# Excitons aFÉ¥tx"- Jamstack .
35. IEK3-CIJ-jamstack.org Flo 214k€ '¥R Ie -2>22-4 . * Better Performance 113+-7=21--1 tnz A Higher Security 7--147<1--9?¥k3 & Cheaper , Easy Scaling T ext -74- Till A Better Developer Experience F¥i¥¥ 7h41
36. 㱺 Matt¥¥-4T¥ Lik't £ Jamstack .
37. Jamstadii.LI/---TfssEgtEh3lit-lk---hti?--isT=g1I-z a %WÑ""" " "" "" " " "" "" "" ¥3LIE" TEK3 He ¥ tithe . Et 11TH HEIFK 'l Ftth . Jam stack * 2=45 It Jamstack a 'F¥4¥kÉ-K3 . 1111122! Web-1kt - I' E É't4-" v2 TIE33 > ' A - 4E SS G- E ☐ €ñ← (static site Generation)
38. 77Th " -1-83=-7"/ It H-MLH-sovt-LZ-Y-3-TISSG-i-I-t.TL - ¥a¥t¥¥k 㱺-2 > " Dn " ssc-clz-tiuz-ut-a-T-t.tk-4'¥¥Fx T¥¥aI:p t±t-t¥¥FxF=uai =¥FEti5Ét→7tkItaz£ut-a ss-qlz-h.cc> Itta → t-M⊥3soNFLz-tJ- =¥¥¥E5F☐ÑT=lTuE TET -5*17"✗Tk€n . I- it"-nti¥a¥k ¥T¥x4hE t=¥4>===47☐-z"f"T ¥¥aEAF¥ie㱺uiat =ti= Q-irl-eiet.li's
39. 179-1=-475*47*12 SSGlÑ4÷㱺.my#l:Twi--enEHReddi- o☐ - = - Mtn "Yaz" p÷_Ef÷÷:¥÷ ᶄ " "" ☒ t.sn#..**.i.,.,a,.=....*...*+*zaz..SSC--sn3eFz > attic>Fait- BA¥Eatk3 ) É 1 㱺Na€=+iT
40. LITIIIÉJHSZ 4=1*-4 .GE#x.B--Ia-. * Milf khkt-uhttkl-45-yi.EC#1-Ih3t-azT-t--suaz" µ ,㱺µ . " ""*""" £ www.#.,,nm.h---iiE5E-- ☐ Thr - Lez - .EE#-gY--al--X4FtE " 5kg it 100am ¥÷÷¥¥¥:¥%⊥ ×-H㱺 ☒ JavaScript's LÉI - ABABA A @= Attic's APIEATÉ .
41. ' Mt-ÉH£JamJackl㱺"ETuñt£? Jam stack#' YIt-izts.tn/-zY-tTay--L-cho > " l - K ii.v7 I -4--41*1×194' > L -417-7 4¥ > F-¥15"TE > 21-7=1%5Eto Jamstackk-KCEIEEE.tn#hITz-=kse.--=--tiI8lzIF- PAYEE-4 HE:&-435¥ a 1> T sai' . karate ¥ 4£47 ¥2¥-12kÉTUDE .
42. 㱺 117T¥iz " Jamstack a #¥t= .
43. iFY1 : E=E=M_=i¥Ga☒3>--ih-t+ • Static Site Generator : eleven-4 . ← 㱺 5kt Static Site Generator • ¥27M " : AWS Amplify . a- Ansa ¥ez¥£ , -4-4--52 • Headless CMS : micro CMS ← ☐* a Headless CMS clone CDN a • → 㱺_d¥: : : m → . . . → M 3--7=4 ¥¥EÉ Web -1-1
44. ÑYz:==I"a=ñN- • Static Site Generator : Gatsby ← ¥"^"h"E Static Site Generator • * 2744 " :L 271 Lot- Ii- ← 44113 __e€£3Fts • Headless CMS : prism, ← HEY 9¥44 . AEI 3 . • CI : Amplify I 7 ( e- YUKIE's npma ¥ I Put - I9¥> 2 FTP ☐ FTP -1*3 . → A m → ¥¥i - Web -1¥
45. Ña43:✗㱺>¥Web+_t Arnaz" # Fritzi . Finnie 554 7th" ¥ai±z Headless CMS ☐ oiks THE'¥e , a-ti-a-IEK.it * ¥I¥It¥¥ ELIITEFK ✗ -1L EACH/E&tzz¥z TEKE at-Jams-ack.at#-i2
46. then ' ⾨ £ Jamstack
47. ÉLH=A-¥F¥i"iH Clik #< 559-27=5371" . HTML-ETF-3.ME#D--Tt---lI4-it'tn3oLtil... ¥+44 - Eti -415=5 EhH%T 1247113 3=7-1 - - -1=5*1-52 ¥793T sit done ⊥ ☒ → µ ?⃝ I→☐7 → ÷ . - - : ← "" " npm insta" - cms . . - F-2kt " ±¥¥ ¥-7 #✗9¥ , went - 㱺 a-i-a-g-ni.lt#**&8mina-esno--=---Eixti-iiatntr-' EtnI4t-☒¥F£ "" 11-5--717=17/7%715×1321 !
48. É5d4+l |☐→uFÉE± > van-7 4¥32 '-¥ • Jamstack -43213 § > Hk ¥425 • §, ,gy㱺µyg×µz,¥¥㱺 , ᶃ Ea¥=KÉH ☒ E¥czcta3 Lf'7kczu3E =3 - ☐¥x¥t☒ It > 㱺 Jamstackj .EE?---i14---&----EE9E--a-EE=--tET#a÷¥¥_¥ . Fill ¥1543 • ssr . " " f*i¥¥ :* "
49. 70--1--1=7+227--3--4" teadlessCMSI.TK#--iuAEtac--@454aTx-----OT-- wordpress.nl#'zT=7---Ei*2F-llTrtDzT- ? t¥*¥9EaF¥¥ liiiiti-liaAPT-E-b-u-5-hE.AZ#z5tr3EE.-l" FECHFEt = , , , ,añ"☒Eti5HkkEZ . ¥ It -1=+4-1--44-3 §= ?⃝ Y ÷¥±¥÷¥÷¥÷¥÷§1÷÷:* .÷÷:÷÷±÷÷÷. ¥1m.i¥3L .MN/T-It-Yyfllli5Z-tEiTIt-f--T.#a-Ent-G- ¥
50. 7261--444--51111417%-1=-2 Headless CMS '¥3E ?⃝ 0 'air I F¥㱺EÉA 9 ¥29'¥ I → ' → ÷: : : }¥ ñasc SSG F" >°☐9 a.ci#tEa--tI-rxz" tEF☒¥F.IT#7-E a HTML ᶇ = -711714-5917=2171" # ' 1¥ &i¥tñ"3= {ñI*I*¥=¥5xt* } E "hE¥R☒D' 1515584 ! → Einen 2222411¥
51. tz-a-F-l-e-2+i://.IE#LIru37kzY-tII- • F-MÉFKTTFEEJTIEta . Fat 'T¥€P¥n¥ts- CE . • AWS not at- É7Z¥¥l=#⾨F⾨¥Z" -1=3 *" ' ¥ -1¥> at it • ☒ II.IKZZ Node jsnii-II-F-u.TL#--- • ¥¥±¥☒wT☒iJavaScript IT - #2¥83 attia? • D-# t-CDNFNYE.TL/-isT--CT---A-75Fil--JtatITELt--) • Netlify Functions IET#4-4-1=51" Netlify94¥39 ÉI 4-7--124 f.¥14bn 4¥44T-i-HEETA.toizuSHDE.iq#*EEH3
52. ÉLH=¥EkkEE¥☐nWeb4TH-FE TAT : Headless CMst-XTIKE-i-7-ib-f.in#I.E-AtiEY4--X"¥¥kLT= . > " ☐ Fates " 't ← ¥ecz:-B:-(WE . £51552 done -*⾨ _ᶃ,¥?_? a - , ^ I ← e'TLEEIIFZ , → ai .Ét☐T ¥¥FÉ Web _f± " "" Itorhlle → ¥¥ .tt#InHEIT-I--It-ttlI5h-" ¥1b "
53. ÉH¥3añÑZtH¥Y¥Fti"I'Ñ • static site Generator € "* . yeggs , A- 71-4' • Headless CMS-tt.EE#zl-I-Y-ET-KA-IX'" ¥¥=¥±E • Iata -15€ TER - - - £47515 T ail . . . e-yyiA.EE#nFnFEEETIhtit- . ¥☐¥;¥je§ .EE#EtiE-t-E7--1-tEpA?--.i=loooN-----ietitikt " 㱺 -1£ > z <3 ¥1T" -43 ⊥ attire tEEI.tn" 511 㱺 ¥R¥¥Iz¥#¥¥tii¥¥ . É"É¥tEF¥n¥= ( 211=7
54. Iet
55. 41 lt-T-Y-tr-H-a-ETFEHF-F-kaGXYIYF.ch#EtRA- 5-%? A Better Performance 113+-7=21--1 tnz - ☐ A Higher Security Italia f- T?¥k3 A Cheaper , Easy Scaling T ent -74- Till A Better Developer Experience F¥i¥¥ 7h41
56. _÷m=÷÷÷¥¥¥÷÷:÷÷÷_ ex #nntalttyca Webkit (Fist) + t CMS @tgif i¥n ?⃝ Jansky , , , , , => % / = Trai> ☐ =tI=t"I=É=T 1=1+777×5474
57. FITE
58. Jamstackn ¥-15T . I"+Yt-tf¥k¥É¥EH ! 880☒ ?⃝ css¥E¥t f- fi¥|Ihn ! """ "" *"* GEE -4*1++3 -4--592×7%752 ! Jamstackn 'Él¥Ev3h3T4IF .
59. ¥471"'t ) ="±"uIlt= !