Slide 1
Slide 1 text
> ϑϩϯτΤϯυΛ͖ͪΜͱ41"ʹ͍ͨ͠ʂ
4BOTBOº.5FDI/JHIUʙϨΨγʔγεςϜʹཱ͔ͪ͑ʂʙ
Slide 2
Slide 2 text
!NU@CMVF
!.U#MVF
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
+49ԽϩδοΫ
ίϐʔ
Slide 8
Slide 8 text
JSX ES5
ES5
ϓϦίϯύΠϧ
Slide 9
Slide 9 text
ίϯϙʔωϯτ άϩʔόϧͳελΠϧ
結果...
Slide 10
Slide 10 text
理想
•コンポーネントは独⽴させたい
•構成
•スタイル
•ロジック
•(SSRなどを除いて) SPAにアプリサーバはいらない
ファイルサーバにアップロードするだけ
8FC$PNQPOFOUT
Slide 11
Slide 11 text
改善プラン
1.CSSファイルをコンポーネント(JS)に合わせる
2.CSSクラス名でスタイルの影響範囲を抑える
3.JS,CSSをどちらもnode.js側でビルドする
Slide 12
Slide 12 text
CSSファイルをコンポーネント(JS)に合わせる
1.まずは空ファイルでJSと同名CSSを準備
2.新規作成コンポーネントではスタイルはそこに
B@DPNQPOFOUKT B@DPNQPOFOUDTT
Slide 13
Slide 13 text
CSSクラス名でスタイルの影響範囲を抑える
1.ファイルパスと同等のクラス名を定義する
(BEMのBlock相当)
2.コンポーネントJSXの最外でクラス名を付与
B@DPNQPOFOUKT B@DPNQPOFOUDTT
Slide 14
Slide 14 text
CSSクラス名でスタイルの影響範囲を抑える
1.ファイルパスと同等のクラス名を定義する
(BEMのBlock相当)
2.コンポーネントJSXの最外でクラス名を付与
B@DPNQPOFOUKT B@DPNQPOFOUDTT
SFOEFS
\
SFUVSO
EJWDMBTT/BNFbB@DPNQPOFOU`
ʜ
EJW
B@DPNQPOFOU\
CBDLHSPVOEHSBZ
ʜ
MJOUͰωετΛ੍ݶ
^
Slide 15
Slide 15 text
JS,CSSをどちらもnode.js側でビルドする
Slide 16
Slide 16 text
JS,CSSをどちらもnode.js側でビルドする
\
lCVOEMFKTzlCVOEMFYYYYKTz
lCVOEMFDTTzlCVOEMFZZZZDTTz
ʜ
^
CVOEMFYYYYKT
CVOEMFZZZZDTT
Slide 17
Slide 17 text
つらかったところ
1.CSSファイルをコンポーネント(JS)に合わせる
2.CSSクラス名でスタイルの影響範囲を抑える
3.JS,CSSをどちらもnode.js側でビルドする
Slide 18
Slide 18 text
つらかったところ
طଘͷڊେͳCSSͱίϯϙʔωϯτΛʹΒΊͬ͜͠ͳ͕Β
CSSׂΛ͍ͯͬͨ͠
͓͓Αͦ2ϲ݄͘Β͍ʁ
؆қతͳϨάϨογϣϯ߲Λઃ͚ͯνΣοΫ
ڞ௨ͳ෦Ͱ͖Δ͚ͩSCSSͷmixinԽͯ͠ಀ͛ΔͳͲ
Slide 19
Slide 19 text
まとめ
改善プランをやってみたら
- コンポーネント指向での開発ベースができてきた
- ビルドプロセスをRailsからNodeに移せた
Slide 20
Slide 20 text
でもまだまだ道半ば
੩తܕ͚
443
#''
&&ςετ
Slide 21
Slide 21 text
ͦͷଞʹReact͇ReduxͰͷʹ͍ͭͯ
աڈͷεϥΠυͰհ͍ͯ͠·͢
IUUQTXXXTMJEFTIBSFOFU4IVIFJ"PZBNBSFBDUSFEVYBUFJHIU
IUUQTTQFBLFSEFDLDPNNUCMVF
KBWBTDSJQUNFUBQVSPHVSBNJOHVNJBORJBOHIVJOVNCFSNFUBQSPFT
Slide 22
Slide 22 text
No content