make_frontend_properly_spa.pdf

Transcript

1. > ϑϩϯτΤϯυΛ͖ͪΜͱ41"ʹ͍ͨ͠ʂ  4BOTBOº.
   5FDI
   /JHIU
   ʙϨΨγʔγεςϜʹཱͪ޲͔͑ʂʙ

2. !NU@CMVF
   !.U#MVF

3. None
4. None
5. None
6. None

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
    

22. None