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.1k
p1ass-lt-hpp
Hayato Tsukagoshi
November 21, 2020
Tweet
Share
More Decks by Hayato Tsukagoshi
See All by Hayato Tsukagoshi
[輪講資料] One Embedder, Any Task: Instruction-Finetuned Text Embeddings
hpprc
1
570
WhitenedCSE: Whitening-based Contrastive Learning of Sentence Embeddings
hpprc
3
570
Hyena Hierarchy: Towards Larger Convolutional Language Models
hpprc
4
1.7k
[輪講資料] LoRA: Low-Rank Adaptation of Large Language Models
hpprc
43
53k
資源として見る実験プログラム
hpprc
13
3.1k
[輪講資料] Optimus: Organizing Sentences via Pre-trained Modeling of a Latent Space
hpprc
0
1.3k
[輪講資料] Language-agnostic BERT Sentence Embedding
hpprc
6
1.9k
[輪講資料] SimCSE: Simple Contrastive Learning of Sentence Embeddings
hpprc
9
4.7k
バカが取ったバイキングの皿を持ってきたよ!!
hpprc
0
1.6k
Other Decks in Programming
See All in Programming
Elm 0.19.0 Changes
bkuhlmann
0
490
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
670
Fragment Composition of GraphQL
quramy
13
1.4k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
330
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
210
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
100
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
100
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
640
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
420
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
The Invisible Side of Design
smashingmag
294
49k
Scaling GitHub
holman
457
140k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Designing for humans not robots
tammielis
248
25k
The Cost Of JavaScript in 2023
addyosmani
19
3.9k
A Philosophy of Restraint
colly
197
16k
GitHub's CSS Performance
jonrohan
1025
450k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
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
ϨϏϡʔײँ
ੜ͓ΊͰͱ͏ʂʂʂ☺