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
520
飛び出せ!フロントエンド知見共有会~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 ニフティ株式会社
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
1
20
モニタリングダッシュボード に表示しておきたい情報 / NIFTY Tech Talk #21
niftycorp
PRO
1
57
PagerDutyを導入して変わったシステム運用とこれから / NIFTY Tech Talk #21
niftycorp
PRO
1
57
ゼロからボトムアップで始めるインナーソース ニフティのリアル事例 - InnerSource Gathering Tokyo 2024
niftycorp
PRO
2
130
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
5
5k
AWS Summit Japan 2024, AWS Game Day 振り返り - NIFTY Tech Talk #20
niftycorp
PRO
2
260
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
44
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
230
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
210
Other Decks in Programming
See All in Programming
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
510
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
詳解UIWindow
natmark
3
2k
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
110
プログラマのための音楽入門
cheebow
4
540
Some more adventure of Happy Eyeballs
coe401_
2
150
複雑さに立ち向かうための ソフトウェア開発入門
shiz
2
580
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.7k
快適な開発と高セキュリティを実現するCryptoKitを活用したCoreDataのデータ暗号化術
grandbig
1
300
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
2024 컴포즈 정원사
jisungbin
0
140
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
28
1.4k
Happy Clients
brianwarren
96
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
GraphQLとの向き合い方2022年版
quramy
43
13k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Why Our Code Smells
bkeepers
PRO
333
56k
Infographics Made Easy
chrislema
239
18k
YesSQL, Process and Tooling at Scale
rocio
167
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
Music & Morning Musume
bryan
46
6k
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͕ඪ४ػೳ
·ͱΊ ͍͍͔ΕΜͳɻ ͓લΛ৴͡Ζʂ ͓Ε͕৴͡Δ͓લͰͳ͍ɻ ͓લ͕৴͡ΔԶͰͳ͍ɻ ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ