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.4k
非SPAで小さく始めるReactアーキテクチャ
masarufuruya
July 20, 2017
Tweet
Share
More Decks by masarufuruya
See All by masarufuruya
DevOpsに投資するリソースの無いスタートアップがふりかえりを改革して自己組織化されたチームへ近づいてる話
masarufuruya
1
1.6k
SQL利用者を3倍に増やしデータの民主化を推進した話.pdf
masarufuruya
0
830
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
56
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
740
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
0
1.4k
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
masarufuruya
0
390
Watsonを使って音声入力できるVRブレストアプリを作っている話
masarufuruya
0
490
ReactNativeでIOSアプリのプッシュ通知を実装する
masarufuruya
0
1.3k
Web+スマホ+VRで一人ブレストアプリを作ってみた
masarufuruya
0
270
Other Decks in Technology
See All in Technology
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
4.9k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
680
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
110
ローカルLLMでファインチューニング
knishioka
0
150
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
700
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
3
460
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
140
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
160
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Code Review Best Practice
trishagee
68
18k
What's in a price? How to price your products and services
michaelherold
246
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A designer walks into a library…
pauljervisheath
206
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Raft: Consensus for Rubyists
vanstee
140
7k
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༰ͷϑΟʔυόοΫΛ ࠙ձͰ͚Δͱخ͍͠Ͱ͢ʂ