Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Potato4d(Hanatani Takuma)

August 28, 2016
Tweet

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Technology

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