Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
p1ass-lt-hpp
Search
Hayato Tsukagoshi
November 21, 2020
Programming
0
1.2k
p1ass-lt-hpp
Hayato Tsukagoshi
November 21, 2020
Tweet
Share
More Decks by Hayato Tsukagoshi
See All by Hayato Tsukagoshi
Word Embeddings Are Steers for Language Models
hpprc
1
190
NLP2024 招待論文セッション: 定義文を用いた文埋め込み構成法
hpprc
1
96
修論発表.pdf
hpprc
0
88
YANS2024: 目指せ国際会議!「あぶない国際会議」
hpprc
0
210
Isotropy, Clusters, and Classifiers
hpprc
3
820
[輪講資料] Matryoshka Representation Learning
hpprc
5
1.4k
[輪講資料] Text Embeddings by Weakly-Supervised Contrastive Pre-training
hpprc
4
1.3k
[輪講資料] One Embedder, Any Task: Instruction-Finetuned Text Embeddings
hpprc
1
970
WhitenedCSE: Whitening-based Contrastive Learning of Sentence Embeddings
hpprc
3
820
Other Decks in Programming
See All in Programming
Investigating Multithreaded PostgreSQL
macdice
0
140
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
130
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
110
tsconfigのオプションで変わる型世界
keisukeikeda
1
120
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
210
型安全なDrag and Dropの設計を考える
yudppp
5
650
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
120
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
110
がんばりすぎないコーディングルール運用術
tsukakei
1
170
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
520
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
120
Featured
See All Featured
Side Projects
sachag
454
42k
How GitHub (no longer) Works
holman
314
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
The Language of Interfaces
destraynor
158
25k
Faster Mobile Websites
deanohume
307
31k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Done Done
chrislema
184
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Statistics for Hackers
jakevdp
799
220k
Transcript
p1ass LT ಛઃαΠτΛࢧ͑Δٕज़ p1ass ੜLT : 2020 / 11 /
21 hpp
ࣗݾհ • ໊ݹେֶ 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 ʹσϓϩΠ͢Δͷ͕Ұ൪؆୯ͩͬͨͨΊɺGitHub actions Λͬͯ 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 Λ͍͔ͭ͘Ҿ༻ / ͝հ
None
CodeSandbox
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 ʹͨ͠Γ͢Δ͚ͩ
ϨεϙϯγϒσβΠϯʹ͍ͭͯ
None
ϨϏϡʔײँ
ੜ͓ΊͰͱ͏ʂʂʂ☺