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
850
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
56
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
750
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
1
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
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
350
自動テストのコストと向き合ってみた
qa
0
200
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.2k
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
170
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
The Cake Is a Lie... And So Is Your Login’s Accessibility
leichteckig
0
100
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
160
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
220
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
680
Visualization
eitanlees
148
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rails Girls Zürich Keynote
gr2m
95
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Done Done
chrislema
185
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
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༰ͷϑΟʔυόοΫΛ ࠙ձͰ͚Δͱخ͍͠Ͱ͢ʂ