p1ass-lt-hpp

7005db6f5317ddce16d09591f70ea32c?s=47 hpp
November 21, 2020

 p1ass-lt-hpp

7005db6f5317ddce16d09591f70ea32c?s=128

hpp

November 21, 2020
Tweet

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. ஀ੜ೔͓ΊͰͱ͏ʂʂʂ☺