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.5k
SQL利用者を3倍に増やしデータの民主化を推進した話.pdf
masarufuruya
0
790
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
44
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
710
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
0
1.4k
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
masarufuruya
0
370
Watsonを使って音声入力できるVRブレストアプリを作っている話
masarufuruya
0
470
ReactNativeでIOSアプリのプッシュ通知を実装する
masarufuruya
0
1.3k
Web+スマホ+VRで一人ブレストアプリを作ってみた
masarufuruya
0
250
Other Decks in Technology
See All in Technology
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
2
860
Two Blades, One Journey: Engineering While Managing
ohbarye
2
450
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
550
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
160
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
270
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
160
EDRの検知の仕組みと検知回避について
chayakonanaika
8
3.3k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
1.5k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
380
表現を育てる
kiyou77
1
230
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
410
Featured
See All Featured
Done Done
chrislema
182
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
For a Future-Friendly Web
brad_frost
176
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
How to train your dragon (web standard)
notwaldorf
91
5.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Speed Design
sergeychernyshev
27
800
BBQ
matthewcrist
87
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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༰ͷϑΟʔυόοΫΛ ࠙ձͰ͚Δͱخ͍͠Ͱ͢ʂ