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
40
How to hack VS Code: evil ways (Japanese)
fand
5
3.4k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
470
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5.1k
PWA 方法 無料 今すぐ
fand
3
1.4k
Have you ever heard GPUs cry?
fand
2
3.6k
Real World GLSL
fand
0
240
APIs for VJ-ing
fand
1
6.7k
Other Decks in Technology
See All in Technology
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
330
プログラム検証入門
riru
6
870
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
190
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
360
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
ナレッジグラフとLLMの相互利用
koujikozaki
0
410
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
6
1.3k
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Segment Anything Model 2
tenten0727
3
690
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
294
20k
Visualization
eitanlees
142
15k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
4 Signs Your Business is Dying
shpigford
179
21k
Testing 201, or: Great Expectations
jmmastey
36
7k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Designing with Data
zakiwarfel
98
5k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
A Modern Web Designer's Workflow
chriscoyier
691
190k
Designing for humans not robots
tammielis
248
25k
Happy Clients
brianwarren
96
6.6k
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