Riot.jsでSSRを利用してサイトが生成したかった話 Grand Frontend Osaka 2016 Lightning Talk

https://kfug.jp/gfo2016 #frontkansai

Transcript

1. 3JPUKTͰ443Λར༻ͯ͠αΠτ͕ੜ੒ͨ͠
   ͔ͬͨ࿩
   (SBOE'SPOUFOE0TBLB
   5",6.")BOBUBOJ!QPUBUPE
   

   View Slide

2. ࣗݾ঺հ
   w Ֆ୩୓ຏ 1PUBUPE
   
   w ϓϩάϥϜॻ͍ͨΓσβΠϯͨ͠Γ
   w GSPOULBOTBJ4UB⒎
   w ͳΜ͔ॳΊʹ࿩ͯͨ͠ਓ
   w Ұ࣌ظK2VFSZ͓͡͞Μͱݺ͹Ε͍ͯͨ
   w ࠓ೔͸3JPU͓͡͞Μ΍Γ·͢
   

   View Slide

3. 3JPU࢖ͬͯ·͔͢ʁ
   

   View Slide

4. ࢖ͬͯ·͢Ͷʁ
   

   View Slide

5. ࢖ͬͯ·͢ΑͶʁ
   

   View Slide

6. ࢖ͬͯΔલఏͰ͍͖·͢
   

   View Slide

7. 3JPUͷ͖͢ͳͱ͜Ζ
   

   View Slide

8. 3JPUͷ͖͢ͳͱ͜Ζ
   w खܰʹѻ͑ͯίϯϙʔωϯτ͕ग़དྷΔͷ͕ศར
   

   View Slide

9. 3JPUͷ͖͢ͳͱ͜Ζ
   w खܰʹѻ͑ͯίϯϙʔωϯτ͕ग़དྷΔͷ͕ศར
   w 4DPQFE$44ʹରԠʢͭΑ͍ʣ
   

   View Slide

10. 3JPUͷ͖͢ͳͱ͜Ζ
    w खܰʹѻ͑ͯίϯϙʔωϯτ͕ग़དྷΔͷ͕ศར
    w 4DPQFE$44ʹରԠʢͭΑ͍ʣ
    w ඪ४Ͱ443͕͍͍ͭͯΔΒ͍͠
    

    View Slide

11. 3JPUͷ͖͢ͳͱ͜Ζ
    w खܰʹѻ͑ͯίϯϙʔωϯτ͕ग़དྷΔͷ͕ศར
    w 4DPQFE$44ʹରԠʢͭΑ͍ʣ
    w ඪ४Ͱ443͕͍͍ͭͯΔΒ͍͠
    w ࢿྉ͕ඇৗʹগͳ͍ͷͰ։୓ͷ͕͍͕͋͠Δ
    

    View Slide

12. Μʁ
    

    View Slide

13. खܰͳίϯϙʔωϯτ
    

    View Slide

14. खܰͳίϯϙʔωϯτ
    4DPQFE$44
    

    View Slide

15. 443͕Մೳ
    खܰͳίϯϙʔωϯτ
    4DPQFE$44
    

    View Slide

16. ͜ΕςϯϓϨʔτΤϯδϯ
    ͱͯ͠΋ڧ͍ͷͰ͸ʁ
    

    View Slide

17. ΍Γ͍ͨ͜ͱ
    w ୯७ͳ443ͷ৔߹ɺ/PEF͕ಈ͘αʔόʔ͕ඞཁʹͳΔ͕ɺΫϥ
    ΠΞϯταΠυͰ͸4&00(1ͱ͔͕ͭΒ͍ͷͰ)5.-Λు͖ग़
    ͯ͠ཉ͍͠
    w ͦͷςϯϓϨʔτΤϯδϯʹɺ4DPQFE$44͕ѻ͑ͯɺಈతͳύ
    ϥϝʔλΛجʹ)5.-Λੜ੒ग़དྷΔ3JPUΛ࢖͍͍ͨ
    w )5.- $44 K2VFSZ͔͠࢖Θͳ͍ਓͰ΋ίϯϙʔωϯτԽͱ
    4DPQFE$44ͷϝϦοτΛڗडͰ͖Δ࢓૊ΈΛͭ͘Γ͍ͨ
    w AOQNSVOHFOFSBUFAͰ443Λ$-*Ͱ૸Βͤͯ)5.-Λࣗಈੜ੒
    ͢Δ
    

    View Slide

18. ΍ͬͯΈͨ
    

    View Slide

19. ΍ͬͯΈͨ
    %FNP
    

    View Slide

20. ΍ͬͯΈͨ
    

    View Slide

21. 4DPQFE$44
    ରԠͯ͠ͳ͍໰୊
    

    View Slide

22. ͭΒ͍
    

    View Slide

23. Ҿ͖Լ͕Εͳ͘ͳͬͨਓ
    

    View Slide

24. Ҿ͖Լ͕Εͳ͘ͳͬͨਓ
    w ࠓճ͸αʔόʔαΠυϨϯμϦϯάͷػೳΛ༻͍ͯͲ͏ʹ͔
    ͯ͠)5.-Λग़ྗ͢Δ͜ͱ͕໨తͰ͋ͬͯɺखஈ͸໰Θͳ͍
    

    View Slide

25. Ҿ͖Լ͕Εͳ͘ͳͬͨਓ
    w ࠓճ͸αʔόʔαΠυϨϯμϦϯάͷػೳΛ༻͍ͯͲ͏ʹ͔
    ͯ͠)5.-Λग़ྗ͢Δ͜ͱ͕໨తͰ͋ͬͯɺखஈ͸໰Θͳ͍
    w XFCQBDLͰݻΊͨCVOEMFKTΛΫϥΠΞϯταΠυͰ࣮ߦ͠
    ͯɺͦͷ݁ՌΛड͚औΔͱྑ͍ͷͰ͸ʁ
    

    View Slide

26. Ҿ͖Լ͕Εͳ͘ͳͬͨਓ
    w ࠓճ͸αʔόʔαΠυϨϯμϦϯάͷػೳΛ༻͍ͯͲ͏ʹ͔
    ͯ͠)5.-Λग़ྗ͢Δ͜ͱ͕໨తͰ͋ͬͯɺखஈ͸໰Θͳ͍
    w XFCQBDLͰݻΊͨCVOEMFKTΛΫϥΠΞϯταΠυͰ࣮ߦ͠
    ͯɺͦͷ݁ՌΛड͚औΔͱྑ͍ͷͰ͸ʁ
    w ηϧϑεΫϨΠϐϯάͰୡ੒͢Δ͜ͱʹ
    

    View Slide

27. Ҿ͖Լ͕Εͳ͘ͳͬͨਓ
    w ࠓճ͸αʔόʔαΠυϨϯμϦϯάͷػೳΛ༻͍ͯͲ͏ʹ͔
    ͯ͠)5.-Λग़ྗ͢Δ͜ͱ͕໨తͰ͋ͬͯɺखஈ͸໰Θͳ͍
    w XFCQBDLͰݻΊͨCVOEMFKTΛΫϥΠΞϯταΠυͰ࣮ߦ͠
    ͯɺͦͷ݁ՌΛड͚औΔͱྑ͍ͷͰ͸ʁ
    w ηϧϑεΫϨΠϐϯάͰୡ੒͢Δ͜ͱʹ
    w SJPUMPBEFSͱ͔ͰΨοπϦ/PEF؀ڥ࢖͍ͬͯΔͷͰɺ·ͱ
    Ίͯ؅ཧ͢ΔҙຯͰ΋/PEFͰಈ͔͢
    

    View Slide

28. /JHIUNBSF࢖ͬͨ
    &MFDUSPO͕ೖͬͯͯͳΜ͔ΊͬͪΌ$ISPNFࣗಈԽͰ͖Δ΍ͭʢҙ༁ʣ
    

    View Slide

29. σϞ
    

    View Slide

30. ͪΐͬͱͭΒ͍
    

    View Slide

31. ΍ͬͯΈͨ݁Ռ
    w औΓ׶͑ͣ3JPUͰ׬੒ࡁΈͷ)5.-Λు͘ͱ͍͏໨త͸ୡ
    ੒ͨ͠
    w ΠΠΧϯδʹ443ग़དྷΔͳΒͦ΋ͦ΋ؤுΔඞཁ͕ͳ͍͏
    ͑ɺ͜ͷ··ͩͱςϯϓϨʔτΤϯδϯͱ͔ͯ͠͠ར༻͕
    Ͱ͖ͳ͍ͷͰधཁ͕ߦํෆ໌
    w ݸਓతʹ͸ָ͚ͩͲɺअಓײ͕͋ͬͯקΊΒΕͳ͍ͱ͍͏
    ؾ͕࣋ͪڧ͍
    

    View Slide

32. ͓·͚
    

    View Slide

33. WVFMPBEFSར༻ͷ7VFKTͰ΋
    ಉ͘͡Β͍खܰͰ͸ʁ
    

    View Slide

34. μϝͩͬͨ
    IUUQRJJUBDPNEFWOFLPJUFNTBBCCDC
    

    View Slide

35. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide