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
76
How to hack VS Code: evil ways (Japanese)
fand
5
3.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
500
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.7k
Real World GLSL
fand
0
260
APIs for VJ-ing
fand
1
6.8k
Other Decks in Technology
See All in Technology
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
400
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.7k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
0
110
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.6k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
690
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
160
Platform Engineeringは自由のめまい
nwiizo
4
2.1k
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
240
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
7.1k
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
510
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
4 Signs Your Business is Dying
shpigford
182
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GitHub's CSS Performance
jonrohan
1030
460k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Building Adaptive Systems
keathley
40
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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