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
950
手触りの良いUIを 名刺表現の巻
mtblue81
0
180
JavaScriptメタプログラミング勉強会 #metapro_es
mtblue81
0
420
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.6k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Gemini CLI のはじめ方
ttnyt8701
1
110
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
650
NEWT Backend Evolution
xpromx
1
160
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Done Done
chrislema
184
16k
Documentation Writing (for coders)
carmenintech
72
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Embracing the Ebb and Flow
colly
86
4.8k
Fireside Chat
paigeccino
37
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Side Projects
sachag
455
43k
Building an army of robots
kneath
306
45k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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