大規模なコードベースの改修のために自作TypeScriptツールを作るメリット

「TSKaigi Mashup #1 フロントエンド」の登壇資料です。

Transcript

1. 
   ߵ૥
   ࿨࢘
   
   ,B[VTIJ
   ,POPTV େن໛ͳίʔυϕʔεͷվमͷͨΊʹ
   ࣗ࡞5ZQF4DSJQUπʔϧΛ࡞ΔϝϦοτ 54,BJHJ
   αϒΠϕϯτ
   ϑϩϯτΤϯυ
2. ࣗݾ঺հ ߵ૥
   ࿨࢘
   
   ,B[VTIJ
   ,POPTV
   9
   !LB[VTIJLPOPTV
   -*/&Ϡϑʔגࣜձࣾ
   ιϑτ΢ΣΞΤϯδχΞ
   ʮ-*/&εΩϚχʯϑϩϯτΤϯυνʔϜͷ
   ΤϯδχΞϦϯάϚωʔδϟʔɾςοΫϦʔυ
3. ʮϑϩϯτΤϯυͷେن໛ͳίʔυϕʔεͷվमʯʹ͍ͭͯ࿩͠·͢ 💭
   ϥΠϒϥϦͷΞοϓάϨʔυɾஔ͖׵͑ 💭
   ϓϩμΫτͷϦχϡʔΞϧ
4. େن໛ͳίʔυϕʔεͷվमͰى͖Δ໰୊ ࣮૷ऀ ϨϏϡϫʔ ࠩ෼ͷྔ
   ˠ୯ௐͰࣅͨฤू͕ଓ͖ෛ୲
   ௕ظؒʹΘͨΔ࡞ۀ
   ˠ௨ৗͷ։ൃͱͷཱ྆ͷ೉͠͞ ࠩ෼ͷྔ
   ˠ࣮૷࿙Εͷݟམͱ͠
   ɹϨϏϡϫʔͷෛ୲
5. ͜ͷ໰୊ͷղܾ͢ΔͨΊɺʮࣗ࡞5ZQF4DSJQUπʔϧʯΛ࡞Γ·ͨ͠
6. ʮࣗ࡞5ZQF4DSJQUπʔϧʯͱ͸ͳʹ͔ʁ let message = 'hello world'; const message = 'hello world'; ͋ΔҰఆͷϧʔϧͰ5ZQF4DSJQUϑΝΠϧΛฤू্͠ॻ͖͢Δ΋ͷ 🛠
7. ʮࣗ࡞5ZQF4DSJQUπʔϧʯͰ΍ͬͨ͜ͱ ର৅
   5ZQF4DSJQU3FBDUͷίʔυϕʔε
   ίϯϙʔωϯτϥΠϒϥϦͷϦϓϨΠε
   ࣮ݱͨ͜͠ͱ
   ϓϩδΣΫτ಺Ͱࢀর͕ͳ͘ͳͬͨίϯϙʔωϯτΛ࡟আ
8. ʮࣗ࡞5ZQF4DSJQUπʔϧʯʹΑͬͯ΋ͨΒ͞ΕͨϝϦοτ ࣮૷ऀ ϨϏϡϫʔ ୯ௐͳมߋ͕ଓ͘͜ͱʹΑΔ
   ϛεɾ࿙Εͷݮগ
   มߋͷΞϓϩʔνΛ
   ͍Ζ͍Ζͱࢼ͢ίετͷ௿Լ ϨϏϡʔର৅͕ʮࠩ෼ʯ͔Β
   ʮࠩ෼Λੜ੒͢Δࠩ෼ʯʹมԽ
   ˠෛ୲͕௿ݮ
9. ίʔυΛૢ࡞͢Δ΄͔ͷํ๏ͱͷൺֱ regex ̋
   खܰ͞
   ʷ
   ෳࡶͳૢ࡞ͷ࣮૷ ̋
   ίʔυͷߏ଄ʹ
   جͮ͘มߋ
   ˚ϑΝΠϧ͝ͱͷ৘ใ ͔͠ར༻Ͱ͖ͳ͍
   ̋
   υΩϡϝϯτɾࢀߟ ʹͳΔࢿྉ ̋
   ϓϩδΣΫτͷߏ੒ ʢࢀরؔ܎ͳͲʣʹج ͮ͘มߋ
   ̋
   ܕ৘ใͷར༻
   ˚
   υΩϡϝϯτɾࢀߟ ʹͳΔࢿྉ
10. πʔϧΛ࡞Δ্ͰͷϙΠϯτ పఈతͳݸผ࠷దԽ
    ˠ൚༻తͳπʔϧΛ࡞ΒͣɺϓϩδΣΫτ಺ͷίʔυͷύλʔϯ͚ͩ໢ཏ͢Δ
    ͷࣗಈԽ
    ˠ࢒Γͷ͸%SBGU
    13Λݟͳ͕ΒखಈͰରԠ
11. 5ZQF4DSJQUΛ࢖ͬͯίʔυΛૢ࡞ͯ͠ΈΑ͏ʂ TypeScript API ts-morph ʷυΩϡϝϯτͷෆ଍
    ˚USBOTGPNFSΛ࢖͏ͱϑΥʔϚο τ͕ଛͳΘΕΔ
    ̋ෳࡶͳૢ࡞ 5ZQF4DSJQU
    "1*ͷ
    ϥούʔϥΠϒϥϦ
    ̋
    ൚༻తͳૢ࡞Λ໢ཏ
    ̋υΩϡϝϯτ͕ॆ࣮
    ̋ϑΥʔϚοτ͕ҡ࣋͞ΕΔ
    ˚ෳࡶͳૢ࡞
    import ts from 'typescript';
12. ͍͞͝ʹ w ʮࠩ෼࡞Γʯ͔Βʮࠩ෼Λੜ੒͢Δࠩ෼࡞Γʯ΁ͷస׵
    w 044Խ
    w HJUIVCDPNMJOFUTSFNPWFVOVTFE
13. ʮࣗ࡞5ZQF4DSJQUπʔϧʯΛ࡞ͬͯେن໛ͳվमΛ௙Βͤ·͠ΐ͏ʂ
14. 5IBOL
    ZPV