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
120
修論発表.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
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
580
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.1k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
Testing Trophyは叫ばない
toms74209200
0
860
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Navigating Dependency Injection with Metro
zacsweers
3
240
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
310
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
個人軟體時代
ethanhuang13
0
320
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Side Projects
sachag
455
43k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building an army of robots
kneath
306
46k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
The Cult of Friendly URLs
andyhume
79
6.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
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
ϨϏϡʔײँ
ੜ͓ΊͰͱ͏ʂʂʂ☺