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.3k
p1ass-lt-hpp
Hayato Tsukagoshi
November 21, 2020
Tweet
Share
More Decks by Hayato Tsukagoshi
See All by Hayato Tsukagoshi
【輪講資料】Moshi: a speech-text foundation model for real-time dialogue
hpprc
3
770
Word Embeddings Are Steers for Language Models
hpprc
1
270
NLP2024 招待論文セッション: 定義文を用いた文埋め込み構成法
hpprc
1
130
修論発表.pdf
hpprc
0
110
YANS2024: 目指せ国際会議!「あぶない国際会議」
hpprc
0
270
Isotropy, Clusters, and Classifiers
hpprc
3
940
[輪講資料] Matryoshka Representation Learning
hpprc
5
2k
[輪講資料] Text Embeddings by Weakly-Supervised Contrastive Pre-training
hpprc
4
1.4k
[輪講資料] One Embedder, Any Task: Instruction-Finetuned Text Embeddings
hpprc
1
1.1k
Other Decks in Programming
See All in Programming
One Enishi After Another
snoozer05
PRO
0
170
Leading Effective Engineering Teams in the AI Era
addyosmani
7
660
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
860
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
理論と実務のギャップを超える
eycjur
0
190
チームの境界をブチ抜いていけ
tokai235
0
230
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
290
EMこそClaude Codeでコード調査しよう
shibayu36
0
460
contribution to astral-sh/uv
shunsock
0
550
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Writing Fast Ruby
sferik
630
62k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Speed Design
sergeychernyshev
32
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Being A Developer After 40
akosma
91
590k
The Invisible Side of Design
smashingmag
302
51k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Optimizing for Happiness
mojombo
379
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
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
ϨϏϡʔײँ
ੜ͓ΊͰͱ͏ʂʂʂ☺