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
80
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
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
120
AIエージェント開発のノウハウと課題
pharma_x_tech
9
5.4k
月間180PBのストリーム処理されたイベントデータを使用した, KARTEのリアルタイムインタラクションマネジメント
plaidtech
PRO
0
150
事業を差別化する技術を生み出す技術
pyama86
2
560
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
1
200
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
180
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
810
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
190
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
生成AIがローコードツールになる時代の エンジニアの役割を考える
khwada
0
310
CSPMとのつきあい方
nantokanare
0
110
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
190
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Done Done
chrislema
182
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The Cost Of JavaScript in 2023
addyosmani
47
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
It's Worth the Effort
3n
184
28k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Producing Creativity
orderedlist
PRO
344
40k
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