WordPressのフロントエンドをGatsbyにリプレースした話 / wordpress-gatsby

快適なフロントエンド開発を実現する話です。

Gatsby化したサイト: https://en.kobit.in
（Lighthouse3.0アップデートでチェック項目が増えて点数が落ちてます）

esa.io + Gatsbyなブログ: https://mottox2.com

Transcript

1. WordPressͷϑϩϯτΤϯυΛ GatsbyʹϦϓϨʔεͨ͠࿩ 2018.05.21 We Are JavaScripters! @19th - @mottox2 շదͳWebϑϩϯτΤϯυ։ൃΛ࣮ݱ͢Δ
2. @mottox2 • React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • Pull RequestͷϨϏϡʔͱٕज़બఆͷ͓ख఻͍΋͍ͯ͠·͢ • SPAΛ΍Δ͜ͱ͕ଟ͍͚Ͳࠓ೔͸WordPress։ൃΛޮ཰Խ͢Δ࿩ • ϒϩά΍ͬͯ·͢(esa.io + Gatsby) => mottox2.com Freelance web engineer & designer Yuki Takemoto
3. • Gatsby͸Reactjs੡ͷ੩తαΠτδΣωϨʔλʔ • ༷ʑͳσʔλιʔεΛݩʹߴ଎ͳ੩తαΠτ͕࡞ΕΔ͜ͱΛઆ໌ͨ͠ • WordPressͷϑϩϯτΤϯυΛGatsbyʹஔ͖׵͍͑ͨͱ͍͏໺๬Λ࿩ͨ͠ ര଎αΠτΛര଎Ͱ࡞ΕΔNetlify + Gatsby https://speakerdeck.com/mottox2/create-fast-site-with-netlify-and-gatsby લ࡞
4. ͭ͘Γ·ͨ͠ • en.kobit.inɻ • WordPressʹ৐͍ͬͯͨ΋ͷΛϑϩϯτΤϯυΛGatsbyʹ੾Γग़ͨ͠ɻ • WordPress REST APIΛ࢖ͬͯBuild͢Δܗɻ • GitHubͷmasterʹpush͞Εͨ࣌ɺWordPressͰެ։هࣄ͕ฤू͞Εͨ࣌ʹBuild͕ ૸Δɻ • ը૾͸S3ʹอଘɺimgixʢը૾഑৴SaaSʣܦ༝Ͱ഑৴ɻ
5. • ߟ͑Δ΂͖͜ͱΛݮΒ͢બ୒Λ͢Δ͜ͱa • ੒Ռ͸Ξϐʔϧग़དྷΔΑ͏ʹ͓ͯ͘͜͠ͱa WordPressͱGatsby͸ͦΕ΄ͲॏཁͰ͸͋Γ·ͤΜɻ ࠓ೔఻͍͑ͨ͜ͱ ҎԼͷϙΠϯτΛ཈͑ΔͱշదͳWebϑϩϯτΤϯυ։ൃ͕ग़དྷΔՄೳੑ͕ߴ͍
6. • 1. දࣔ଎౓࠷దԽ໰୊ • 2. ։ൃ؀ڥͰߟ͑Δ͜ͱ͕ଟ͍ • 3. ։ൃ଎౓͕஗͘ΠϥΠϥ͢Δ • 4. WordPress੬ऑੑରԠ Motivation WordPressͷView։ൃɻෆຬʹࢥ͍ͬͯͨ͜ͱɻ
7. • 1. දࣔ଎౓࠷దԽ໰୊ • Plugin͕ೖΔͨͼʹґଘ͢ΔCSS, JS͕૿͖͑ͯͯπϥΠ • ΫϦςΟΧϧϨϯμϦϯάύεͷ࠷దԽ͕೉͍͠a Motivation
8. • 2. ։ൃ؀ڥͰߟ͑Δ͜ͱ͕ଟ͍ • ࢼߦࡨޡͷ຤ʹdocker-composeΛ࢖͏։ൃ؀ڥΛ࡞ͬͯͨ • WordPressͱMySQLίϯςφཱ͕͕ͭPluginͷಉظ͕͍·͍ͪ Motivation
9. • 3. ։ൃ଎౓͕஗ͯ͘ΠϥΠϥ͢Δ • ϑϩϯτΤϯυ͸JSͰॻ͖͍ͨΤϯδχΞͱͯ͠͸PHPͰॻ͖ͨ͘ͳ͍ • SCSS, BrowserSync, WebpackͳͲͰ޻෉͸͍͕ͯͨ͠Ϧϩʔυ͕஗͍ • Α͘෼͔Βͳ͍ϔϧύʔϝιουΛ࢖͏ඞཁ͕͋Δa • ຊ൪؀ڥͰ͔͠࠶ݱग़དྷͳ͍ݱ৅… Motivation
10. • 4. WordPress੬ऑੑରԠ • ίʔϙϨʔταΠτɾΦ΢ϯυϝσΟΞͳͲʹΑ͘࢖ΘΕ͍ͯΔɻa • ར༻ऀ͕ଟ͍ͨΊ߈ܸ͞Ε΍͍͢ɻa • ޻਺Λ͔͚ͨ͘ͳ͍͸ͣͳͷʹ͔͔Δɻa • όʔδϣϯΞοϓ࣌ʹϓϥάΠϯ͕ରԠ͍ͯ͠ͳ͔ͬͨΓa Motivation
11. WordPress͡Όͳͯ͘΋͍͑Δ͸ͣ • ೥ʑηοτΞοϓ͕೉͘͠ͳ͍ͬͯ͘ɻa • όοΫΤϯυͷϑϨʔϜϫʔΫʹґଘ͢ΔϑϩϯτΤϯυελοΫͳͲɻa • ϑϩϯτΤϯυελοΫͰॻ͖͍ͨɻa • (αʔόʔαΠυͷݴޠͰॻ͖ͨ͘ͳ͍)a ཁ͢Δʹ… ։ൃ͕͠ΜͲ͍
12. Gatsbyͷಋೖ • Blazing-fastͳ੩తαΠτδΣωϨʔλʔ • Resource HintsʹΑΔઌಡΈɺSPAʹΑΔϖʔδભҠͷߴ଎ԽɺCode Splitting ʹΑΔϑΝΠϧ෼ׂɺInline CSSͳͲ͕ඪ४ͰରԠɻ • ։ൃ؀ڥ΋1ίϚϯυͰཱͭ • ॻ͘ྔ͕ඇৗʹগͳ্͍ʹίʔυͷ༳Ε͕গͳ͍a • جຊతʹPluginܦ༝ͰDataSourceΛऔಘɺGraphQLͰViewͰ࢖༻ • ॻ͘ͷ͸ReactͷViewͱϖʔδͷಈతੜ੒ͷϩδοΫͷΈ • ੩తαΠτԽʹΑΔϝϯςφϯείετͷ࡟ݮa • Netlify΍AWS S3ɺGitHub PagesʹϗεςΟϯάग़དྷΔɻ • WordPress͕࿐ग़͠ͳ͍ͷͰ҆৺ɻ
13. • 1. දࣔ଎౓࠷దԽ໰୊ • View͸ࣗ෼Ͱॻ͍ͯɺߴ଎Խ͠΍͍͢ܗʹɻޙ͸ը૾͚ͩ࠷దԽ͢Ε͹ૣ͍ɻ • SPA෇͖ͷϑϨʔϜϫʔΫͳΒ2ϖʔδ໨Ҏ߱ͷભҠ΋ര଎ • 2. ։ൃ؀ڥͰߟ͑Δ͜ͱ͕ଟ͍ • `npm run dev` Ͱ಄ͷ͍͍ਓ͕ߟ͑ͨ։ൃ؀ڥ͕࢖͑ΔΑ͏ʹͳͬͨɻa • 3. ։ൃ଎౓͕஗͘ΠϥΠϥ͢Δ • όοΫΤϯυ͕෼཭ͨ͠ͷͰɺϑϩϯτΤϯυͷJSͷΈͰ։ൃग़དྷΔɻ • 4. WordPress੬ऑੑରԠ • ੩తαΠτʹ͢Ε͹ରԠͷඞཁੑ͕ബΕΔɻa GatsbyͷಋೖͰղܾͨ͜͠ͱ => ߟ͑Δ͜ͱ͕ݮͬͨ
14. GatsbyͷಋೖͰղܾͨ͜͠ͱ ීஈͷงғؾͰ։ൃग़དྷΔɻ
15. • ͳͥ΍Δͷ͔ʁa • ٕͨͩज़తͳϦϓϨʔε͚ͩͩͱ੒ՌΛΞϐʔϧͣ͠Β͍a • ఆྔతʹ൑அͯ͠΋Β͏a • ίεύͷ͍͍ରԠʢ͜ͷ৔߹͸ը૾ʣΛ΍ͬͯ਺ࣈΛग़͓ͯ͘͠ɻa ଞʹ΋ߴ଎ԽͷͨΊʹ΍ͬͨ͜ͱ
16. ଞʹ΋ߴ଎ԽͷͨΊʹ΍ͬͨ͜ͱ • 1. ը૾ม׵SaaSͷ imgixΛಋೖ • ύϥϝʔλ͚ͭΔͱը૾ॖখͱ͔ϑΥʔϚοτͷม׵Λ΍ͬͯ΋Β͑Δɻa • background-image͸qualityམͱ͢ɺChromeͷ࣌͸webpΛฦ͢ͳͲ • 2. ը૾ͷLazyload • εΫϩʔϧ͞ΕΔ·Ͱը૾ಡ·ͳ͍΍ͭɻlazysizes͕͓͢͢Ί • 3. Resource HintsͷରԠ • LighthouseͰࢦఠ͞ΕͨͷͰઃఆͨ͠ɻ • DNSղܾΛࣄલʹ΍ͬͯ΋Β͏ɻ
17. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • ͦ΋ͦ΋ϑϩϯτΤϯυΛ੾Γग़͢ඞཁ͕͋Δͷ͔ʁa • ੾Γग़͍ͨ͠৔߹ʹͲ͏΍ͬͯ੾Γग़͔͢ʁa • ੩తαΠτʹ͓͚ΔJS੡ϑϨʔϜϫʔΫͷબ୒ج४
18. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • ཧ༝͕ऑ͍ϦϓϨʔε͸ΤϯδχΞͷࣗݾຬ଍ʹͳΔՄೳੑ͕͋Δɻa • ͦͷมԽ͕ࣗ෼͝ͱʹͳΔΑ͏ͳϝϦοτΛ࡞Δͱ͍͍Ͱ͢ɻa • ࠓճ͸଎౓తʹେ͖ͳϝϦοτΛಘΒΕΔͱ͍͏͜ͱɻa • ৔߹ʹΑͬͯɺϞϊϦγοΫͳ··։ൃͨ͠ํ͕ૣ͍ • Ͱ͔͍ΞϓϦέʔγϣϯ͸೉͍͠ɻ΍͹͍··֦େΛࢭΊΔ౒ྗΛɻa • ϝδϟʔͳϑϨʔϜϫʔΫͳΒಉ͡໰୊ʹऔΓ૊Μͩਓ͕͍Δ͸ͣɻa • ίετͷ௿͍୅ΘΓͷબ୒ࢶ͸ͳ͍͔ʁ • RailsͷWebpackerɺLalavel MixͳͲͷwebpackϥούʔ • ͜ΕΒ͔ΒೖΔͱϞμϯJS։ൃͷงғؾΛαʔόʔαΠυͷਓͨͪʹ΋఻͑ Δ͜ͱ͕ग़དྷΔɻ ͦ΋ͦ΋ϑϩϯτΤϯυΛ੾Γग़͢ඞཁ͕͋Δͷ͔ʁa
19. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • Φ΢ϯυϝσΟΞ΍৽نαʔϏεͳͲখ͞ͳαʔϏεͳΒׂͱ੾Γग़͠΍͍͢ɻ • Write͕΄ͱΜͲͳ͘ɺRead͕େ൒ͷΞϓϦέʔγϣϯɻ • େ͖ͳαʔϏεΛॻ͖׵͑Δͷ͸େมɻa • ૊৫ͱͯ͠੒ޭମݧΛ࡞Γ΍͍͢ن໛ͷ΋ͷ͔Βணख͢Δɻa • SSR(Server Side Rendering)͕ཁ݅ʹೖΔ͜ͱ͕ଟ͍ɻ • ࣗ࡞ͨ͜͠ͱ΋͋Δ͚Ͳɺτϥϒϧʹૺ͍ͨ͘ͳ͍ͳΒϑϨʔϜϫʔΫʹ৐ͬ ͓ͯ͘ͱ͍͍ͱࢥ͏ɻ • ੩తαΠτ͔nodejsͷαʔόʔΛ༻ҙ͢Δ͔ɻ • αΠτͷੑ࣭ʹΑΔɻߋ৽ස౓͕ߴ͘ͳ͚Ε͹੩తαΠτʹ͓ͯ͘͠ͱΑ͍ɻ • ੩తαΠτͩͱߟ͑Δ͜ͱ͕ݮΔͷͰָɻa ੾Γग़͍ͨ͠৔߹ʹͲ͏΍ͬͯ੾Γग़͔͢ʁa
20. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • ੩తαΠτͰࣄ଍ΓΔ and React͕ड͚ೖΕΒΕΔ • GatsbyɻReactʹͳΕ͍ͯΔਓͰ͋Ε͹͓͢͢Ίɻ • ֶशίετগͳ͘ɺओ؍Ͱ͕͢୭͕ॻ͍ͯ΋ಉ͡ίʔυʹͳΓ·͢ɻ • কདྷతʹಈతαΠτʹ͢Δ͔΋ or React͕ड͚ೖΕΒΕͳ͍ • NuxtɻVue੡ɻجຊతʹApplication Framework͕ͩ੩తαΠτ΋࡞ΕΔɻ • ֶशίετ͸ଟগඞཁ͕ͩɺ೔ຊͰͷࣄྫɾ৘ใ͕ଟ͘ਐΊ΍͍͢ɻa • MarkdownΛ੩తαΠτԽ͍ͨ͠ • VuePressɻVue੡ͷMarkdownʹಛԽͨ͠੩తαΠτδΣωϨʔλʔɻ ੩తαΠτʹ͓͚ΔJS੡ϑϨʔϜϫʔΫͷબ୒ج४
21. շదͳ։ൃମݧΛ໨ࢦ͍͖ͯ͠·͠ΐ͏ ޙ೔ɺิ଍ΛϒϩάͰॻ͔͘΋͠Εͳ͍ͷͰݟͯͶʂ mottox2.com
22. • WordPressͷهࣄϖʔδ͕ϕʔεɻ • ݻఆϖʔδ͕PHPͰ࣮૷͞Ε௥Ճ͞Ε͍ͯ͘ɻ • ίʔϙϨʔταΠτͰಉ͡ύλʔϯͷߏ੒ΛΑ͘ݟΔɻ Ͳ͏͍͏ঢ়گͩͬͨͷ͔ • WordPressΛ࢖͍ͬͯΔͨΊʹɺଞͷϖʔδ΋PHPʢWordPressʣͰ࣮૷͢Δඞཁ͕ ͋ͬͨɻ • ࣮૷͸WordPress Orientedʹͳ͍ͬͯΔ͕ɺϒϩάهࣄΛ1ίϯςϯπͱ͍͏ߟ͑ํ Λ͢Δͱෆదͩͬͨɻ ࠃ಺൛ͷWordPress͕WordPressͷهࣄ + αʔϏε঺հͷPHPϖʔδͱ͍͏ߏ੒Ͱւ ֎൛΋ͦ͏ͳΔ͓ͦΕ͕͋ͬͨɻ ͳʹ͕Α͘ͳ͍ͷ͔ ิ଍