TypeScriptを振り回せ！

2021-12-17 Harajuku.ts Meetup #1

Transcript

1. 5ZQF4DSJQUΛৼΓճͤʂ VIZP 
   )BSBKVLVUT
   
2. ֓ཁ 5ZQF4DSJQUʹৼΓճ͞Ε͍ͯ·ͤΜ͔ʁ ʮܕ͸Α͘෼͔Βͳ͍͚ͲͱΓ͋͑ͣίϯύΠϧ௨͔ͬͨΒ0,ʯ ʮ5ZQF4DSJQU͕͋ΔԸܙΛ͋·Γײ͡ͳ͍ʯ ʮϩδοΫతʹOVMM͕དྷͳ͍৔ॴͳͷʹܕʹOVMM͕࢒͍ͬͯΔʯ ʮؔ਺ͷฦΓ஋͕BOZͰ΋ίϯύΠϧΤϥʔʹ ͳΒͳ͍ͷͰؾʹ͠ͳ͍ʯ
3. ֓ཁ 5ZQF4DSJQUΛ࢖͍͜ͳ͢ஈ֊΁εςοϓΞοϓ͠Α͏ 5ZQF4DSJQUॳֶऀɾॳΊͯϓϩμΫγϣϯ޲͚5ZQF4DSJQU Λॻ͘ਓͳͲʹଃΔτʔΫ
4. 
   ܕγεςϜͷ໾ׂͱ໨త
5. ܕγεςϜͷ໾ׂʢҰൠ࿦ʣ ܕݕࠪ ೖྗࢧԉ ίʔυੜ੒ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ܕ৘ใΛ΋ͱʹίϯύΠϧޙͷϝϞϦϨΠΞ΢τ ͳͲ͕ܾ·Δ ʢi64͸ϏοτΈ͍ͨͳʣ
6. ܕγεςϜͷ໨తʢҰൠ࿦ʣ ܕݕࠪ ೖྗࢧԉ ίʔυੜ੒ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ϓϩάϥϜͷʢ͋Δछͷʣਖ਼͠͞Λอূ͢ΔͨΊʹར༻ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ։ൃޮ཰ͷ޲্ͷͨΊʹར༻ ܕ৘ใΛ΋ͱʹίϯύΠϧޙͷϝϞϦϨΠΞ΢τͳͲ ͕ܾ·Δ ͦ΋ͦ΋ίʔυΛίϯύΠϧͯ͠ಈ͔ͨ͢Ίʹඞཁ ʢ࣮ࡍʹ͸EZOBNJD
   UZQFʹର͢ΔCPYJOHͱ͔΋͋Δ͕ʜʜʣ
7. ܕγεςϜͷ໨తʢҰൠ࿦ʣ ίʔυੜ੒ ܕ৘ใΛ΋ͱʹίϯύΠϧޙͷϝϞϦϨΠΞ΢τͳͲ ͕ܾ·Δ ͦ΋ͦ΋ίʔυΛίϯύΠϧͯ͠ಈ͔ͨ͢Ίʹඞཁ ʢ࣮ࡍʹ͸EZOBNJD
   UZQFʹର͢ΔCPYJOHͱ͔΋͋Δ͕ʜʜʣ ίʔυੜ੒ʹܕ͕ඞཁͳݴޠͰ͸ͪΌΜͱܕΛ෇͚ͳ͍ͱ ϓϩάϥϜ͕ಈ͔ͳ͍ ίϯύΠϧΛ௨͢͜ͱ͕ͻͱͭͷΰʔϧʹͳΔ
8. Ұํɺ5ZQF4DSJQUͰ͸ ܕݕࠪ ೖྗࢧԉ ίʔυੜ੒ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ϓϩάϥϜͷʢ͋Δछͷʣਖ਼͠͞Λอূ͢ΔͨΊʹར༻ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ։ൃޮ཰ͷ޲্ͷͨΊʹར༻ 5ZQF4DSJQUͰ͸+BWB4DSJQU΁ͷม׵ʢτϥϯεύΠϧʣ ʹܕ৘ใΛ༻͍ͳ͍ ʢ͔ͩΒ#BCFM౳Ͱ΋ม׵Ͱ͖Δʣ
9. Ұํɺ5ZQF4DSJQUͰ͸ ίʔυੜ੒ 5ZQF4DSJQUͰ͸+BWB4DSJQU΁ͷม׵ʢτϥϯεύΠϧʣ ʹܕ৘ใΛ༻͍ͳ͍ ʢ͔ͩΒ#BCFM౳Ͱ΋ม׵Ͱ͖Δʣ ʮಈ͚͹͍͍ʯͱ͍͏ߟ͑ํͩͱͲ͜·Ͱ΋མͪΔ͜ͱ͕Ͱ͖Δ ʢ࠷ѱશ෦BOZͰ΋ಈ͘ʣ
10. Ұํɺ5ZQF4DSJQUͰ͸ ܕݕࠪ ೖྗࢧԉ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ϓϩάϥϜͷʢ͋Δछͷʣਖ਼͠͞Λอূ͢ΔͨΊʹར༻ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ։ൃޮ཰ͷ޲্ͷͨΊʹར༻ ϓϩάϥϜͷਖ਼͠͞Λ޲্͢Δͱ͍͏໨తҙ͕ࣝ 5ZQF4DSJQUΛ࢖͏্Ͱॏཁ
11. 5ZQF4DSJQUͰܕγεςϜΛ׆༻͢Δ ϓϩάϥϜͷਖ਼͠͞Λ޲্͢Δͱ͍͏໨తҙ͕ࣝ 5ZQF4DSJQUΛ࢖͏্Ͱॏཁ ඞཁ࠷௿ݶͷܕ͚ͩॻ͘ͷͰ͸ͳ͘ɺೳಈతʹܕΛ׆༻͢Δ ͜ͱͰ5ZQF4DSJQUͷྗΛҾ͖ग़͢͜ͱ͕Ͱ͖Δ
12. 5ZQF4DSJQUͰܕγεςϜΛ׆༻͢Δ 2
    ೳಈతʹܕΛ׆༻͢ΔͨΊʹඞཁͳ΋ͷ͸ʁ
13. 5ZQF4DSJQUͰܕγεςϜΛ׆༻͢Δ 2
    ೳಈతʹܕΛ׆༻͢ΔͨΊʹඞཁͳ΋ͷ͸ʁ "
    ΍Δؾͱ୳ڀ৺ͱ஌ࣝ
14. 
    ܕΛ׆༻͢ΔͨΊʹඞཁͳ ΍Δؾͱ୳ڀ৺ͱ஌ࣝ
15. ྫ
    TUSJDU/VMM$IFDLTΛ๨Ε͍ͯͨʂ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState<string>(null);
16. ྫ
    TUSJDU/VMM$IFDLTΛ๨Ε͍ͯͨʂ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState<string>(null); TUSJDU
    USVFʹ͠ͳ͍ͱίϯύΠϧ͕௨ͬͯ͠·͏ ม਺OBNF͸TUSJOHܕͳͷʹOVMM͕ೖ͍ͬͯΔঢ়ଶʹͳΔ ίʔυͷ҆શੑ͕௿͍ঢ়ଶ ˒ ίϯύΠϥΦϓγϣϯ͸ͳΔ΂͘ݫͯ͘͠͠5ZQF4DSJQUͷԸܙΛΑΓଟ͘ड͚Α͏ʂ
17. ஌ࣝͰ໰୊Λղܾ͢ΔγφϦΦ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState<string>(null); 5ZQF4DSJQU͸OVMM҆શੑΛඋ͑ͨݴޠͰ͋Δͱ͍͏஌ࣝΛ͍࣋ͬͯΔ ࠓճOVMM҆શੑ͕ಇ͍͍ͯͳ͍͜ͱʹٙ໰Λ๊͘ TUSJDU/VMM$IFDLT͕ແޮʹͳ͍ͬͯΔ͜ͱʹؾͮ͘
18. ΍Δؾͱ୳ڀ৺Ͱ໰୊Λղܾ͢ΔγφϦΦ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState<string>(null); TUSJOHܕͳͷʹOVMMͷՄೳੑ͕͋Δͱ͔͓͔͍͠ʂ ΋ͬͱ҆શੑΛߴΊΔ΍Γํ͕͋ΔͷͰ͸ʁʢ΍Δؾʣ άάΔʢ୳ڀ৺ʣ TUSJDU/VMM$IFDLT͕ແޮʹͳ͍ͬͯΔ͜ͱʹؾͮ͘
19. 5ZQF4DSJQUΛ࢖͍͜ͳͨ͢Ίͷͭͷಓے ᶃ ͱʹ͔͘஌ࣝΛ͚ͭͯϕετϓϥΫςΟεΛ࣮ફ͢Δ ᶄ ৗʹݱঢ়ʹٙ໰Λ࣋ͪ͞Βʹ༏Εͨ΍ΓํΛ୳ٻ͢Δ
20. 5ZQF4DSJQUΛ࢖͍͜ͳͨ͢Ίͷͭͷಓے ᶃ ͱʹ͔͘஌ࣝΛ͚ͭͯϕετϓϥΫςΟεΛ࣮ફ͢Δ ᶄ ৗʹݱঢ়ʹٙ໰Λ࣋ͪ͞Βʹ༏Εͨ΍ΓํΛ୳ٻ͢Δ ͓͢͢Ί –΍Δؾ͕͋Ε͹஌͕ࣝͳͯ͘΋Ͱ͖Δ –lಈ͘z͜ͱ͕ελʔτ஍఺ͳ5ZQF4DSJQUͱ૬ੑ͕ྑ͍΍Γํ –ݶք·Ͱ౸ୡ͢Ε͹ᶃʹҠߦͰ͖Δ
21. ྫ
    λϒΛ੾Γସ͑Δ΍ͭ // TypeScript + React ͷྫ const [tab, setTab] = useState<string>(“home”);
22. ྫ
    λϒΛ੾Γସ͑Δ΍ͭ // TypeScript + React ͷྫ const [tab, setTab] = useState<string>(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: // ൃੜ͠ͳ͍ return null; }
23. ྫ
    λϒΛ੾Γସ͑Δ΍ͭ // TypeScript + React ͷྫ const [tab, setTab] = useState<string>(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); ໰୊఺
    ϛε͠΍͍͢ setTab(“serach”); ൃੜ͠ͳ͍෼ذΛॻ͍͍ͯΔ // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: // ൃੜ͠ͳ͍ return null; }
24. 5ZQF4DSJQU࢖༻࣌ʹ͓͢͢Ίͷߟ͑ํ ʮਓ͕ؒؾΛ͚ͭͳ͚Ε͹ͳΒͳ͍ʯ ͱ͍͏৔໘ʹग़ձͬͨΒٙ໰ʹࢥ͏ 5ZQF4DSJQUʹνΣοΫͯ͠΋Β͑ͳ͍͔ߟ͑Δ –΋ͪΖΜ5ZQF4DSJQUʹ΋ݶք͸͋ΔͷͰແཧͳ͜ͱ΋͋Δ͕ɺ ͦΕͰ΋ߟ͑Δ͜ͱͰ5ZQF4DSJQUͷྗ͕෇͖·͢ –Ϣχοτςετͷํ͕ద͍ͯ͠Δ৔߹΋͋Δ͕ɺͦΕΛݟ෼͚Δ ͷ΋5ZQF4DSJQUྗͷ͏ͪͰ͢
25. ྫ
    λϒΛ੾Γସ͑Δ΍ͭʢղܾฤʣ type Tab = “home” | “search”; const [tab, setTab] = useState<Tab>(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; // default: // // ൃੜ͠ͳ͍ // return null; }
26. ྫ
    λϒΛ੾Γସ͑Δ΍ͭʢղܾฤʣ type Tab = “home” | “search”; const [tab, setTab] = useState<Tab>(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); UZQP͸ίϯύΠϧΤϥʔʹʂ setTab(“serach”); ൃੜ͠ͳ͍෼ذ͸ॻ͘ඞཁ͕ͳ͍ // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; // default: // // ൃੜ͠ͳ͍ // return null; }
27. 
    ίʔυʹҙਤΛࠐΊΑ͏
28. ྑ͍ίʔυ͸ҙਤ͕Θ͔Δ Ұൠ࿦ –ྑ͍ίʔυ͸ಡΊ͹ҙਤ͕Θ͔Δ –ίϝϯτ͸ίʔυຊମ͔ΒಡΈऔΕͳ͍ҙਤΛ ิ͏΋ͷͰ͋Δ –ͨͩಈ͚ͩ͘ͷίʔυΑΓ΋ɺଞͷਓ͕ಡΜͰ ҙਤΛཧղ͠΍͍͢ίʔυΛॻ͘΂͖
29. ίʔυ͔ΒಡΈऔΒΕΔҙਤͷྫ const [tab, setTab] = useState<string>(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: return null; } TUSJOHͳͷͰ͋ΒΏΔจࣈྻ Λड͚ೖΕΔTUBUFͰ͋Δ IPNF TFBSDIҎ֎͸Կ΋දࣔ ͠ͳ͍ͱ͍͏࢓༷Ͱ͋Δ
30. ࣮ࡍͷҙਤ const [tab, setTab] = useState<string>(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: return null; } TUSJOHͳͷͰ͋ΒΏΔจࣈྻ Λड͚ೖΕΔTUBUFͰ͋Δ IPNF TFBSDIҎ֎͸Կ΋දࣔ ͠ͳ͍ͱ͍͏࢓༷Ͱ͋Δ ಛఆͷจࣈྻ͔͠ೖΒͳ͍ ͚ͲTUSJOHͱॻ͍͍ͯΔ ࣮ࡍʹ͸ൃੜ͠ͳ͍έʔε͚ͩͲԿ͔ฦ͞ͳ ͍ͱίϯύΠϧΤϥʔʹͳΔͷͰॻ͍͍ͯΔ
31. ࣮ࡍͷҙਤ const [tab, setTab] = useState<string>(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: // ൃੜ͠ͳ͍ return null; } ίʔυ͔ΒಡΈऔΕͳ͍ҙਤΛ ิ͏ίϝϯτ
32. վྑ͞Εͨίʔυ͔Β఻ΘΔҙਤ type Tab = “home” | “search”; const [tab, setTab] = useState<Tab>(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; } ಛఆͷจࣈྻ͔͠ड͚෇͚ ͳ͍͜ͱ͕໌ࣔ͞Ε͍ͯΔ EFGBVMU͕ແ͍͜ͱͰ ໢ཏੑΛΞϐʔϧ ʢEFGBVMU͕ແ͍ͷʹίϯύΠϧΤϥʔ͕ग़ͳ͍͜ͱ͔ΒܕͰ໢ཏੑ͕อূ͞Ε͍ͯΔͱཧղͰ͖Δʣ
33. ྑ͍5ZQF4DSJQUίʔυͱ͸ ࣮ࡍͷҙਤͱίʔυ͔ΒಡΈऔΒΕΔҙਤ͕ Ұக͍ͯ͠Δίʔυ – औΓಘΔ஋Λਖ਼֬ʹهड़ͨ͠ܕΛ࢖͏ ʢstringͰ͸ͳ͘TabͳͲʣ – ࠷େݶMFUͰ͸ͳ͘DPOTUΛ࢖͏ – SFBEPOMZΛͳΔ΂͘෇͚Δ – ؔ਺ͷฦΓ஋ͷܕΛ໌ه͢΂͖৔໘Ͱ͸໌ه͢Δ – ͳͲͳͲʜ
34. ྫ
    ແ͍͔΋͠Εͳ͍σʔλ type Session = { userId: string | null; userName: string | null; userRole: “ADMIN” | “MEMBER” | null; // … }; ͋Γ͕ͪͳσʔλߏ଄ɿ ϩάΠϯ͍ͯͨ͠ΒVTFS*E
    VTFS/BNF
    VTFS3PMF͕શ෦ଘࡏ͢Δ
35. ྫ
    ແ͍͔΋͠Εͳ͍σʔλ // ϩάΠϯલ { userId: null, userName: null, userRole: null, } ͋Γ͕ͪͳσʔλߏ଄ɿ ϩάΠϯ͍ͯͨ͠ΒVTFS*E
    VTFS/BNF
    VTFS3PMF͕શ෦ଘࡏ͢Δ // ϩάΠϯޙ { userId: “xxxxxxxx”, userName: “uhyo”, userRole: “MEMBER”, }
36. ྫ
    ແ͍͔΋͠Εͳ͍σʔλ // ϩάΠϯલ { userId: null, userName: null, userRole: null, } ͋Γ͕ͪͳσʔλߏ଄ɿ ϩάΠϯ͍ͯͨ͠ΒVTFS*E
    VTFS/BNF
    VTFS3PMF͕શ෦ଘࡏ͢Δ // ϩάΠϯޙ { userId: “xxxxxxxx”, userName: “uhyo”, userRole: “MEMBER”, } " / 5 *1" 5 5 &3 /
37. ྫ
    ແ͍͔΋͠Εͳ͍σʔλ // ͜Ε͸Կʁ { userId: null, userName: “uhyo”, userRole: null, } ໰୊఺ɿ ͜ͷΑ͏ͳσʔλͷଘࡏΛڐͯ͠͠·͏ ʢຊདྷͷҙਤͱίʔυ͔Β఻ΘΔҙਤͷဃ཭ʣ
38. ྫ
    ແ͍͔΋͠Εͳ͍σʔλʢղܾฤʣ type Session = { user: { id: string; name: string; role: “ADMIN” | “MEMBER”; } | null; }; ਖ਼͍͠σʔλߏ଄ɿ JE
    OBNF
    SPMF͸શ෦ଘࡏ͢Δ͔શ෦ଘࡏ͠ͳ͍͔ͷ୒
39. ྫͷϙΠϯτ ϙΠϯτɿ ϢχΦϯܕ΍ϦςϥϧܕΛ࢖͏͜ͱͰຊདྷͷҙਤʹ͔ͳΓ͍ۙܕΛ දݱՄೳ ˒ ʮ%JTDSJNJOBUFE
    6OJPOʯΛ·ͩ஌Βͳ͍ਓ͸ཁνΣοΫʂ ݕࡧͯ͠ΈΑ͏
40. ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ ͯ͘͠ΕΔʣ ϩδοΫͷਖ਼͠͞ ʢਓ͕ؒؤுͬͯอূɾ ςετΛॻ͘ʣ ܕ͕Χόʔ͢ΔྖҬΛ ૿΍ͦ͏
41. ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ ͯ͘͠ΕΔʣ ϩδοΫͷਖ਼͠͞ ʢਓ͕ؒؤுͬͯอূɾ ςετΛॻ͘ʣ ͳΔ΂͘ݫ͍͠ίϯύΠϥΦϓγϣϯʹ͢Δ ҙਤΛਖ਼֬ʹදͨ͠ܕΛॻ͘ͳͲ
42. ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ ͯ͘͠ΕΔʣ ϩδοΫͷਖ਼͠͞ ʢਓ͕ؒؤுͬͯอূɾ ςετΛॻ͘ʣ ܕͷ΄͏͕ྑ͍ཧ༝ɿ • ܕγεςϜͷ΄͏͕ཧ࿦తഎܠʹ༏Εͯ ͓Γɺ໢ཏతʹνΣοΫͰ͖Δ • Ϣχοτςετ౳ΑΓ΋ܕ஫ऍͷ΄͏͕ υΩϡϝϯςʔγϣϯͱͯ͠༏Ε͍ͯΔ ʢҙਤ͕఻ΘΓ΍͍͢ʣ • ܕγεςϜͷ΄͏͕։ൃମݧ͕ྑ͍͜ͱ ͕ଟ͍
43. ·ͱΊ
44. ·ͱΊ
    5ZQF4DSJQUΛৼΓճͨ͢Ίʹ –ϓϩάϥϜͷਖ਼͠͞ͷͨΊʹ5ZQF4DSJQUΛ׆༻͢Δ ͱ͍͏໨తҙࣝΛ࣋ͱ͏ –ਓؒͰ͸ͳ͘5ZQF4DSJQU͕ؤுΔྖҬΛ૿΍ͦ͏ –͞Βʹ5ZQF4DSJQUΛ׆༻Ͱ͖ͳ͍͔ৗʹ໛ࡧ͠Α͏ 5ZQF4DSJQU͸ॊೈͳݴޠͰ͋ΔͨΊɺ΍ΓํʹΑͬͯ҆શੑϨϕϧʹ͕ࠩग़Δ ݴޠͰ͢ɻΑΓߴ͍҆શੑϨϕϧΛ໨ࢦͯ͠౒ྗ͠·͠ΐ͏
45. ͓·͚εϥΠυ
    '"2 2
    ݫ͍͠ίϯύΠϥΦϓγϣϯʹ͢Δͱ։ൃޮ཰͕མͪΔ 2
    ೉͍͠ܕΛॻ͘ͷ͸։ൃޮ཰͕མͪΔ "
    ؾͷ͍ͤͰ͢ɻ Φϓγϣϯ΍ܕΛ؇ͨ͘͜͠ͱͷπέ͸ɺʮෆ۩߹ͷ૿Ճʯ͔ ʮػցͷ୅ΘΓʹਓ͕ؒߟ͑Δ͜ͱͷ૿Ճʯͱݴ͏ܗͰݱΕ·͢ɻ લऀ͸ຊ຤స౗ͩ͠ɺޙऀ͸΋ͬͱ։ൃޮ཰͕མ͍ͪͯ·͢ɻ