飛び出せ！フロントエンド知見共有会~Next,Astro,Sveltekitを使ったエンジニアたちの声~ - NIFTY Tech Day 2023

Transcript

1. Copyright ©NIFTY Corporation All Rights Reserved. ͱͼͩͤʂ ϑϩϯτΤϯυ஌ݟڞ༗ձ ձһγεςϜάϧʔϓ ٶຊ ୡ໼ɾླ໦ ༔ే
2. ࣗݾ঺հ self-introduction
3. ࣗݾ঺հ ৽ଔೖࣾ3೥໨
 SvelteKit͕େ޷͖ͰΑ͘࢖͍·͢ Svelte͸͍͍ͧ ͚ͨΖ͍Ͳ @takenokoroid
4. ࣗݾ঺հ ৽ଔೖࣾ4೥໨ @niftyτοϓϖʔδ։ൃ/ӡ༻୲౰ ॳΊͯ৮ͬͨϑϨʔϜϫʔΫ͸Next.js 1೥໨ʹ࡞ͬͨReactΞϓϦͷίʔυ͕ා͍
 
 ٶຊୡ໼
5. ࣾ಺ར༻ͷݱঢ় Current status of in-house use
6. ར༻͍ͯ͠ΔϑϨʔϜϫʔΫΞϯέʔτ • ReactΛ࢖͍ͬͯΔνʔϜ͕ଟ͍ • jQuery΋ಉ͘͡Β͍͍Δ • Svelte΍Astro΋ͪΒ΄Β
7. ͜Ε͔Β࢖͍͍ͨϑϨʔϜϫʔΫΞϯέʔτ • React͸େਓؾ • Svelte͕̎൪खʹ • Hono΍qwikͳͲ΋ • jQuery͔ΒҠߦ͍ͨ͠ਓ͕ଟ͍
8. ػೳൺֱ Comparison of Next.js, SvelteKit and Astro features
9. ػೳൺֱද ൺֱ߲໨ Next.js SvelteKit Astro ϨϯμϦϯάํ๏ SSG, SSR, ISR, CSR SSG, SSR, CSR SSG, SSR, 
 ύʔγϟϧϋΠυϨʔγϣϯ ੑೳ ߴ଎ ߴ଎ɺখ͍͞όϯυϧαΠζ ߴ଎ɺ࠷খݶͷΫϥΠΞϯταΠυ JS ։ൃମݧ ༏Εͨ ༏Εͨ ༏Εͨ Ϗϧυπʔϧ Webpack Vite Vite ίϛϡχςΟ େن໛Ͱ׆ൃ தن໛Ͱ੒௕த খن໛͕ͩ׆ൃ
10. ύϥϝʔλͷ౉͠ํ ϑϨʔϜϫʔΫͷߏจൺֱʙγϯλοΫεʙ 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λά ͕͋Δ
11. - Next͸useStateΛ࢖༻͢Δ - 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
12. ύϥϝʔλͷ౉͠ํ ͔ΜͨΜ·ͱΊ ͍ΘΏΔ ϑϨʔϜϫʔΫͬΆ͍ جຊతͳ JavaScriptͬΆ͍
13. NextͰͷ࣮૷ମݧ
14. Կ͔ෳࡶͳػೳ௥ՃΛ͠Α͏ͱͨ͠ࡍʹɺݕࡧ͢Δͱ౴͕͑ग़ͯ͘Δ • جຊػೳ΍ϥΠϒϥϦͷར༻Ͱෳࡶͳػೳ௥Ճ͕؆୯ ◦ API Routesͱ૊Έ߹ΘͤɺόοΫΤϯυଆͱͷ௨৴ΛӅṭ ◦ NextAuthͰϩάΠϯ௥Ճ • ࠷ۙ͸ෳ਺ͷϑϨʔϜϫʔΫͰ࢖͑ΔϥΠϒϥϦ͕૿͍͑ͯΔ ◦ TanStack Query(React Query), Auth.js(NextAuth) etc. ◦ ରԠঢ়گ͸·ͪ·ͪ ػೳɾυΩϡϝϯτɾϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ
15. ϩδοΫ෦෼Λcustom hookͱͯ͠੾Γग़͢͜ͱ͕Ͱ͖Δ • viewͱlogicͷ໰୊ͷ੾Γ෼͚͕Մೳ • React Testing LibraryͱReact Hooks Testing LibraryͰରԠ • custom hookͱίϯϙʔωϯτΛ׬શʹ෼͚ͯςετ͕Մೳ ◦ ίϯϙʔωϯτ͸custom hookΛϞοΫʹͯ͠දࣔͷΈςετ ◦ custom hook͸७ਮʹग़ྗ෦෼Λ֬ೝ͢Δ͚ͩͰྑ͍ • ෳࡶͳίϯϙʔωϯτΛ࣮૷͍ͯ͠Δ࣌΄ͲԸܙ͕େ͖͍ viewͱlogicͷ෼཭͕༰қͰςετ΋͠΍͍͢ 3FBDU
    5FTUJOH
    -JCSBSZͱ3FBDU
    )PPLT
    5FTUJOH
    -JCSBSZͬͯͳʹ͕ҧ͏Μʁ
16. ࡞੒͍ͨ͠΋ͷ࣍ୈͰ͸ɺػೳ͕ա৒ͱײ͡Δ͜ͱ΋͋ͬͨ • ϒϩάͷΑ͏ͳγϯϓϧͳද͚ࣔͩͰ͋Ε͹ɺ
 Next.js͔ͩΒྑ͔ͬͨʂͱ͋͑ͯײ͡Δ͜ͱ΋গͳ͍ ◦ αΠτͷཁ݅࣍ୈͰ͸ա৒͔΋͠Εͳ͍ • ศརͳ΋ͷͷɺͱ͜ΖͲ͜Ζ஫ҙ͢Δඞཁͷ͋ΔՕॴ͕ग़ͯ͘Δ ◦ ϝϞԽ ◦ next/image • ஫ҙ͠ͳ͚Ε͹ͳΒͳ͍ՕॴΛશͯ೺Ѳ͢Δͷ͸೉͍͠ ◦ ͦ΋ͦ΋ଞͷϑϨʔϜϫʔΫͳΒ஫ҙ͢Δ఺͕গͳ͍ͷ͔ʁ Next.jsΛબͿඞཁ͕͔͋ͬͨͱ೰Ή͜ͱ΋ ۩ମతʹ͸ͲΜͳͱ͜ΖͰػೳ͕ա৒ͱײ͡·ͨ͠ʁ
17. sveltekitͰͷ ࣮૷ମݧ
18. - ͱʹ͔͘։ൃεϐʔυ͕଎͘ɺಈ͘΋ͷΛ͙͢ʹಧ͚ΕΔ - ϨϏϡʔͰಈ͘΋ͷΛ͕ͳ͍ͱϏδωεଆ΋Πϝʔδ Ͱ͖ͳ͍ - SvelteҎલ͸PythonͰςϯϓϨʔτϨϯμϦϯάͯ͠ ͍ͨ - PythonͷϩδοΫ͚ͩͰͳ͘JS΋ଘࡏ - ͭ·ΓΧΦεɻͦͯ͠ϑϩʔޮ཰͕མͪΔ - Svelte͸ϑϩϯτΤϯυΛγϯϓϧʹͯ͘͠Εͨ ϑϩʔޮ཰ྑ͘։ൃͰ͖Δ Ͳ͏ͯ͠਺͋ΔϞμϯϑϨʔϜϫʔΫͷத͔Β4WFMUFΛબΜͩͷʁ
19. ͲΕ͚ͩෳࡶ͔ͩͬͨ - ౰࣌ͷϑϩϯτΤϯυ։ൃ͸ෳࡶͩͬͨ - ੩తग़ྗͨ͠HTMLΛޙʹಈతʹಈ͔͍ͯͨ͠ - ࠷ऴతͳHTMLΛݟͯ΋Jinjaͷॲཧͳͷ͔JavaScriptͷ ॲཧ͔൑அ͔ͭͣ - Ϣʔβʔ؀ڥ࠶ݱ΍ςετʹ͕͔͔࣌ؒΓ
 ϑϩʔޮ཰௿Լ HTML ग़ྗ ಈతॲཧ
20. SvelteKit͸Ͳ͕͜γϯϓϧͳͷ͔ - ίʔσΟϯά΋γϯϓϧʹͳͬͨ - CSSͷ؅ཧ͕؆୯ - CSS in JS΍CSS modulesͳͲͷબ୒ࢶʹ໎͏
 ඞཁ͕ͳ͍ - Store͕ඪ४Ͱೖ͍ͬͯΔ - γϯϓϧͳߏจͰɺΤϯδχΞؒͷशख़౓ͷ͕ࠩ
 ຒΊ΍͍͢ ϑϩʔޮ཰޲্ʂʂʂ
21. AstroͰͷ࣮૷ମݧ
22. Astroͷ޲͍ͨαΠτ “Astro͸ίϯςϯπʹϑΥʔΧε͢Δͱ͍͏ಠࣗͷཱ৔͔ΒτϨʔυΦϑΛߦ͍ɺΞ ϓϦέʔγϣϯʹϑΥʔΧεͨ͠WebϑϨʔϜϫʔΫͰ͸࣮૷͢Δҙຯ͕ͳ͍Α͏ͳ ൺྨͳ͍ύϑΥʔϚϯεػೳΛఏڙ͠·͢” • ϒϥ΢β্ͷෳࡶͳಈ࡞Λ͢ΔWebΞϓϦέʔγϣϯ޲͚Ͱ͸ͳ͍ ◦ ͦͷ৔߹͸Next.jsͷํ͕޲͍͍ͯΔͱެࣜʹ΋ॻ͔Ε͍ͯΔ ◦ ϒϥ΢βଆͰͷಈ࡞੍ޚ͸΄΅jQuery࣌୅ʹ໭Δ • ϒϩά΍ϙʔτϑΥϦΦͷΑ͏ͳίϯςϯπ͕ଟ͍αΠτ޲͚
23. • Next.js΍SveltekitͷΑ͏ͳϑϨʔϜϫʔΫΛ࢖ͬͨ͜ͱ͕͋Ε͹
 1࣌ؒͰ8ׂํशಘՄೳʢͨͿΜʂʣ ◦ ίϯϙʔωϯτͷهड़ํ๏͸JSXϥΠΫ ◦ htmlͷଐੑ͸΄΅ͦͷ·· • stateͷྨ͕ଘࡏͤͣɺϏϧυͯ͠ు͖ग़͞ΕΔͷ͸ͨͩͷHTML ◦ React΍Svelteͩͱ؆୯ʹͰ͖ͨ͜ͱ͕Ͱ͖ͳ͍ • ෳࡶͳstateपΓΛࣺͯͯߴ଎Խ্ͨ͠ͰϞμϯϑϨʔϜϫʔΫͰ
 خ͔ͬͨ͠ίϯϙʔωϯτपΓͷػೳ͸ड͚ܧ͙ ֮͑΍͍͢ʹֶशίετ͕௿͍ ཁ݅΍ཁ๬͕ಥવมΘͬͯ4UBUF΄͍͠ʙͱͳͬͨ͜ͱ͋Γ·͔͢ʁ
24. --- 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಺ͷσϑΥϧτͷ දࣔ಺༰ΛఆٛͰ͖Δ
25. ·ͱΊ
26. Next • ࠷େख • ϥΠϒϥϦ΋
 υΩϡϝϯτ΋ॆ࣮ • ςετ͠΍͍͢ • αΠτʹΑͬͯ͸
 ػೳ͕ա৒ Astro • ಈతॲཧ͕γϯϓϧͳ αΠτ޲͖ ◦ ಈతॲཧ͕
 ೖΔͱਏ͍ • ϖʔδੜ੒Ͱ͋Δͱخ ͍͠ػೳ ◦ layout ◦ slot ·ͱΊ Sveltekit • ։ൃεϐʔυ͕ૣ͍ • γϯϓϧ ◦ ߏจ ◦ css؅ཧ • Store͕ඪ४ػೳ
27. ·ͱΊ ͍͍͔๨ΕΜͳɻ
    ͓લΛ৴͡Ζʂ
    ͓Ε͕৴͡Δ͓લͰ΋ͳ͍ɻ
    ͓લ͕৴͡ΔԶͰ΋ͳ͍ɻ
    ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ