TypeScriptを振り回せ！

by uhyo

Slide 1

Slide 1 text

5ZQF4DSJQUΛৼΓճͤʂ VIZP )BSBKVLVUT

Slide 2

Slide 2 text

֓ཁ 5ZQF4DSJQUʹৼΓճ͞Ε͍ͯ·ͤΜ͔ʁ ʮܕ͸Α͘෼͔Βͳ͍͚ͲͱΓ͋͑ͣίϯύΠϧ௨͔ͬͨΒ0,ʯ ʮ5ZQF4DSJQU͕͋ΔԸܙΛ͋·Γײ͡ͳ͍ʯ ʮϩδοΫతʹOVMM͕དྷͳ͍৔ॴͳͷʹܕʹOVMM͕࢒͍ͬͯΔʯ ʮؔ਺ͷฦΓ஋͕BOZͰ΋ίϯύΠϧΤϥʔʹ ͳΒͳ͍ͷͰؾʹ͠ͳ͍ʯ

Slide 3

Slide 3 text

֓ཁ 5ZQF4DSJQUΛ࢖͍͜ͳ͢ஈ֊΁εςοϓΞοϓ͠Α͏ 5ZQF4DSJQUॳֶऀɾॳΊͯϓϩμΫγϣϯ޲͚5ZQF4DSJQU Λॻ͘ਓͳͲʹଃΔτʔΫ

Slide 4

Slide 4 text

ܕγεςϜͷ໾ׂͱ໨త

Slide 5

Slide 5 text

ܕγεςϜͷ໾ׂʢҰൠ࿦ʣ ܕݕࠪ ೖྗࢧԉ ίʔυੜ੒ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ܕ৘ใΛ΋ͱʹίϯύΠϧޙͷϝϞϦϨΠΞ΢τ ͳͲ͕ܾ·Δ ʢi64͸ϏοτΈ͍ͨͳʣ

Slide 6

Slide 6 text

ܕγεςϜͷ໨తʢҰൠ࿦ʣ ܕݕࠪ ೖྗࢧԉ ίʔυੜ੒ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ϓϩάϥϜͷʢ͋Δछͷʣਖ਼͠͞Λอূ͢ΔͨΊʹར༻ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ։ൃޮ཰ͷ޲্ͷͨΊʹར༻ ܕ৘ใΛ΋ͱʹίϯύΠϧޙͷϝϞϦϨΠΞ΢τͳͲ ͕ܾ·Δ ͦ΋ͦ΋ίʔυΛίϯύΠϧͯ͠ಈ͔ͨ͢Ίʹඞཁ ʢ࣮ࡍʹ͸EZOBNJDUZQFʹର͢ΔCPYJOHͱ͔΋͋Δ͕ʜʜʣ

Slide 7

Slide 7 text

ܕγεςϜͷ໨తʢҰൠ࿦ʣ ίʔυੜ੒ ܕ৘ใΛ΋ͱʹίϯύΠϧޙͷϝϞϦϨΠΞ΢τͳͲ ͕ܾ·Δ ͦ΋ͦ΋ίʔυΛίϯύΠϧͯ͠ಈ͔ͨ͢Ίʹඞཁ ʢ࣮ࡍʹ͸EZOBNJDUZQFʹର͢ΔCPYJOHͱ͔΋͋Δ͕ʜʜʣ ίʔυੜ੒ʹܕ͕ඞཁͳݴޠͰ͸ͪΌΜͱܕΛ෇͚ͳ͍ͱ ϓϩάϥϜ͕ಈ͔ͳ͍ ίϯύΠϧΛ௨͢͜ͱ͕ͻͱͭͷΰʔϧʹͳΔ

Slide 8

Slide 8 text

Ұํɺ5ZQF4DSJQUͰ͸ ܕݕࠪ ೖྗࢧԉ ίʔυੜ੒ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ϓϩάϥϜͷʢ͋Δछͷʣਖ਼͠͞Λอূ͢ΔͨΊʹར༻ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ։ൃޮ཰ͷ޲্ͷͨΊʹར༻ 5ZQF4DSJQUͰ͸+BWB4DSJQU΁ͷม׵ʢτϥϯεύΠϧʣ ʹܕ৘ใΛ༻͍ͳ͍ ʢ͔ͩΒ#BCFM౳Ͱ΋ม׵Ͱ͖Δʣ

Slide 9

Slide 9 text

Ұํɺ5ZQF4DSJQUͰ͸ ίʔυੜ੒ 5ZQF4DSJQUͰ͸+BWB4DSJQU΁ͷม׵ʢτϥϯεύΠϧʣ ʹܕ৘ใΛ༻͍ͳ͍ ʢ͔ͩΒ#BCFM౳Ͱ΋ม׵Ͱ͖Δʣ ʮಈ͚͹͍͍ʯͱ͍͏ߟ͑ํͩͱͲ͜·Ͱ΋མͪΔ͜ͱ͕Ͱ͖Δ ʢ࠷ѱશ෦BOZͰ΋ಈ͘ʣ

Slide 10

Slide 10 text

Ұํɺ5ZQF4DSJQUͰ͸ ܕݕࠪ ೖྗࢧԉ ਖ਼͕͠͞ূ໌Ͱ͖ͳ͍ϓϩάϥϜʹରͯ͠ ίϯύΠϧΤϥʔΛग़ͯ͘͠ΕΔ ϓϩάϥϜͷʢ͋Δछͷʣਖ਼͠͞Λอূ͢ΔͨΊʹར༻ ܕ৘ใΛ΋ͱʹೖྗิ׬ͳͲΛఏڙͯ͘͠ΕΔ ։ൃޮ཰ͷ޲্ͷͨΊʹར༻ ϓϩάϥϜͷਖ਼͠͞Λ޲্͢Δͱ͍͏໨తҙ͕ࣝ 5ZQF4DSJQUΛ࢖͏্Ͱॏཁ

Slide 11

Slide 11 text

5ZQF4DSJQUͰܕγεςϜΛ׆༻͢Δ ϓϩάϥϜͷਖ਼͠͞Λ޲্͢Δͱ͍͏໨తҙ͕ࣝ 5ZQF4DSJQUΛ࢖͏্Ͱॏཁ ඞཁ࠷௿ݶͷܕ͚ͩॻ͘ͷͰ͸ͳ͘ɺೳಈతʹܕΛ׆༻͢Δ ͜ͱͰ5ZQF4DSJQUͷྗΛҾ͖ग़͢͜ͱ͕Ͱ͖Δ

Slide 12

Slide 12 text

5ZQF4DSJQUͰܕγεςϜΛ׆༻͢Δ 2ೳಈతʹܕΛ׆༻͢ΔͨΊʹඞཁͳ΋ͷ͸ʁ

Slide 13

Slide 13 text

5ZQF4DSJQUͰܕγεςϜΛ׆༻͢Δ 2ೳಈతʹܕΛ׆༻͢ΔͨΊʹඞཁͳ΋ͷ͸ʁ "΍Δؾͱ୳ڀ৺ͱ஌ࣝ

Slide 14

Slide 14 text

ܕΛ׆༻͢ΔͨΊʹඞཁͳ ΍Δؾͱ୳ڀ৺ͱ஌ࣝ

Slide 15

Slide 15 text

ྫTUSJDU/VMM$IFDLTΛ๨Ε͍ͯͨʂ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState(null);

Slide 16

Slide 16 text

ྫTUSJDU/VMM$IFDLTΛ๨Ε͍ͯͨʂ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState(null); TUSJDUUSVFʹ͠ͳ͍ͱίϯύΠϧ͕௨ͬͯ͠·͏ ม਺OBNF͸TUSJOHܕͳͷʹOVMM͕ೖ͍ͬͯΔঢ়ଶʹͳΔ ίʔυͷ҆શੑ͕௿͍ঢ়ଶ ˒ ίϯύΠϥΦϓγϣϯ͸ͳΔ΂͘ݫͯ͘͠͠5ZQF4DSJQUͷԸܙΛΑΓଟ͘ड͚Α͏ʂ

Slide 17

Slide 17 text

஌ࣝͰ໰୊Λղܾ͢ΔγφϦΦ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState(null); 5ZQF4DSJQU͸OVMM҆શੑΛඋ͑ͨݴޠͰ͋Δͱ͍͏஌ࣝΛ͍࣋ͬͯΔ ࠓճOVMM҆શੑ͕ಇ͍͍ͯͳ͍͜ͱʹٙ໰Λ๊͘ TUSJDU/VMM$IFDLT͕ແޮʹͳ͍ͬͯΔ͜ͱʹؾͮ͘

Slide 18

Slide 18 text

΍Δؾͱ୳ڀ৺Ͱ໰୊Λղܾ͢ΔγφϦΦ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const [name, setName] = useState(null); TUSJOHܕͳͷʹOVMMͷՄೳੑ͕͋Δͱ͔͓͔͍͠ʂ ΋ͬͱ҆શੑΛߴΊΔ΍Γํ͕͋ΔͷͰ͸ʁʢ΍Δؾʣ άάΔʢ୳ڀ৺ʣ TUSJDU/VMM$IFDLT͕ແޮʹͳ͍ͬͯΔ͜ͱʹؾͮ͘

Slide 19

Slide 19 text

5ZQF4DSJQUΛ࢖͍͜ͳͨ͢Ίͷͭͷಓے ᶃ ͱʹ͔͘஌ࣝΛ͚ͭͯϕετϓϥΫςΟεΛ࣮ફ͢Δ ᶄ ৗʹݱঢ়ʹٙ໰Λ࣋ͪ͞Βʹ༏Εͨ΍ΓํΛ୳ٻ͢Δ

Slide 20

Slide 20 text

5ZQF4DSJQUΛ࢖͍͜ͳͨ͢Ίͷͭͷಓے ᶃ ͱʹ͔͘஌ࣝΛ͚ͭͯϕετϓϥΫςΟεΛ࣮ફ͢Δ ᶄ ৗʹݱঢ়ʹٙ໰Λ࣋ͪ͞Βʹ༏Εͨ΍ΓํΛ୳ٻ͢Δ ͓͢͢Ί ΍Δؾ͕͋Ε͹஌͕ࣝͳͯ͘΋Ͱ͖Δ lಈ͘z͜ͱ͕ελʔτ஍఺ͳ5ZQF4DSJQUͱ૬ੑ͕ྑ͍΍Γํ ݶք·Ͱ౸ୡ͢Ε͹ᶃʹҠߦͰ͖Δ

Slide 21

Slide 21 text

ྫλϒΛ੾Γସ͑Δ΍ͭ // TypeScript + React ͷྫ const [tab, setTab] = useState(“home”);

Slide 22

Slide 22 text

ྫλϒΛ੾Γସ͑Δ΍ͭ // TypeScript + React ͷྫ const [tab, setTab] = useState(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; default: // ൃੜ͠ͳ͍ return null; }

Slide 23

Slide 23 text

ྫλϒΛ੾Γସ͑Δ΍ͭ // TypeScript + React ͷྫ const [tab, setTab] = useState(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); ໰୊఺ ϛε͠΍͍͢ setTab(“serach”); ൃੜ͠ͳ͍෼ذΛॻ͍͍ͯΔ // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; default: // ൃੜ͠ͳ͍ return null; }

Slide 24

Slide 24 text

5ZQF4DSJQU࢖༻࣌ʹ͓͢͢Ίͷߟ͑ํ ʮਓ͕ؒؾΛ͚ͭͳ͚Ε͹ͳΒͳ͍ʯ ͱ͍͏৔໘ʹग़ձͬͨΒٙ໰ʹࢥ͏ 5ZQF4DSJQUʹνΣοΫͯ͠΋Β͑ͳ͍͔ߟ͑Δ ΋ͪΖΜ5ZQF4DSJQUʹ΋ݶք͸͋ΔͷͰແཧͳ͜ͱ΋͋Δ͕ɺ ͦΕͰ΋ߟ͑Δ͜ͱͰ5ZQF4DSJQUͷྗ͕෇͖·͢ Ϣχοτςετͷํ͕ద͍ͯ͠Δ৔߹΋͋Δ͕ɺͦΕΛݟ෼͚Δ ͷ΋5ZQF4DSJQUྗͷ͏ͪͰ͢

Slide 25

Slide 25 text

ྫλϒΛ੾Γସ͑Δ΍ͭʢղܾฤʣ type Tab = “home” | “search”; const [tab, setTab] = useState(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; // default: // // ൃੜ͠ͳ͍ // return null; }

Slide 26

Slide 26 text

ྫλϒΛ੾Γସ͑Δ΍ͭʢղܾฤʣ type Tab = “home” | “search”; const [tab, setTab] = useState(“home”); // λϒ੾Γସ͑ setTab(“home”); setTab(“search”); UZQP͸ίϯύΠϧΤϥʔʹʂ setTab(“serach”); ൃੜ͠ͳ͍෼ذ͸ॻ͘ඞཁ͕ͳ͍ // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; // default: // // ൃੜ͠ͳ͍ // return null; }

Slide 27

Slide 27 text

ίʔυʹҙਤΛࠐΊΑ͏

Slide 28

Slide 28 text

ྑ͍ίʔυ͸ҙਤ͕Θ͔Δ Ұൠ࿦ ྑ͍ίʔυ͸ಡΊ͹ҙਤ͕Θ͔Δ ίϝϯτ͸ίʔυຊମ͔ΒಡΈऔΕͳ͍ҙਤΛ ิ͏΋ͷͰ͋Δ ͨͩಈ͚ͩ͘ͷίʔυΑΓ΋ɺଞͷਓ͕ಡΜͰ ҙਤΛཧղ͠΍͍͢ίʔυΛॻ͘΂͖

Slide 29

Slide 29 text

ίʔυ͔ΒಡΈऔΒΕΔҙਤͷྫ const [tab, setTab] = useState(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; default: return null; } TUSJOHͳͷͰ͋ΒΏΔจࣈྻ Λड͚ೖΕΔTUBUFͰ͋Δ IPNF TFBSDIҎ֎͸Կ΋දࣔ ͠ͳ͍ͱ͍͏࢓༷Ͱ͋Δ

Slide 30

Slide 30 text

࣮ࡍͷҙਤ const [tab, setTab] = useState(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; default: return null; } TUSJOHͳͷͰ͋ΒΏΔจࣈྻ Λड͚ೖΕΔTUBUFͰ͋Δ IPNF TFBSDIҎ֎͸Կ΋දࣔ ͠ͳ͍ͱ͍͏࢓༷Ͱ͋Δ ಛఆͷจࣈྻ͔͠ೖΒͳ͍ ͚ͲTUSJOHͱॻ͍͍ͯΔ ࣮ࡍʹ͸ൃੜ͠ͳ͍έʔε͚ͩͲԿ͔ฦ͞ͳ ͍ͱίϯύΠϧΤϥʔʹͳΔͷͰॻ͍͍ͯΔ

Slide 31

Slide 31 text

࣮ࡍͷҙਤ const [tab, setTab] = useState(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; default: // ൃੜ͠ͳ͍ return null; } ίʔυ͔ΒಡΈऔΕͳ͍ҙਤΛ ิ͏ίϝϯτ

Slide 32

Slide 32 text

վྑ͞Εͨίʔυ͔Β఻ΘΔҙਤ type Tab = “home” | “search”; const [tab, setTab] = useState(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return ; case “search”: return ; } ಛఆͷจࣈྻ͔͠ड͚෇͚ ͳ͍͜ͱ͕໌ࣔ͞Ε͍ͯΔ EFGBVMU͕ແ͍͜ͱͰ ໢ཏੑΛΞϐʔϧ ʢEFGBVMU͕ແ͍ͷʹίϯύΠϧΤϥʔ͕ग़ͳ͍͜ͱ͔ΒܕͰ໢ཏੑ͕อূ͞Ε͍ͯΔͱཧղͰ͖Δʣ

Slide 33

Slide 33 text

ྑ͍5ZQF4DSJQUίʔυͱ͸ ࣮ࡍͷҙਤͱίʔυ͔ΒಡΈऔΒΕΔҙਤ͕ Ұக͍ͯ͠Δίʔυ औΓಘΔ஋Λਖ਼֬ʹهड़ͨ͠ܕΛ࢖͏ ʢstringͰ͸ͳ͘TabͳͲʣ ࠷େݶMFUͰ͸ͳ͘DPOTUΛ࢖͏ SFBEPOMZΛͳΔ΂͘෇͚Δ ؔ਺ͷฦΓ஋ͷܕΛ໌ه͢΂͖৔໘Ͱ͸໌ه͢Δ ͳͲͳͲʜ

Slide 34

Slide 34 text

ྫແ͍͔΋͠Εͳ͍σʔλ type Session = { userId: string | null; userName: string | null; userRole: “ADMIN” | “MEMBER” | null; // … }; ͋Γ͕ͪͳσʔλߏ଄ɿ ϩάΠϯ͍ͯͨ͠ΒVTFS*E VTFS/BNF VTFS3PMF͕શ෦ଘࡏ͢Δ

Slide 35

Slide 35 text

ྫແ͍͔΋͠Εͳ͍σʔλ // ϩάΠϯલ { userId: null, userName: null, userRole: null, } ͋Γ͕ͪͳσʔλߏ଄ɿ ϩάΠϯ͍ͯͨ͠ΒVTFS*E VTFS/BNF VTFS3PMF͕શ෦ଘࡏ͢Δ // ϩάΠϯޙ { userId: “xxxxxxxx”, userName: “uhyo”, userRole: “MEMBER”, }

Slide 36

Slide 36 text

Slide 37

Slide 37 text

ྫແ͍͔΋͠Εͳ͍σʔλ // ͜Ε͸Կʁ { userId: null, userName: “uhyo”, userRole: null, } ໰୊఺ɿ ͜ͷΑ͏ͳσʔλͷଘࡏΛڐͯ͠͠·͏ ʢຊདྷͷҙਤͱίʔυ͔Β఻ΘΔҙਤͷဃ཭ʣ

Slide 38

Slide 38 text

ྫແ͍͔΋͠Εͳ͍σʔλʢղܾฤʣ type Session = { user: { id: string; name: string; role: “ADMIN” | “MEMBER”; } | null; }; ਖ਼͍͠σʔλߏ଄ɿ JE OBNF SPMF͸શ෦ଘࡏ͢Δ͔શ෦ଘࡏ͠ͳ͍͔ͷ୒

Slide 39

Slide 39 text

ྫͷϙΠϯτ ϙΠϯτɿ ϢχΦϯܕ΍ϦςϥϧܕΛ࢖͏͜ͱͰຊདྷͷҙਤʹ͔ͳΓ͍ۙܕΛ දݱՄೳ ˒ ʮ%JTDSJNJOBUFE6OJPOʯΛ·ͩ஌Βͳ͍ਓ͸ཁνΣοΫʂ ݕࡧͯ͠ΈΑ͏

Slide 40

Slide 40 text

ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ ͯ͘͠ΕΔʣ ϩδοΫͷਖ਼͠͞ ʢਓ͕ؒؤுͬͯอূɾ ςετΛॻ͘ʣ ܕ͕Χόʔ͢ΔྖҬΛ ૿΍ͦ͏

Slide 41

Slide 41 text

ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ ͯ͘͠ΕΔʣ ϩδοΫͷਖ਼͠͞ ʢਓ͕ؒؤுͬͯอূɾ ςετΛॻ͘ʣ ͳΔ΂͘ݫ͍͠ίϯύΠϥΦϓγϣϯʹ͢Δ ҙਤΛਖ਼֬ʹදͨ͠ܕΛॻ͘ͳͲ

Slide 42

Slide 42 text

ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ ͯ͘͠ΕΔʣ ϩδοΫͷਖ਼͠͞ ʢਓ͕ؒؤுͬͯอূɾ ςετΛॻ͘ʣ ܕͷ΄͏͕ྑ͍ཧ༝ɿ • ܕγεςϜͷ΄͏͕ཧ࿦తഎܠʹ༏Εͯ ͓Γɺ໢ཏతʹνΣοΫͰ͖Δ • Ϣχοτςετ౳ΑΓ΋ܕ஫ऍͷ΄͏͕ υΩϡϝϯςʔγϣϯͱͯ͠༏Ε͍ͯΔ ʢҙਤ͕఻ΘΓ΍͍͢ʣ • ܕγεςϜͷ΄͏͕։ൃମݧ͕ྑ͍͜ͱ ͕ଟ͍

Slide 43

Slide 43 text

·ͱΊ

Slide 44

Slide 44 text

·ͱΊ5ZQF4DSJQUΛৼΓճͨ͢Ίʹ ϓϩάϥϜͷਖ਼͠͞ͷͨΊʹ5ZQF4DSJQUΛ׆༻͢Δ ͱ͍͏໨తҙࣝΛ࣋ͱ͏ ਓؒͰ͸ͳ͘5ZQF4DSJQU͕ؤுΔྖҬΛ૿΍ͦ͏ ͞Βʹ5ZQF4DSJQUΛ׆༻Ͱ͖ͳ͍͔ৗʹ໛ࡧ͠Α͏ 5ZQF4DSJQU͸ॊೈͳݴޠͰ͋ΔͨΊɺ΍ΓํʹΑͬͯ҆શੑϨϕϧʹ͕ࠩग़Δ ݴޠͰ͢ɻΑΓߴ͍҆શੑϨϕϧΛ໨ࢦͯ͠౒ྗ͠·͠ΐ͏

Slide 45

Slide 45 text

͓·͚εϥΠυ'"2 2ݫ͍͠ίϯύΠϥΦϓγϣϯʹ͢Δͱ։ൃޮ཰͕མͪΔ 2೉͍͠ܕΛॻ͘ͷ͸։ൃޮ཰͕མͪΔ "ؾͷ͍ͤͰ͢ɻ Φϓγϣϯ΍ܕΛ؇ͨ͘͜͠ͱͷπέ͸ɺʮෆ۩߹ͷ૿Ճʯ͔ ʮػցͷ୅ΘΓʹਓ͕ؒߟ͑Δ͜ͱͷ૿Ճʯͱݴ͏ܗͰݱΕ·͢ɻ લऀ͸ຊ຤స౗ͩ͠ɺޙऀ͸΋ͬͱ։ൃޮ཰͕མ͍ͪͯ·͢ɻ