快適なフロントエンド開発を実現する話です。
Gatsby化したサイト: https://en.kobit.in （Lighthouse3.0アップデートでチェック項目が増えて点数が落ちてます）
esa.io + Gatsbyなブログ: https://mottox2.com
WordPressͷϑϩϯτΤϯυΛGatsbyʹϦϓϨʔεͨ͠2018.05.21 We Are JavaScripters! @19th - @mottox2շదͳWebϑϩϯτΤϯυ։ൃΛ࣮ݱ͢Δ
View Slide
@mottox2• React, Ruby on RailsΛத৺ʹWebαʔϏε։ൃ͍ͯ͠·͢• Pull RequestͷϨϏϡʔͱٕज़બఆͷ͓ख͍͍ͯ͠·͢• SPAΛΔ͜ͱ͕ଟ͍͚ͲࠓWordPress։ൃΛޮԽ͢Δ• ϒϩάͬͯ·͢(esa.io + Gatsby) => mottox2.comFreelance web engineer & designerYuki Takemoto
• GatsbyReactjsͷ੩తαΠτδΣωϨʔλʔ• ༷ʑͳσʔλιʔεΛݩʹߴͳ੩తαΠτ͕࡞ΕΔ͜ͱΛઆ໌ͨ͠• WordPressͷϑϩϯτΤϯυΛGatsbyʹஔ͖͍͑ͨͱ͍͏Λͨ͠രαΠτΛരͰ࡞ΕΔNetlify + Gatsbyhttps://speakerdeck.com/mottox2/create-fast-site-with-netlify-and-gatsbyલ࡞
ͭ͘Γ·ͨ͠• en.kobit.inɻ• WordPressʹ͍ͬͯͨͷΛϑϩϯτΤϯυΛGatsbyʹΓग़ͨ͠ɻ• WordPress REST APIΛͬͯBuild͢Δܗɻ• GitHubͷmasterʹpush͞Εͨ࣌ɺWordPressͰެ։هࣄ͕ฤू͞Εͨ࣌ʹBuild͕Δɻ• ը૾S3ʹอଘɺimgixʢը૾৴SaaSʣܦ༝Ͱ৴ɻ
• ߟ͑Δ͖͜ͱΛݮΒ͢બΛ͢Δ͜ͱa• ՌΞϐʔϧग़དྷΔΑ͏ʹ͓ͯ͘͜͠ͱaWordPressͱGatsbyͦΕ΄ͲॏཁͰ͋Γ·ͤΜɻࠓ͍͑ͨ͜ͱҎԼͷϙΠϯτΛ͑ΔͱշదͳWebϑϩϯτΤϯυ։ൃ͕ग़དྷΔՄೳੑ͕ߴ͍
• 1. දࣔ࠷దԽ• 2. ։ൃڥͰߟ͑Δ͜ͱ͕ଟ͍• 3. ։ൃ͕͘ΠϥΠϥ͢Δ• 4. WordPress੬ऑੑରԠMotivationWordPressͷView։ൃɻෆຬʹࢥ͍ͬͯͨ͜ͱɻ
• 1. දࣔ࠷దԽ• Plugin͕ೖΔͨͼʹґଘ͢ΔCSS, JS͕૿͖͑ͯͯπϥΠ• ΫϦςΟΧϧϨϯμϦϯάύεͷ࠷దԽ͕͍͠aMotivation
• 2. ։ൃڥͰߟ͑Δ͜ͱ͕ଟ͍• ࢼߦࡨޡͷʹdocker-composeΛ͏։ൃڥΛ࡞ͬͯͨ• WordPressͱMySQLίϯςφཱ͕͕ͭPluginͷಉظ͕͍·͍ͪMotivation
• 3. ։ൃ͕ͯ͘ΠϥΠϥ͢Δ• ϑϩϯτΤϯυJSͰॻ͖͍ͨΤϯδχΞͱͯ͠PHPͰॻ͖ͨ͘ͳ͍• SCSS, BrowserSync, WebpackͳͲͰ͍͕ͯͨ͠Ϧϩʔυ͕͍• Α͔͘Βͳ͍ϔϧύʔϝιουΛ͏ඞཁ͕͋Δa• ຊ൪ڥͰ͔͠࠶ݱग़དྷͳ͍ݱ…Motivation
• 4. WordPress੬ऑੑରԠ• ίʔϙϨʔταΠτɾΦϯυϝσΟΞͳͲʹΑ͘ΘΕ͍ͯΔɻa• ར༻ऀ͕ଟ͍ͨΊ߈ܸ͞Ε͍͢ɻa• Λ͔͚ͨ͘ͳ͍ͣͳͷʹ͔͔Δɻa• όʔδϣϯΞοϓ࣌ʹϓϥάΠϯ͕ରԠ͍ͯ͠ͳ͔ͬͨΓaMotivation
WordPress͡Όͳ͍ͯ͑͘Δͣ• ʑηοτΞοϓ͕͘͠ͳ͍ͬͯ͘ɻa• όοΫΤϯυͷϑϨʔϜϫʔΫʹґଘ͢ΔϑϩϯτΤϯυελοΫͳͲɻa• ϑϩϯτΤϯυελοΫͰॻ͖͍ͨɻa• (αʔόʔαΠυͷݴޠͰॻ͖ͨ͘ͳ͍)aཁ͢Δʹ…։ൃ͕͠ΜͲ͍
Gatsbyͷಋೖ• Blazing-fastͳ੩తαΠτδΣωϨʔλʔ• Resource HintsʹΑΔઌಡΈɺSPAʹΑΔϖʔδભҠͷߴԽɺCode SplittingʹΑΔϑΝΠϧׂɺInline CSSͳͲ͕ඪ४ͰରԠɻ• ։ൃڥ1ίϚϯυͰཱͭ• ॻ͘ྔ͕ඇৗʹগͳ্͍ʹίʔυͷ༳Ε͕গͳ͍a• جຊతʹPluginܦ༝ͰDataSourceΛऔಘɺGraphQLͰViewͰ༻• ॻ͘ͷReactͷViewͱϖʔδͷಈతੜͷϩδοΫͷΈ• ੩తαΠτԽʹΑΔϝϯςφϯείετͷݮa• NetlifyAWS S3ɺGitHub PagesʹϗεςΟϯάग़དྷΔɻ• WordPress͕࿐ग़͠ͳ͍ͷͰ҆৺ɻ
• 1. දࣔ࠷దԽ• ViewࣗͰॻ͍ͯɺߴԽ͍͢͠ܗʹɻޙը૾͚ͩ࠷దԽ͢Εૣ͍ɻ• SPA͖ͷϑϨʔϜϫʔΫͳΒ2ϖʔδҎ߱ͷભҠര• 2. ։ൃڥͰߟ͑Δ͜ͱ͕ଟ͍• `npm run dev` Ͱ಄ͷ͍͍ਓ͕ߟ͑ͨ։ൃڥ͕͑ΔΑ͏ʹͳͬͨɻa• 3. ։ൃ͕͘ΠϥΠϥ͢Δ• όοΫΤϯυ͕ͨ͠ͷͰɺϑϩϯτΤϯυͷJSͷΈͰ։ൃग़དྷΔɻ• 4. WordPress੬ऑੑରԠ• ੩తαΠτʹ͢ΕରԠͷඞཁੑ͕ബΕΔɻaGatsbyͷಋೖͰղܾͨ͜͠ͱ=> ߟ͑Δ͜ͱ͕ݮͬͨ
GatsbyͷಋೖͰղܾͨ͜͠ͱීஈͷงғؾͰ։ൃग़དྷΔɻ
• ͳͥΔͷ͔ʁa• ٕͨͩज़తͳϦϓϨʔε͚ͩͩͱՌΛΞϐʔϧͣ͠Β͍a• ఆྔతʹஅͯ͠Β͏a• ίεύͷ͍͍ରԠʢ͜ͷ߹ը૾ʣΛͬͯࣈΛग़͓ͯ͘͠ɻaଞʹߴԽͷͨΊʹͬͨ͜ͱ
ଞʹߴԽͷͨΊʹͬͨ͜ͱ• 1. ը૾มSaaSͷ imgixΛಋೖ• ύϥϝʔλ͚ͭΔͱը૾ॖখͱ͔ϑΥʔϚοτͷมΛͬͯΒ͑Δɻa• background-imagequalityམͱ͢ɺChromeͷ࣌webpΛฦ͢ͳͲ• 2. ը૾ͷLazyload• εΫϩʔϧ͞ΕΔ·Ͱը૾ಡ·ͳ͍ͭɻlazysizes͕͓͢͢Ί• 3. Resource HintsͷରԠ• LighthouseͰࢦఠ͞ΕͨͷͰઃఆͨ͠ɻ• DNSղܾΛࣄલʹͬͯΒ͏ɻ
Ͱɺ͏ͪͲ͏͢Ε͍͍ͷʁ• ͦͦϑϩϯτΤϯυΛΓग़͢ඞཁ͕͋Δͷ͔ʁa• Γग़͍ͨ͠߹ʹͲ͏ͬͯΓग़͔͢ʁa• ੩తαΠτʹ͓͚ΔJSϑϨʔϜϫʔΫͷબج४
Ͱɺ͏ͪͲ͏͢Ε͍͍ͷʁ• ཧ༝͕ऑ͍ϦϓϨʔεΤϯδχΞͷࣗݾຬʹͳΔՄೳੑ͕͋Δɻa• ͦͷมԽ͕ࣗ͝ͱʹͳΔΑ͏ͳϝϦοτΛ࡞Δͱ͍͍Ͱ͢ɻa• ࠓճతʹେ͖ͳϝϦοτΛಘΒΕΔͱ͍͏͜ͱɻa• ߹ʹΑͬͯɺϞϊϦγοΫͳ··։ൃͨ͠ํ͕ૣ͍• Ͱ͔͍ΞϓϦέʔγϣϯ͍͠ɻ͍··֦େΛࢭΊΔྗΛɻa• ϝδϟʔͳϑϨʔϜϫʔΫͳΒಉ͡ʹऔΓΜͩਓ͕͍Δͣɻa• ίετͷ͍ΘΓͷબࢶͳ͍͔ʁ• RailsͷWebpackerɺLalavel MixͳͲͷwebpackϥούʔ• ͜ΕΒ͔ΒೖΔͱϞμϯJS։ൃͷงғؾΛαʔόʔαΠυͷਓͨͪʹ͑Δ͜ͱ͕ग़དྷΔɻͦͦϑϩϯτΤϯυΛΓग़͢ඞཁ͕͋Δͷ͔ʁa
Ͱɺ͏ͪͲ͏͢Ε͍͍ͷʁ• ΦϯυϝσΟΞ৽نαʔϏεͳͲখ͞ͳαʔϏεͳΒׂͱΓग़͍͢͠ɻ• Write͕΄ͱΜͲͳ͘ɺRead͕େͷΞϓϦέʔγϣϯɻ• େ͖ͳαʔϏεΛॻ͖͑Δͷେมɻa• ৫ͱͯ͠ޭମݧΛ࡞Γ͍͢نͷͷ͔Βணख͢Δɻa• SSR(Server Side Rendering)͕ཁ݅ʹೖΔ͜ͱ͕ଟ͍ɻ• ࣗ࡞ͨ͜͠ͱ͋Δ͚Ͳɺτϥϒϧʹૺ͍ͨ͘ͳ͍ͳΒϑϨʔϜϫʔΫʹ͓ͬͯ͘ͱ͍͍ͱࢥ͏ɻ• ੩తαΠτ͔nodejsͷαʔόʔΛ༻ҙ͢Δ͔ɻ• αΠτͷੑ࣭ʹΑΔɻߋ৽ස͕ߴ͘ͳ͚Ε੩తαΠτʹ͓ͯ͘͠ͱΑ͍ɻ• ੩తαΠτͩͱߟ͑Δ͜ͱ͕ݮΔͷͰָɻaΓग़͍ͨ͠߹ʹͲ͏ͬͯΓग़͔͢ʁa
Ͱɺ͏ͪͲ͏͢Ε͍͍ͷʁ• ੩తαΠτͰࣄΓΔ and React͕ड͚ೖΕΒΕΔ• GatsbyɻReactʹͳΕ͍ͯΔਓͰ͋Ε͓͢͢Ίɻ• ֶशίετগͳ͘ɺओ؍Ͱ͕͢୭͕ॻ͍ͯಉ͡ίʔυʹͳΓ·͢ɻ• কདྷతʹಈతαΠτʹ͢Δ͔ or React͕ड͚ೖΕΒΕͳ͍• NuxtɻVueɻجຊతʹApplication Framework͕ͩ੩తαΠτ࡞ΕΔɻ• ֶशίετଟগඞཁ͕ͩɺຊͰͷࣄྫɾใ͕ଟ͘ਐΊ͍͢ɻa• MarkdownΛ੩తαΠτԽ͍ͨ͠• VuePressɻVueͷMarkdownʹಛԽͨ͠੩తαΠτδΣωϨʔλʔɻ੩తαΠτʹ͓͚ΔJSϑϨʔϜϫʔΫͷબج४
շదͳ։ൃମݧΛࢦ͍͖ͯ͠·͠ΐ͏ޙɺิΛϒϩάͰॻ͔͘͠Εͳ͍ͷͰݟͯͶʂmottox2.com
• WordPressͷهࣄϖʔδ͕ϕʔεɻ• ݻఆϖʔδ͕PHPͰ࣮͞ΕՃ͞Ε͍ͯ͘ɻ• ίʔϙϨʔταΠτͰಉ͡ύλʔϯͷߏΛΑ͘ݟΔɻͲ͏͍͏ঢ়گͩͬͨͷ͔• WordPressΛ͍ͬͯΔͨΊʹɺଞͷϖʔδPHPʢWordPressʣͰ࣮͢Δඞཁ͕͋ͬͨɻ• ࣮WordPress Orientedʹͳ͍ͬͯΔ͕ɺϒϩάهࣄΛ1ίϯςϯπͱ͍͏ߟ͑ํΛ͢Δͱෆదͩͬͨɻࠃ൛ͷWordPress͕WordPressͷهࣄ + αʔϏεհͷPHPϖʔδͱ͍͏ߏͰւ֎൛ͦ͏ͳΔ͓ͦΕ͕͋ͬͨɻͳʹ͕Α͘ͳ͍ͷ͔ิ
mottox2
lemolatoon
kubotak
terukinakano
mkeeda
os1ma
dicoding
masahiro_nishimi
mpyw
ogijun2018
hirobe1999
mot_techtalk
zoetrope
smashingmag
rasmusluckow
jmmastey
ufuk
addyosmani
swwweet
jensimmons
jnunemaker
andyhume
keavy
nonsquared
sstephenson