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

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

Transcript

1. 
   OPOTUBOEBSE
   XPSMEגࣜձࣾɹ$&0$50
   ߴ࡚݈࢘ 4IPQJGZͱ(BUTCZ+4Λ࢖ͬͨ
   ϔουϨείϚʔεೖ໳
2. ߴ࡚݈࢘ w ౦ژɺ੢Ԯۼͷ4IPQJGZʹಛԽͨ͠&$αΠτͷ ίϯαϧɺ੍࡞Λߦ͏OPOTUBOEBSE
   XPSME ג ͷ୅දʗ$50ɻ
   w "SU
   ˍ
   5FDI
   GPS
   3FUBJMΛϛογϣϯʹɺඒ͠͞ ͱςΫϊϩδʔͷཱ྆ͨ͠αΠτΛ࡞ΔͨΊʹਫ਼ ਐ͍ͯ͠Δɻ
   w ೥ɺઍ༿ݝੜ·Εɻ೥ɺࠃࡍجಜڭ େֶଔۀޙɺιϑτόϯΫʢגʣೖࣾɺ8FCߏ ஙͷ࢓ࣄʹैࣄͨ͠ޙɺ೥ʹಠཱɻ ೥ɺOPOTUBOEBSE
   XPSMEגࣜձࣾΛىۀɻೋࣇ ͷ෕ɻ෱Ԭ΁ͷҠॅܦݧऀɻ
   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"ʢ1SPHSFTTJWF
    8FC
    "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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ