p1ass-lt-hpp

Transcript

1. p1ass LT ಛઃαΠτΛࢧ͑Δٕज़ p1ass ੜ஀LT : 2020 / 11 /

   21 hpp

2. ࣗݾ঺հ • ໊ݹ԰େֶ CS B4 • ݚڀ: ࣗવݴޠॲཧ (NLP) •

   झຯ: React, Rust • Twitter: @hpp_ricecake • GitHub: hpprc

3. ͭͬͨ͘΋ͷ

4. p1ass LT ಛઃαΠτ

5. վΊͯσϞ

6. ͓खݩͷ୺຤Ͱͪ͜ΒΛͲ͏ͧ https://nama-tamago.github.io/p1ass-lt-site

7. վΊͯσϞ

8. εϚϗ൛ɺλϒϨοτ൛

9. εϚϗ λϒϨοτ

10. ࢖༻ٕज़ • React.js • Next.js • TypeScript • Tailwind CSS

    • react-three-fiber (Three.js ͷ React ༻ϥούʔ) • GitHub actions Ͱ GitHub pages ʹσϓϩΠ͍ͯ͠Δ

11. ࢖༻ٕज़: ࠓճ঺հ͢Δ΋ͷ • React.js • Next.js • TypeScript • Tailwind

    CSS • react-three-fiber (Three.js ͷ React ༻ϥούʔ) • GitHub actions Ͱ GitHub pages ʹσϓϩΠ͍ͯ͠Δ

12. Next.js

13. Next.js • React ͷΊΜͲ͍͘͞ͱ͜ΖΛ͍͍ײ͡ʹͯ͘͠ΕΔϑϨʔϜϫʔΫ • SSR (Server Side Rendering) ΍

    SSG (Static Site Generation) ʹରԠ • ࠷ۙ੎͍͕͍͢͝ • GitHub pages ʹσϓϩΠ͢Δͷ͕Ұ൪؆୯ͩͬͨͨΊɺGitHub actions Λ࢖ͬͯ Next.js Ͱ SSG ͯ͠੒Ռ෺Λެ։

14. Next.js • ϩʔΧϧ։ൃ࣌͸ `localhost:3000` ͰݟΕΔ͕ɺσϓϩΠઌ͕υϝΠ ϯͷϧʔτ͡Όͳ͍ (`nama-tamago.github.io/p1ass-lt-site`) ͷͰઃఆ ͕ͪΐ͍ΊΜͲ͍͘͞ •

    basePath ͷઃఆΛ௥Ճͯ͠ճආ (͏͡·Δ͘Μ͕΍ͬͯ͘Εͨ)

15. Tailwind CSS

16. Tailwind CSS • A utility-first CSS framework (ݪจϚϚ) • ΄΅ΠϯϥΠϯελΠϧ

    • ͍ͬ͢͝؆୯ʹελΠϦϯά͕Ͱ͖Δ + ελΠϧͷ੔߹ੑΛҡ࣋͠΍ ͍͢(ͱࢥ͏) • ࣗ෼Ͱ޷͖উखελΠϧΛఆٛͰ͖ͳ͍ͷͰɺடং͕ੜ·Ε΍͍͢ • cheat sheet: https://nerdcave.com/tailwind-cheat-sheet

17. Tailwind CSS: ࣮ࡍͷίʔυ • A utility-first CSS framework (ݪจϚϚ) •

    ΄΅ΠϯϥΠϯελΠϧ • ͍ͬ͢͝؆୯ʹελΠϦϯά͕Ͱ͖Δ + ελΠϧͷ੔߹ੑΛҡ࣋͠΍ ͍͢(ͱࢥ͏) • ࣗ෼Ͱ޷͖উखελΠϧΛఆٛͰ͖ͳ͍ͷͰɺடং͕ੜ·Ε΍͍͢ • cheat sheet: https://nerdcave.com/tailwind-cheat-sheet

18. react-three-fiber

19. react-three-fiber • Three.js Λ React ͷੈքͰѻ͏ͨΊͷϥΠϒϥϦ • Three.js ͷ scene

    ͷఆٛΛએݴతʹॻ͘͜ͱ͕Ͱ͖Δ • ݱࡏ v5 • v4ҎલͱϥΠϒϥϦͷߏ଄͕݁ߏมΘ͍ͬͯΔ(ཱͪҐஔ΋) • https://github.com/pmndrs/react-three-fiber

20. react-three-fiber ͷ example Λ͍͔ͭ͘Ҿ༻ / ͝঺հ

21. None

22. CodeSandbox

23. CodeSandbox

24. react-three-fiber : ͍͍ͱ͜Ζ • άϥϑΟΧϧͳαΠτΛ࡞ΕΔͷ͸΍ͬͺΓָ͍͠(LPʹ͏͚ͬͯͭ) • ૉͷ Three.js ΑΓಡΈ΍ͦ͢͏ (એݴతʹॻ͚ΔͷͰ)

    • React ͷੈքʹऩ·͍ͬͯΔͷͰ - PC ʹ͸ react-three-fiber Ͱ࡞ͬͨϖʔδΛݟͤΔ - SP ʹ͸ ผͷ͍ܰϖʔδΛݟͤΔ ͕؆୯ʹͰ͖Δ

25. react-three-fiber : Α͘ͳ͍ͱ͜Ζ • සൟʹΞοϓσʔτ͕ೖΔ • Ҏલ৮ͬͯͨͱ͖ͷίʔυ͕ͿͬյΕͯΔ͜ͱ͕··͋Δ • TypeScript ͱͷ૬ੑ͕͍͍ͱ͸ݴ͑ͳ͍

    • Three.js ͷ API ʹؔ͢Δ஌ࣝ΋ඞਢ • SSR / SSG ͱͷ૬ੑ͕͍͍ͱ͸ݴ͑ͳ͍ • ΫϥΠΞϯταΠυͰͷಈతΠϯϙʔτ͕ඞཁʹͳΔ৔߹΋͋Δ

26. ϨεϙϯγϒσβΠϯʹ͍ͭͯ • ࠓճ͸ PC / λϒϨοτ / εϚϗ ͢΂ͯʹผʑͷίϯϙʔωϯτΛग़ ͢͜ͱͰରԠ

    • ͱ͍ͬͯ΋ɺը໘αΠζͱ͔Χϝϥͷಈ͖ํΛ੍ޚ͢Δ props Λग़ ͠෼͚͍ͯΔ͚ͩͰ͋Δ • Tailwind ʹΑΔྗۀͷग़͠Θ͚ • hidden ͨ͠Γ block ʹͨ͠Γ͢Δ͚ͩ

27. ϨεϙϯγϒσβΠϯʹ͍ͭͯ

28. None

29. ϨϏϡʔײँ

30. ஀ੜ೔͓ΊͰͱ͏ʂʂʂ☺