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
make_frontend_properly_spa.pdf
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
mtblue81
November 22, 2018
Programming
2.8k
0
Share
make_frontend_properly_spa.pdf
mtblue81
November 22, 2018
More Decks by mtblue81
See All by mtblue81
3Dアバターを楽しもう!@burikaigi2024
mtblue81
1
1.5k
手触りの良いUIを 名刺表現の巻
mtblue81
0
190
JavaScriptメタプログラミング勉強会 #metapro_es
mtblue81
0
420
Other Decks in Programming
See All in Programming
感情を設計する
ichimichi
5
1.5k
実用!Hono RPC2026
yodaka
2
200
Make GenAI Production-Ready with Kubernetes Patterns
bibryam
0
120
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
340
ハーネスエンジニアリングとは?
kinopeee
9
4.3k
Don't Prompt Harder, Structure Better
kitasuke
0
750
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
3
320
ルールルルルルRubyの中身の予備知識 ── RubyKaigiの前に予習しなイカ?
ydah
1
180
CDK Deployのための ”反響定位”
watany
4
750
2026_04_15_量子計算をパズルとして解く
hideakitakechi
0
100
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.9k
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
sotamaki0421
3
490
Featured
See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
520
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
180
4 Signs Your Business is Dying
shpigford
187
22k
Building Applications with DynamoDB
mza
96
7k
Amusing Abliteration
ianozsvald
1
150
Color Theory Basics | Prateek | Gurzu
gurzu
0
290
What's in a price? How to price your products and services
michaelherold
247
13k
Designing for humans not robots
tammielis
254
26k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
My Coaching Mixtape
mlcsv
0
98
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Transcript
> ϑϩϯτΤϯυΛ͖ͪΜͱ41"ʹ͍ͨ͠ʂ 4BOTBOº.5FDI/JHIUʙϨΨγʔγεςϜʹཱ͔ͪ͑ʂʙ
!NU@CMVF !.U#MVF
None
None
None
None
+49ԽϩδοΫ ίϐʔ
JSX ES5 ES5 ϓϦίϯύΠϧ
ίϯϙʔωϯτ άϩʔόϧͳελΠϧ 結果...
理想 •コンポーネントは独⽴させたい •構成 •スタイル •ロジック •(SSRなどを除いて) SPAにアプリサーバはいらない ファイルサーバにアップロードするだけ 8FC$PNQPOFOUT
改善プラン 1.CSSファイルをコンポーネント(JS)に合わせる 2.CSSクラス名でスタイルの影響範囲を抑える 3.JS,CSSをどちらもnode.js側でビルドする
CSSファイルをコンポーネント(JS)に合わせる 1.まずは空ファイルでJSと同名CSSを準備 2.新規作成コンポーネントではスタイルはそこに B@DPNQPOFOUKT B@DPNQPOFOUDTT
CSSクラス名でスタイルの影響範囲を抑える 1.ファイルパスと同等のクラス名を定義する (BEMのBlock相当) 2.コンポーネントJSXの最外でクラス名を付与 B@DPNQPOFOUKT B@DPNQPOFOUDTT
CSSクラス名でスタイルの影響範囲を抑える 1.ファイルパスと同等のクラス名を定義する (BEMのBlock相当) 2.コンポーネントJSXの最外でクラス名を付与 B@DPNQPOFOUKT B@DPNQPOFOUDTT SFOEFS \ SFUVSO
EJWDMBTT/BNFbB@DPNQPOFOU` ʜ EJW B@DPNQPOFOU\ CBDLHSPVOEHSBZ ʜ MJOUͰωετΛ੍ݶ ^
JS,CSSをどちらもnode.js側でビルドする
JS,CSSをどちらもnode.js側でビルドする \ lCVOEMFKTzlCVOEMFYYYYKTz lCVOEMFDTTzlCVOEMFZZZZDTTz ʜ ^ CVOEMFYYYYKT CVOEMFZZZZDTT
つらかったところ 1.CSSファイルをコンポーネント(JS)に合わせる 2.CSSクラス名でスタイルの影響範囲を抑える 3.JS,CSSをどちらもnode.js側でビルドする
つらかったところ طଘͷڊେͳCSSͱίϯϙʔωϯτΛʹΒΊͬ͜͠ͳ͕Β CSSׂΛ͍ͯͬͨ͠ ͓͓Αͦ2ϲ݄͘Β͍ʁ ؆қతͳϨάϨογϣϯ߲Λઃ͚ͯνΣοΫ ڞ௨ͳ෦Ͱ͖Δ͚ͩSCSSͷmixinԽͯ͠ಀ͛ΔͳͲ
まとめ 改善プランをやってみたら - コンポーネント指向での開発ベースができてきた - ビルドプロセスをRailsからNodeに移せた
でもまだまだ道半ば ੩తܕ͚ 443 #'' &&ςετ
ͦͷଞʹReact͇ReduxͰͷʹ͍ͭͯ աڈͷεϥΠυͰհ͍ͯ͠·͢ IUUQTXXXTMJEFTIBSFOFU4IVIFJ"PZBNBSFBDUSFEVYBUFJHIU IUUQTTQFBLFSEFDLDPNNUCMVF KBWBTDSJQUNFUBQVSPHVSBNJOHVNJBORJBOHIVJOVNCFSNFUBQSPFT
None