$30 off During Our Annual Pro Sale. View Details »

7 principles for rich web apps And how next.js achieves these principles

7 principles for rich web apps And how next.js achieves these principles

ジャムスタックチョットデキル 2023/09/09

Yosuke Furukawa
PRO

September 09, 2023
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. 7 principles for rich web apps


    And how next.js achieves
    these principles
    @ δϟϜελοΫνϣοτσΩϧΧϯϑΝϨϯε in த໺
    yosuke_furukawa / 2023-09-09

    View Slide

  2. X(Twitter): @yosuke_furukawa


    Github: yosuke-furukawa

    View Slide

  3. JSConf.jp ticket page
    is open.
    ࠓ೥͸ΦϑϥΠϯͱΦϯϥΠϯͷϋ
    ΠϒϦου։࠵༧ఆ


    ΦϯϥΠϯ͸10݄ࠒʹެ։͠·͢ɻ


    ઌߦͯ͠དྷͯ͘ΕΔํ͸ࠓͷϖʔδ
    ͔Βདྷ͍ͯͩ͘͞ʂ

    View Slide

  4. Looong Long
    time ago...
    From 2014 ※

    View Slide

  5. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ


    ͱ͍͏λΠτϧͰ຋༁هࣄΛग़ͨ͠
    • Vercel ݱ CEO ͷ Guillermo Rauch ࢯ͕ॻ͍ͨهࣄΛ຋༁ͨ͠΋ͷ


    • ࠓͰ΋ࢀߟʹͳΔΑ͏ͳݪଇ

    View Slide

  6. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ
    1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ


    2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏


    3.σʔλͷมߋʹ൓Ԡ͠Α͏


    4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏


    5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏


    6.ίʔυͷߋ৽ΛPush͠Α͏


    7.ৼΔ෣͍Λ༧ଌ͠Α͏

    View Slide

  7. ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ
    1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ


    2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏


    3.σʔλͷมߋʹ൓Ԡ͠Α͏


    4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏


    5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏


    6.ίʔυͷߋ৽ΛPush͠Α͏


    7.ৼΔ෣͍Λ༧ଌ͠Α͏ /FYUKT͸͜ΕΒͷݪଇΛ͍͔ͭ͘ୡ੒͍ͯ͠Δ

    View Slide

  8. αʔόʔ͕ϖʔδΛϨϯμϦ
    ϯά͢Δͷ͸೚ҙͰ͸ͳ͍

    View Slide

  9. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •೚ҙͰ͸ͳ͍ => ඞਢͰ͋Δ


    •ͭ·ΓϦονͳ΢ΣϒΞϓϦέʔγϣϯʹ͸ࣄલͷϨϯμϦϯά͕ඞ
    ਢͰ͋Δͱݴ͍ͬͯΔɻ


    •ͳ͔ͥʁ

    View Slide

  10. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ϥ΢ϯυτϦοϓʹ͔͔Δ࣌ؒΛ஌ͬͯ·͔͢ʁ


    •࣌ؒɿ


    •Stanford͔ΒBoston·Ͱޫͷ଎͞Ͱ΋43.2ms


    •ޫϑΝΠόʔͰߦ͘ͱ85ms͔͔Δ

    View Slide

  11. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ


    •CSRͱSSRͰൺֱ͢Δ
    4FSWFS
    CSR
    ۭͷHTMLऔಘ
    JavaScriptऔಘ
    API fetch
    4FSWFS
    SSR
    HTMLऔಘ
    JavaScriptऔಘ

    View Slide

  12. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ϥ΢ϯυτϦοϓճ਺Λ஌ͬͯ·͔͢ʁ


    •CSRͱSSRͰൺֱ͢Δ
    4FSWFS
    CSR
    ۭͷHTMLऔಘ
    JavaScriptऔಘ
    API fetch
    4FSWFS
    SSR
    HTMLऔಘ
    $43ճ443ճ
    ˞ݫີͳ਺Ͱ͸ͳ͍ɻ5$1ͷϥ΢ϯυτϦοϓͱ͍͏ҙຯͰ͸ճ਺͸ҟͳΔɻ

    View Slide

  13. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •ݴ͍͍ͨͷ͸:


    •ࣄલʹϨϯμϦϯά͠ͳ͍ͱϢʔβʔͷ଴ͪ࣌ؒ͸௕͘ͳͬͯ͠·
    ͏ͱ͍͏͜ͱ


    •SEOͱ͔ͦ͏͍͏͜ͱͱ͸ແؔ܎ʹ࠷దͳUXΛఏڙ͢ΔͳΒࣄલʹ
    ϨϯμϦϯάΛ͢Δํ͕ྑ͍

    View Slide

  14. αʔό͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ
    ͸ͳ͍ɻ
    •Next.js͸͢Ͱʹ͜ͷ෦෼ΛϨϯμϦϯάʹؔ͢ΔιϦϡʔγϣϯΛ͍
    ͔ͭ͘ఏڙ͢Δ͜ͱͰୡ੒͍ͯ͠Δɻ


    •SSR


    •SSG


    •ISR


    •͞Βʹ Vercel ͱ૊Έ߹ΘͤΔͱCDNͰͷΩϟογϡ΋༗ޮʹɻ

    View Slide

  15. Ϣʔβͷೖྗʹਝ଎ʹ൓Ԡ͠
    Α͏

    View Slide

  16. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •͖ͬ͞ͷϨϯμϦϯά͕දࣔ͢Δ·Ͱͷ࣌ؒʹରͯ͠ͷ࿩ͩͱ͢Δͱ
    ͬͪ͜͸ૢ࡞ʹରͯ͠ͷ࿩


    •ૢ࡞ͨ͜͠ͱʹରͯ͠ͷϑΟʔυόοΫΛૣ͘Ͱ͖ΔΑ͏ʹ͢Δ࿩

    View Slide

  17. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •࣮͸਎ͷճΓʹ͋ΔΞϓϦέʔγϣϯ͸ΠϯλϥΫγϣϯʹରͯ͠ߴ
    ଎ʹ൓Ԡ͢ΔΑ͏ʹग़དྷ͍ͯΔɻGoogleͷྫ

    View Slide

  18. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •્֐ͯ͠͠·͏ཁҼʹͳΔ΋ͷ͸ͳʹ͔


    •ڊେͳ JavaScript ϑΝΠϧ͕͋Δͱ࣮͸ૢ࡞Ͱ͖ΔΑ͏ʹͳΔ·Ͱ
    ͷ͕࣌ؒඇৗʹ௕͘ͳΔ


    •ͦ΋ͦ΋͜͏͍͏շదͳϑΟʔυόοΫΛ΋ͨΒ͢ͷ΋JSͷ࡞༻ʹ
    ΑΔӨڹ͕େ͖͍


    •ͳͷʹͰ͔͍JS͕͋ΔͱίϯύΠϧ=>࣮ߦͰ௕͘଴ͨ͞Εͯ͠·͏

    View Slide

  19. Ϣʔβʔͷೖྗʹਝ଎ʹ൓Ԡ͠Α͏
    •Next.js͸ίʔυεϓϦοτ΋ϖʔδ୯ҐͰεϓϦοτͯ͘͠Ε͍ͯΔ


    •/settings ʹඞཁͳίʔυͱ /login ʹඞཁͳίʔυΛ෼͚ͯඞཁͳϖʔ
    δʹ͚ͩඞཁͳίʔυؚ͕·ΕΔΑ͏ʹ͍ͯ͠Δ


    •͔͠΋݁ߏ಄͕ྑ͍ɻ React / react-dom ͳͲͷසग़͢ΔϥΠϒϥϦͷ
    ΋ͷ͸Ͳ͜Ͱ΋ར༻͞ΕΔͷͰͦΕ͸ڞ௨Խ͞Εͨίʔυͱͯ͠࠶ར
    ༻͞Ε΍͘͢෼ׂ͞Ε͍ͯΔɻ

    View Slide

  20. σʔλͷมߋʹ൓Ԡ͠Α͏

    View Slide

  21. σʔλͷมߋʹ൓Ԡ͠Α͏
    •ϢʔβϏϦςΟͷ࿩


    •σʔλ͕มߋ͞Ε͍ͯΔͷʹΘ͟Θ͟ϦϩʔυϘλϯΛԡ͞ͳ͍ͱ͍
    ͚ͳ͍Α͏ͳ࡞Γʹ͢Δ΂͖Ͱ͸ͳ͍


    •Guillermo Rauchࢯͷ΋͏Ұͭͷஶ໊ϥΠϒϥϦ socket.io ͳͲΛར༻
    ͯ͠σʔλͷมߋʹଈ࠲ʹ൓Ԡ͢Δ΂͖ͱ͍͏࿩


    •͋Μ·ΓNext.js͸ؔ܎ͳ͍

    View Slide

  22. σʔλͷมߋʹ൓Ԡ͠Α͏
    •ݴ͏͸қ͘ߦ͏͸೉͠


    •Firestoreͱ͔socket.ioͱ͔Λۦ࢖͢Δײ͡ʹͳΔ

    View Slide

  23. σʔλมߋΛαʔόʔͱͱ΋
    ʹίϯτϩʔϧ͠Α͏

    View Slide

  24. σʔλมߋΛαʔόʔͱͱ΋ʹίϯτ
    ϩʔϧ͠Α͏
    •͜Ε΋ϢʔβϏϦςΟͷ࿩


    •Service Worker ܥ


    •σʔλૹ৴ͱ͔ʹࣦഊͯ͠΋ϦτϥΠ͢Δ࢓૊ΈΛ࡞ͬͨΓ


    •όοΫάϥ΢ϯυͰσʔλಉظͯ͠ΩϟογϡΛΦϑϥΠϯͰ࢖͑Δ
    Α͏ʹ͠Α͏ͱ͍͏࿩


    •Next.js͸͋Μ·Γؔ܎ͳ͍

    View Slide

  25. σʔλมߋΛαʔόʔͱͱ΋ʹίϯτ
    ϩʔϧ͠Α͏
    •͜͏͍͏ʮ͓΋ͯͳ͠ʯ͕͋Δͱྑ͍ͱ͍͏খ͍͚͞Ͳେࣄͳ࿩


    •ྫ͑͹ɿ


    •Ϣʔβʔ͕ΦϑϥΠϯʹͳ͔ͬͨͲ͏͔͸ navigator.onLine ͰଌΕΔɻΦϑϥΠϯʹ
    ͳͬͯΔͳΒͦΕΛදࣔͯ͋͛͠Δ΂͖


    •APIͷλΠϜΞ΢τͱ͔ϒϥ΢β೚ͤʹͯ͠ͳ͍͔ʁࣗ෼ͨͪͰࣄલʹλΠϜΞ΢τ΍
    ΩϟϯηϧΛ࣮૷ͨ͠΄͏͕ྑ͍


    •403ΤϥʔʢೝূΤϥʔʣ͕ൃੜ͍ͯ͠ΔͳΒϩάΠϯը໘Λݟͤͯ͋͛Δ΂͖


    •͏͔ͬΓϒϥ΢βดͨ࣌͡ʹ beforeUnload ͰҰճ֬ೝ͢Δͱ͔

    View Slide

  26. ɾσʔλͷมߋʹ൓Ԡ͠Α͏


    ɾσʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ
    ͠Α͏


    ͜ͷ̎ͭͷݪଇ͸Next.jsؔ܎ͳ͍


    ͚ͩͲɺ࣮૷ͷ্ͰؾΛ͚ͭΔ΂͖ϙΠϯτ

    View Slide

  27. historyΛյ͢΂͖͡Όͳ͍ɺ
    historyΛ֦ு͠Α͏

    View Slide

  28. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •Single Page Application ͋Δ͋Δɺhistory͕յΕͨUI



    FYBNQMFDPN
    FYBNQMFDPN
    FYBNQMFDPN
    εΫϩʔϧ͢Δ
    ϦϯΫΛΫϦοΫͯ͠ભҠ
    ͢Δ ભҠޙʹ໭Δ
    εΫϩʔϧҐஔ͕


    ࠷ॳʹ໭Δ

    View Slide

  29. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •ଞʹ΋:


    •͍͍Ͷ͚ͨ͠Ͳɺ͍͍Ͷ͕໭ͬͨΒফ͑ͯͨʢ࣮ࡍʹ͸௥Ճ͞Εͯ
    Δʣ


    •ΞίʔσΟΦϯ։͍ͨޙʹϖʔδભҠͯ͠໭ͬͨΒΞίʔσΟΦϯ
    ดͯͯ͡ભҠ͕յΕΔͱ͔

    View Slide

  30. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •͜ΕԿͰى͖Δ͔ͱݴ͏ͱɿෳ߹తͳཁҼ


    •ϖʔδભҠલʹ͍ΔҐஔΛϒϥ΢β͸ຊ౰ͳΒ֮͑ͯΔ


    •͚ͩͲ໭ͬͨ࣌ʹ history api Λ࢖ͬͯͯ໭Δͷ͕ૣͯ͘ίϯςϯπ
    ͕·ͩͳ͍ͱ͔ͦ͏͍͏࣌ʹى͖Δ


    •BFCacheͱ͔Navigation API ͱ͔ Scroll Resolution API ͱ͔ͦ͏͍
    ͏ϒϥ΢β͔Βͷαϙʔτ͸૿͑ͯΔ͕·ͩ࢖͑ͳ͍؀ڥ΋ଟ͍ͷ
    Ͱɺ࣮ࡍʹ͸݁ߏͪ͜ΒଆͰͳΜͱ͔͠ͳ͍ͱ͍͚ͳ͍໰୊

    View Slide

  31. historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ
    ֦ு͠Α͏
    •Next.jsͩͱεΫϩʔϧҐஔΛ໭͢ͱ͍͏ҙຯͰ͸ɾɾɾ


    •Page router ͸εΫϩʔϧҐஔΛ֮͑ͯ͘Εͯͯɺϖʔδ͕ϨϯμϦϯά͞Ε͔ͯΒεΫϩʔϧͯ͠
    ͘ΕΔ


    •Experimental Ͱ Scroll Restoration ϓϩύςΟͰͷ੍ޚ΋ͯ͘͠ΕΔɻ


    •App router͸ݱ࣌఺ͩͱͦͷ͋ͨΓͷ͜ͱ͸Ωϟογϡʹ೚ͤͯΔʢϒϥ΢βʹ೚ͤͯΔײ͡ʁʣ


    •εΫϩʔϧճؼҎ֎ͷ͜ͱ͸Կ΋ͯ͠ͳ͍ͷͰɺ࣮૷ʹ͸ؾΛ͚ͭͳ͍ͱ͍͚ͳ͍


    •ࣾ಺Ͱ͸OSSͰϥΠϒϥϦ࡞ͬͯղܾ͢Δਓͨͪ΋νϥϗϥ


    •https://github.com/recruit-tech/location-state

    View Slide

  32. ίʔυͷมߋΛPush͠Α͏

    View Slide

  33. ίʔυͷมߋΛPush͠Α͏
    •σʔλ͕ߋ৽͞Εͨʹ΋͔͔ΘΒͣɺίʔυ͕ͦͷ··ͩͱͲ͏ͳΔ
    ͔


    •ϨϯμϦϯά͕͏·͘ߦ͔ͳ͍Մೳੑ͕͋Δ


    •ը໘͕ΤϥʔʹͳΔ


    •த్൒୺ͳঢ়ଶͰϨϯμϦϯά͞ΕΔՄೳੑ͕͋Δ


    •͜͏͍͏ͷΛආ͚ͳ͚Ε͹͍͚ͳ͍ɻ

    View Slide

  34. ίʔυͷมߋΛPush͠Α͏
    •։ൃ؀ڥͩͱ Hot code reload ͳͲͷํ๏ͰίʔυͷมߋΛpushͯ͘͠
    ΔͷͰΘ͔Γ΍͍͢


    •ຊ൪؀ڥͩͱ࣮͸ͳ͔ͳ͔೉͍͠


    •Τϥʔʹͳͬͨ࣌ʹҰճ৽͘͠ϖʔδΛϋʔυϦϩʔυͤ͞Δͱ͔ͷख
    ΋͋ΔͬͪΌ͋Δɻ


    •ਅ໘໨ʹ΍Ζ͏ͱ͢ΔͱversionͷࠩҟΛݕ஌ͯ͠Ͳ͏͢Δ͔Λ࣮૷͠
    ͳ͍ͱ͍͚ͳ͍ɻΤϥʔ͕ى͖͚ͨͩͰ൑அ͢ΔͱϦϩʔυ͕ଟ͘ͳΔ

    View Slide

  35. ίʔυͷมߋΛPush͠Α͏
    •Next.js ͩͱ getServerSideProps ͳͲͷ૊ΈࠐΈͷσʔλ fetch ؔ਺Λ࢖ͬͯΔ৔߹ʹෆ੔
    ߹͕͋ΔͱversionࠩҟΛݕ஌ͯ͠Ϧϩʔυͯ͘͠ΕΔ


    •ͨͩ͜ͷػೳ͸΋ͪΖΜ PageRouter ͷΈ


    •App Router ͩͱ Vercel ͕ఏڙͯ͘͠Ε͍ͯΔ Skew Protection Λ࢖͏ඞཁ͕͋Δʢ΋͘͠
    ͸ࣗલͰ࣮૷ʣ



    View Slide

  36. ৼΔ෣͍Λ༧ଌ͠Α͏

    View Slide

  37. ৼΔ෣͍Λ༧ଌ͠Α͏
    •Ϣʔβʔ͕࣍ʹԿΛ͢Δͷ͔Λ༧ଌͯ͠proactiveʹৼΔ෣͏


    •ྫ͑͹ Google Map ͸੢΁ɺ੢΁ͱਐΉͱ࣍ʹ੢ͷํ޲ʹϦΫΤετ
    ͕དྷΔͱ༧ଌͯ͠ઌճΓͯ͠σʔλΛऔಘ͢Δ


    •Google ݕࡧ͸༧ଌݕࡧͷ݁ՌΛ prefetch ͯ͠Δ


    •͜͏͍͏ಈ͖ΛೖΕΔ΂͖ͩͱ͍͏࿩ɹ

    View Slide

  38. ৼΔ෣͍Λ༧ଌ͠Α͏
    •एׯ೉ͦ͠͏ʹݟ͑Δ


    •΍Γ͗͢ΔͱσʔλΛ༨෼ʹऔΓͦ͏͕ͩɺαʔό΁ͷϦιʔεΛ౤
    ػతʹ࢖͍ͭͭɺϢʔβ΁ͷ͓΋ͯͳ͠Λߦ͏ͱ͍͏όϥϯεΛͲ͏
    औΔ͔


    •ͪͳΈʹ Next.js ͸େ෼Ϣʔβʔ΁ͷ͓΋ͯͳ͠ʹدͬͯΔɻ

    View Slide

  39. ৼΔ෣͍Λ༧ଌ͠Α͏
    •Next.js ͸ next/link Λ࢖͏ͱϢʔβͷviewport಺ʹೖͬͨॠؒʹ
    prefetch͠ʹ͍͘


    •େ෼౤ػత͕ͩɺͦΕ͕ Next.js Λ࢖ͬͨαʔϏε͕ߴ଎ʹݟ͑Δཧ༝
    ͩͬͨΓ͢Δ


    •ҰํͰؾΛ͚ͭͳ͍ͱϢʔβͷΪΨ͸ୣͬͯͦ͏ͩ͠ɺαʔόʹ΋ෛ
    ՙ͸͔͔ͬͯΔɺαʔό΁ͷϦΫΤετ͕૿͑ͯͯίετ͕͔͔ͬͯ
    ͳ͍͔֬ೝ͓ͯ͘͠ͱྑ͍

    View Slide

  40. ·ͱΊ

    View Slide

  41. ·ͱΊ
    1.αʔόʔ͕ϖʔδΛϨϯμϦϯά͢Δͷ͸೚ҙͰ͸ͳ͍ɻ

    => SSR/SSG/ISRͳͲιϦϡʔγϣϯଟ਺


    2.Ϣʔβʔೖྗʹਝ଎ʹରԠ͠Α͏

    => ίʔυεϓϦοτ͕σϑΥϧτͰ࣮૷͞ΕͯΔ


    3.σʔλͷมߋʹ൓Ԡ͠Α͏

    => Next.js ͰͷରԠ͸ͳ͍͕ɺsocket.ioͳͲͱ૊Έ߹Θ࣮ͤͯ૷Ͱ͖
    Δ

    View Slide

  42. ·ͱΊ
    4.σʔλมߋΛαʔόʔͱͱ΋ʹίϯτϩʔϧ͠Α͏

    => Next.js ͰͷରԠ͸ͳ͍͕ɺService WorkerͳͲͱ૊Έ߹ΘͤΑ͏


    5.historyΛյ͢΂͖͡Όͳ͍ɺhistoryΛ֦ு͠Α͏

    => Page Router ͷ৔߹ɺ࠷௿ݶͷεΫϩʔϧҐஔΛ֮͑ͯΔɺ App Router ͸Ωϟογϡ͕ڧ͍ͷͰ
    ͦΕʹ೚ͤͯΔ


    6.ίʔυͷߋ৽ΛPush͠Α͏

    => Next.js ͸ page router Ͱ͸૊ΈࠐΈͷσʔλϑΣονؔ਺Λ࢖͑͹ݕ஌ͯ͘͠ΕΔ͕ɺ app
    router ͷ৔߹͸ vercel ʹཔΔܗʹͳΔ͔΋ʢSkew Protectionʣ


    7.ৼΔ෣͍Λ༧ଌ͠Α͏

    => next/link Ͱ౤ػతʹσʔλΛprefetchͯ͘͠ΕΔ

    View Slide

  43. ·ͱΊ
    • ϦονͳΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇΛվΊͯ঺հͭͭ͠ɺ
    Next.jsͷػೳΛ঺հͨ͠ɻ


    • Next.js ͳΜͰ࢖͏Μ͚ͩͬʁͬͯͳͬͨ࣌ʹʮϦονͳΞϓϦέʔγϣ
    ϯͷͨΊͷݪଇʯʹै͏ͨΊͩͱ͍͏ҙݟͰઆಘࡐྉʹ࢖͑Δͱࢥ͏ɻ


    • ΋ͪΖΜࣗ෼ͨͪͰ͜ΕΒΛ࣮૷Ͱ͖Δͱࢥ͏ͷͰઈରͷඞཁ৚݅ʹ͸
    ͳΓಘͳ͍ɻ


    • ͜Ε͔Β΋৭ʑΞοϓσʔτ͞Ε͍ͯ͘ͱࢥ͏ͷͰ஫ࢹ͍ͯ͘͠༧ఆ

    View Slide