フロントエンドをきちんとSPAにしたい！/ SPA Implementation

■イベント
Sansan×M3 Tech Night ～レガシーシステムに立ち向かえ！～
https://sansan.connpass.com/event/106678/

■登壇概要
テーマ：フロントエンドをきちんとSPAにしたい！
EightのフロントエンドではBackbone.jsからReact+Reduxへと移行してきました。 これまで徐々に進めてきたフロントエンド構成の刷新について簡単に紹介します。

登壇者：Eight事業部 フロントエンドエンジニア 青山修平
Eight事業部所属エンジニア(フロントエンド寄り)。SIerやWeb系開発会社を経て2015年末にSansan入社。ゆるくサーバサイドも触りながら、フロントエンドを改善しつつ、デザイナーやプロダクトオーナーと(紳士的に)殴り合うタスクに従事している。

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Transcript

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