p1ass-lt-hpp

Transcript

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

   View Slide

2. ࣗݾ঺հ
   • ໊ݹ԰େֶ CS B4
   • ݚڀ: ࣗવݴޠॲཧ (NLP)
   • झຯ: React, Rust
   • Twitter: @hpp_ricecake
   • GitHub: hpprc
   

   View Slide

3. ͭͬͨ͘΋ͷ
   

   View Slide

4. p1ass LT ಛઃαΠτ
   

   View Slide

5. վΊͯσϞ
   

   View Slide

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

   View Slide

7. վΊͯσϞ
   

   View Slide

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

   View Slide

9. εϚϗ λϒϨοτ
   

   View Slide

10. ࢖༻ٕज़
    • React.js
    • Next.js
    • TypeScript
    • Tailwind CSS
    • react-three-fiber (Three.js ͷ React ༻ϥούʔ)
    • GitHub actions Ͱ GitHub pages ʹσϓϩΠ͍ͯ͠Δ
    

    View Slide

11. ࢖༻ٕज़: ࠓճ঺հ͢Δ΋ͷ
    • React.js
    • Next.js
    • TypeScript
    • Tailwind CSS
    • react-three-fiber (Three.js ͷ React ༻ϥούʔ)
    • GitHub actions Ͱ GitHub pages ʹσϓϩΠ͍ͯ͠Δ
    

    View Slide

12. Next.js
    

    View Slide

13. Next.js
    • React ͷΊΜͲ͍͘͞ͱ͜ΖΛ͍͍ײ͡ʹͯ͘͠ΕΔϑϨʔϜϫʔΫ
    • SSR (Server Side Rendering) ΍ SSG (Static Site Generation) ʹରԠ
    • ࠷ۙ੎͍͕͍͢͝
    • GitHub pages ʹσϓϩΠ͢Δͷ͕Ұ൪؆୯ͩͬͨͨΊɺGitHub
    actions Λ࢖ͬͯ Next.js Ͱ SSG ͯ͠੒Ռ෺Λެ։
    

    View Slide

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

    View Slide

15. Tailwind CSS
    

    View Slide

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

    View Slide

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

    View Slide

18. react-three-fiber
    

    View Slide

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

    View Slide

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

    View Slide

21. View Slide

22. CodeSandbox
    

    View Slide

23. CodeSandbox
    

    View Slide

24. react-three-fiber : ͍͍ͱ͜Ζ
    • άϥϑΟΧϧͳαΠτΛ࡞ΕΔͷ͸΍ͬͺΓָ͍͠(LPʹ͏͚ͬͯͭ)
    • ૉͷ Three.js ΑΓಡΈ΍ͦ͢͏ (એݴతʹॻ͚ΔͷͰ)
    • React ͷੈքʹऩ·͍ͬͯΔͷͰ
    - PC ʹ͸ react-three-fiber Ͱ࡞ͬͨϖʔδΛݟͤΔ
    - SP ʹ͸ ผͷ͍ܰϖʔδΛݟͤΔ
    ͕؆୯ʹͰ͖Δ
    

    View Slide

25. react-three-fiber : Α͘ͳ͍ͱ͜Ζ
    • සൟʹΞοϓσʔτ͕ೖΔ
    • Ҏલ৮ͬͯͨͱ͖ͷίʔυ͕ͿͬյΕͯΔ͜ͱ͕··͋Δ
    • TypeScript ͱͷ૬ੑ͕͍͍ͱ͸ݴ͑ͳ͍
    • Three.js ͷ API ʹؔ͢Δ஌ࣝ΋ඞਢ
    • SSR / SSG ͱͷ૬ੑ͕͍͍ͱ͸ݴ͑ͳ͍
    • ΫϥΠΞϯταΠυͰͷಈతΠϯϙʔτ͕ඞཁʹͳΔ৔߹΋͋Δ
    

    View Slide

26. ϨεϙϯγϒσβΠϯʹ͍ͭͯ
    • ࠓճ͸ PC / λϒϨοτ / εϚϗ ͢΂ͯʹผʑͷίϯϙʔωϯτΛग़
    ͢͜ͱͰରԠ
    • ͱ͍ͬͯ΋ɺը໘αΠζͱ͔Χϝϥͷಈ͖ํΛ੍ޚ͢Δ props Λग़
    ͠෼͚͍ͯΔ͚ͩͰ͋Δ
    • Tailwind ʹΑΔྗۀͷग़͠Θ͚
    • hidden ͨ͠Γ block ʹͨ͠Γ͢Δ͚ͩ
    

    View Slide

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

    View Slide

28. View Slide

29. ϨϏϡʔײँ
    

    View Slide

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

    View Slide