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
77
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
OPENLOGI Company Profile for engineer
hr01
1
20k
MIMEと文字コードの闇
hirachan
2
1.4k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
180
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
AIエージェント入門
minorun365
PRO
30
16k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
120
What's new in Go 1.24?
ciarana
1
100
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.2k
Amazon Aurora のバージョンアップ手法について
smt7174
2
130
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.5k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
RailsConf 2023
tenderlove
29
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Agile that works and the tools we love
rasmusluckow
328
21k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Code Review Best Practice
trishagee
67
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Documentation Writing (for coders)
carmenintech
67
4.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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