社内ツールから生まれたOSS "ts-remove-unused" によるフロントエンド開発の効率化と品質の向上

「UIT × Bonfire Front-end Meetup #1」の発表資料です。
https://uit.connpass.com/event/300284/

1. ,B[VTIJ
   ,POPTV
   !LB[VTIJLPOPTV
   -:
   $PSQPSBUJPO
    ࣾ಺πʔϧ͔Βੜ·Εͨ044
   lUTSFNPWFVOVTFEz
   ʹΑΔϑϩϯτΤϯυ։ൃͷޮ཰Խͱ඼࣭ͷ޲্ 6*5
   ʷ
   #PO fi SF
   'SPOUFOE
   .FFUVQ
   
   
2. HJUIVCDPNMJOFUTSFNPWFVOVTFE
3. . ├── node_modules/ ├── src/ │ ├── App.tsx │ ├── Button.tsx │ └── Heading.tsx └── package.json ػೳͷ঺հ
4. // src/App.tsx import { ReactNode } from 'react'; import { render } from 'react-dom'; import { Button } from './Button'; const App = () => ( <div> <Button>click me</Button> </div> ); render(<App />, document.querySelector('#app')); // src/Heading.tsx export const Heading = () => <h1>My Sample App</h1>; // src/Button.tsx export const Button = ({ children }: { children?: ReactNode }) => ( <button type="button">{children}</button> ); export const label = 'button label'; #FGPSF
5. // src/App.tsx import { ReactNode } from 'react'; import { render } from 'react-dom'; const App = () => ( <div> <Button>click me</Button> </div> ); render(<App />, document.querySelector('#app')); // src/Button.tsx export const Button = ({ children }: { children?: ReactNode }) => ( <button type="button">{children}</button> ); "GUFS
6. @@ -11,12 +11,7 @@ const App = () => ( render(<App />, document.querySelector('#app')); -// src/Heading.tsx -export const Heading = () => <h1>My Sample App</h1>; - // src/Button.tsx export const Button = ({ children }: { children?: ReactNode }) => ( <button type="button">{children}</button> ); - -export const label = 'button label'; %JGG
7. UTSFNPWFVOVTFEͱ͸ FYQPSU͞Ε͍ͯΔ͜ͱͰؾ͖ͮʹ͍͘σουίʔυΛࣗಈͰ࡟আ͢Δπʔϧ
   w ;FSP
   DPO fi H
   w UTDPO fi HKTPOΛ΋ͱʹʮ࢖ΘΕ͍ͯΔʯ͜ͱΛ൑அ
   w ඞཁͳϑΝΠϧ͸PQUJPOͰແࢹͰ͖Δ
8. τϐοΫ w Ϟνϕʔγϣϯ
   w 5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔
   w ม׵͢Δํ๏
   w πʔϧ͕΋ͨΒͨ͠ޮՌ
   w 044Խ
9. Ϟνϕʔγϣϯ
   5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔
   ม׵͢Δํ๏
   πʔϧ͕΋ͨΒͨ͠ޮՌ
   044Խ
10. Ϟνϕʔγϣϯ w ίϯϙʔωϯτϥΠϒϥϦͷஔ͖׵͑Λ͖͔͚ͬʹσουίʔυ໰୊͕ݦࡏԽ
    w Ϟδϡʔϧͷґଘؔ܎Λ୧Δඞཁ͕͋Γ؆୯ʹ࡟আͰ͖ͳ͍
    w ࣗಈԽͰ͖Ε͹ຬ଍
11. Ϟνϕʔγϣϯ
    5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔
    ม׵͢Δํ๏
    πʔϧ͕΋ͨΒͨ͠ޮՌ
    044Խ
12. ߏจ໦ ίʔυ͸ߏจ໦ʹม׵͞ΕΔ export const message: string = 'hello world';
13. 5ZQF4DSJQUίϯύΠϥ͕΍͍ͬͯΔ͜ͱ ߏจ໦ͷঢ়ଶͰܕνΣοΫ΍+BWB4DSJQU΁ͷม׵ॲཧ͕ߦΘΕΔ export const message = 'hello world'; export const message: string = 'hello world'; ίʔυ ߏจ໦ ߏจ໦ ίʔυ QBSTF DPOWFSU QSJOU
14. 5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔ ߏจ໦ͷϊʔυΛ௥Ճɾ࡟আɾฤू͢Δૢ࡞Λॻ͘͜ͱ ߏจ໦ ߏจ໦ ૢ࡞
15. 5ZQF4DSJQU
    "45
    7JFXFS
16. Ϟνϕʔγϣϯ
    5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔
    ม׵͢Δํ๏
    πʔϧ͕΋ͨΒͨ͠ޮՌ
    044Խ
17. 5ZQF4DSJQU
    $PNQJMFS
    "1*
    ͕΍Δ͜ͱ ࣗ෼Ͱ΍Δ͜ͱ ύʔε
    ϓϦϯτ
    τϥόʔε τϥόʔε֤ͨ͠ϊʔυͷૢ࡞
18. 5ZQF4DSJQU
    $PNQJMFS
    "1*Λ࣮ࡍʹ࢖ͬͯΈΔ export const message: string = 'hello world';
19. import ts, { Node, ScriptTarget } from "typescript"; const code = ` export const message: string = 'hello world'; `; const sourceFile = ts.createSourceFile( "src/index.ts", code, ScriptTarget.ES2022 ); const visitor = (depth: number) => (node: Node) => { console.log( `${Array(depth).fill("-").join("")}> [${ ts.SyntaxKind[node.kind] }] ${node.getText(sourceFile)}` ); ts.forEachChild(node, visitor(depth + 1)); }; ts.forEachChild(sourceFile, visitor(1));
20. -> [FirstStatement] export const message: string = 'hello world'; --> [ExportKeyword] export --> [VariableDeclarationList] const message: string = 'hello world' ---> [VariableDeclaration] message: string = 'hello world' ----> [Identifier] message ----> [StringKeyword] string ----> [StringLiteral] 'hello world' -> [EndOfFileToken]
21. UTNPSQIͰૢ࡞͕ΑΓ؆୯ʹ w 5ZQF4DSJQU
    $PNQJMFS
    "1*͸গ͠ϋʔυϧ͕ߴ͍
    w $PNQJMFS
    "1*ͷϘΠϥʔϓϨʔτίʔυΛ࡟ݮͰ͖Δ
    w Α͘࢖͏ૢ࡞Λؔ਺ͱͯ͠ఏڙ
    w ϩʔϨϕϧͳ"1*ʹ΋ΞΫηεͰ͖Δ
    UTNPSQIΛ׆༻͢Δ͜ͱͰΑΓεϐʔσΟʹ࣮ݱͰ͖ͨ
22. Ϟνϕʔγϣϯ
    5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔
    ม׵͢Δํ๏
    πʔϧ͕΋ͨΒͨ͠ޮՌ
    044Խ
23. ։ൃΛৼΓฦͬͯ w ࣾ಺πʔϧ͸͢΂ͯͷέʔεΛΧόʔ͢Δඞཁ͸ͳ͍
    w ίʔυϨϏϡʔͰ඼࣭Λ୲อ
    w ϥΠϒϥϦͷҠߦ࡞ۀΛߴ଎Խ
24. ೾ٴͨ͠ޮՌ w ϩδοΫʹઐ೦Ͱ͖ΔͨΊϦϑΝΫλϦϯάͷϋʔυϧ͕Լ͕Δ
    w ؾ͔ͮͳ͔ͬͨσουίʔυͷଘࡏ͕໌Β͔ʹͳΔ
25. Ϟνϕʔγϣϯ
    5ZQF4DSJQUίʔυΛม׵͢Δͱ͸Ͳ͏͍͏͜ͱ͔
    ม׵͢Δํ๏
    πʔϧ͕΋ͨΒͨ͠ޮՌ
    044Խ
26. 044ԽͷܦҢ  ϓϩμΫτͷϦϙδτϦ಺ʹ࣮૷
     ݕূͰ͖ͨλΠϛϯάͰผϦϙδτϦʹ੾Γग़͠
     ࣾ಺/1.Ͱެ։
     (JUIVCͰ044Խ
27. 044ԽͷϝϦοτ w ࣾ֎Ͱࣗ෼͕࡞ͬͨίʔυΛ࢖͑Δ
    w ࣾ಺ͷೝ஌౓ΛߴΊΔ͜ͱ͕Ͱ͖Δ
    w ۀ຿࣌ؒΛ࢖ͬͯπʔϧΛվળͰ͖Δ
    w ࣾ಺ͷผϦϙδτϦʹల։͠΍͘͢ͳͬͨ
28. ·ͱΊ w ϥΠϒϥϦͷҠߦͰൃੜ͢Δσουίʔυͷ࡟আΛࣗಈԽ
    w ίʔυͷม׵͸͖ͭͭΊΔͱߏจ໦ͷม׵ॲཧΛॻ͘͜ͱ
    w 5ZQF4DSJQU
    $PNQJMFS
    "1*͸ͦΜͳʹ೉͘͠ͳ͍
    w πʔϧ࡞Γ͸ϓϩμΫτ։ൃͷݱ৔Ͱ΋໾ʹͨͭ
    w 044ԽͰࣾ֎ʹؐݩɾࣾ಺ʹల։
29. 
    
    
    
    HJUIVCDPNMJOFUTSFNPWFVOVTFE