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
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
CSC307 Lecture 09
javiergs
PRO
1
500
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Namespace on read
tagomoris
2
370
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Become a Pro
speakerdeck
PRO
15
4.8k
The Language of Interfaces
destraynor
151
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Building Applications with DynamoDB
mza
89
5.8k
Design by the Numbers
sachag
277
18k
The Invisible Customer
myddelton
117
13k
Docker and Python
trallard
37
2.9k
Done Done
chrislema
179
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
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͕ඪ४ػೳ
·ͱΊ ͍͍͔ΕΜͳɻ ͓લΛ৴͡Ζʂ ͓Ε͕৴͡Δ͓લͰͳ͍ɻ ͓લ͕৴͡ΔԶͰͳ͍ɻ ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ