$30 off During Our Annual Pro Sale. View Details »

p1ass-lt-hpp

 p1ass-lt-hpp

Hayato Tsukagoshi

November 21, 2020
Tweet

More Decks by Hayato Tsukagoshi

Other Decks in Programming

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