J A M s t a c k ͷ ߏ ཁ ૉ • JavaScript HTTP ϦΫΤετ/ϨεϙϯεͷΑ͏ͳμΠφϛοΫͳॲཧɺ શʹΫϥΠΞϯτ্Ͱ࣮ߦ͞ΕΔΑ͏ʹ͢ΔɻʢϑϨʔϜϫʔΫόχϥͳͲΘͳ͍ʣ • API શͯͷαʔόαΠυॲཧɺDBॲཧ HTTPS Ͱ ΞΫηεͰ͖Δ࠶ར༻Մೳͳ Web API ʹ͢ Δɻ ΧελϜϝΠυͰɺαʔυύʔςΟʔͰΘͳ͍ɻ • Markup ςϯϓϨʔτ༻ͷϚʔΫΞοϓ = HTML ɺαΠτδΣωϨʔλ(= SSG) Ϗϧυπʔϧ Ͱɺ σϓϩΠ࣌ʹࣄલϏϧυ͠ੜ͍ͯ͠Δ ඞཁ(should) ͕͋Δɻ
J / A / M Ͱ ߏ ͞ Ε ͨ s t a c k - > J A M s t a c k • JavaScript HTTP ϦΫΤετ/ϨεϙϯεͷΑ͏ͳμΠφϛοΫͳॲཧɺ શʹΫϥΠΞϯτ্Ͱ࣮ߦ͞ΕΔΑ͏ʹ͢ΔɻʢϑϨʔϜϫʔΫόχϥͳͲΘͳ͍ʣ • API શͯͷαʔόαΠυॲཧɺDBॲཧ HTTPS Ͱ ΞΫηεͰ͖Δ࠶ར༻Մೳͳ Web API ʹ͢Δɻ ΧελϜϝΠυͰɺαʔυύʔςΟʔͰΘͳ͍ɻ • Markup ςϯϓϨʔτ༻ͷϚʔΫΞοϓ = HTML ɺαΠτδΣωϨʔλ(= SSG) Ϗϧυπʔϧ Ͱɺ σϓϩΠ࣌ʹࣄલϏϧυ͠ੜ͍ͯ͠Δ ඞཁ(should) ͕͋Δɻ
J A M s t a c k ʮ Ͱ ͳ ͍ ʯ έ ʔε • WordPress / DrupalͳͲͷαʔόʔαΠυͰॲཧ͞ΕΔCMS • Ruby / Node.jsͳͲͷόοΫΤϯυٕज़ʹґଘͨ͠webΞϓϦ • Isomorphic(Universal)ͳϨϯμϦϯάΛ༻͢ΔSPA -> ΫϥΠΞϯτͱαʔόʔͰಉ͡ίʔυΛ࣮ߦ͢ΔSPA https://qiita.com/kyrieleison/items/4ac5bcc331aee6394440
J A M s t a c k ࣄ લ ੜ ͠ ͨ H T M L Λ ৴ ͢ Δ • WPςʔϚ͕Markup / MySQL DB͕APIʹ૬ • MarkupʹAPIͷσʔλΛϚʔδͯ͠HTMLΛੜ͠ɺެ։ • ੜࡁΈHTMLʢ+ը૾ͳͲʣͷΈΛϢʔβʔʹ৴ • Ѩ෦ͷϗʔϜϖʔδͷΑ͏ͳ / Մ༻ੑΛࢦ͢
J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ • ૣ͍ɿ ੩తͳHTMLͰ৴͢ΔͷͰ”αʔόʔ to ϒϥβ”͕ߴʹ • ڧ͍ɿαʔόʔͰHTMLΛ࡞Βͳ͍ͷͰɺෛՙ͕খ͘͞ͳΔ • ݻ͍ɿDB / ॲཧܥͷΞΫηεܦ࿏ͷҰຊԽͰϦεΫΛہॴԽ • ָɹɿॲཧ / DBͱϑϩϯτͷʹΑΔείʔϓͷ໌֬Խ
Wo rd P re s s Λ A P I α ʔ όʔ Խ ͢ Δ : S E O ฤ • WordPressଆͰίϯςϯπ͕ग़ྗ͞ΕΔ • ͦͷ··ͩͱॏෳίϯςϯπʹͳΔ͓ͦΕ͕͋Δ • ϩάΠϯ͍ͯ͠ͳ͍࣌ɺϑϩϯτͰ͏ύεҎ֎301ϦμΠϨΫτ • canonicalnoindexͷઃఆ͓ͯ͘͠ͱϕλʔ
Wo rd P re s s Λ A P I α ʔ όʔ Խ ͢ Δ : α ʔ όʔ ཧ ฤ • ͦͦWordPressͷϝϯςφϯεΛͳ͍ͨ͘͠ • ී௨ͷWordPressͷ··ͩͱ֤छߋ৽࡞ۀΔ • ࣗͰϝϯς͠ͳͯ͘ࡁΉϑϧϚωʔδυܥαʔόʔΛݕ౼͢Δ • ཧ͠ͳ͍ɺΧελϚΠζͷࣗ༝͕མͪΔՄೳੑ͋Δ
J a v a S c r i p t Ͱ ϑ ϩ ϯ τ Τ ϯ υ Λ ࣮ ͢ Δ • ݱ࣌ͰReact·ͨVue.js͕Α͘༻͍ΒΕΔ • ReactͰ͋ΕNext.js / Gatsby.jsΛͬͯSSG͢Δ • Vue.jsͰ͋ΕNuxt.js / GridsomeΛͬͯSSG͢Δ • ਖ਼ͳΜͰ͍͍ • ॻ͖ํ / API / ۙͳཔΕΔਓͳͲͰબఆ͢ΕΑ͍
•R e a c t Ͱ M a r k u p ࣮ •G a t s b y ͕ A P I ͔ Β σ ʔ λ औ Γ ࠐ Έ •G r a p h Q L Ͱ σ ʔ λ Λ M a r k u p ʹ Π ϯ ϙ ʔ τ •ੜ ͞ Ε ͨ H T M L Λ α ʔόʔ ʹ Ξ οϓ ϩ ʔ υ
J A M s t a c k D e p l o y m e n t s https://wordpress.org/plugins/wp-jamstack-deployments/ •We b h o o k Λ ࢦ ఆ •ه ࣄ ߋ ৽ ͳ Ͳ Ͱ τ Ϧ Ψ ʔ •W P ଆ ͷ ߋ ৽ ࡞ ۀ Ͱ J A M s t a c k ͷ Ϗ ϧ υ ࣮ ߦ •ϑ ο Ϋ Λ ͬͯ Χ ε λ ϚΠ ζ Մ ೳ
J A M s t a c k ͳ α Π τ ʹ ͢ Δ ϝ Ϧ ο τ • ૣ͍ɿ ੩తͳHTMLͰ৴͢ΔͷͰαʔόʔ -> ϒϥβ͕ߴʹ • ڧ͍ɿαʔόʔͰHTMLΛ࡞Βͳ͍ͷͰɺෛՙ͕খ͘͞ͳΔ • ݻ͍ɿDB / ॲཧܥͷΞΫηεܦ࿏ͷҰຊԽͰϦεΫΛہॴԽ • ָɹɿॲཧ / DBͱϑϩϯτͷʹΑΔείʔϓͷ໌֬Խ
J A M s t a c k ͳ α Π τ ʹ ͢ Δ σϝ Ϧ ο τ • WordPressςʔϚ͑ͳ͍ • ΟδΣοτɾϝχϡʔͳͲͦͷ··Ͱ͑ͳ͍ • React / VueͳͲΛͬͯࣗલͰUIΛߏங͢Δඞཁ͕͋Δ • ֤ϖʔδͷϧʔςΟϯάJavaScript + WP APIͰؤுΔ • ఆੴϋϯυϒοΫ͕·ͩଘࡏͤͣɺࢼߦࡨޡ͕ଟΊ
M a t t t o l d u s i t i n 2 0 1 6 h t t p s : / / w w w. s l i d e s h a re . n e t / p h o t o m a t t / s t a t e - o f - t h e - w o rd - 2 0 1 6 / 4 4
J A M s t a c k ͕ ͍ͯ ͍ ΔͰ ͋ Ζ ͏ Ҋ ݅ ͷ Ұ ྫ • ύϑΥʔϚϯεՄ༻ੑΛٻΊΒΕΔҊ݅ • কདྷతʹผCMSʹҠߦ͢Δ͔͠Εͳ͍Ҋ݅ • JSͰΠϯλϥΫςΟϒͳαΠτΛ࡞Γ͍ͨ • JSͰͷαΠτߏங / ӡ༻ϊϋͷํ͕ଟ͍νʔϜͰ͋Δ • WordPressͷϝϯςφϯεΛͨ͘͠ͳ͍