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
930
飛び出せ!フロントエンド知見共有会~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 ニフティ株式会社
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.5k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
890
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
92
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
310
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
190
Dify触ってみた。
niftycorp
PRO
1
280
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
300
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
140
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
220
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.4k
CSC509 Lecture 06
javiergs
PRO
0
260
XP, Testing and ninja testing ZOZ5
m_seki
3
630
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
410
ALL CODE BASE ARE BELONG TO STUDY
uzulla
18
2.8k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
株式会社 Sun terras カンパニーデック
sunterras
0
290
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Automating Front-end Workflow
addyosmani
1371
200k
How to Think Like a Performance Engineer
csswizardry
27
2k
Documentation Writing (for coders)
carmenintech
75
5.1k
Visualization
eitanlees
149
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Music & Morning Musume
bryan
46
6.8k
Rails Girls Zürich Keynote
gr2m
95
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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͕ඪ४ػೳ
·ͱΊ ͍͍͔ΕΜͳɻ ͓લΛ৴͡Ζʂ ͓Ε͕৴͡Δ͓લͰͳ͍ɻ ͓લ͕৴͡ΔԶͰͳ͍ɻ ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ