FRONTEND CONFERENCE 2017のハンズオン用資料です。 教科書はこちら https://github.com/fand/react-hands-on
BNBHJUBLBZPTJ3FBDUͰֶͿ͍·Ͳ͖ͷ8FC։ൃ3FBDUͰֶͿ͍·Ͳ͖ͷ8FC։ൃBNBHJUBLBZPTJBNBHJUBLBZPTJ
View Slide
ࢿྉ• ڭՊॻ https://github.com/fand/react-hands-on• ߨٛεϥΠυ https://speakerdeck.com/fand/reactdexue-bu-imadokifalsewebkai-fa
ಥવͰ͕͓͢ئ͍͕͋Γ·͢
͍·͙͢HJUDMPOF͍ͯͩ͘͠͞ʂ
·ͣNode.jsΠϯετʔϧ• https://nodejs.org/ja/ ͔Βμϯϩʔυ
ϨϙδτϦΛ git clone$ git clone https://github.com/fand/react-hands-on• ·ͨ zipͰμϯϩʔυ
$ cd react-hands-on$ npm installґଘϥΠϒϥϦΠϯετʔϧ
վΊ·ͯ͠amagiͰ͢
IUUQEFWFMPQFSIBUFOBTUBDPNFOUSZ1PEDBTUװגתׅ
͜ͷϋϯζΦϯͰΔ͜ͱ• ReactͰWebαΠτΛ࡞Δ• ReactͱɺͦͷपลͰى͍ͬͯ͜Δ ։ൃڥͷมԽʹֶ͍ͭͯͿ
ࠓ͔Β࡞ΔWebαΠτ
ڭՊॻ: https://github.com/fand/react-hands-on• Ճ/มߋ͢Δίʔυ͕εςοϓຖʹॻ͔Ε͍ͯΔ
diffͷݟํ
diffͷݟํʮςΫετʯΛʮςΩετʯʹมߋ
diffͷݟํϑΝΠϧඌʹʮZPʯΛՃ
ඪޠ: JS͕ Θ͔Βͳͯ͘ ؾʹ͠ͳ͍• ࠓReactΛֶͼ·͢ (JSΛֶͼ͍ͨΘ͚Ͱͳ͍)• ΨϯΨϯίϐϖ͠Α͏ʂʂʂ• ٧·ͬͨΒൣղΛར༻͠Α͏ ʂʂ
developdevelopϒϥϯνʹ͓खຊ͋Γ·͢master
developmasterHJUͷλά
developϒϥϯνͷ͍ํ• օ͞ΜmasterͰ࡞ۀ͠·͢• ʮͳΜ͔͓͔͍͠ʂಈ͔ͳ͍ʂʯͱ͔ ʮ·ͩॻ͍ͯΔ్தͳͷʹʙʂʯͱͳͬͨΒ git checkout step-n ͠·͠ΐ͏• ྫ) Step 2 Ͱ٧·ͬͨΒ git checkout step-2
ֻׁכׄת׃׳ֲ
Step 1: αʔόʔΛىಈ• $ npm run dev• http://localhost:3000/ ʹΞΫηε
ىಈޭʂ• pages/ ʹϑΝΠϧ͕͋Δ• Reactίϯϙʔωϯτ
͜ͷϨϙδτϦͷߏ• pages/ ʹJSϑΝΠϧ͕͋Δ• pages/index.js ΛݟͯΈΑ͏
index.jsͷΑ͏͢
index.jsͷΑ͏͢U3FBDUίϯϙʔωϯτ
index.jsͷΑ͏͢3FBDU&MFNFOUΛฦؔ͢ʹͳ͍ͬͯΔU
• ReactͰWebαΠτ࡞ΔͨΊͷϑϨʔϜϫʔΫ• ࣗಈͰ৭ʑͬͯ͘ΕΔ• Hot Module Reloading• Server-Side RenderingNext.js
pages/index.js Λฤूͯ͠ΈΑ͏• Ϧϩʔυ͠ͳͯ͘ө͞ΕΔͣ
Hot Module Reloading (HMR)• ϑΝΠϧΛฤूͨ͠Βɺฤूͨ͠෦͚ͩ Ϧϩʔυͯ͘͠ΕΔ• ຊདྷWebpackͷػೳ• Next.js͕উखʹWebpackىಈͯ͘͠ΕͯΔ
“Server-Side Rendering”ͱʁ
ී௨ͷJS• αʔόʔଆͰϨϯμϦϯά
ී௨ͷJS• αʔόʔଆͰϨϯμϦϯά• JSͰಈ͖Λ͚ͭΔ• αʔόʔଆͰϨϯμϦϯά
Single Page Application (SPA)• JSͰશ෦ඳը͢Δ
"SPAͷϝϦοτ"• HTMLϦΫΤετ͕ݮΔ• AjaxͰσʔλΛऔಘ͠ɺJSͰඳը͢Δ• ϖʔδભҠ࣌ɺϖʔδ͕ਅͬനʹͳΒͳ͍• શ෦JSͰॻ͚Δ• αʔόʔͷॲཧ͕୯७ʹͳΔ
#SPAͷ#• HTMLϑΝΠϧനࢴ• ࠷ॳʹਅͬനͳը໘͕දࣔ͞Εͯ͠·͏• SEOʹऑ͍
Server-Side Rendering• ReactͷϨϯμϦϯάΛαʔόʔଆͰߦͳ͏ʂ
։ൃऀπʔϧͰݟΔͱ• HTMLϑΝΠϧʹͪΌΜͱத͕͋Δ
Step 2: AboutϖʔδΛ࡞Δ• pages/about.js Λ࡞• ΄΅ pages/index.js ͱಉ͡
pages/about.jsΛ࡞
http://localhost:3000/about Λ֬ೝ
Step 3: ڞ௨ίϯϙʔωϯτΛ࡞Δ• ϨΠΞτɺෳͷϖʔδͰ͏ύʔπΛ ίϯϙʔωϯτʹΓग़͢• component/ ϑΥϧμΛ࡞Γɺͦͷதʹ layout.js Λ࡞Δ• ͦͷޙɺ pages/ ͷϑΝΠϧʹ ίϯϙʔωϯτΛૠೖ͢Δ
components/layout.js
components/layout.jsIFBEཁૉ
components/layout.jsશϖʔδڞ௨ͷϔομʔ
components/layout.jsϖʔδͷதΛಡΈࠐΜͰ͍Δ
pages/index.jsϖʔδશମΛ-BZPVUͰғΉ
pages/about.jsJOEFYKTಉ༷
ϒϥβͰ֬ೝ͠Α͏
Step 4: CSSΛಋೖ͢Δ• ReactͰCSSΛ͏ํ๏• ී௨ʹॻ͍ͯ link λάͰಡΈࠐΉ• CSS in JS• ࠓճ CSS in JS ͯ͠Έ·͢
CSSͷ͍͠ॴ• ໊લۭ͕ؒάϩʔόϧ• ༏ઌ• ม͕ؔ͑ͳ͍
CSS։ൃͷਐԽ• Sass, LessͷϓϦϓϩηοα• PostCSS• CSS in JS
CSS in JS• ʮJSͰελΠϧΛఆٛͯ͠ ίϯϙʔωϯτͷstyleଐੑʹͭͬ͜͏ͥʯ ͱ͍͏ൃ• Next.jsͰσϑΥϧτͰ͑Δ• ͬͯΈΑ͏ʂ
components/layout.jsΛमਖ਼$44JO+4༻ϥΠϒϥϦΛϩʔυ
components/layout.jsΛमਖ਼CPEZཁૉͷ$44
ελΠϧΛఆٛͯ͠ཁૉʹ͢
⚡ελΠϧ͕ద༻͞Εͨ⚡
ͳΜͰίϨͰಈ͘ͷ……ʁ• next/css ֤ཁૉʹҰҙͳΫϥε໊Λੜ͠ɺ ͦͷΫϥεʹରͯ͠ελΠϧΛఆٛ͢Δ
Step 5: ϋϯόʔΨʔϘλϯΛՃ͢Δ• ֎෦ͷCSSϥΠϒϥϦΛಡΈࠐΜͰ ϘλϯΛදࣔͯ͠ΈΑ͏• ࠓճ jonsuh/hamburgers Λར༻͠·͢
components/hamburger.jsΛ࡞
components/layout.jsΛमਖ਼
components/layout.jsΛमਖ਼֎෦$44Λϩʔυ
දࣔޭ
Step 6: ϋϯόʔΨʔϘλϯΛಈ͔͢• ͜͜·ͰͷReactίϯϙʔωϯτ ঢ়ଶΛͨͳ͔ͬͨ• ϋϯόʔΨʔϘλϯʹঢ়ଶΛՃ͠ ಈ͔ͯ͠ΈΑ͏ʂ
Reactίϯϙʔωϯτͷछྨ• ঢ়ଶͷͳ͍ίϯϙʔωϯτ: ReactElement Λฦؔ͢• ঢ়ଶͷ͋Δίϯϙʔωϯτ: React.Component Λܧঝ͢ΔΫϥε• render() ϝιουͰ ReactElement Λฦ͢
ReactElement is Կ• JSXͰੜ͞ΕΔΦϒδΣΫτ͍ͭ͜ͷ͜ͱ
components/hamburger.jsΛमਖ਼
components/hamburger.jsΛमਖ਼ঢ়ଶΛఆٛ
components/hamburger.jsΛमਖ਼ঢ়ଶΛมߋ͢Δؔ
components/hamburger.jsΛमਖ਼ΫϦοΫͨ͠ΒUPHHMF ΛݺͿΑ͏ʹ
͏͍ͨ͝ʂ
Step 7: αΠυόʔΛՃ• TopϖʔδɺAboutϖʔδͷϦϯΫΛද͍ࣔͨ͠• components/sidebar.jsͰαΠυόʔΛ࡞͠ components/layout.jsʹૠೖ͢Δ
components/sidebar.js
OFYUMJOLΛར༻͠ϦϯΫΛ࡞
components/layout.jsΛमਖ਼4JEFCBSΛϩʔυ4JEFCBSΛૠೖ(লུ)… …
αΠυόʔ͕දࣔ͞Εͨ
Step 8: αΠυόʔΛಈ͔͢• HamburgerͰཧ͍ͯ͠Δঢ়ଶΛ Sidebarʹ͍͑ͨ• LayoutͰঢ়ଶΛཧ͠ HamburgerͱSidebarʹ͢Α͏ʹ͢Δ
ϘλϯΛԡͨ͠ͱ͖ͷྲྀΕ-BZPVU4JEFCBS)BNCVSHFSJT4JEFCBS"DUJWFGBMTF
-BZPVU4JEFCBS)BNCVSHFSΫϦοΫ͞ΕͨΑʙJT4JEFCBS"DUJWFGBMTF
-BZPVUJT4JEFCBS"DUJWFGBMTFJT4JEFCBS"DUJWFUSVFJT4JEFCBS"DUJWFUSVF4JEFCBS)BNCVSHFSঢ়ଶΛมߋ
-BZPVU4JEFCBS)BNCVSHFSJT4JEFCBS"DUJWFUSVFJT4JEFCBS"DUJWFUSVFঢ়ଶ͕ΘΔ
-BZPVU4JEFCBS)BNCVSHFSJT4JEFCBS"DUJWFUSVFJT4JEFCBS"DUJWFUSVFදࣔΛΓସ͑Δ
components/layout.jsΛमਖ਼U)BNCVSHFSʹ͋ͬͨঢ়ଶΛཧ͢Δॲཧ
)BNCVSHFS 4JEFCBSʹঢ়ଶΛ͢
components/hamburger.jsΛमਖ਼QSPQTͰঢ়ଶΛड͚औΔ͚ͩ
components/sidebar.jsΛमਖ਼
components/sidebar.jsΛमਖ਼QSPQTΛड͚औͬͯදࣔΛΓସ͑Δ
αΠυόʔಈ͍ͨʂ
·ͱΊ
ࠓֶΜͩ͜ͱ• React ΞϓϦέʔγϣϯͷ࡞Γํ• Single Page Application (SPA)• Server-Side Rendering (SSR)• Hot Module Reloading (HMR)• CSS in JS
͓͔ͭΕ͞·Ͱͨ͠ʂ
ؾܰʹ࣭͍ͯͩ͘͠͞w 5XJUUFSͰϝϯγϣϯͨ͠Γ IUUQTUXJUUFSDPNBNBHJUBLBZPTJw (JU)VCͰJTTVFཱͯͨΓ IUUQTHJUIVCDPNGBOESFBDUIBOETPOؾܰʹ࣭͍ͯͩ͘͠͞w 5XJUUFSͰϝϯγϣϯͨ͠Γ IUUQTUXJUUFSDPNBNBHJUBLBZPTJw (JU)VCͰJTTVFཱͯͨΓ IUUQTHJUIVCDPNGBOESFBDUIBOETPO
fand
nishiharatsubasa
bumptakayuki
minorun365
nagix
kazumax55
shotatsuge
oracle4engineer
bonotake
th0x0472
devops_vtj
yuhattor
ddemaree
afnizarnur
eileencodes
revolveconf
swwweet
pedronauck
jeffersonlam
kneath
quramy
sugarenia
roundedbygravity
lemiorhan