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
非SPAで小さく始めるReactアーキテクチャ
Search
masarufuruya
July 20, 2017
Technology
1
1.2k
非SPAで小さく始めるReactアーキテクチャ
masarufuruya
July 20, 2017
Tweet
Share
More Decks by masarufuruya
See All by masarufuruya
DevOpsに投資するリソースの無いスタートアップがふりかえりを改革して自己組織化されたチームへ近づいてる話
masarufuruya
1
1.2k
SQL利用者を3倍に増やしデータの民主化を推進した話.pdf
masarufuruya
0
700
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
30
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
670
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
0
1.2k
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
masarufuruya
0
300
Watsonを使って音声入力できるVRブレストアプリを作っている話
masarufuruya
0
390
ReactNativeでIOSアプリのプッシュ通知を実装する
masarufuruya
0
1.2k
Web+スマホ+VRで一人ブレストアプリを作ってみた
masarufuruya
0
210
Other Decks in Technology
See All in Technology
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
150
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
7
1.9k
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
Terraformあれやこれ/terraform-this-and-that
emiki
3
240
社内勉強会運営のコツ
senoo
6
1.1k
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
Apple Vision Pro trial session
akkeylab
0
120
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.5k
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
630
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
280
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
Featured
See All Featured
Debugging Ruby Performance
tmm1
69
11k
Rails Girls Zürich Keynote
gr2m
91
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Cult of Friendly URLs
andyhume
74
5.7k
Typedesign – Prime Four
hannesfritz
36
2k
Atom: Resistance is Futile
akmur
258
25k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
GitHub's CSS Performance
jonrohan
1023
450k
In The Pink: A Labor of Love
frogandcode
138
21k
Web Components: a chance to create the future
zenorocha
304
41k
Navigating Team Friction
lara
177
13k
Transcript
ඇSPAͰখ࢝͘͞ΊΔ ReactΞʔΩςΫνϟ ݹՈ େ
ࣗݾհ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ طଘͷRailsΞϓϦReactͰ৽ػೳΛՃ
ࠓճͷൃදʹࢸͬͨഎܠ ◦ SPAಋೖͷهࣄ͕ଟ͍ ◦ ඇSPAgemΛͬͨύλʔϯ͔ɺ webpackͰ෦తͳTipsͷهࣄ͕ଟ͍
ࠓओʹ͢͜ͱ ◦ ඇSPAΞϓϦʹReact+webpackΛಋೖ͢Δ ࡍͷશମతͳΞʔΩςΫνϟͱࠔΓϙΠϯ τͷݟڞ༗
͜Μͳ͜ͱ͠·ͤΜ ◦ React,ES6,webpackʹؔ͢Δجૅతͳ ◦ ଞͷJSϑϨʔϜϫʔΫͱͷൺֱͷ
ࠓճಋೖͨ͠ελοΫ ◦ React ◦ flowtype ◦ webpack ◦ ES6 +
Babel ◦ jQuery
ࠓճಋೖͨ͠ελοΫ ◦ React ◦ flowtype ◦ webpack ◦ ES6 +
Babel ◦ jQuery Reduxֶशίετ͕ߴ͍ͷͰݟૹΓ ܕΛܾΊΔͱAPIଆͱͷҙࢥૄ௨ָ͕ɻΦεεϝ σβΠφʔ͕ॻ͘JSʹؔͯ͠ڐ༰
શମͷReactίϯϙʔωϯτߏ Page App App Component Component ϖʔδͷى ֤UIύʔπͷ ֤UIύʔπͷࢠ
ϖʔδ (Page) UIύʔπ(App) UIύʔπ(App)
webpackϏϧυ • entryʹෳΤϯτϦʔϙΠϯτΛࢦఆ • ϖʔδຖͷXXXPage.jsΛES6 ➔ ES5ʹม
Pageͷׂ (ϖʔδͷى) • ඞཁͳUIύʔπΛReactDOM.render • ֤UIύʔπXXXApp.jsͰ໋໊Λ౷Ұ
Appͷׂ (֤UIύʔπͷ) • stateͷอ࣋/มߋΛ୲ • ඇಉظॲཧͷϩδοΫશͯ͜͜ʹهࡌ ※ ن͕େ͖͘ͳ͖ͬͯͨΒRedux, Immutable.jsͰׂΛݕ౼
Appͷׂ (֤UIύʔπͷ) • stateͷflowtypeͰܕఆٛ • APIଆͱͷσʔλͷೝࣝ߹Θͤʹศར
Componentͷׂ (֤UIύʔπͷࢠ) • (App)͔ΒͷpropsΛϨϯμϦϯά • ϢʔβʔͷΠϕϯτΛʹ͢
ඇಉظॲཧʹؔ͢ΔTips • axiosͱ͍͏HTTPΫϥΠΞϯτΛར༻ • ϞοΫ༻ҙͰ͖ͯAPIແ͠Ͱ։ൃͰ͖Δ
ॳճͷσʔλϩʔυͪͲ͏͢Δʁ • gonͰॳճσʔλΛJS͠ճආ • SSRख͕͔͔ؒΓͦ͏ͩͬͨͷͰࠓճอཹ • σʔλऔಘྃ·Ͱը໘͕දࣔ͞Εͳ͍
ࠓޙऔΓΈ͍ͨ͜ͱ ◦ CSS in JSͷಋೖ ◦ εϚϗදࣔͷύϑΥʔϚϯενϡʔχϯά ◦ JQueryͱReactͷ͍͚ͷϧʔϧࡦఆ ※
UIύʔπຖʹָͳํͰ࣮Ͱ͖ΔΑ͏ʹ͍͖͍ͯͨ͠
LT༰ͷϑΟʔυόοΫΛ ࠙ձͰ͚Δͱخ͍͠Ͱ͢ʂ