Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

24e4c49981138b26c61acb289e598756?s=47 Kyosuke
June 26, 2021

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

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

24e4c49981138b26c61acb289e598756?s=128

Kyosuke

June 26, 2021
Tweet

Transcript

  1. ࣦഊͨͭ͠ͷ͜ͱ גࣜձࣾϐΫηϧάϦου தଜڗհ Ͱ

  2. தଜڗհ גࣜձࣾϐΫηϧάϦου ୅දऔక໾ +BNTUBDLΤϯδχΞ

  3. None
  4. None
  5. None
  6. ࠓ೔࿩͢͜ͱ

  7. w+BNTUBDLͱ͸ʁ w$PEF(SJEΛ+BNTUBDLʹͨ͠ wࣦഊͨͭ͠ͷ͜ͱ

  8. +BNTUBDLͱ͸ʁ

  9. ެࣜαΠτ KBNTUBDLPSH

  10. None
  11. ߴ଎ͳ ʮ8FCαΠτ΍ΞϓϦʯ Λ ࡞ΔϞμϯͳํ๏

  12. None
  13. None
  14. +BNTUBDLͷجຊݪଇ͸ QSFSFOEFSJOH EFDPVQMJOH ࣄલੜ੒ͱ෼཭

  15. QSFSFOEFSJOH ʢࣄલੜ੒ʣ

  16. αʔόʔͰ)5.-࡞Βͣ 
 ϏϧυͰ੩త)5.-࡞Δ

  17. αʔόʔͰ)5.-Λ ࡞Βͳ͍

  18. αʔόʔͰ)5.-Λ ࡞Βͳ͍

  19. +BNTUBDL

  20. ϏϧυͰ੩త)5.-Λ࡞Δ

  21. Static Site Generator
 ੩తαΠτδΣωϨʔλʔ ϏϧυͰ)5.-Λ࡞Δπʔϧ

  22. None
  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*

  34. None
  35. ϔουϨε$.4ͷίϯςϯπΛϏϧυ

  36. ϔουϨε$.4ͷίϯςϯπΛݕࡧ

  37. +BNTUBDLͷجຊݪଇ͸ QSFSFOEFSJOH EFDPVQMJOH ࣄલੜ੒ͱ෼཭

  38. αʔόʔͰ)5.-࡞Βͣ 
 ϏϧυͰ੩త)5.-࡞ͬͯ $%/Ͱ഑৴ ಈతίϯςϯπ͸+4ͱ"1*

  39. +BNTUBDLͷϝϦοτ

  40. ੩త͔ͩΒߴ଎ ੩త)5.-ฦ͚ͩ͢ $%/Ͱ഑৴Ͱ͖Δ ΞΫηεٸ૿ʹ΋ڧ͍

  41. ηΩϡϦςΟ΋ڧ͍ ੩తͳͷͰϢʔβʔೖྗͷӨڹΛड͚ʹ͍͘ "1*͸ී௨ͳͷͰ஫ҙ

  42. 18"ͱؔ܎͋Δͷʁ

  43. ͍΍ ɾ ɾ ɾ ʁ

  44. None
  45. ߴ଎ͳ8FCΛ࡞Δํ๏ 18"Ͱ΋࠾༻Ͱ͖Δ

  46. $PEF(SJEΛ +BNTUBDLʹͨ͠

  47. None
  48. αϒεΫܕͷ༗ྉϝσΟΞ ݱࡏهࣄ 
 ໿ϖʔδ ϩάΠϯɺ ͓ؾʹೖΓɺ ݕࡧͳͲ

  49. ϝσΟΞαΠτ͸ +BNTUBDLʹ͠΍͍͢

  50. None
  51. چߏ੒

  52. ϒϥ΢β

  53. ϒϥ΢β γϯϓϧͳαʔόʔߏ੒

  54. ϒϥ΢β )FSPLV͕શ෦୲౰

  55. ϒϥ΢β ΞΫηε૿͑Δͱ஗͍ %#ΫΤϦෳࡶͳϖʔδ͸஗͍ IFSPLVམͪΔͱαʔϏεࢭ·Δ

  56. +BNTUBDLߏ੒

  57. ੩తαΠτδΣωϨʔλʔ

  58. ੩తαΠτδΣωϨʔλʔ

  59. None
  60. None
  61. /FUMJGZ ϗεςΟϯάαʔϏε

  62. /FUMJGZ ϗεςΟϯάαʔϏε /FUMJGZ 
 GVODUJPOT

  63. None
  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. ϖʔδදࣔ଎౓ͷվળ

  70. None
  71. $PSF8FC7JUBMT

  72. ։ൃͷ͠΍͢͞

  73. ϒϥ΢β /FUMJGZ /FUMJGZ 'VODUJPOT

  74. ϓϧϦΫ͝ͱʹϓϨϏϡʔͰ͖Δ

  75. None
  76. None
  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%JTUSJCVUFE1FSTJTUFOU3FOEFSJOH

    ʢ/FUMJGZʣ
  87. Ϗϧυ࣌ؒΛৗʹҙࣝ͢Δ

  88. ͪͳΈʹݱࡏͷ$PEF(SJE͸ νϡʔχϯάͨ͠Γ ϞϊϨϙղମͯ͠ ෼ͪΐͬͱ

  89. Πϯϑϥಛ༗ͷػೳΛ࢖ͬͨ͜ͱ

  90. ͔ͤͬ͘ͳͷͰ 
 /FUMJGZͷػೳΛ ͍Ζ͍Ζ׆͔ͦ͏ͱࢥͬͨ

  91. w/FUMJGZ'PSNT w؆୯ʹϑΥʔϜ͕࡞ΕΔ w/FUMJGZ'VODUJPOT w؆୯ʹ"1*͕࡞ΕΔ w3PMFCBTFEBDDFTTDPOUSPM wϩάΠϯϢʔβʔͷଐੑͰϦϥΠτͰ͖Δ

  92. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ

  93. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ͭੜ੒͓ͯ͘͠ ͜Εͧ׬ᘳͳQSFSFOEFSJOH

  94. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ͜Ε͕ࣦഊͩͬͨ

  95. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ϖʔδ਺ഒ ʴ /FUMJGZҎ֎ʹσϓϩΠͰ͖ͳ͍

  96. ߪಡͯ͠ͳ͍ਓ ߪಡͯ͠Δਓ ϖʔδʹͯ͠ ݖݶʹԠͯ͡هࣄΛฦ͢"1*Λ ༻ҙ͢΂͖ͩͬͨ

  97. +BNTUBDLʹ͸ ϙʔλϏϦςΟͱ͍͏ ಛੑ͕͋Δ

  98. wͨͩͷ੩తϑΝΠϧ͔ͩΒ wΠϯϑϥΛબ͹ͳ͍ wͲ͜Ͱ΋σϓϩΠͰ͖Δ

  99. None
  100. None
  101. ϙʔλϏϦςΟ +BNTUBDLͷαΠτ͸͋Β͔͡Ίੜ੒͞Ε͍ͯ·͢ɻ ͭ·Γɺ͞·͟·ͳϗεςΟϯάɾαʔϏεͰαΠτΛ ϗετͰ͖ɺ޷ΈͷϗετʹҠಈͰ͖·͢ɻ γϯϓϧͳ੩తϗεςΟϯάαʔϏεͰ͋Ε͹ɺ 
 +BNTUBDLαΠτΛఏڙͰ͖·͢ɻ ΠϯϑϥετϥΫνϟʔͷϩοΫΠϯͱ͸͓͞Β͹Ͱ͢ɻ

  102. ଟ͘ͷػೳ࢖͍ͬͨͤͰ ΠϯϑϥϩοΫΠϯ͞ΕͯΔ

  103. None
  104. "NQMJGZ$POTPMF ͭͷαʔϏεʹσϓϩΠͯ͠Δ

  105. "NQMJGZ$POTPMF ͭͷαʔϏεʹσϓϩΠͯ͠Δ %/4੾Γସ͑Ε͹ 
 ͍ͭͰ΋ҠߦͰ͖Δ

  106. ͱ͸͍͑ɺ  ศརͳػೳ͕ ࢖͑ͳ͘ͳΔͷͰ

  107. Πϯϑϥಛ༗ػೳ࢖͏࣌͸ ϙʔλϏϦςΟࣦΘΕͯ΋ ϝϦοτ͋Δ͔ߟ͑Α͏

  108. "1*Λ׬શ෼཭͠ͳ͔ͬͨ͜ͱ

  109. w/FUMJGZ'VODUJPOT w؆୯ʹ"1*͕࡞ΕΔ wϑϩϯτͱҰॹʹσϓϩΠͰ͖Δ w$PEF(SJE͸"1*গͳ͍

  110. Ϗϧυ࣌ؒʹαΠτʴ"1* ΠϯϑϥϩοΫΠϯ

  111. None
  112. +BNTUBDLͷجຊݪଇ͸ QSFSFOEFSJOH EFDPVQMJOH ࣄલੜ੒ͱ෼཭

  113. None
  114. σΧοϓϦϯά σΧοϓϦϯάͱ͸ɺγεςϜ΍αʔϏεΛ͖Ε͍ʹ෼཭͢Δ ͜ͱͰ͢ɻαΠτӡӦʹඞཁͳαʔϏεΛ੾Γ཭͢͜ͱͰɺ ֤ߏ੒ཁૉͷઆ໌͕༰қͰɺಠཱͯ͠ަ׵΍ߋ৽Ͱ͖ɺ 
 ૊৫಺·ͨ͸ୈࡾऀͷઐ໳Ոʹ೚ͤΒΕ·͢ɻ

  115. /FUMJGZGVODUJPOTͩͱ αΠτͱ"1*͕ ಠཱͯ͠ߋ৽Ͱ͖ͳ͍

  116. "1*͸ϦϙδτϦ͝ͱ෼͚ɺ  ผʹ։ൃ ɾ σϓϩΠ͕ཧ૝

  117. ·ͱΊ

  118. +BNTUBDLͱ͸ ϏϧυͰ੩త)5.-Λ࡞Γɺ  ಈతػೳΛ"1*Ͱ෼཭͢Δख๏ 
 $%/Ͱ഑৴Ͱ͖ͯߴ଎ ɾ ηΩϡΞ

  119. ϥΠϒϥϦ͸ࣗ༝ ϗεςΟϯά΋ࣗ༝ ௨ৗ͸44(ͱ੩తϗεςΟϯάαʔϏε

  120. +BNTUBDLͰ͸ Ϗϧυ͕࣌ؒओͳ໰୊ Ϗϧυ͕࣌ؒ୹͘ͳΔΑ͏ҙࣝ͢Δ

  121. ੩తϗεςΟϯάαʔϏεͷ ػೳґଘʹ஫ҙ ϙʔλϏϦςΟΛ٘ਜ਼ʹͯ͠ྑ͍͔Α͘ߟ͑Δ

  122. جຊݪଇ͸ QSFSFOEFSJOH ࣄલϏϧυʣ  EFDPVQMJOH ʢ෼཭ʣ  "1*͸׬શ෼཭͢Δ

  123. ਖ਼͘͠࢖͑͹ ߴ଎Ͱɺ ηΩϡΞͰɺ  ϝϯςφϯε͠΍͍͢ αΠτ΍ΞϓϦ͕࡞ΕΔ

  124. ਖ਼͘͠+BNTUBDLΛཧղͯ͠ ࢖͍͜ͳ͠·͠ΐ͏ ެࣜαΠτKBNTUBDLPSHΛͪΌΜͱಡΉ

  125. 5IBOLZPV Jamstack͸גࣜձࣾϐΫηϧάϦουͷαΠτ΍
 https://www.pxgrid.com/jamstack / CodeGridͰ΋ৄ͘͠঺հͯ͠·͢ https://www.codegrid.net/series/2021-jamstack/