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を使ったエンジニア...
Search
ニフティ株式会社
PRO
November 27, 2023
Video
Resources
Programming
0
560
飛び出せ!フロントエンド知見共有会~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 ニフティ株式会社
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
43
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
1
53
モニタリングダッシュボード に表示しておきたい情報 / NIFTY Tech Talk #21
niftycorp
PRO
1
83
PagerDutyを導入して変わったシステム運用とこれから / NIFTY Tech Talk #21
niftycorp
PRO
1
82
ゼロからボトムアップで始めるインナーソース ニフティのリアル事例 - InnerSource Gathering Tokyo 2024
niftycorp
PRO
2
180
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
7
5.3k
AWS Summit Japan 2024, AWS Game Day 振り返り - NIFTY Tech Talk #20
niftycorp
PRO
2
350
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
54
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
240
Other Decks in Programming
See All in Programming
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
140
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
4
170
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
130
Serverless renderování Webových komponent
rarous
PRO
0
100
CSC509 Lecture 03
javiergs
PRO
0
140
perl for shell, awk and sed programmers
mackee
1
700
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
460
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
170
CDKを活用した 大規模コンテナ移行 プロジェクトの紹介
yoyoyopg
0
310
Introduce dRuby
ledsun
0
120
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
150
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Speed Design
sergeychernyshev
22
490
Scaling GitHub
holman
458
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
In The Pink: A Labor of Love
frogandcode
139
22k
Ruby is Unlike a Banana
tanoku
96
11k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
110
6.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
10
1.4k
How GitHub (no longer) Works
holman
311
140k
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͕ඪ४ػೳ
·ͱΊ ͍͍͔ΕΜͳɻ ͓લΛ৴͡Ζʂ ͓Ε͕৴͡Δ͓લͰͳ͍ɻ ͓લ͕৴͡ΔԶͰͳ͍ɻ ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ