$30 off During Our Annual Pro Sale. View Details »

社内ツールから生まれたOSS "ts-remove-unused" によるフロントエンド開発の...

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

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

More Decks by LINEヤフーTech (LY Corporation Tech)

Other Decks in Technology

Transcript

  1. . ├── node_modules/ ├── src/ │ ├── App.tsx │ ├──

    Button.tsx │ └── Heading.tsx └── package.json ػೳͷ঺հ
  2. // 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
  3. // 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
  4. @@ -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
  5. 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));
  6. -> [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]