JamstackでWebサイトやWebアプリケーションが作られることも増えてきました。このセッションでは、まずJamstackとはなにか、特徴とそのメリットをあらためて確認します。その上で「自社メディアCodeGridをJamstackで作った際に、失敗した3つのこと」を紹介しながら、Jamstackを採用する際のコツを伝えます。
ࣦഊͨͭ͠ͷ͜ͱגࣜձࣾϐΫηϧάϦουதଜڗհͰ
View Slide
தଜڗհגࣜձࣾϐΫηϧάϦουදऔక+BNTUBDLΤϯδχΞ
ࠓ͢͜ͱ
w+BNTUBDLͱʁw$PEF(SJEΛ+BNTUBDLʹͨ͠wࣦഊͨͭ͠ͷ͜ͱ
+BNTUBDLͱʁ
ެࣜαΠτKBNTUBDLPSH
ߴͳʮ8FCαΠτΞϓϦʯΛ࡞ΔϞμϯͳํ๏
+BNTUBDLͷجຊݪଇQSFSFOEFSJOHEFDPVQMJOHࣄલੜͱ
QSFSFOEFSJOHʢࣄલੜʣ
αʔόʔͰ)5.-࡞Βͣ ϏϧυͰ੩త)5.-࡞Δ
αʔόʔͰ)5.-Λ࡞Βͳ͍
+BNTUBDL
ϏϧυͰ੩త)5.-Λ࡞Δ
Static Site Generator ੩తαΠτδΣωϨʔλʔϏϧυͰ)5.-Λ࡞Δπʔϧ
44(Ͱ੩త)5.-ΛϏϧυ
$%/Ͱ৴
੩తαΠτϗεςΟϯάαʔϏε(JUϦϙδτϦͱ࿈ܞ͠ɺࣗಈϏϧυͯ͠$%/Ͱެ։ͯ͘͠ΕΔαʔϏε
"NQMJGZ$POTPMF
੩తαΠτϗεςΟϯάʢ$%/Ͱ৴
EFDPVQMJOHʢʣ
ಈతίϯςϯπ+BWB4DSJQUͱ"1*
ಈతίϯςϯπ+BWB4DSJQUͱ"1*Ͱ͖ͳ͍͜ͱϢʔβʔೝূϢʔβʔ͝ͱͷσʔλݕࡧ
ಈతίϯςϯπ+BWB4DSJQUͱ"1*੩త)5.-ͰͰ͖ͳ͍͜ͱ+BWB4DSJQUͱ"1*
ಈతίϯςϯπ+BWB4DSJQUͱ"1*੩తͩͱ $.4ʹΑΔίϯςϯπཧ Ͱ͖ͳ͍Μ͡Όʁ
ϔουϨε$.4ίϯςϯπͷཧը໘ͱ"1*
ϔουϨε$.4ͷίϯςϯπΛϏϧυ
ϔουϨε$.4ͷίϯςϯπΛݕࡧ
αʔόʔͰ)5.-࡞Βͣ ϏϧυͰ੩త)5.-࡞ͬͯ$%/Ͱ৴ಈతίϯςϯπ+4ͱ"1*
+BNTUBDLͷϝϦοτ
੩త͔ͩΒߴ੩త)5.-ฦ͚ͩ͢$%/Ͱ৴Ͱ͖ΔΞΫηεٸ૿ʹڧ͍
ηΩϡϦςΟڧ͍੩తͳͷͰϢʔβʔೖྗͷӨڹΛड͚ʹ͍͘"1*ී௨ͳͷͰҙ
18"ͱؔ͋Δͷʁ
͍ɾɾɾʁ
ߴͳ8FCΛ࡞Δํ๏18"Ͱ࠾༻Ͱ͖Δ
$PEF(SJEΛ+BNTUBDLʹͨ͠
αϒεΫܕͷ༗ྉϝσΟΞݱࡏهࣄ ϖʔδϩάΠϯɺ͓ؾʹೖΓɺݕࡧͳͲ
ϝσΟΞαΠτ+BNTUBDLʹ͍͢͠
چߏ
ϒϥβ
ϒϥβγϯϓϧͳαʔόʔߏ
ϒϥβ)FSPLV͕શ෦୲
ϒϥβΞΫηε૿͑Δͱ͍%#ΫΤϦෳࡶͳϖʔδ͍IFSPLVམͪΔͱαʔϏεࢭ·Δ
+BNTUBDLߏ
੩తαΠτδΣωϨʔλʔ
/FUMJGZϗεςΟϯάαʔϏε
/FUMJGZϗεςΟϯάαʔϏε/FUMJGZ GVODUJPOT
Matt Biilmann CEO and Co-founder of Netlify
(JU)VC /FUMJGZࣄલϏϧυ͢Δ
(JU)VC /FUMJGZ GVODUJPOTػೳ"1*ͱͯ͠
ϒϥβ/FUMJGZ/FUMJGZ'VODUJPOT
+BNTUBDLʹͯ͠ྑ͔ͬͨ͜ͱ
ϖʔδදࣔͷվળ
$PSF8FC7JUBMT
։ൃͷ͢͠͞
ϓϧϦΫ͝ͱʹϓϨϏϡʔͰ͖Δ
+BNTUBDLΛཧղͰ͖ͨ
w࣮ࡍͷࣄྫ͕Ͱ͖ͨwݟ͕ཷ·ͬͨw࣮ફͯ͠Θ͔Δ͜ͱ͕͋Δ
+BNTUBDLʹͯ͠ਖ਼ղͩͬͨ
ࣦഊͨͭ͠ͷ͜ͱ
લͷ͡Ίͯͷ+BNTUBDL͍Ζ͍Ζࣦഊ͋Δ
ࣦഊͦ͜Ұ൪ͷϊϋ
ຖճͯ͢ΛϏϧυ͢Δߏ
wϞϊϨϙw͍ͭશύοέʔδϏϧυwґଘΠϯετʔϧ͕͍࣌ؒʢʣw$*։͔࢝Βྃ·Ͱw44(ॲཧҎ֎ɺͨ͠΄͏͕ྑ͔ͬͨ
+BNTUBDLϏϧυ͕࣌ؒओͳ
wίϯςϯπྔ͕ଟ͍ͱ͕ඞཁw ϖʔδҎ্େมͦ͏w+BNTUBDLؔ࿈ͷ৽͍͠ιϦϡʔγϣϯ ͍͍ͩͨϏϧυ࣌ؒΛղܾ͢Δͷw*ODSFNFOUBM#VJMETʢ(BUTCZ+4ʣw%JTUSJCVUFE1FSTJTUFOU3FOEFSJOHʢ/FUMJGZʣ
Ϗϧυ࣌ؒΛৗʹҙࣝ͢Δ
ͪͳΈʹݱࡏͷ$PEF(SJEνϡʔχϯάͨ͠ΓϞϊϨϙղମͯͪ͠ΐͬͱ
Πϯϑϥಛ༗ͷػೳΛͬͨ͜ͱ
͔ͤͬ͘ͳͷͰ /FUMJGZͷػೳΛ͍Ζ͍Ζ׆͔ͦ͏ͱࢥͬͨ
w/FUMJGZ'PSNTw؆୯ʹϑΥʔϜ͕࡞ΕΔw/FUMJGZ'VODUJPOTw؆୯ʹ"1*͕࡞ΕΔw3PMFCBTFEBDDFTTDPOUSPMwϩάΠϯϢʔβʔͷଐੑͰϦϥΠτͰ͖Δ
ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ
ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓͭੜ͓ͯ͘͜͠ΕͧᘳͳQSFSFOEFSJOH
ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ͜Ε͕ࣦഊͩͬͨ
ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓϖʔδഒʴ/FUMJGZҎ֎ʹσϓϩΠͰ͖ͳ͍
ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓϖʔδʹͯ͠ݖݶʹԠͯ͡هࣄΛฦ͢"1*Λ༻ҙ͖ͩͬͨ͢
+BNTUBDLʹϙʔλϏϦςΟͱ͍͏ಛੑ͕͋Δ
wͨͩͷ੩తϑΝΠϧ͔ͩΒwΠϯϑϥΛબͳ͍wͲ͜ͰσϓϩΠͰ͖Δ
ϙʔλϏϦςΟ+BNTUBDLͷαΠτ͋Β͔͡Ίੜ͞Ε͍ͯ·͢ɻͭ·Γɺ͞·͟·ͳϗεςΟϯάɾαʔϏεͰαΠτΛϗετͰ͖ɺΈͷϗετʹҠಈͰ͖·͢ɻγϯϓϧͳ੩తϗεςΟϯάαʔϏεͰ͋Εɺ +BNTUBDLαΠτΛఏڙͰ͖·͢ɻΠϯϑϥετϥΫνϟʔͷϩοΫΠϯͱ͓͞ΒͰ͢ɻ
ଟ͘ͷػೳ͍ͬͨͤͰΠϯϑϥϩοΫΠϯ͞ΕͯΔ
"NQMJGZ$POTPMFͭͷαʔϏεʹσϓϩΠͯ͠Δ
"NQMJGZ$POTPMFͭͷαʔϏεʹσϓϩΠͯ͠Δ%/4Γସ͑Ε ͍ͭͰҠߦͰ͖Δ
ͱ͍͑ɺศརͳػೳ͕͑ͳ͘ͳΔͷͰ
Πϯϑϥಛ༗ػೳ͏࣌ϙʔλϏϦςΟࣦΘΕͯϝϦοτ͋Δ͔ߟ͑Α͏
"1*Λશ͠ͳ͔ͬͨ͜ͱ
w/FUMJGZ'VODUJPOTw؆୯ʹ"1*͕࡞ΕΔwϑϩϯτͱҰॹʹσϓϩΠͰ͖Δw$PEF(SJE"1*গͳ͍
Ϗϧυ࣌ؒʹαΠτʴ"1*ΠϯϑϥϩοΫΠϯ
σΧοϓϦϯάσΧοϓϦϯάͱɺγεςϜαʔϏεΛ͖Ε͍ʹ͢Δ͜ͱͰ͢ɻαΠτӡӦʹඞཁͳαʔϏεΛΓ͢͜ͱͰɺ֤ߏཁૉͷઆ໌͕༰қͰɺಠཱͯ͠ަߋ৽Ͱ͖ɺ ৫·ͨୈࡾऀͷઐՈʹͤΒΕ·͢ɻ
/FUMJGZGVODUJPOTͩͱαΠτͱ"1*͕ಠཱͯ͠ߋ৽Ͱ͖ͳ͍
"1*ϦϙδτϦ͝ͱ͚ɺผʹ։ൃɾσϓϩΠ͕ཧ
·ͱΊ
+BNTUBDLͱϏϧυͰ੩త)5.-Λ࡞ΓɺಈతػೳΛ"1*Ͱ͢Δख๏ $%/Ͱ৴Ͱ͖ͯߴɾηΩϡΞ
ϥΠϒϥϦࣗ༝ϗεςΟϯάࣗ༝௨ৗ44(ͱ੩తϗεςΟϯάαʔϏε
+BNTUBDLͰϏϧυ͕࣌ؒओͳϏϧυ͕࣌ؒ͘ͳΔΑ͏ҙࣝ͢Δ
੩తϗεςΟϯάαʔϏεͷػೳґଘʹҙϙʔλϏϦςΟΛ٘ਜ਼ʹͯ͠ྑ͍͔Α͘ߟ͑Δ
جຊݪଇQSFSFOEFSJOH ࣄલϏϧυʣEFDPVQMJOHʢʣ"1*શ͢Δ
ਖ਼͑͘͠ߴͰɺηΩϡΞͰɺϝϯςφϯε͍͢͠αΠτΞϓϦ͕࡞ΕΔ
ਖ਼͘͠+BNTUBDLΛཧղ͍ͯ͜͠ͳ͠·͠ΐ͏ެࣜαΠτKBNTUBDLPSHΛͪΌΜͱಡΉ
5IBOLZPVJamstackגࣜձࣾϐΫηϧάϦουͷαΠτ https://www.pxgrid.com/jamstack/CodeGridͰৄ͘͠հͯ͠·͢https://www.codegrid.net/series/2021-jamstack/