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
飛び出せ!フロントエンド知見共有会~Next,Astro,Sveltekitを使ったエンジニアたちの声~ - NIFTY Tech Day 2023
Search
ニフティ株式会社
PRO
November 27, 2023
Video
Resources
Programming
0
460
飛び出せ!フロントエンド知見共有会~Next,Astro,Sveltekitを使ったエンジニアたちの声~ - NIFTY Tech Day 2023
ニフティ株式会社
PRO
November 27, 2023
Tweet
Share
Video
Resources
NIFTY Tech Day 2023
https://techday.nifty.co.jp/2023/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
15
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
190
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
190
Visual Studio Code Dev Containers ススメ Python編 - NIFTY Tech Talk #17
niftycorp
PRO
1
140
dotfilesを作ろう - NIFTY Tech Talk #17
niftycorp
PRO
1
130
フロントエンドを始める前に どうしていっぱいツールがあるの? - NIFTY Tech Talk #17
niftycorp
PRO
1
240
サービスシステム監視 (シフト例)
niftycorp
PRO
0
94
スクラムマスターの技を磨く! ニフティのスクラムトーク vol. 1 - NIFTY Tech Talk #16
niftycorp
PRO
1
210
AWS基礎 / 2023 ニフティ新人研修
niftycorp
PRO
0
550
Other Decks in Programming
See All in Programming
最近追加した型の紹介とその振り返り
aki19035vc
0
170
【Go言語】golangci-lintの使い方
tomo1227
0
270
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
【Go言語】ジェネリクス
tomo1227
0
170
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
CSC307 Lecture 07
javiergs
PRO
0
220
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
It's Worth the Effort
3n
181
27k
A Tale of Four Properties
chriscoyier
155
22k
Fireside Chat
paigeccino
25
2.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Facilitating Awesome Meetings
lara
46
5.8k
Building Adaptive Systems
keathley
34
2k
Leading Effective Engineering Teams 2024
addyosmani
3
300
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Transcript
Copyright ©NIFTY Corporation All Rights Reserved. ͱͼͩͤʂ ϑϩϯτΤϯυݟڞ༗ձ ձһγεςϜάϧʔϓ ٶຊ
ୡɾླ ༔ే
ࣗݾհ self-introduction
ࣗݾհ ৽ଔೖࣾ3 SvelteKit͕େ͖ͰΑ͍͘·͢ Svelte͍͍ͧ ͚ͨΖ͍Ͳ @takenokoroid
ࣗݾհ ৽ଔೖࣾ4 @niftyτοϓϖʔδ։ൃ/ӡ༻୲ ॳΊͯ৮ͬͨϑϨʔϜϫʔΫNext.js 1ʹ࡞ͬͨReactΞϓϦͷίʔυ͕ා͍ ٶຊୡ
ࣾར༻ͷݱঢ় Current status of in-house use
ར༻͍ͯ͠ΔϑϨʔϜϫʔΫΞϯέʔτ • ReactΛ͍ͬͯΔνʔϜ͕ଟ͍ • jQueryಉ͘͡Β͍͍Δ • SvelteAstroͪΒ΄Β
͜Ε͔Β͍͍ͨϑϨʔϜϫʔΫΞϯέʔτ • Reactେਓؾ • Svelte͕̎൪खʹ • HonoqwikͳͲ • jQuery͔ΒҠߦ͍ͨ͠ਓ͕ଟ͍
ػೳൺֱ Comparison of Next.js, SvelteKit and Astro features
ػೳൺֱද ൺֱ߲ Next.js SvelteKit Astro ϨϯμϦϯάํ๏ SSG, SSR, ISR, CSR
SSG, SSR, CSR SSG, SSR, ύʔγϟϧϋΠυϨʔγϣϯ ੑೳ ߴ ߴɺখ͍͞όϯυϧαΠζ ߴɺ࠷খݶͷΫϥΠΞϯταΠυ JS ։ൃମݧ ༏Εͨ ༏Εͨ ༏Εͨ Ϗϧυπʔϧ Webpack Vite Vite ίϛϡχςΟ େنͰ׆ൃ தنͰத খن͕ͩ׆ൃ
ύϥϝʔλͷ͠ํ ϑϨʔϜϫʔΫͷߏจൺֱʙγϯλοΫεʙ import { useState } from 'react'; function CounterButton()
{ const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ); } export default CounterButton; <script> let count = 0; </script> <button on:click={() => count += 1}> Clicked {count} times </button> --- const {text} = Astro.props --- <p>{text}</p> <button> Clicked <span id="counter">0</span> times </button> <script> // ͍ͨΊলུ </script> Next.js SvelteKit Astro - SvelteKit͕ඇৗʹγϯϓϧ - AstroαʔόαΠυͷΈಈ࡞͢ΔϑϩϯτϚ λʔ෦ͱΫϥΠΞϯτଆಈ࡞ͷscriptλά ͕͋Δ
- NextuseStateΛ༻͢Δ - SvelteͰมೖ͕ϦΞΫςΟϒΛද͢ - AstroʹState͕ଘࡏ͠ͳ͍ - ಛఆͷίϯϙʔωϯτͷΈReact SvelteͰهड़͢Δ͜ͱՄೳ ύϥϝʔλͷ͠ํ
ϑϨʔϜϫʔΫͷߏจൺֱʙStateཧʙ function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } <script> let count = 0; function handleClick() { count += 1; } </script> <div> <p>You clicked {count} times</p> <button on:click={handleClick}> Click me </button> </div> <div> <p>You clicked <span id="counter">0</span> times</p> <button id="increment">Click me</button> </div> <script> let count = 0; function increment() { count += 1; document.getElementById('counter').innerText = count; } document.getElementById('increment') .addEventListener('click', increment); </script> Next.js SvelteKit Astro
ύϥϝʔλͷ͠ํ ͔ΜͨΜ·ͱΊ ͍ΘΏΔ ϑϨʔϜϫʔΫͬΆ͍ جຊతͳ JavaScriptͬΆ͍
NextͰͷ࣮ମݧ
Կ͔ෳࡶͳػೳՃΛ͠Α͏ͱͨ͠ࡍʹɺݕࡧ͢Δͱ͕͑ग़ͯ͘Δ • جຊػೳϥΠϒϥϦͷར༻ͰෳࡶͳػೳՃ͕؆୯ ◦ API RoutesͱΈ߹ΘͤɺόοΫΤϯυଆͱͷ௨৴ΛӅṭ ◦ NextAuthͰϩάΠϯՃ • ࠷ۙෳͷϑϨʔϜϫʔΫͰ͑ΔϥΠϒϥϦ͕૿͍͑ͯΔ
◦ TanStack Query(React Query), Auth.js(NextAuth) etc. ◦ ରԠঢ়گ·ͪ·ͪ ػೳɾυΩϡϝϯτɾϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ
ϩδοΫ෦Λcustom hookͱͯ͠Γग़͢͜ͱ͕Ͱ͖Δ • viewͱlogicͷͷΓ͚͕Մೳ • React Testing LibraryͱReact Hooks Testing
LibraryͰରԠ • custom hookͱίϯϙʔωϯτΛશʹ͚ͯςετ͕Մೳ ◦ ίϯϙʔωϯτcustom hookΛϞοΫʹͯ͠දࣔͷΈςετ ◦ custom hook७ਮʹग़ྗ෦Λ֬ೝ͢Δ͚ͩͰྑ͍ • ෳࡶͳίϯϙʔωϯτΛ࣮͍ͯ͠Δ࣌΄ͲԸܙ͕େ͖͍ viewͱlogicͷ͕༰қͰςετ͍͢͠ 3FBDU5FTUJOH-JCSBSZͱ3FBDU)PPLT5FTUJOH-JCSBSZͬͯͳʹ͕ҧ͏Μʁ
࡞͍ͨ͠ͷ࣍ୈͰɺػೳ͕աͱײ͡Δ͜ͱ͋ͬͨ • ϒϩάͷΑ͏ͳγϯϓϧͳද͚ࣔͩͰ͋Εɺ Next.js͔ͩΒྑ͔ͬͨʂͱ͋͑ͯײ͡Δ͜ͱগͳ͍ ◦ αΠτͷཁ݅࣍ୈͰա͔͠Εͳ͍ • ศརͳͷͷɺͱ͜ΖͲ͜Ζҙ͢Δඞཁͷ͋ΔՕॴ͕ग़ͯ͘Δ ◦ ϝϞԽ
◦ next/image • ҙ͠ͳ͚ΕͳΒͳ͍ՕॴΛશͯѲ͢Δͷ͍͠ ◦ ͦͦଞͷϑϨʔϜϫʔΫͳΒҙ͢Δ͕গͳ͍ͷ͔ʁ Next.jsΛબͿඞཁ͕͔͋ͬͨͱΉ͜ͱ ۩ମతʹͲΜͳͱ͜ΖͰػೳ͕աͱײ͡·ͨ͠ʁ
sveltekitͰͷ ࣮ମݧ
- ͱʹ͔͘։ൃεϐʔυ͕͘ɺಈ͘ͷΛ͙͢ʹಧ͚ΕΔ - ϨϏϡʔͰಈ͘ͷΛ͕ͳ͍ͱϏδωεଆΠϝʔδ Ͱ͖ͳ͍ - SvelteҎલPythonͰςϯϓϨʔτϨϯμϦϯάͯ͠ ͍ͨ - PythonͷϩδοΫ͚ͩͰͳ͘JSଘࡏ
- ͭ·ΓΧΦεɻͦͯ͠ϑϩʔޮ͕མͪΔ - SvelteϑϩϯτΤϯυΛγϯϓϧʹͯ͘͠Εͨ ϑϩʔޮྑ͘։ൃͰ͖Δ Ͳ͏ͯ͋͠ΔϞμϯϑϨʔϜϫʔΫͷத͔Β4WFMUFΛબΜͩͷʁ
ͲΕ͚ͩෳࡶ͔ͩͬͨ - ࣌ͷϑϩϯτΤϯυ։ൃෳࡶͩͬͨ - ੩తग़ྗͨ͠HTMLΛޙʹಈతʹಈ͔͍ͯͨ͠ - ࠷ऴతͳHTMLΛݟͯJinjaͷॲཧͳͷ͔JavaScriptͷ ॲཧ͔அ͔ͭͣ - Ϣʔβʔڥ࠶ݱςετʹ͕͔͔࣌ؒΓ
ϑϩʔޮԼ HTML ग़ྗ ಈతॲཧ
SvelteKitͲ͕͜γϯϓϧͳͷ͔ - ίʔσΟϯάγϯϓϧʹͳͬͨ - CSSͷཧ͕؆୯ - CSS in JSCSS modulesͳͲͷબࢶʹ໎͏
ඞཁ͕ͳ͍ - Store͕ඪ४Ͱೖ͍ͬͯΔ - γϯϓϧͳߏจͰɺΤϯδχΞؒͷशख़ͷ͕ࠩ ຒΊ͍͢ ϑϩʔޮ্ʂʂʂ
AstroͰͷ࣮ମݧ
Astroͷ͍ͨαΠτ “AstroίϯςϯπʹϑΥʔΧε͢Δͱ͍͏ಠࣗͷཱ͔ΒτϨʔυΦϑΛߦ͍ɺΞ ϓϦέʔγϣϯʹϑΥʔΧεͨ͠WebϑϨʔϜϫʔΫͰ࣮͢Δҙຯ͕ͳ͍Α͏ͳ ൺྨͳ͍ύϑΥʔϚϯεػೳΛఏڙ͠·͢” • ϒϥβ্ͷෳࡶͳಈ࡞Λ͢ΔWebΞϓϦέʔγϣϯ͚Ͱͳ͍ ◦ ͦͷ߹Next.jsͷํ͕͍͍ͯΔͱެࣜʹॻ͔Ε͍ͯΔ ◦ ϒϥβଆͰͷಈ࡞੍ޚ΄΅jQuery࣌ʹΔ
• ϒϩάϙʔτϑΥϦΦͷΑ͏ͳίϯςϯπ͕ଟ͍αΠτ͚
• Next.jsSveltekitͷΑ͏ͳϑϨʔϜϫʔΫΛͬͨ͜ͱ͕͋Ε 1࣌ؒͰ8ׂํशಘՄೳʢͨͿΜʂʣ ◦ ίϯϙʔωϯτͷهड़ํ๏JSXϥΠΫ ◦ htmlͷଐੑ΄΅ͦͷ·· • stateͷྨ͕ଘࡏͤͣɺϏϧυͯ͠ు͖ग़͞ΕΔͷͨͩͷHTML ◦
ReactSvelteͩͱ؆୯ʹͰ͖ͨ͜ͱ͕Ͱ͖ͳ͍ • ෳࡶͳstateपΓΛࣺͯͯߴԽ্ͨ͠ͰϞμϯϑϨʔϜϫʔΫͰ خ͔ͬͨ͠ίϯϙʔωϯτपΓͷػೳड͚ܧ͙ ͍֮͑͢ʹֶशίετ͕͍ ཁ݅ཁ͕ಥવมΘͬͯ4UBUF΄͍͠ʙͱͳͬͨ͜ͱ͋Γ·͔͢ʁ
--- export interface Props { title: string; createDate: Date; }
const { title, createDate } = Astro.props; --- {/** εϖʔεͷ߹্mainҎ֎লུ **/} <main> <h1>{title}</h1> <div> {createDate.toLocaleDateString()} </div> <div><slot /></div> <div class="note"> <slot name="note">σϑΥϧτͷҙॻ͖ʂ</slot> </div> <main> layoutػೳ͕γϯϓϧ ػೳेೋ • propsͰͷड͚͠ • slotλάͰݺͼग़͠ݩͰ ఆٛͨ͠ίϯϙʔωϯτΛ ૠೖ ◦ Reactͷchildren ◦ slotΛෳఆٛͰ͖Δ ◦ slotͷσϑΥϧτͷ දࣔ༰ΛఆٛͰ͖Δ
·ͱΊ
Next • ࠷େख • ϥΠϒϥϦ υΩϡϝϯτॆ࣮ • ςετ͍͢͠ • αΠτʹΑͬͯ
ػೳ͕ա Astro • ಈతॲཧ͕γϯϓϧͳ αΠτ͖ ◦ ಈతॲཧ͕ ೖΔͱਏ͍ • ϖʔδੜͰ͋Δͱخ ͍͠ػೳ ◦ layout ◦ slot ·ͱΊ Sveltekit • ։ൃεϐʔυ͕ૣ͍ • γϯϓϧ ◦ ߏจ ◦ cssཧ • Store͕ඪ४ػೳ
·ͱΊ ͍͍͔ΕΜͳɻ ͓લΛ৴͡Ζʂ ͓Ε͕৴͡Δ͓લͰͳ͍ɻ ͓લ͕৴͡ΔԶͰͳ͍ɻ ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ