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
840
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
slog.Handlerのよくある実装ミス
sakiengineer
4
140
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
570
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
Android Audio: Beyond Winning On It
atsushieno
0
850
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
240
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
250
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
はじめてのOSS開発からみえたGo言語の強み
shibukazu
1
110
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
150
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Side Projects
sachag
455
43k
BBQ
matthewcrist
89
9.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
KATA
mclloyd
32
14k
The World Runs on Bad Software
bkeepers
PRO
70
11k
How STYLIGHT went responsive
nonsquared
100
5.8k
4 Signs Your Business is Dying
shpigford
184
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
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༰ͷϑΟʔυόοΫΛ ࠙ձͰ͚Δͱخ͍͠Ͱ͢ʂ