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

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

Kyosuke
June 26, 2021

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

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

Kyosuke

June 26, 2021
Tweet

Other Decks in Technology

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