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

TypeScriptを振り回せ!

uhyo
December 17, 2021

 TypeScriptを振り回せ!

2021-12-17 Harajuku.ts Meetup #1

uhyo

December 17, 2021
Tweet

More Decks by uhyo

Other Decks in Programming

Transcript

  1. ྫTUSJDU/VMM$IFDLTΛ๨Ε͍ͯͨʂ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const

    [name, setName] = useState<string>(null); TUSJDUUSVFʹ͠ͳ͍ͱίϯύΠϧ͕௨ͬͯ͠·͏ ม਺OBNF͸TUSJOHܕͳͷʹOVMM͕ೖ͍ͬͯΔঢ়ଶʹͳΔ ίʔυͷ҆શੑ͕௿͍ঢ়ଶ ˒ ίϯύΠϥΦϓγϣϯ͸ͳΔ΂͘ݫͯ͘͠͠5ZQF4DSJQUͷԸܙΛΑΓଟ͘ड͚Α͏ʂ
  2. ஌ࣝͰ໰୊Λղܾ͢ΔγφϦΦ // TypeScript + React ͷྫ // string ܕͷεςʔτͳͷʹॳظ஋Λnullʹ͍ͯ͠Δʂ const

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

    [name, setName] = useState<string>(null); TUSJOHܕͳͷʹOVMMͷՄೳੑ͕͋Δͱ͔͓͔͍͠ʂ ΋ͬͱ҆શੑΛߴΊΔ΍Γํ͕͋ΔͷͰ͸ʁʢ΍Δؾʣ άάΔʢ୳ڀ৺ʣ TUSJDU/VMM$IFDLT͕ແޮʹͳ͍ͬͯΔ͜ͱʹؾͮ͘
  4. ྫλϒΛ੾Γସ͑Δ΍ͭ // 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; }
  5. ྫλϒΛ੾Γସ͑Δ΍ͭ // 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; }
  6. ྫλϒΛ੾Γସ͑Δ΍ͭʢղܾฤʣ 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; }
  7. ྫλϒΛ੾Γସ͑Δ΍ͭʢղܾฤʣ 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; }
  8. ίʔυ͔ΒಡΈऔΒΕΔҙਤͷྫ const [tab, setTab] = useState<string>(“home”); // ίϯςϯπΛදࣔ switch (tab)

    { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: return null; } TUSJOHͳͷͰ͋ΒΏΔจࣈྻ Λड͚ೖΕΔTUBUFͰ͋Δ IPNF TFBSDIҎ֎͸Կ΋දࣔ ͠ͳ͍ͱ͍͏࢓༷Ͱ͋Δ
  9. ࣮ࡍͷҙਤ const [tab, setTab] = useState<string>(“home”); // ίϯςϯπΛදࣔ switch (tab)

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

    { case “home”: return <HomeTab />; case “search”: return <SearchTab />; default: // ൃੜ͠ͳ͍ return null; } ίʔυ͔ΒಡΈऔΕͳ͍ҙਤΛ ิ͏ίϝϯτ
  11. վྑ͞Εͨίʔυ͔Β఻ΘΔҙਤ type Tab = “home” | “search”; const [tab, setTab]

    = useState<Tab>(“home”); // ίϯςϯπΛදࣔ switch (tab) { case “home”: return <HomeTab />; case “search”: return <SearchTab />; } ಛఆͷจࣈྻ͔͠ड͚෇͚ ͳ͍͜ͱ͕໌ࣔ͞Ε͍ͯΔ EFGBVMU͕ແ͍͜ͱͰ ໢ཏੑΛΞϐʔϧ ʢEFGBVMU͕ແ͍ͷʹίϯύΠϧΤϥʔ͕ग़ͳ͍͜ͱ͔ΒܕͰ໢ཏੑ͕อূ͞Ε͍ͯΔͱཧղͰ͖Δʣ
  12. ྫແ͍͔΋͠Εͳ͍σʔλ type Session = { userId: string | null; userName:

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

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

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

    } ໰୊఺ɿ ͜ͷΑ͏ͳσʔλͷଘࡏΛڐͯ͠͠·͏ ʢຊདྷͷҙਤͱίʔυ͔Β఻ΘΔҙਤͷဃ཭ʣ
  16. ྫແ͍͔΋͠Εͳ͍σʔλʢղܾฤʣ type Session = { user: { id: string; name:

    string; role: “ADMIN” | “MEMBER”; } | null; }; ਖ਼͍͠σʔλߏ଄ɿ JE OBNF SPMF͸શ෦ଘࡏ͢Δ͔શ෦ଘࡏ͠ͳ͍͔ͷ୒
  17. ͳΔ΂͘5ZQF4DSJQUΛ׆༻͢Δ ί ồ υ ͷ ਖ਼ ͠ ͞ ܕͷਖ਼͠͞ ʢ5ZQF4DSJQU͕ܕνΣοΫ

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

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

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