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

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

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

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

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

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

mottox2

May 21, 2018
Tweet

More Decks by mottox2

Other Decks in Programming

Transcript

  1. @mottox2 • React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢ • Pull RequestͷϨϏϡʔͱٕज़બఆͷ͓ख఻͍΋͍ͯ͠·͢ •

    SPAΛ΍Δ͜ͱ͕ଟ͍͚Ͳࠓ೔͸WordPress։ൃΛޮ཰Խ͢Δ࿩ • ϒϩά΍ͬͯ·͢(esa.io + Gatsby) => mottox2.com Freelance web engineer & designer Yuki Takemoto
  2. ͭ͘Γ·ͨ͠ • en.kobit.inɻ • WordPressʹ৐͍ͬͯͨ΋ͷΛϑϩϯτΤϯυΛGatsbyʹ੾Γग़ͨ͠ɻ • WordPress REST APIΛ࢖ͬͯBuild͢Δܗɻ •

    GitHubͷmasterʹpush͞Εͨ࣌ɺWordPressͰެ։هࣄ͕ฤू͞Εͨ࣌ʹBuild͕ ૸Δɻ • ը૾͸S3ʹอଘɺimgixʢը૾഑৴SaaSʣܦ༝Ͱ഑৴ɻ
  3. • 1. දࣔ଎౓࠷దԽ໰୊ • 2. ։ൃ؀ڥͰߟ͑Δ͜ͱ͕ଟ͍ • 3. ։ൃ଎౓͕஗͘ΠϥΠϥ͢Δ •

    4. WordPress੬ऑੑରԠ Motivation WordPressͷView։ൃɻෆຬʹࢥ͍ͬͯͨ͜ͱɻ
  4. 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͕࿐ग़͠ͳ͍ͷͰ҆৺ɻ
  5. • 1. දࣔ଎౓࠷దԽ໰୊ • View͸ࣗ෼Ͱॻ͍ͯɺߴ଎Խ͠΍͍͢ܗʹɻޙ͸ը૾͚ͩ࠷దԽ͢Ε͹ૣ͍ɻ • SPA෇͖ͷϑϨʔϜϫʔΫͳΒ2ϖʔδ໨Ҏ߱ͷભҠ΋ര଎ • 2. ։ൃ؀ڥͰߟ͑Δ͜ͱ͕ଟ͍

    • `npm run dev` Ͱ಄ͷ͍͍ਓ͕ߟ͑ͨ։ൃ؀ڥ͕࢖͑ΔΑ͏ʹͳͬͨɻa • 3. ։ൃ଎౓͕஗͘ΠϥΠϥ͢Δ • όοΫΤϯυ͕෼཭ͨ͠ͷͰɺϑϩϯτΤϯυͷJSͷΈͰ։ൃग़དྷΔɻ • 4. WordPress੬ऑੑରԠ • ੩తαΠτʹ͢Ε͹ରԠͷඞཁੑ͕ബΕΔɻa GatsbyͷಋೖͰղܾͨ͜͠ͱ => ߟ͑Δ͜ͱ͕ݮͬͨ
  6. ଞʹ΋ߴ଎ԽͷͨΊʹ΍ͬͨ͜ͱ • 1. ը૾ม׵SaaSͷ imgixΛಋೖ • ύϥϝʔλ͚ͭΔͱը૾ॖখͱ͔ϑΥʔϚοτͷม׵Λ΍ͬͯ΋Β͑Δɻa • background-image͸qualityམͱ͢ɺChromeͷ࣌͸webpΛฦ͢ͳͲ •

    2. ը૾ͷLazyload • εΫϩʔϧ͞ΕΔ·Ͱը૾ಡ·ͳ͍΍ͭɻlazysizes͕͓͢͢Ί • 3. Resource HintsͷରԠ • LighthouseͰࢦఠ͞ΕͨͷͰઃఆͨ͠ɻ • DNSղܾΛࣄલʹ΍ͬͯ΋Β͏ɻ
  7. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • ཧ༝͕ऑ͍ϦϓϨʔε͸ΤϯδχΞͷࣗݾຬ଍ʹͳΔՄೳੑ͕͋Δɻa • ͦͷมԽ͕ࣗ෼͝ͱʹͳΔΑ͏ͳϝϦοτΛ࡞Δͱ͍͍Ͱ͢ɻa • ࠓճ͸଎౓తʹେ͖ͳϝϦοτΛಘΒΕΔͱ͍͏͜ͱɻa • ৔߹ʹΑͬͯɺϞϊϦγοΫͳ··։ൃͨ͠ํ͕ૣ͍ •

    Ͱ͔͍ΞϓϦέʔγϣϯ͸೉͍͠ɻ΍͹͍··֦େΛࢭΊΔ౒ྗΛɻa • ϝδϟʔͳϑϨʔϜϫʔΫͳΒಉ͡໰୊ʹऔΓ૊Μͩਓ͕͍Δ͸ͣɻa • ίετͷ௿͍୅ΘΓͷબ୒ࢶ͸ͳ͍͔ʁ • RailsͷWebpackerɺLalavel MixͳͲͷwebpackϥούʔ • ͜ΕΒ͔ΒೖΔͱϞμϯJS։ൃͷงғؾΛαʔόʔαΠυͷਓͨͪʹ΋఻͑ Δ͜ͱ͕ग़དྷΔɻ ͦ΋ͦ΋ϑϩϯτΤϯυΛ੾Γग़͢ඞཁ͕͋Δͷ͔ʁa
  8. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • Φ΢ϯυϝσΟΞ΍৽نαʔϏεͳͲখ͞ͳαʔϏεͳΒׂͱ੾Γग़͠΍͍͢ɻ • Write͕΄ͱΜͲͳ͘ɺRead͕େ൒ͷΞϓϦέʔγϣϯɻ • େ͖ͳαʔϏεΛॻ͖׵͑Δͷ͸େมɻa • ૊৫ͱͯ͠੒ޭମݧΛ࡞Γ΍͍͢ن໛ͷ΋ͷ͔Βணख͢Δɻa •

    SSR(Server Side Rendering)͕ཁ݅ʹೖΔ͜ͱ͕ଟ͍ɻ • ࣗ࡞ͨ͜͠ͱ΋͋Δ͚Ͳɺτϥϒϧʹૺ͍ͨ͘ͳ͍ͳΒϑϨʔϜϫʔΫʹ৐ͬ ͓ͯ͘ͱ͍͍ͱࢥ͏ɻ • ੩తαΠτ͔nodejsͷαʔόʔΛ༻ҙ͢Δ͔ɻ • αΠτͷੑ࣭ʹΑΔɻߋ৽ස౓͕ߴ͘ͳ͚Ε͹੩తαΠτʹ͓ͯ͘͠ͱΑ͍ɻ • ੩తαΠτͩͱߟ͑Δ͜ͱ͕ݮΔͷͰָɻa ੾Γग़͍ͨ͠৔߹ʹͲ͏΍ͬͯ੾Γग़͔͢ʁa
  9. Ͱɺ͏ͪ͸Ͳ͏͢Ε͹͍͍ͷʁ • ੩తαΠτͰࣄ଍ΓΔ and React͕ड͚ೖΕΒΕΔ • GatsbyɻReactʹͳΕ͍ͯΔਓͰ͋Ε͹͓͢͢Ίɻ • ֶशίετগͳ͘ɺओ؍Ͱ͕͢୭͕ॻ͍ͯ΋ಉ͡ίʔυʹͳΓ·͢ɻ •

    কདྷతʹಈతαΠτʹ͢Δ͔΋ or React͕ड͚ೖΕΒΕͳ͍ • NuxtɻVue੡ɻجຊతʹApplication Framework͕ͩ੩తαΠτ΋࡞ΕΔɻ • ֶशίετ͸ଟগඞཁ͕ͩɺ೔ຊͰͷࣄྫɾ৘ใ͕ଟ͘ਐΊ΍͍͢ɻa • MarkdownΛ੩తαΠτԽ͍ͨ͠ • VuePressɻVue੡ͷMarkdownʹಛԽͨ͠੩తαΠτδΣωϨʔλʔɻ ੩తαΠτʹ͓͚ΔJS੡ϑϨʔϜϫʔΫͷબ୒ج४
  10. • WordPressͷهࣄϖʔδ͕ϕʔεɻ • ݻఆϖʔδ͕PHPͰ࣮૷͞Ε௥Ճ͞Ε͍ͯ͘ɻ • ίʔϙϨʔταΠτͰಉ͡ύλʔϯͷߏ੒ΛΑ͘ݟΔɻ Ͳ͏͍͏ঢ়گͩͬͨͷ͔ • WordPressΛ࢖͍ͬͯΔͨΊʹɺଞͷϖʔδ΋PHPʢWordPressʣͰ࣮૷͢Δඞཁ͕ ͋ͬͨɻ

    • ࣮૷͸WordPress Orientedʹͳ͍ͬͯΔ͕ɺϒϩάهࣄΛ1ίϯςϯπͱ͍͏ߟ͑ํ Λ͢Δͱෆదͩͬͨɻ ࠃ಺൛ͷWordPress͕WordPressͷهࣄ + αʔϏε঺հͷPHPϖʔδͱ͍͏ߏ੒Ͱւ ֎൛΋ͦ͏ͳΔ͓ͦΕ͕͋ͬͨɻ ͳʹ͕Α͘ͳ͍ͷ͔ ิ଍