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

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. ࠓ೔࿩͢͜ͱ
   

   View Slide

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

   View Slide

8. +BNTUBDLͱ͸ʁ
   

   View Slide

9. ެࣜαΠτ
   KBNTUBDLPSH
   

   View Slide

10. View Slide

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

    View Slide

12. View Slide

13. View Slide

14. +BNTUBDLͷجຊݪଇ͸
    QSFSFOEFSJOHEFDPVQMJOH
    ࣄલੜ੒ͱ෼཭
    

    View Slide

15. QSFSFOEFSJOH
    ʢࣄલੜ੒ʣ
    

    View Slide

16. αʔόʔͰ)5.-࡞Βͣ
    

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

    View Slide

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

    View Slide

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

    View Slide

19. +BNTUBDL
    

    View Slide

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

    View Slide

21. Static Site Generator

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

    View Slide

22. View Slide

23. 44(Ͱ੩త)5.-ΛϏϧυ
    

    View Slide

24. $%/Ͱ഑৴
    

    View Slide

25. ੩తαΠτϗεςΟϯάαʔϏε
    (JUϦϙδτϦͱ࿈ܞ͠ɺ
    ࣗಈϏϧυͯ͠
    $%/Ͱެ։ͯ͘͠ΕΔαʔϏε
    

    View Slide

26. "NQMJGZ$POTPMF
    

    View Slide

27. ੩తαΠτϗεςΟϯά
    ʢ$%/
    Ͱ഑৴
    

    View Slide

28. EFDPVQMJOH
    ʢ෼཭ʣ
    

    View Slide

29. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1*
    

    View Slide

30. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1*
    Ͱ͖ͳ͍͜ͱ
    Ϣʔβʔೝূ
    Ϣʔβʔ͝ͱͷσʔλ
    ݕࡧ
    

    View Slide

31. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1*
    ੩త)5.-ͰͰ͖ͳ͍͜ͱ͸
    +BWB4DSJQUͱ"1*
    

    View Slide

32. ಈతίϯςϯπ͸+BWB4DSJQUͱ"1*
    ੩తͩͱ
    

    $.4ʹΑΔίϯςϯπ؅ཧ
    

    Ͱ͖ͳ͍Μ͡Όʁ
    

    View Slide

33. ϔουϨε$.4
    ίϯςϯπͷ؅ཧը໘ͱ"1*
    

    View Slide

34. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. αʔόʔͰ)5.-࡞Βͣ
    

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

    View Slide

39. +BNTUBDLͷϝϦοτ
    

    View Slide

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

    View Slide

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

    View Slide

42. 18"ͱؔ܎͋Δͷʁ
    

    View Slide

43. ͍΍
    ɾ
    ɾ
    ɾ
    ʁ
    

    View Slide

44. View Slide

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

    View Slide

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

    View Slide

47. View Slide

48. αϒεΫܕͷ༗ྉϝσΟΞ
    ݱࡏهࣄ
    

    ໿ϖʔδ
    ϩάΠϯɺ
    ͓ؾʹೖΓɺ
    ݕࡧͳͲ
    

    View Slide

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

    View Slide

50. View Slide

51. چߏ੒
    

    View Slide

52. ϒϥ΢β
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. +BNTUBDLߏ੒
    

    View Slide

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

    View Slide

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

    View Slide

59. View Slide

60. View Slide

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

    View Slide

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

    GVODUJPOT
    

    View Slide

63. View Slide

64. Matt Biilmann

    CEO and Co-founder of Netlify
    

    View Slide

65. (JU)VC /FUMJGZ
    ࣄલϏϧυ͢Δ
    

    View Slide

66. (JU)VC /FUMJGZ
    

    GVODUJPOT
    ػೳ͸"1*ͱͯ͠෼཭
    

    View Slide

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

    View Slide

68. +BNTUBDLʹͯ͠ྑ͔ͬͨ͜ͱ
    

    View Slide

69. ϖʔδදࣔ଎౓ͷվળ
    

    View Slide

70. View Slide

71. $PSF8FC7JUBMT
    

    View Slide

72. ։ൃͷ͠΍͢͞
    

    View Slide

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

    View Slide

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

    View Slide

75. View Slide

76. View Slide

77. +BNTUBDLΛཧղͰ͖ͨ
    

    View Slide

78. w࣮ࡍͷࣄྫ͕Ͱ͖ͨ
    w஌ݟ͕ཷ·ͬͨ
    w࣮ફͯ͠Θ͔Δ͜ͱ͕͋Δ
    

    View Slide

79. +BNTUBDLʹͯ͠ਖ਼ղͩͬͨ
    

    View Slide

80. ࣦഊͨͭ͠ͷ͜ͱ
    

    View Slide

81. ೥લͷ
    ͸͡Ίͯͷ+BNTUBDL
    ͍Ζ͍Ζࣦഊ΋͋Δ
    

    View Slide

82. ࣦഊͦ͜Ұ൪ͷϊ΢ϋ΢
    

    View Slide

83. ຖճ͢΂ͯΛϏϧυ͢Δߏ੒
    

    View Slide

84. wϞϊϨϙ
    w͍ͭ΋શύοέʔδϏϧυ
    wґଘΠϯετʔϧ͕࣌ؒ௕͍
    ʢ෼௒ʣ
    
    w$*։͔࢝Β׬ྃ·Ͱ໿෼
    w44(ॲཧҎ֎ɺ
    ෼཭ͨ͠΄͏͕ྑ͔ͬͨ
    

    View Slide

85. +BNTUBDL͸
    Ϗϧυ͕࣌ؒओͳ໰୊
    

    View Slide

86. wίϯςϯπྔ͕ଟ͍ͱ޻෉͕ඞཁ
    w ϖʔδҎ্͸େมͦ͏
    w+BNTUBDLؔ࿈ͷ৽͍͠ιϦϡʔγϣϯ͸
    

    ͍͍ͩͨϏϧυ࣌ؒΛղܾ͢Δ΋ͷ
    w*ODSFNFOUBM#VJMET
    ʢ(BUTCZ+4ʣ
    
    w%JTUSJCVUFE1FSTJTUFOU3FOEFSJOH
    ʢ/FUMJGZʣ
    

    View Slide

87. Ϗϧυ࣌ؒΛৗʹҙࣝ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

90. ͔ͤͬ͘ͳͷͰ
    

    /FUMJGZͷػೳΛ
    ͍Ζ͍Ζ׆͔ͦ͏ͱࢥͬͨ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

99. View Slide

100. View Slide

101. ϙʔλϏϦςΟ
     +BNTUBDLͷαΠτ͸͋Β͔͡Ίੜ੒͞Ε͍ͯ·͢ɻ
     ͭ·Γɺ͞·͟·ͳϗεςΟϯάɾαʔϏεͰαΠτΛ
     ϗετͰ͖ɺ޷ΈͷϗετʹҠಈͰ͖·͢ɻ
     γϯϓϧͳ੩తϗεςΟϯάαʔϏεͰ͋Ε͹ɺ
     

     +BNTUBDLαΠτΛఏڙͰ͖·͢ɻ
     ΠϯϑϥετϥΫνϟʔͷϩοΫΠϯͱ͸͓͞Β͹Ͱ͢ɻ
     

     View Slide

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

     View Slide

103. View Slide

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

     View Slide

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

     ͍ͭͰ΋ҠߦͰ͖Δ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

111. View Slide

112. +BNTUBDLͷجຊݪଇ͸
     QSFSFOEFSJOHEFDPVQMJOH
     ࣄલੜ੒ͱ෼཭
     

     View Slide

113. View Slide

114. σΧοϓϦϯά
     σΧοϓϦϯάͱ͸ɺγεςϜ΍αʔϏεΛ͖Ε͍ʹ෼཭͢Δ
     ͜ͱͰ͢ɻαΠτӡӦʹඞཁͳαʔϏεΛ੾Γ཭͢͜ͱͰɺ
     ֤ߏ੒ཁૉͷઆ໌͕༰қͰɺಠཱͯ͠ަ׵΍ߋ৽Ͱ͖ɺ
     

     ૊৫಺·ͨ͸ୈࡾऀͷઐ໳Ոʹ೚ͤΒΕ·͢ɻ
     

     View Slide

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

     View Slide

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

     View Slide

117. ·ͱΊ
     

     View Slide

118. +BNTUBDLͱ͸
     ϏϧυͰ੩త)5.-Λ࡞Γɺ
     
     ಈతػೳΛ"1*Ͱ෼཭͢Δख๏
     

     $%/Ͱ഑৴Ͱ͖ͯߴ଎
     ɾ
     ηΩϡΞ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

125. 5IBOLZPV
     Jamstack͸גࣜձࣾϐΫηϧάϦουͷαΠτ΍

     https://www.pxgrid.com/jamstack
     /
     
     CodeGridͰ΋ৄ͘͠঺հͯ͠·͢
     https://www.codegrid.net/series/2021-jamstack/
     

     View Slide