p1ass LT ಛઃαΠτΛࢧ͑Δٕज़p1ass ੜLT : 2020 / 11 / 21hpp
View Slide
ࣗݾհ• ໊ݹେֶ CS B4• ݚڀ: ࣗવݴޠॲཧ (NLP)• झຯ: React, Rust• Twitter: @hpp_ricecake• GitHub: hpprc
ͭͬͨ͘ͷ
p1ass LT ಛઃαΠτ
վΊͯσϞ
͓खݩͷͰͪ͜ΒΛͲ͏ͧhttps://nama-tamago.github.io/p1ass-lt-site
εϚϗ൛ɺλϒϨοτ൛
εϚϗ λϒϨοτ
༻ٕज़• React.js• Next.js• TypeScript• Tailwind CSS• react-three-fiber (Three.js ͷ React ༻ϥούʔ)• GitHub actions Ͱ GitHub pages ʹσϓϩΠ͍ͯ͠Δ
༻ٕज़: ࠓճհ͢Δͷ• React.js• Next.js• TypeScript• Tailwind CSS• react-three-fiber (Three.js ͷ React ༻ϥούʔ)• GitHub actions Ͱ GitHub pages ʹσϓϩΠ͍ͯ͠Δ
Next.js
Next.js• React ͷΊΜͲ͍͘͞ͱ͜ΖΛ͍͍ײ͡ʹͯ͘͠ΕΔϑϨʔϜϫʔΫ• SSR (Server Side Rendering) SSG (Static Site Generation) ʹରԠ• ࠷͍͕͍ۙ͢͝• GitHub pages ʹσϓϩΠ͢Δͷ͕Ұ൪؆୯ͩͬͨͨΊɺGitHubactions Λͬͯ Next.js Ͱ SSG ͯ͠ՌΛެ։
Next.js• ϩʔΧϧ։ൃ࣌ `localhost:3000` ͰݟΕΔ͕ɺσϓϩΠઌ͕υϝΠϯͷϧʔτ͡Όͳ͍ (`nama-tamago.github.io/p1ass-lt-site`) ͷͰઃఆ͕ͪΐ͍ΊΜͲ͍͘͞• basePath ͷઃఆΛՃͯ͠ճආ (͏͡·Δ͘Μ͕ͬͯ͘Εͨ)
Tailwind CSS
Tailwind CSS• A utility-first CSS framework (ݪจϚϚ)• ΄΅ΠϯϥΠϯελΠϧ• ͍ͬ͢͝؆୯ʹελΠϦϯά͕Ͱ͖Δ + ελΠϧͷ߹ੑΛҡ͍࣋͢͠(ͱࢥ͏)• ࣗͰ͖উखελΠϧΛఆٛͰ͖ͳ͍ͷͰɺடং͕ੜ·Ε͍͢• cheat sheet: https://nerdcave.com/tailwind-cheat-sheet
Tailwind CSS: ࣮ࡍͷίʔυ• A utility-first CSS framework (ݪจϚϚ)• ΄΅ΠϯϥΠϯελΠϧ• ͍ͬ͢͝؆୯ʹελΠϦϯά͕Ͱ͖Δ + ελΠϧͷ߹ੑΛҡ͍࣋͢͠(ͱࢥ͏)• ࣗͰ͖উखελΠϧΛఆٛͰ͖ͳ͍ͷͰɺடং͕ੜ·Ε͍͢• cheat sheet: https://nerdcave.com/tailwind-cheat-sheet
react-three-fiber
react-three-fiber• Three.js Λ React ͷੈքͰѻ͏ͨΊͷϥΠϒϥϦ• Three.js ͷ scene ͷఆٛΛએݴతʹॻ͘͜ͱ͕Ͱ͖Δ• ݱࡏ v5• v4ҎલͱϥΠϒϥϦͷߏ͕݁ߏมΘ͍ͬͯΔ(ཱͪҐஔ)• https://github.com/pmndrs/react-three-fiber
react-three-fiber ͷexample Λ͍͔ͭ͘Ҿ༻ / ͝հ
CodeSandbox
react-three-fiber : ͍͍ͱ͜Ζ• άϥϑΟΧϧͳαΠτΛ࡞ΕΔͷͬͺΓָ͍͠(LPʹ͏͚ͬͯͭ)• ૉͷ Three.js ΑΓಡΈͦ͢͏ (એݴతʹॻ͚ΔͷͰ)• React ͷੈքʹऩ·͍ͬͯΔͷͰ- PC ʹ react-three-fiber Ͱ࡞ͬͨϖʔδΛݟͤΔ- SP ʹ ผͷ͍ܰϖʔδΛݟͤΔ͕؆୯ʹͰ͖Δ
react-three-fiber : Α͘ͳ͍ͱ͜Ζ• සൟʹΞοϓσʔτ͕ೖΔ• Ҏલ৮ͬͯͨͱ͖ͷίʔυ͕ͿͬյΕͯΔ͜ͱ͕··͋Δ• TypeScript ͱͷ૬ੑ͕͍͍ͱݴ͑ͳ͍• Three.js ͷ API ʹؔ͢Δࣝඞਢ• SSR / SSG ͱͷ૬ੑ͕͍͍ͱݴ͑ͳ͍• ΫϥΠΞϯταΠυͰͷಈతΠϯϙʔτ͕ඞཁʹͳΔ߹͋Δ
ϨεϙϯγϒσβΠϯʹ͍ͭͯ• ࠓճ PC / λϒϨοτ / εϚϗ ͯ͢ʹผʑͷίϯϙʔωϯτΛग़͢͜ͱͰରԠ• ͱ͍ͬͯɺը໘αΠζͱ͔Χϝϥͷಈ͖ํΛ੍ޚ͢Δ props Λग़͚͍ͯ͠Δ͚ͩͰ͋Δ• Tailwind ʹΑΔྗۀͷग़͠Θ͚• hidden ͨ͠Γ block ʹͨ͠Γ͢Δ͚ͩ
ϨεϙϯγϒσβΠϯʹ͍ͭͯ
ϨϏϡʔײँ
ੜ͓ΊͰͱ͏ʂʂʂ☺