$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
社内ツールから生まれたOSS "ts-remove-unused" によるフロントエンド開発の...
Search
LINEヤフーTech (LY Corporation Tech)
PRO
December 13, 2023
Technology
0
530
社内ツールから生まれたOSS "ts-remove-unused" によるフロントエンド開発の効率化と品質の向上
「UIT × Bonfire Front-end Meetup #1」の発表資料です。
https://uit.connpass.com/event/300284/
LINEヤフーTech (LY Corporation Tech)
PRO
December 13, 2023
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
Will Positron accelerate us?
lycorptech_jp
PRO
1
66
Try using dbtplyr
lycorptech_jp
PRO
0
8
EthernetベースのGPUクラスタ導入による学びと展望
lycorptech_jp
PRO
0
510
LY Accessibility Guidelines @fukuoka_a11yconf_前夜祭
lycorptech_jp
PRO
1
140
Yahoo! JAPANトップページにおけるマイクロフロントエンド - 大規模組織におけるFE開発を加速させるには
lycorptech_jp
PRO
0
1.7k
エンジニアの草の根活動のその先へ LINEギフトのアクセシビリティにおける ネクストアクション
lycorptech_jp
PRO
0
110
LINEヤフー株式会社における音声言語情報処理AI研究開発@SP/SLP研究会 2024.10.22
lycorptech_jp
PRO
3
370
DETECLAP: Enhancing Audio-Visual Representation Learning with Object Information (Technical seminar on acoustic scene and event analysis)
lycorptech_jp
PRO
1
38
Language-based Audio Moment Retrieval (Technical seminar on acoustic scene and event analysis)
lycorptech_jp
PRO
0
40
Other Decks in Technology
See All in Technology
Nihonbashi Test Talk #3_WebDriver BiDiと最新の実装状況 / WebDriver BiDi latest status
takeyaqa
1
110
スパイクアクセス対策としての pitchfork 導入
riseshia
0
100
コーポレートデータマスター構築への道
kworkdev
PRO
0
100
asumikamというカンファレンスオーガナイザの凄さを語る / The Brilliance of Asumikam
tomzoh
1
280
LLMを「速く」「安く」 動かすには / CloudNative Days Winter 2024
pfn
PRO
6
1.3k
Entra ID の多要素認証(Japan Microsoft 365 コミュニティ カンファレンス 2024 )
murachiakira
0
1.9k
クラウドネイティブなNewSQLで実現するミッションクリティカルなアプリケーションの運用
yuyu_hf
PRO
1
170
Raspberry Pi 秋の新製品をチェックしてみよう / 20231202-rpi-jam-tokyo
akkiesoft
0
300
歴史あるRuby on Railsでデッドコードを見つけ、 消す方法@yabaibuki.dev #3
ayumu838
0
1.7k
241130紅白ぺぱ合戦LT「編集の技術」
toya524287
5
580
B11-SharePoint サイトのストレージ管理を考えよう
maekawa123
0
120
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
0
220
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
Fireside Chat
paigeccino
34
3k
Unsuck your backbone
ammeep
669
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Speed Design
sergeychernyshev
25
650
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Site-Speed That Sticks
csswizardry
1
120
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
72
A Philosophy of Restraint
colly
203
16k
Transcript
,B[VTIJ,POPTV !LB[VTIJLPOPTV -:$PSQPSBUJPO ࣾπʔϧ͔Βੜ·Εͨ044 lUTSFNPWFVOVTFEz ʹΑΔϑϩϯτΤϯυ։ൃͷޮԽͱ࣭ͷ্ 6*5ʷ#PO fi SF'SPOUFOE.FFUVQ
HJUIVCDPNMJOFUTSFNPWFVOVTFE
. ├── node_modules/ ├── src/ │ ├── App.tsx │ ├──
Button.tsx │ └── Heading.tsx └── package.json ػೳͷհ
// 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
// 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
@@ -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
UTSFNPWFVOVTFEͱ FYQPSU͞Ε͍ͯΔ͜ͱͰؾ͖ͮʹ͍͘σουίʔυΛࣗಈͰআ͢Δπʔϧ w ;FSPDPO fi H w UTDPO fi HKTPOΛͱʹʮΘΕ͍ͯΔʯ͜ͱΛஅ
w ඞཁͳϑΝΠϧPQUJPOͰແࢹͰ͖Δ
τϐοΫ w Ϟνϕʔγϣϯ w 5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ w ม͢Δํ๏ w πʔϧ͕ͨΒͨ͠ޮՌ w
044Խ
Ϟνϕʔγϣϯ 5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ ม͢Δํ๏ πʔϧ͕ͨΒͨ͠ޮՌ 044Խ
Ϟνϕʔγϣϯ w ίϯϙʔωϯτϥΠϒϥϦͷஔ͖͑Λ͖͔͚ͬʹσουίʔυ͕ݦࡏԽ w ϞδϡʔϧͷґଘؔΛ୧Δඞཁ͕͋Γ؆୯ʹআͰ͖ͳ͍ w ࣗಈԽͰ͖Εຬ
Ϟνϕʔγϣϯ 5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ ม͢Δํ๏ πʔϧ͕ͨΒͨ͠ޮՌ 044Խ
ߏจ ίʔυߏจʹม͞ΕΔ export const message: string = 'hello world';
5ZQF4DSJQUίϯύΠϥ͕͍ͬͯΔ͜ͱ ߏจͷঢ়ଶͰܕνΣοΫ+BWB4DSJQUͷมॲཧ͕ߦΘΕΔ export const message = 'hello world'; export const
message: string = 'hello world'; ίʔυ ߏจ ߏจ ίʔυ QBSTF DPOWFSU QSJOU
5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ ߏจͷϊʔυΛՃɾআɾฤू͢Δૢ࡞Λॻ͘͜ͱ ߏจ ߏจ ૢ࡞
5ZQF4DSJQU"457JFXFS
Ϟνϕʔγϣϯ 5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ ม͢Δํ๏ πʔϧ͕ͨΒͨ͠ޮՌ 044Խ
5ZQF4DSJQU$PNQJMFS"1* ͕Δ͜ͱ ࣗͰΔ͜ͱ ύʔε ϓϦϯτ τϥόʔε τϥόʔε֤ͨ͠ϊʔυͷૢ࡞
5ZQF4DSJQU$PNQJMFS"1*Λ࣮ࡍʹͬͯΈΔ export const message: string = 'hello world';
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));
-> [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]
UTNPSQIͰૢ࡞͕ΑΓ؆୯ʹ w 5ZQF4DSJQU$PNQJMFS"1*গ͠ϋʔυϧ͕ߴ͍ w $PNQJMFS"1*ͷϘΠϥʔϓϨʔτίʔυΛݮͰ͖Δ w Α͘͏ૢ࡞Λؔͱͯ͠ఏڙ w ϩʔϨϕϧͳ"1*ʹΞΫηεͰ͖Δ UTNPSQIΛ׆༻͢Δ͜ͱͰΑΓεϐʔσΟʹ࣮ݱͰ͖ͨ
Ϟνϕʔγϣϯ 5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ ม͢Δํ๏ πʔϧ͕ͨΒͨ͠ޮՌ 044Խ
։ൃΛৼΓฦͬͯ w ࣾπʔϧͯ͢ͷέʔεΛΧόʔ͢Δඞཁͳ͍ w ίʔυϨϏϡʔͰ࣭Λ୲อ w ϥΠϒϥϦͷҠߦ࡞ۀΛߴԽ
ٴͨ͠ޮՌ w ϩδοΫʹઐ೦Ͱ͖ΔͨΊϦϑΝΫλϦϯάͷϋʔυϧ͕Լ͕Δ w ؾ͔ͮͳ͔ͬͨσουίʔυͷଘࡏ͕໌Β͔ʹͳΔ
Ϟνϕʔγϣϯ 5ZQF4DSJQUίʔυΛม͢ΔͱͲ͏͍͏͜ͱ͔ ม͢Δํ๏ πʔϧ͕ͨΒͨ͠ޮՌ 044Խ
044ԽͷܦҢ ϓϩμΫτͷϦϙδτϦʹ࣮ ݕূͰ͖ͨλΠϛϯάͰผϦϙδτϦʹΓग़͠ ࣾ/1.Ͱެ։ (JUIVCͰ044Խ
044ԽͷϝϦοτ w ࣾ֎Ͱ͕ࣗ࡞ͬͨίʔυΛ͑Δ w ࣾͷೝΛߴΊΔ͜ͱ͕Ͱ͖Δ w ۀ࣌ؒΛͬͯπʔϧΛվળͰ͖Δ w ࣾͷผϦϙδτϦʹల։͘͢͠ͳͬͨ
·ͱΊ w ϥΠϒϥϦͷҠߦͰൃੜ͢ΔσουίʔυͷআΛࣗಈԽ w ίʔυͷม͖ͭͭΊΔͱߏจͷมॲཧΛॻ͘͜ͱ w 5ZQF4DSJQU$PNQJMFS"1*ͦΜͳʹ͘͠ͳ͍ w πʔϧ࡞ΓϓϩμΫτ։ൃͷݱͰʹͨͭ w
044ԽͰࣾ֎ʹؐݩɾࣾʹల։
HJUIVCDPNMJOFUTSFNPWFVOVTFE