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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3JPU࢖ͬͯ·͔͢ʁ

Slide 4

Slide 4 text

࢖ͬͯ·͢Ͷʁ

Slide 5

Slide 5 text

࢖ͬͯ·͢ΑͶʁ

Slide 6

Slide 6 text

࢖ͬͯΔલఏͰ͍͖·͢

Slide 7

Slide 7 text

3JPUͷ͖͢ͳͱ͜Ζ

Slide 8

Slide 8 text

3JPUͷ͖͢ͳͱ͜Ζ w खܰʹѻ͑ͯίϯϙʔωϯτ͕ग़དྷΔͷ͕ศར

Slide 9

Slide 9 text

3JPUͷ͖͢ͳͱ͜Ζ w खܰʹѻ͑ͯίϯϙʔωϯτ͕ग़དྷΔͷ͕ศར w 4DPQFE$44ʹରԠʢͭΑ͍ʣ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Μʁ

Slide 13

Slide 13 text

खܰͳίϯϙʔωϯτ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

΍ͬͯΈͨ

Slide 19

Slide 19 text

΍ͬͯΈͨ %FNP

Slide 20

Slide 20 text

΍ͬͯΈͨ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ͭΒ͍

Slide 23

Slide 23 text

Ҿ͖Լ͕Εͳ͘ͳͬͨਓ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

σϞ

Slide 30

Slide 30 text

ͪΐͬͱͭΒ͍

Slide 31

Slide 31 text

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