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
【輪講資料】Moshi: a speech-text foundation model for real-time dialogue
hpprc
3
670
Word Embeddings Are Steers for Language Models
hpprc
1
240
NLP2024 招待論文セッション: 定義文を用いた文埋め込み構成法
hpprc
1
130
修論発表.pdf
hpprc
0
100
YANS2024: 目指せ国際会議!「あぶない国際会議」
hpprc
0
260
Isotropy, Clusters, and Classifiers
hpprc
3
900
[輪講資料] Matryoshka Representation Learning
hpprc
5
1.8k
[輪講資料] Text Embeddings by Weakly-Supervised Contrastive Pre-training
hpprc
4
1.4k
[輪講資料] One Embedder, Any Task: Instruction-Finetuned Text Embeddings
hpprc
1
1k
Other Decks in Programming
See All in Programming
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
testingを眺める
matumoto
1
140
Cache Me If You Can
ryunen344
2
4k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
楽して成果を出すためのセルフリソース管理
clipnote
0
190
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
チームのテスト力を鍛える
goyoki
3
910
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Optimizing for Happiness
mojombo
379
70k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Documentation Writing (for coders)
carmenintech
74
5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Code Review Best Practice
trishagee
71
19k
Fireside Chat
paigeccino
39
3.6k
Code Reviewing Like a Champion
maltzj
525
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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
ϨϏϡʔײँ
ੜ͓ΊͰͱ͏ʂʂʂ☺