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

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

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

ニフティ株式会社

November 27, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Programming

Transcript

  1. Copyright ©NIFTY Corporation All Rights Reserved.
    ͱͼͩͤʂ


    ϑϩϯτΤϯυ஌ݟڞ༗ձ
    ձһγεςϜάϧʔϓ
    ٶຊ ୡ໼ɾླ໦ ༔ే

    View full-size slide

  2. ࣗݾ঺հ
    self-introduction

    View full-size slide

  3. ࣗݾ঺հ
    ৽ଔೖࣾ3೥໨

    SvelteKit͕େ޷͖ͰΑ͘࢖͍·͢
    Svelte͸͍͍ͧ
    ͚ͨΖ͍Ͳ
    @takenokoroid

    View full-size slide

  4. ࣗݾ঺հ
    ৽ଔೖࣾ4೥໨
    @niftyτοϓϖʔδ։ൃ/ӡ༻୲౰
    ॳΊͯ৮ͬͨϑϨʔϜϫʔΫ͸Next.js
    1೥໨ʹ࡞ͬͨReactΞϓϦͷίʔυ͕ා͍


    ٶຊୡ໼

    View full-size slide

  5. ࣾ಺ར༻ͷݱঢ়
    Current status of in-house use

    View full-size slide

  6. ར༻͍ͯ͠ΔϑϨʔϜϫʔΫΞϯέʔτ
    ● ReactΛ࢖͍ͬͯΔνʔϜ͕ଟ͍
    ● jQuery΋ಉ͘͡Β͍͍Δ
    ● Svelte΍Astro΋ͪΒ΄Β

    View full-size slide

  7. ͜Ε͔Β࢖͍͍ͨϑϨʔϜϫʔΫΞϯέʔτ
    ● React͸େਓؾ
    ● Svelte͕̎൪खʹ
    ● Hono΍qwikͳͲ΋
    ● jQuery͔ΒҠߦ͍ͨ͠ਓ͕ଟ͍

    View full-size slide

  8. ػೳൺֱ
    Comparison of Next.js, SvelteKit and Astro features

    View full-size slide

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

    ύʔγϟϧϋΠυϨʔγϣϯ
    ੑೳ ߴ଎ ߴ଎ɺখ͍͞όϯυϧαΠζ
    ߴ଎ɺ࠷খݶͷΫϥΠΞϯταΠυ
    JS
    ։ൃମݧ ༏Εͨ ༏Εͨ ༏Εͨ
    Ϗϧυπʔϧ Webpack Vite Vite
    ίϛϡχςΟ େن໛Ͱ׆ൃ தن໛Ͱ੒௕த খن໛͕ͩ׆ൃ

    View full-size slide

  10. ύϥϝʔλͷ౉͠ํ
    ϑϨʔϜϫʔΫͷߏจൺֱʙγϯλοΫεʙ
    import { useState } from 'react';
    function CounterButton() {
    const [count, setCount] = useState(0);
    return (
    setCount(count + 1)}>
    Clicked {count} times

    );
    }
    export default CounterButton;
    <br/>let count = 0;<br/>
    count += 1}>
    Clicked {count} times

    ---


    const {text} = Astro.props


    ---


    {text}





    Clicked 0 times





    <br/><br/><br/>// ௕͍ͨΊলུ<br/><br/><br/>


    Next.js
    SvelteKit
    Astro
    - SvelteKit͕ඇৗʹγϯϓϧ
    - Astro͸αʔόαΠυͷΈಈ࡞͢ΔϑϩϯτϚ
    λʔ෦෼ͱΫϥΠΞϯτଆಈ࡞ͷscriptλά
    ͕͋Δ

    View full-size slide

  11. - Next͸useStateΛ࢖༻͢Δ
    - SvelteͰ͸ม਺୅ೖ͕ϦΞΫςΟϒΛද͢
    - Astroʹ͸State͕ଘࡏ͠ͳ͍
    - ಛఆͷίϯϙʔωϯτͷΈReact΍
    SvelteͰهड़͢Δ͜ͱ΋Մೳ
    ύϥϝʔλͷ౉͠ํ
    ϑϨʔϜϫʔΫͷߏจൺֱʙState؅ཧʙ
    function Counter() {
    const [count, setCount] = useState(0);
    return (

    You clicked {count} times
    setCount(count + 1)}>
    Click me


    );
    }
    <br/>let count = 0;<br/>function handleClick() {<br/>count += 1;<br/>}<br/>

    You clicked {count} times

    Click me





    You clicked 0 times


    Click me





    <br/><br/><br/>let count = 0;<br/><br/><br/>function increment() {<br/><br/><br/>count += 1;<br/><br/><br/>document.getElementById('counter').innerText = count;<br/><br/><br/>}<br/><br/><br/>document.getElementById('increment')<br/><br/><br/>.addEventListener('click', increment);<br/><br/><br/>
    Next.js
    SvelteKit
    Astro

    View full-size slide

  12. ύϥϝʔλͷ౉͠ํ
    ͔ΜͨΜ·ͱΊ
    ͍ΘΏΔ
    ϑϨʔϜϫʔΫͬΆ͍
    جຊతͳ
    JavaScriptͬΆ͍

    View full-size slide

  13. NextͰͷ࣮૷ମݧ

    View full-size slide

  14. Կ͔ෳࡶͳػೳ௥ՃΛ͠Α͏ͱͨ͠ࡍʹɺݕࡧ͢Δͱ౴͕͑ग़ͯ͘Δ
    ● جຊػೳ΍ϥΠϒϥϦͷར༻Ͱෳࡶͳػೳ௥Ճ͕؆୯
    ○ API Routesͱ૊Έ߹ΘͤɺόοΫΤϯυଆͱͷ௨৴ΛӅṭ
    ○ NextAuthͰϩάΠϯ௥Ճ
    ● ࠷ۙ͸ෳ਺ͷϑϨʔϜϫʔΫͰ࢖͑ΔϥΠϒϥϦ͕૿͍͑ͯΔ
    ○ TanStack Query(React Query), Auth.js(NextAuth) etc.
    ○ ରԠঢ়گ͸·ͪ·ͪ
    ػೳɾυΩϡϝϯτɾϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ

    View full-size slide

  15. ϩδοΫ෦෼Λcustom hookͱͯ͠੾Γग़͢͜ͱ͕Ͱ͖Δ
    ● viewͱlogicͷ໰୊ͷ੾Γ෼͚͕Մೳ
    ● React Testing LibraryͱReact Hooks Testing LibraryͰରԠ
    ● custom hookͱίϯϙʔωϯτΛ׬શʹ෼͚ͯςετ͕Մೳ
    ○ ίϯϙʔωϯτ͸custom hookΛϞοΫʹͯ͠දࣔͷΈςετ
    ○ custom hook͸७ਮʹग़ྗ෦෼Λ֬ೝ͢Δ͚ͩͰྑ͍
    ● ෳࡶͳίϯϙʔωϯτΛ࣮૷͍ͯ͠Δ࣌΄ͲԸܙ͕େ͖͍
    viewͱlogicͷ෼཭͕༰қͰςετ΋͠΍͍͢
    3FBDU5FTUJOH-JCSBSZͱ3FBDU)PPLT5FTUJOH-JCSBSZͬͯͳʹ͕ҧ͏Μʁ

    View full-size slide

  16. ࡞੒͍ͨ͠΋ͷ࣍ୈͰ͸ɺػೳ͕ա৒ͱײ͡Δ͜ͱ΋͋ͬͨ
    ● ϒϩάͷΑ͏ͳγϯϓϧͳද͚ࣔͩͰ͋Ε͹ɺ

    Next.js͔ͩΒྑ͔ͬͨʂͱ͋͑ͯײ͡Δ͜ͱ΋গͳ͍
    ○ αΠτͷཁ݅࣍ୈͰ͸ա৒͔΋͠Εͳ͍
    ● ศརͳ΋ͷͷɺͱ͜ΖͲ͜Ζ஫ҙ͢Δඞཁͷ͋ΔՕॴ͕ग़ͯ͘Δ
    ○ ϝϞԽ
    ○ next/image
    ● ஫ҙ͠ͳ͚Ε͹ͳΒͳ͍ՕॴΛશͯ೺Ѳ͢Δͷ͸೉͍͠
    ○ ͦ΋ͦ΋ଞͷϑϨʔϜϫʔΫͳΒ஫ҙ͢Δ఺͕গͳ͍ͷ͔ʁ
    Next.jsΛબͿඞཁ͕͔͋ͬͨͱ೰Ή͜ͱ΋
    ۩ମతʹ͸ͲΜͳͱ͜ΖͰػೳ͕ա৒ͱײ͡·ͨ͠ʁ

    View full-size slide

  17. sveltekitͰͷ
    ࣮૷ମݧ

    View full-size slide

  18. - ͱʹ͔͘։ൃεϐʔυ͕଎͘ɺಈ͘΋ͷΛ͙͢ʹಧ͚ΕΔ
    - ϨϏϡʔͰಈ͘΋ͷΛ͕ͳ͍ͱϏδωεଆ΋Πϝʔδ
    Ͱ͖ͳ͍
    - SvelteҎલ͸PythonͰςϯϓϨʔτϨϯμϦϯάͯ͠
    ͍ͨ
    - PythonͷϩδοΫ͚ͩͰͳ͘JS΋ଘࡏ
    - ͭ·ΓΧΦεɻͦͯ͠ϑϩʔޮ཰͕མͪΔ
    - Svelte͸ϑϩϯτΤϯυΛγϯϓϧʹͯ͘͠Εͨ
    ϑϩʔޮ཰ྑ͘։ൃͰ͖Δ
    Ͳ͏ͯ͠਺͋ΔϞμϯϑϨʔϜϫʔΫͷத͔Β4WFMUFΛબΜͩͷʁ

    View full-size slide

  19. ͲΕ͚ͩෳࡶ͔ͩͬͨ
    - ౰࣌ͷϑϩϯτΤϯυ։ൃ͸ෳࡶͩͬͨ
    - ੩తग़ྗͨ͠HTMLΛޙʹಈతʹಈ͔͍ͯͨ͠
    - ࠷ऴతͳHTMLΛݟͯ΋Jinjaͷॲཧͳͷ͔JavaScriptͷ
    ॲཧ͔൑அ͔ͭͣ
    - Ϣʔβʔ؀ڥ࠶ݱ΍ςετʹ͕͔͔࣌ؒΓ

    ϑϩʔޮ཰௿Լ
    HTML
    ग़ྗ ಈతॲཧ

    View full-size slide

  20. SvelteKit͸Ͳ͕͜γϯϓϧͳͷ͔
    - ίʔσΟϯά΋γϯϓϧʹͳͬͨ
    - CSSͷ؅ཧ͕؆୯
    - CSS in JS΍CSS modulesͳͲͷબ୒ࢶʹ໎͏

    ඞཁ͕ͳ͍
    - Store͕ඪ४Ͱೖ͍ͬͯΔ
    - γϯϓϧͳߏจͰɺΤϯδχΞؒͷशख़౓ͷ͕ࠩ

    ຒΊ΍͍͢
    ϑϩʔޮ཰޲্ʂʂʂ

    View full-size slide

  21. AstroͰͷ࣮૷ମݧ

    View full-size slide

  22. Astroͷ޲͍ͨαΠτ
    “Astro͸ίϯςϯπʹϑΥʔΧε͢Δͱ͍͏ಠࣗͷཱ৔͔ΒτϨʔυΦϑΛߦ͍ɺΞ
    ϓϦέʔγϣϯʹϑΥʔΧεͨ͠WebϑϨʔϜϫʔΫͰ͸࣮૷͢Δҙຯ͕ͳ͍Α͏ͳ
    ൺྨͳ͍ύϑΥʔϚϯεػೳΛఏڙ͠·͢”
    ● ϒϥ΢β্ͷෳࡶͳಈ࡞Λ͢ΔWebΞϓϦέʔγϣϯ޲͚Ͱ͸ͳ͍
    ○ ͦͷ৔߹͸Next.jsͷํ͕޲͍͍ͯΔͱެࣜʹ΋ॻ͔Ε͍ͯΔ
    ○ ϒϥ΢βଆͰͷಈ࡞੍ޚ͸΄΅jQuery࣌୅ʹ໭Δ
    ● ϒϩά΍ϙʔτϑΥϦΦͷΑ͏ͳίϯςϯπ͕ଟ͍αΠτ޲͚

    View full-size slide

  23. ● Next.js΍SveltekitͷΑ͏ͳϑϨʔϜϫʔΫΛ࢖ͬͨ͜ͱ͕͋Ε͹

    1࣌ؒͰ8ׂํशಘՄೳʢͨͿΜʂʣ
    ○ ίϯϙʔωϯτͷهड़ํ๏͸JSXϥΠΫ
    ○ htmlͷଐੑ͸΄΅ͦͷ··
    ● stateͷྨ͕ଘࡏͤͣɺϏϧυͯ͠ు͖ग़͞ΕΔͷ͸ͨͩͷHTML
    ○ React΍Svelteͩͱ؆୯ʹͰ͖ͨ͜ͱ͕Ͱ͖ͳ͍
    ● ෳࡶͳstateपΓΛࣺͯͯߴ଎Խ্ͨ͠ͰϞμϯϑϨʔϜϫʔΫͰ

    خ͔ͬͨ͠ίϯϙʔωϯτपΓͷػೳ͸ड͚ܧ͙
    ֮͑΍͍͢ʹֶशίετ͕௿͍
    ཁ݅΍ཁ๬͕ಥવมΘͬͯ4UBUF΄͍͠ʙͱͳͬͨ͜ͱ͋Γ·͔͢ʁ

    View full-size slide

  24. ---


    export interface Props {


    title: string;


    createDate: Date;


    }


    const { title, createDate } = Astro.props;


    ---


    {/** εϖʔεͷ౎߹্mainҎ֎͸লུ **/}





    {title}





    {createDate.toLocaleDateString()}











    σϑΥϧτͷ஫ҙॻ͖ʂ






    layoutػೳ͕γϯϓϧ

    ػೳ͸ेೋ෼
    ● propsͰ஋ͷड͚౉͠
    ● slotλάͰݺͼग़͠ݩͰ

    ఆٛͨ͠ίϯϙʔωϯτΛ
    ૠೖ
    ○ Reactͷchildren
    ○ slotΛෳ਺ఆٛͰ͖Δ
    ○ slot಺ͷσϑΥϧτͷ
    දࣔ಺༰ΛఆٛͰ͖Δ

    View full-size slide

  25. Next
    ● ࠷େख
    ● ϥΠϒϥϦ΋

    υΩϡϝϯτ΋ॆ࣮
    ● ςετ͠΍͍͢
    ● αΠτʹΑͬͯ͸

    ػೳ͕ա৒
    Astro
    ● ಈతॲཧ͕γϯϓϧͳ
    αΠτ޲͖
    ○ ಈతॲཧ͕

    ೖΔͱਏ͍
    ● ϖʔδੜ੒Ͱ͋Δͱخ
    ͍͠ػೳ
    ○ layout
    ○ slot
    ·ͱΊ
    Sveltekit
    ● ։ൃεϐʔυ͕ૣ͍
    ● γϯϓϧ
    ○ ߏจ
    ○ css؅ཧ
    ● Store͕ඪ४ػೳ

    View full-size slide

  26. ·ͱΊ
    ͍͍͔๨ΕΜͳɻ
    ͓લΛ৴͡Ζʂ
    ͓Ε͕৴͡Δ͓લͰ΋ͳ͍ɻ
    ͓લ͕৴͡ΔԶͰ΋ͳ͍ɻ
    ͓લ͕৴͡Δɺ͓લΛ৴͡Ζʂ

    View full-size slide