ShopifyとGatsbyJSを使った ヘッドレスコマース入門

ShopifyとGatsbyJSを使った ヘッドレスコマース入門

Jamstackな構成+Shopifyをバックエンドにサイトを作る方法について

881b1b57f1cbe3b66b017203f7cb2efb?s=128

Kenji Takasaki

August 05, 2020
Tweet

Transcript

  1. OPOTUBOEBSEXPSMEגࣜձࣾɹ$&0$50ߴ࡚݈࢘ 4IPQJGZͱ(BUTCZ+4Λ࢖ͬͨ ϔουϨείϚʔεೖ໳

  2. ߴ࡚݈࢘ w ౦ژɺ੢Ԯۼͷ4IPQJGZʹಛԽͨ͠&$αΠτͷ ίϯαϧɺ੍࡞Λߦ͏OPOTUBOEBSEXPSME ג ͷ୅දʗ$50ɻ w "SUˍ5FDIGPS3FUBJMΛϛογϣϯʹɺඒ͠͞ ͱςΫϊϩδʔͷཱ྆ͨ͠αΠτΛ࡞ΔͨΊʹਫ਼ ਐ͍ͯ͠Δɻ

    w ೥ɺઍ༿ݝੜ·Εɻ೥ɺࠃࡍجಜڭ େֶଔۀޙɺιϑτόϯΫʢגʣೖࣾɺ8FCߏ ஙͷ࢓ࣄʹैࣄͨ͠ޙɺ೥ʹಠཱɻ ೥ɺOPOTUBOEBSEXPSMEגࣜձࣾΛىۀɻೋࣇ ͷ෕ɻ෱Ԭ΁ͷҠॅܦݧऀɻ w 5XJUUFS!OQMVTPOF ࣗݾ঺հ
  3. ຊ೔ͷΞδΣϯμ w 4IPQJGZͷૉఢͳͱ͜Ζ w ϔουϨείϚʔεͱ͸ʁ w ϔουϨείϚʔεͷར఺ w ࣗࣾ&$ΛϔουϨεʹϦχϡʔΞϧͨ͠ࡍͷߏ੒ w

    (BUCZ+4ͷૉఢͳͱ͜Ζ w ੩తαΠτδΣωϨʔλʔ͡ΌͰ͖ͳͦ͞͏ͳͱ͜ΖΛͲ͏΍͔ͬͨ w ྑ͔ͬͨͱ͜Ζ w ͭ·͍ͣͨͱ͜Ζ
  4. 4IPQJGZͷૉఢͳͱ͜Ζ w ࠓ·Ͱ&$ͷ࢓૊Έͬͯෆࣗ༝͚ͩͲ͍҆"41Λ࢖͏͔ɺࣗ༝͚ͩͲίετͷ ͔͔ΔεΫϥον։ൃ͔ͩͬͨͷ͕ɺ4IPQJGZͱ͍͏બ୒ࢶ͕ग़͖ͯͨ͜ͱͰ ʮ࡞Γ͍ͨ෦෼͚ͩ޷͖ʹ࡞Δʯ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ

  5. ϔουϨείϚʔεͱ͸ʁ w ւ֎ͷ%$ͱݺ͹ΕΔςΫϊϩδʔΛॏࢹͨ͠੡଄খചͰඪ४ͱͳ͍ͬͯΔ ࣍ੈ୅ܕͷ&$ٕज़ͰɺσʔλʢόοΫΤϯυʣͱσβΠϯʢϑϩϯτΤϯ υʣͷ෼཭͕ಛ௃తͳ&$αΠτͷ࡞ΓͰ͢ɻ

  6. όοΫΤϯυͱϑϩϯτΤϯυͷ෼཭ ϞϊϦγοΫʢҰຕؠʣͳߏ੒ FY8PSE1SFTTςʔϚ4IPQJGZςʔϚ ςϯϓϨʔτݴޠΛ࢖ͬͯ ϨΠΞ΢τ৘ใ͔Β ϩδοΫ·Ͱ ҰͭͷϑΝΠϧʹ શͯॻ͔Ε͍ͯΔ ϔουϨεͳߏ੒ +4ϑϨʔϜϫʔΫΛ࢖ͬͯ

    ϖʔδͷදࣔ ϧʔςΟϯά &Y(BUTCZ+4/FYUKT/VYUKT &$γεςϜ FY4IPQJGZ ίϯςϯπ؅ཧγεςϜ FY8PSE1SFTT NJDSP$.4 $POUFOUGVM$.4 "1*࿈ܞ "1*࿈ܞ ϑϩϯτΤϯυ όοΫΤϯυ
  7. ϔουϨείϚʔεͷར఺ w ߴ଎ w ηΩϡΞ w εέʔϧͤ͞΍͍͢ w ։ൃޮ཰ʢ։ൃऀମݧʣ͕ྑ͍ w

    σβΠϯɺαΠτߏ଄ͷࣗ༝౓͕ߴ͍ w εϚϗΞϓϦʢଟσόΠεʣԽ͠΍͍͢ w $.4ͳͲผͷγεςϜͱͷ࿈ܞ͕ॊೈ
  8. ߴ଎ w ʮαΠτද͕ࣔඵ஗͘ͳΔͱɺചΓ্͕͛ݮগ͠ɺඵߴ଎Խ͢Δͱ ͷച্͕޲্͢Δɻʯ IUUQSPCPUJDTTUBOGPSEFEVdSPOOZL*&&&$PNQVUFS0OMJOF&YQFSJNFOUTQEG

  9. ηΩϡΞ w σβΠϯͱσʔλΛ෼཭͢Δ͜ͱͰɺαΠόʔ߈ܸΛड͚ΔϙΠϯτΛݮΒ͢ ͜ͱ͕Ͱ͖Δ

  10. εέʔϧͤ͞΍͍͢ w $%/ͰओཁͳϖʔδΛ഑৴Ͱ͖Δ w όοΫΤϯυͱϑϩϯτΤϯυͷ෼཭ʹΑΓσʔλʔϕʔεαʔόʔ΁ͷෛՙ ͕ϘτϧωοΫʹͳΔ͜ͱ͕ͳ͍

  11. ։ൃޮ཰ʢ։ൃऀମݧʣ͕ྑ͍ w ϑϩϯτΤϯυͱόοΫΤϯυ͕͖Ε͍ʹ෼཭͍ͯ͠ΔͷͰɺϑϩϯτΤϯ υΤϯδχΞ͸ϑϩϯτͷ࢓ࣄɺόοΫΤϯυΤϯδχΞ͸όοΫΤϯυͷ ࢓ࣄʹूத͢Δ͜ͱ͕Ͱ͖Δɻ w ಠࣗςϯϓϨʔτݴޠΛ֮͑ͳͯ͘΋࣮૷Ͱ͖Δɻ

  12. σβΠϯɺαΠτߏ଄ͷࣗ༝౓͕ߴ͍ w ߴ଎ԽɺαΠτߏ଄͸4&0ʹӨڹ͕େ͖͍ͷͰɺࣗ༝͕ߴ͍͜ͱ͸4&0ॏࢹ ͷαΠτʹେ͖ͳҙຯ͕͋Δ w όοΫΤϯυͷ੍ݶ͕ͳ͍ͷͰσβΠϯͷࣗ༝౓͕ߴ͍

  13. εϚϗΞϓϦԽ͠΍͍͢ w ϑϩϯτΤϯυΛ18"ʢ1SPHSFTTJWF8FC"QQMJDBUJPOʣʹ४ڌͨ͠ܗͰ࡞ Ε͹ɺϔουϨείϚʔεαΠτΛͦͷ··εϚϗΞϓϦͱͯ͠"OESPJEͷ 1MBZετΞͰ഑৴͢Δ͜ͱ͕Ͱ͖·͢ɻ

  14. $.4΍ผͷγεςϜͱͷ࿈ܞ͕ॊೈʹͰ͖Δ w ϔουϨε͸ෳ਺ͷγεςϜͱ࿈ܞ͢Δ৔߹Ͱ΋ϑϩϯτͷ։ൃ͸̍ͭͰ͢Ή w υϝΠϯΛ౷ҰͰ͖ΔଞɺϩάΠϯ৘ใΛ͸͡Ίͱͨ͠ϖʔδͷ͋Δ෦෼ʹ 4IPQJGZ͔Βͷ৘ใΛɺ͋Δ෦෼ʹ$.4͔Βͷ৘ใΛද͍ࣔͨ͠ͱ͍ͬͨ͜ ͱ΋ॊೈʹߦ͏͜ͱ͕Ͱ͖Δɻ

  15. ࣗࣾ&$ΛϔουϨεʹϦχϡʔΞϧͨ͠ࡍͷߏ੒ https://yori.so/

  16. (BUCZ+4ͷૉఢͳͱ͜Ζ w (BUTCZ+4͸3FBDUϕʔεͷ੩తαΠτδΣωϨʔλʔɻ w ͜ͷ࢓૊Έʹͦ͑͹ࠓͷ8FCͷϕετϓϥΫςΟεʹ४ڌͨ͠ܗͰίʔσΟ ϯάͰ͖Δ w ਌੾ͳυΩϡϝϯτ w 4IPQJGZ࿈ܞΛ࢝Ίͱͨ͠๛෋ͳϓϥάΠϯ͕ଘࡏ͢Δ

    w ϏϧυγεςϜ΋͋Δʢ(BUTCZ$MPVEʣ
  17. ੩తαΠτδΣωϨʔλʔ͡ΌͰ͖ͳͦ͞͏ͳͱ͜ΖΛͲ͏΍͔ͬͨ w ੩తαΠτδΣωϨʔλʔʢ44(ʣ͸جຊಈతͳ͜ͱ͕Ͱ͖ͳ͍ w ͓໰߹ͤϑΥʔϜˠ+4ͰຒΊࠐΊΔαʔϏεΛ࢖ͬͨ w ϩάΠϯ΍ϚΠϖʔδˠ4IPQJGZςʔϚʢϞϊϦγοΫͳߏ੒ʣΛซ༻ͨ͠

  18. ϔουϨεͰྑ͔ͬͨͱ͜Ζ w ച্΍ճ༡཰ͳͲɺ਺ࣈ͕࣮֬ʹ޲্ͨ͠ w &$ͷ࢓૊Έ͸4IPQJGZɺίϯςϯπ੍࡞͸$POUFOUGVM$.4ɺ$3.͸ )VC4QPUΛ࢖͏͜ͱͰελοϑͷӡ༻ෛՙ͕Լ͕ͬͨ w (SBQI2-ɺ࢖͍͜ͳΕΕ͹ศརʢ3&45Έ͍ͨʹཉ͍͠Ҏ্ΛಘΔ·Ͱαʔ όʔαΠυͱԿԟ෮΋͠ͳ͍͍ͯ͘ʣ

  19. ͭ·͖ͣ w 4IPQJGZ"1*ͷ࢓༷Ͱ঎඼਺Ҏ্ͩͱ৭ʑ޻਺͔͔Δ͔΋ɻ w αΠτߋ৽࣌ͷϏϧυ࣌ؒɻࡏݿ؅ཧ͕͔ͳΓγϏΞͩͱݫ͍͠ɻ w 4IPQJGZ"1*(BUTCZ+4ͷΞοϓσʔτϖʔε͕ૣ͍ͷͰɺৗʹษڧ͢Δ֮ޛ ͸ඞཁɻ

  20. ࠷ޙʹ w ࣗ෼Ͱ΋༡ͼͰϔουϨεαΠτΛ࡞ͬͯΈ͍ͨͧʂͱ͍͏ํ͸ฐࣾϒϩάͰ ৄࡉͳํ๏ॻ͍ͯ·͢ͷͰͥͻ͝ཡ͍ͩ͘͞ɻˠIUUQTXXXOPO TUBOEBSEXPSMEDPKQ w ࠾༻ͯ͠·͢ʂ࢓ࣄͰϔουϨείϚʔεαΠτ࡞ͬͯΈ͍ͨํͥͻʂ ˠIUUQTXXXOPOTUBOEBSEXPSMEDPKQ

  21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ