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 Λ͍͔ͭ͘Ҿ༻ / ͝঺հ
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. ϨεϙϯγϒσβΠϯʹ͍ͭͯ
29. ϨϏϡʔײँ
30. ஀ੜ೔͓ΊͰͱ͏ʂʂʂ☺