Upgrade to Pro — share decks privately, control downloads, hide ads and more …

飛び出せ!フロントエンド知見共有会~Next,Astro,Sveltekitを使ったエンジニア...

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

ニフティ株式会社

November 27, 2023
Tweet

Video


Resources

NIFTY Tech Day 2023

https://techday.nifty.co.jp/2023/

More Decks by ニフティ株式会社

Other Decks in Programming

Transcript

  1. ػೳൺֱද ൺֱ߲໨ Next.js SvelteKit Astro ϨϯμϦϯάํ๏ SSG, SSR, ISR, CSR

    SSG, SSR, CSR SSG, SSR, 
 ύʔγϟϧϋΠυϨʔγϣϯ ੑೳ ߴ଎ ߴ଎ɺখ͍͞όϯυϧαΠζ ߴ଎ɺ࠷খݶͷΫϥΠΞϯταΠυ JS ։ൃମݧ ༏Εͨ ༏Εͨ ༏Εͨ Ϗϧυπʔϧ Webpack Vite Vite ίϛϡχςΟ େن໛Ͱ׆ൃ தن໛Ͱ੒௕த খن໛͕ͩ׆ൃ
  2. ύϥϝʔλͷ౉͠ํ ϑϨʔϜϫʔΫͷߏจൺֱʙγϯλοΫεʙ 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λά ͕͋Δ
  3. - 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
  4. ϩδοΫ෦෼Λcustom hookͱͯ͠੾Γग़͢͜ͱ͕Ͱ͖Δ • viewͱlogicͷ໰୊ͷ੾Γ෼͚͕Մೳ • React Testing LibraryͱReact Hooks Testing

    LibraryͰରԠ • custom hookͱίϯϙʔωϯτΛ׬શʹ෼͚ͯςετ͕Մೳ ◦ ίϯϙʔωϯτ͸custom hookΛϞοΫʹͯ͠දࣔͷΈςετ ◦ custom hook͸७ਮʹग़ྗ෦෼Λ֬ೝ͢Δ͚ͩͰྑ͍ • ෳࡶͳίϯϙʔωϯτΛ࣮૷͍ͯ͠Δ࣌΄ͲԸܙ͕େ͖͍ viewͱlogicͷ෼཭͕༰қͰςετ΋͠΍͍͢ 3FBDU5FTUJOH-JCSBSZͱ3FBDU)PPLT5FTUJOH-JCSBSZͬͯͳʹ͕ҧ͏Μʁ
  5. ࡞੒͍ͨ͠΋ͷ࣍ୈͰ͸ɺػೳ͕ա৒ͱײ͡Δ͜ͱ΋͋ͬͨ • ϒϩάͷΑ͏ͳγϯϓϧͳද͚ࣔͩͰ͋Ε͹ɺ
 Next.js͔ͩΒྑ͔ͬͨʂͱ͋͑ͯײ͡Δ͜ͱ΋গͳ͍ ◦ αΠτͷཁ݅࣍ୈͰ͸ա৒͔΋͠Εͳ͍ • ศརͳ΋ͷͷɺͱ͜ΖͲ͜Ζ஫ҙ͢Δඞཁͷ͋ΔՕॴ͕ग़ͯ͘Δ ◦ ϝϞԽ

    ◦ next/image • ஫ҙ͠ͳ͚Ε͹ͳΒͳ͍ՕॴΛશͯ೺Ѳ͢Δͷ͸೉͍͠ ◦ ͦ΋ͦ΋ଞͷϑϨʔϜϫʔΫͳΒ஫ҙ͢Δ఺͕গͳ͍ͷ͔ʁ Next.jsΛબͿඞཁ͕͔͋ͬͨͱ೰Ή͜ͱ΋ ۩ମతʹ͸ͲΜͳͱ͜ΖͰػೳ͕ա৒ͱײ͡·ͨ͠ʁ
  6. - ͱʹ͔͘։ൃεϐʔυ͕଎͘ɺಈ͘΋ͷΛ͙͢ʹಧ͚ΕΔ - ϨϏϡʔͰಈ͘΋ͷΛ͕ͳ͍ͱϏδωεଆ΋Πϝʔδ Ͱ͖ͳ͍ - SvelteҎલ͸PythonͰςϯϓϨʔτϨϯμϦϯάͯ͠ ͍ͨ - PythonͷϩδοΫ͚ͩͰͳ͘JS΋ଘࡏ

    - ͭ·ΓΧΦεɻͦͯ͠ϑϩʔޮ཰͕མͪΔ - Svelte͸ϑϩϯτΤϯυΛγϯϓϧʹͯ͘͠Εͨ ϑϩʔޮ཰ྑ͘։ൃͰ͖Δ Ͳ͏ͯ͠਺͋ΔϞμϯϑϨʔϜϫʔΫͷத͔Β4WFMUFΛબΜͩͷʁ
  7. SvelteKit͸Ͳ͕͜γϯϓϧͳͷ͔ - ίʔσΟϯά΋γϯϓϧʹͳͬͨ - CSSͷ؅ཧ͕؆୯ - CSS in JS΍CSS modulesͳͲͷબ୒ࢶʹ໎͏


    ඞཁ͕ͳ͍ - Store͕ඪ४Ͱೖ͍ͬͯΔ - γϯϓϧͳߏจͰɺΤϯδχΞؒͷशख़౓ͷ͕ࠩ
 ຒΊ΍͍͢ ϑϩʔޮ཰޲্ʂʂʂ
  8. • Next.js΍SveltekitͷΑ͏ͳϑϨʔϜϫʔΫΛ࢖ͬͨ͜ͱ͕͋Ε͹
 1࣌ؒͰ8ׂํशಘՄೳʢͨͿΜʂʣ ◦ ίϯϙʔωϯτͷهड़ํ๏͸JSXϥΠΫ ◦ htmlͷଐੑ͸΄΅ͦͷ·· • stateͷྨ͕ଘࡏͤͣɺϏϧυͯ͠ు͖ग़͞ΕΔͷ͸ͨͩͷHTML ◦

    React΍Svelteͩͱ؆୯ʹͰ͖ͨ͜ͱ͕Ͱ͖ͳ͍ • ෳࡶͳstateपΓΛࣺͯͯߴ଎Խ্ͨ͠ͰϞμϯϑϨʔϜϫʔΫͰ
 خ͔ͬͨ͠ίϯϙʔωϯτपΓͷػೳ͸ड͚ܧ͙ ֮͑΍͍͢ʹֶशίετ͕௿͍ ཁ݅΍ཁ๬͕ಥવมΘͬͯ4UBUF΄͍͠ʙͱͳͬͨ͜ͱ͋Γ·͔͢ʁ
  9. --- 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಺ͷσϑΥϧτͷ දࣔ಺༰ΛఆٛͰ͖Δ
  10. Next • ࠷େख • ϥΠϒϥϦ΋
 υΩϡϝϯτ΋ॆ࣮ • ςετ͠΍͍͢ • αΠτʹΑͬͯ͸


    ػೳ͕ա৒ Astro • ಈతॲཧ͕γϯϓϧͳ αΠτ޲͖ ◦ ಈతॲཧ͕
 ೖΔͱਏ͍ • ϖʔδੜ੒Ͱ͋Δͱخ ͍͠ػೳ ◦ layout ◦ slot ·ͱΊ Sveltekit • ։ൃεϐʔυ͕ૣ͍ • γϯϓϧ ◦ ߏจ ◦ css؅ཧ • Store͕ඪ४ػೳ