Jamstackで失敗した3つのこと - PWA Night Conference 2021

JamstackでWebサイトやWebアプリケーションが作られることも増えてきました。このセッションでは、まずJamstackとはなにか、特徴とそのメリットをあらためて確認します。その上で「自社メディアCodeGridをJamstackで作った際に、失敗した3つのこと」を紹介しながら、Jamstackを採用する際のコツを伝えます。

Transcript

1. ࣦഊͨͭ͠ͷ͜ͱ גࣜձࣾϐΫηϧάϦου
   தଜ
   ڗհ Ͱ
2. தଜ
   ڗհ
   גࣜձࣾϐΫηϧάϦου
   ୅දऔక໾
   +BNTUBDLΤϯδχΞ
6. ࠓ೔࿩͢͜ͱ
7. w
   +BNTUBDLͱ͸ʁ
   w
   $PEF(SJEΛ+BNTUBDLʹͨ͠
   w
   ࣦഊͨͭ͠ͷ͜ͱ
8. +BNTUBDLͱ͸ʁ
9. ެࣜαΠτ
   KBNTUBDLPSH
11. ߴ଎ͳ
    ʮ8FCαΠτ΍ΞϓϦʯ Λ
    ࡞ΔϞμϯͳํ๏
14. +BNTUBDLͷجຊݪଇ͸
    QSFSFOEFSJOH
    
    EFDPVQMJOH
    
    ࣄલੜ੒ͱ෼཭
15. QSFSFOEFSJOH
    ʢࣄલੜ੒ʣ
16. αʔόʔͰ)5.-࡞Βͣ 
 ϏϧυͰ੩త)5.-࡞Δ
17. αʔόʔͰ)5.-Λ
    ࡞Βͳ͍
18. αʔόʔͰ)5.-Λ
    ࡞Βͳ͍
19. +BNTUBDL
20. ϏϧυͰ੩త)5.-Λ࡞Δ
21. Static Site Generator
 ੩తαΠτδΣωϨʔλʔ ϏϧυͰ)5.-Λ࡞Δπʔϧ
23. 44(Ͱ੩త)5.-ΛϏϧυ
24. $%/Ͱ഑৴
25. ੩తαΠτϗεςΟϯάαʔϏε (JUϦϙδτϦͱ࿈ܞ͠ɺ ࣗಈϏϧυͯ͠
    $%/Ͱެ։ͯ͘͠ΕΔαʔϏε
26. "NQMJGZ
    $POTPMF
27. ੩తαΠτϗεςΟϯά ʢ$%/ Ͱ഑৴
28. EFDPVQMJOH
    ʢ෼཭ʣ
29. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1*
30. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1* Ͱ͖ͳ͍͜ͱ
    Ϣʔβʔೝূ
    Ϣʔβʔ͝ͱͷσʔλ
    ݕࡧ
31. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1* ੩త)5.-ͰͰ͖ͳ͍͜ͱ͸
    +BWB4DSJQUͱ"1*
32. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1* ੩తͩͱ 
 $.4ʹΑΔίϯςϯπ؅ཧ 
 Ͱ͖ͳ͍Μ͡Όʁ
33. ϔουϨε$.4 ίϯςϯπͷ؅ཧը໘ͱ"1*
35. ϔουϨε$.4ͷίϯςϯπΛϏϧυ
36. ϔουϨε$.4ͷίϯςϯπΛݕࡧ
37. +BNTUBDLͷجຊݪଇ͸
    QSFSFOEFSJOH
    
    EFDPVQMJOH
    
    ࣄલੜ੒ͱ෼཭
38. αʔόʔͰ)5.-࡞Βͣ 
 ϏϧυͰ੩త)5.-࡞ͬͯ
    $%/Ͱ഑৴
    ಈతίϯςϯπ͸+4ͱ"1*
39. +BNTUBDLͷϝϦοτ
40. ੩త͔ͩΒߴ଎
    ੩త)5.-ฦ͚ͩ͢
    $%/Ͱ഑৴Ͱ͖Δ
    ΞΫηεٸ૿ʹ΋ڧ͍
41. ηΩϡϦςΟ΋ڧ͍
    ੩తͳͷͰϢʔβʔೖྗͷӨڹΛड͚ʹ͍͘
    "1*͸ී௨ͳͷͰ஫ҙ
42. 18"ͱؔ܎͋Δͷʁ
43. ͍΍ ɾ ɾ ɾ ʁ
45. ߴ଎ͳ8FCΛ࡞Δํ๏
    18"Ͱ΋࠾༻Ͱ͖Δ
46. $PEF(SJEΛ
    +BNTUBDLʹͨ͠
48. αϒεΫܕͷ༗ྉϝσΟΞ
    ݱࡏهࣄ 
 ໿ϖʔδ
    ϩάΠϯɺ ͓ؾʹೖΓɺ ݕࡧͳͲ
49. ϝσΟΞαΠτ͸
    +BNTUBDLʹ͠΍͍͢
51. چߏ੒
52. ϒϥ΢β
53. ϒϥ΢β γϯϓϧͳαʔόʔߏ੒
54. ϒϥ΢β )FSPLV͕શ෦୲౰
55. ϒϥ΢β ΞΫηε૿͑Δͱ஗͍
    %#ΫΤϦෳࡶͳϖʔδ͸஗͍
    IFSPLVམͪΔͱαʔϏεࢭ·Δ
56. +BNTUBDLߏ੒
57. ੩తαΠτδΣωϨʔλʔ
58. ੩తαΠτδΣωϨʔλʔ
61. /FUMJGZ ϗεςΟϯάαʔϏε
62. /FUMJGZ ϗεςΟϯάαʔϏε /FUMJGZ 
 GVODUJPOT
64. Matt Biilmann
 CEO and Co-founder of Netlify
65. (JU)VC /FUMJGZ ࣄલϏϧυ͢Δ
66. (JU)VC /FUMJGZ 
 GVODUJPOT ػೳ͸"1*ͱͯ͠෼཭
67. ϒϥ΢β /FUMJGZ /FUMJGZ
    'VODUJPOT
68. +BNTUBDLʹͯ͠ྑ͔ͬͨ͜ͱ
69. 
    ϖʔδදࣔ଎౓ͷվળ
71. $PSF
    8FC
    7JUBMT
72. 
    ։ൃͷ͠΍͢͞
73. ϒϥ΢β /FUMJGZ /FUMJGZ
    'VODUJPOT
74. ϓϧϦΫ͝ͱʹϓϨϏϡʔͰ͖Δ
77. 
    +BNTUBDLΛཧղͰ͖ͨ
78. w࣮ࡍͷࣄྫ͕Ͱ͖ͨ
    w஌ݟ͕ཷ·ͬͨ
    w࣮ફͯ͠Θ͔Δ͜ͱ͕͋Δ
79. +BNTUBDLʹͯ͠ਖ਼ղͩͬͨ
80. ࣦഊͨͭ͠ͷ͜ͱ
81. ೥લͷ
    ͸͡Ίͯͷ+BNTUBDL
    ͍Ζ͍Ζࣦഊ΋͋Δ
82. ࣦഊͦ͜Ұ൪ͷϊ΢ϋ΢
83. 
    ຖճ͢΂ͯΛϏϧυ͢Δߏ੒
84. wϞϊϨϙ
    w͍ͭ΋શύοέʔδϏϧυ
    wґଘΠϯετʔϧ͕࣌ؒ௕͍ ʢ෼௒ʣ
    w$*։͔࢝Β׬ྃ·Ͱ໿෼
    w44(ॲཧҎ֎ɺ ෼཭ͨ͠΄͏͕ྑ͔ͬͨ
85. +BNTUBDL͸
    Ϗϧυ͕࣌ؒओͳ໰୊
86. wίϯςϯπྔ͕ଟ͍ͱ޻෉͕ඞཁ
    w ϖʔδҎ্͸େมͦ͏
    w+BNTUBDLؔ࿈ͷ৽͍͠ιϦϡʔγϣϯ͸ 
 ͍͍ͩͨϏϧυ࣌ؒΛղܾ͢Δ΋ͷ
    w*ODSFNFOUBM
    #VJMET ʢ(BUTCZ+4ʣ
    w%JTUSJCVUFE
    1FSTJTUFOU
    3FOEFSJOH ʢ/FUMJGZʣ
87. Ϗϧυ࣌ؒΛৗʹҙࣝ͢Δ
88. ͪͳΈʹݱࡏͷ$PEF(SJE͸
    νϡʔχϯάͨ͠Γ
    ϞϊϨϙղମͯ͠
    ෼ͪΐͬͱ
89. 
    Πϯϑϥಛ༗ͷػೳΛ࢖ͬͨ͜ͱ
90. ͔ͤͬ͘ͳͷͰ 
 /FUMJGZͷػೳΛ
    ͍Ζ͍Ζ׆͔ͦ͏ͱࢥͬͨ
91. w/FUMJGZ
    'PSNT
    w؆୯ʹϑΥʔϜ͕࡞ΕΔ
    w/FUMJGZ
    'VODUJPOT
    w؆୯ʹ"1*͕࡞ΕΔ
    w3PMFCBTFE
    BDDFTT
    DPOUSPM
    wϩάΠϯϢʔβʔͷଐੑͰϦϥΠτͰ͖Δ
92. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ
93. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ͭੜ੒͓ͯ͘͠
    ͜Εͧ׬ᘳͳ
    QSFSFOEFSJOH
94. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ͜Ε͕ࣦഊͩͬͨ
95. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ϖʔδ਺
    ഒ
    ʴ
    /FUMJGZҎ֎ʹσϓϩΠͰ͖ͳ͍
96. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ϖʔδʹͯ͠
    ݖݶʹԠͯ͡هࣄΛฦ͢"1*Λ
    ༻ҙ͢΂͖ͩͬͨ
97. +BNTUBDLʹ͸
    ϙʔλϏϦςΟͱ͍͏
    ಛੑ͕͋Δ
98. wͨͩͷ੩తϑΝΠϧ͔ͩΒ
    wΠϯϑϥΛબ͹ͳ͍
    wͲ͜Ͱ΋σϓϩΠͰ͖Δ
101. ϙʔλϏϦςΟ
     +BNTUBDLͷαΠτ͸͋Β͔͡Ίੜ੒͞Ε͍ͯ·͢ɻ
     ͭ·Γɺ͞·͟·ͳϗεςΟϯάɾαʔϏεͰαΠτΛ
     ϗετͰ͖ɺ޷ΈͷϗετʹҠಈͰ͖·͢ɻ
     γϯϓϧͳ੩తϗεςΟϯάαʔϏεͰ͋Ε͹ɺ 
 +BNTUBDLαΠτΛఏڙͰ͖·͢ɻ
     ΠϯϑϥετϥΫνϟʔͷϩοΫΠϯͱ͸͓͞Β͹Ͱ͢ɻ
102. ଟ͘ͷػೳ࢖͍ͬͨͤͰ
     ΠϯϑϥϩοΫΠϯ͞ΕͯΔ
104. "NQMJGZ
     $POTPMF ͭͷαʔϏεʹσϓϩΠͯ͠Δ
105. "NQMJGZ
     $POTPMF ͭͷαʔϏεʹσϓϩΠͯ͠Δ %/4੾Γସ͑Ε͹ 
 ͍ͭͰ΋ҠߦͰ͖Δ
106. ͱ͸͍͑ɺ
     ศརͳػೳ͕
     ࢖͑ͳ͘ͳΔͷͰ
107. Πϯϑϥಛ༗ػೳ࢖͏࣌͸
     ϙʔλϏϦςΟࣦΘΕͯ΋
     ϝϦοτ͋Δ͔ߟ͑Α͏
108. 
     "1*Λ׬શ෼཭͠ͳ͔ͬͨ͜ͱ
109. w/FUMJGZ
     'VODUJPOT
     w؆୯ʹ"1*͕࡞ΕΔ
     wϑϩϯτͱҰॹʹσϓϩΠͰ͖Δ
     w$PEF(SJE͸"1*গͳ͍
110. Ϗϧυ࣌ؒʹαΠτʴ"1*
     ΠϯϑϥϩοΫΠϯ
112. +BNTUBDLͷجຊݪଇ͸
     QSFSFOEFSJOH
     
     EFDPVQMJOH
     
     ࣄલੜ੒ͱ෼཭
114. σΧοϓϦϯά
     σΧοϓϦϯάͱ͸ɺγεςϜ΍αʔϏεΛ͖Ε͍ʹ෼཭͢Δ ͜ͱͰ͢ɻαΠτӡӦʹඞཁͳαʔϏεΛ੾Γ཭͢͜ͱͰɺ
     ֤ߏ੒ཁૉͷઆ໌͕༰қͰɺಠཱͯ͠ަ׵΍ߋ৽Ͱ͖ɺ 
 ૊৫಺·ͨ͸ୈࡾऀͷઐ໳Ոʹ೚ͤΒΕ·͢ɻ
115. /FUMJGZ
     GVODUJPOTͩͱ
     αΠτͱ"1*͕
     ಠཱͯ͠ߋ৽Ͱ͖ͳ͍
116. "1*͸ϦϙδτϦ͝ͱ෼͚ɺ
     ผʹ։ൃ ɾ σϓϩΠ͕ཧ૝
117. ·ͱΊ
118. +BNTUBDLͱ͸
     ϏϧυͰ੩త)5.-Λ࡞Γɺ
     ಈతػೳΛ"1*Ͱ෼཭͢Δख๏ 
 $%/Ͱ഑৴Ͱ͖ͯߴ଎ ɾ ηΩϡΞ
119. ϥΠϒϥϦ͸ࣗ༝
     ϗεςΟϯά΋ࣗ༝
     ௨ৗ͸44(ͱ੩తϗεςΟϯάαʔϏε
120. +BNTUBDLͰ͸
     Ϗϧυ͕࣌ؒओͳ໰୊
     Ϗϧυ͕࣌ؒ୹͘ͳΔΑ͏ҙࣝ͢Δ
121. ੩తϗεςΟϯάαʔϏεͷ
     ػೳґଘʹ஫ҙ
     ϙʔλϏϦςΟΛ٘ਜ਼ʹͯ͠ྑ͍͔Α͘ߟ͑Δ
122. جຊݪଇ͸
     QSFSFOEFSJOH
     ࣄલϏϧυʣ
     EFDPVQMJOH
     ʢ෼཭ʣ
     "1*͸׬શ෼཭͢Δ
123. ਖ਼͘͠࢖͑͹
     ߴ଎Ͱɺ ηΩϡΞͰɺ
     ϝϯςφϯε͠΍͍͢
     αΠτ΍ΞϓϦ͕࡞ΕΔ
124. ਖ਼͘͠+BNTUBDLΛཧղͯ͠
     ࢖͍͜ͳ͠·͠ΐ͏
     ެࣜαΠτ
     KBNTUBDLPSH
     ΛͪΌΜͱಡΉ
125. 5IBOL
     ZPV Jamstack͸גࣜձࣾϐΫηϧάϦουͷαΠτ΍
 https://www.pxgrid.com/jamstack / CodeGridͰ΋ৄ͘͠঺հͯ͠·͢ https://www.codegrid.net/series/2021-jamstack/