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
mtblue81
November 22, 2018
Programming
0
2.6k
make_frontend_properly_spa.pdf
mtblue81
November 22, 2018
Tweet
Share
More Decks by mtblue81
See All by mtblue81
3Dアバターを楽しもう!@burikaigi2024
mtblue81
1
880
手触りの良いUIを 名刺表現の巻
mtblue81
0
180
JavaScriptメタプログラミング勉強会 #metapro_es
mtblue81
0
420
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
130
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
330
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.6k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Java on Azure で LangGraph!
kohei3110
0
170
PicoRuby on Rails
makicamel
2
110
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Fireside Chat
paigeccino
37
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Statistics for Hackers
jakevdp
799
220k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
KATA
mclloyd
30
14k
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