Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactで学ぶ!いまどきのWeb開発
Search
Amagi
March 18, 2017
Technology
50
17k
Reactで学ぶ!いまどきのWeb開発
FRONTEND CONFERENCE 2017のハンズオン用資料です。
教科書はこちら
https://github.com/fand/react-hands-on
Amagi
March 18, 2017
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
93
How to hack VS Code: evil ways (Japanese)
fand
5
3.6k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
520
GLSL PostEffect in TouchDesigner
fand
2
2k
VEDA GLSL Livecoding workshop
fand
2
5.2k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.8k
Real World GLSL
fand
0
270
APIs for VJ-ing
fand
1
6.9k
Other Decks in Technology
See All in Technology
GitHub Coding Agent 概要
kkamegawa
1
1.7k
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
Cursor Meetup Tokyo
iamshunta
2
350
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
libsyncrpcってなに?
uhyo
0
140
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
Devin&Cursor、それぞれの「本質」から導く最適ユースケース戦略
empitsu
8
2.4k
S3 Tables を図解でやさしくおさらい~基本から QuickSight 連携まで/s3-tables-illustrated-basics-quicksight
emiki
1
330
継続戦闘能⼒
sansantech
PRO
0
220
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Typedesign – Prime Four
hannesfritz
41
2.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
85
4.7k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Done Done
chrislema
184
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
BNBHJUBLBZPTJ 3FBDUͰֶͿ ͍·Ͳ͖ͷ8FC։ൃ 3FBDUͰֶͿ ͍·Ͳ͖ͷ8FC։ൃ BNBHJUBLBZPTJ BNBHJUBLBZPTJ
ࢿྉ • ڭՊॻ 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Ͱ͢
IUUQEFWFMPQFSIBUFOBTUBDPNFOUSZ 1PEDBTUװגתׅ
͜ͷϋϯζΦϯͰΔ͜ͱ • ReactͰWebαΠτΛ࡞Δ • ReactͱɺͦͷपลͰى͍ͬͯ͜Δ ։ൃڥͷมԽʹֶ͍ͭͯͿ
ࠓ͔Β࡞ΔWebαΠτ
ڭՊॻ: https://github.com/fand/react-hands-on • Ճ/มߋ͢Δίʔυ͕εςοϓຖʹॻ͔Ε͍ͯΔ
diffͷݟํ
diffͷݟํ ʮςΫετʯΛ ʮςΩετʯʹมߋ
diffͷݟํ ϑΝΠϧඌʹ ʮZPʯΛՃ
ඪޠ: JS͕ Θ͔Βͳͯ͘ ؾʹ͠ͳ͍ • ࠓReactΛֶͼ·͢ (JSΛֶͼ͍ͨΘ͚Ͱͳ͍) • ΨϯΨϯίϐϖ͠Α͏ʂʂʂ •
٧·ͬͨΒൣղΛར༻͠Α͏ ʂʂ
develop developϒϥϯνʹ͓खຊ͋Γ·͢ master
develop master HJUͷλά
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ͷΑ͏͢ U 3FBDUίϯϙʔωϯτ
index.jsͷΑ͏͢ 3FBDU&MFNFOUΛฦ͢ ؔʹͳ͍ͬͯΔ U
• ReactͰWebαΠτ࡞ΔͨΊͷϑϨʔϜϫʔΫ • ࣗಈͰ৭ʑͬͯ͘ΕΔ • Hot Module Reloading • Server-Side
Rendering Next.js
pages/index.js Λฤूͯ͠ΈΑ͏ • Ϧϩʔυ͠ͳͯ͘ө͞ΕΔͣ
Hot Module Reloading (HMR) • ϑΝΠϧΛฤूͨ͠Βɺฤूͨ͠෦͚ͩ Ϧϩʔυͯ͘͠ΕΔ • ຊདྷWebpackͷػೳ •
Next.js͕উखʹWebpackىಈͯ͘͠ΕͯΔ
“Server-Side Rendering” ͱʁ
ී௨ͷJS • αʔόʔଆͰϨϯμϦϯά
ී௨ͷJS • αʔόʔଆͰϨϯμϦϯά • JSͰಈ͖Λ͚ͭΔ • αʔόʔଆͰϨϯμϦϯά
Single Page Application (SPA) • JSͰશ෦ඳը͢Δ
Single Page Application (SPA) • JSͰશ෦ඳը͢Δ
"SPAͷϝϦοτ" • HTMLϦΫΤετ͕ݮΔ • AjaxͰσʔλΛऔಘ͠ɺJSͰඳը͢Δ • ϖʔδભҠ࣌ɺϖʔδ͕ਅͬനʹͳΒͳ͍ • શ෦JSͰॻ͚Δ •
αʔόʔͷॲཧ͕୯७ʹͳΔ
#SPAͷ# • HTMLϑΝΠϧനࢴ • ࠷ॳʹਅͬനͳը໘͕දࣔ͞Εͯ͠·͏ • SEOʹऑ͍
Server-Side Rendering • ReactͷϨϯμϦϯάΛαʔόʔଆͰߦͳ͏ʂ
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.js IFBEཁૉ
components/layout.js શϖʔδڞ௨ͷ ϔομʔ
components/layout.js ϖʔδͷதΛ ಡΈࠐΜͰ͍Δ
pages/index.js ϖʔδશମΛ -BZPVUͰғΉ
pages/about.js JOEFYKTಉ༷
ϒϥβͰ֬ೝ͠Α͏
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/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ʹ͢Α͏ʹ͢Δ
ϘλϯΛԡͨ͠ͱ͖ͷྲྀΕ -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFGBMTF
-BZPVU 4JEFCBS )BNCVSHFS ΫϦοΫ͞ΕͨΑʙ JT4JEFCBS"DUJWFGBMTF
-BZPVU JT4JEFCBS"DUJWFGBMTF JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF 4JEFCBS )BNCVSHFS ঢ়ଶΛมߋ
-BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF ঢ়ଶ͕ΘΔ
-BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF දࣔΛΓସ͑Δ
components/layout.jsΛमਖ਼
components/layout.jsΛमਖ਼ U )BNCVSHFSʹ͋ͬͨ ঢ়ଶΛཧ͢Δॲཧ
)BNCVSHFS 4JEFCBSʹ ঢ়ଶΛ͢
components/hamburger.jsΛमਖ਼
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Ͱϝϯγϣϯͨ͠Γ IUUQTUXJUUFSDPNBNBHJUBLBZPTJ w (JU)VCͰJTTVFཱͯͨΓ IUUQTHJUIVCDPNGBOESFBDUIBOETPO ؾܰʹ࣭͍ͯͩ͘͠͞ w 5XJUUFSͰϝϯγϣϯͨ͠Γ
IUUQTUXJUUFSDPNBNBHJUBLBZPTJ w (JU)VCͰJTTVFཱͯͨΓ IUUQTHJUIVCDPNGBOESFBDUIBOETPO