Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
630
社内ツールから生まれた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)
"LINE Planet" and AI: Conversations with AI
lycorptech_jp
PRO
0
14
Seamless inventory management with AI
lycorptech_jp
PRO
0
8
AI Frontiers Revealed: Transforming LINE Shopping TW with LLM-Driven Product Attribute Extraction
lycorptech_jp
PRO
0
17
LINEヤフーの音声AIがもたらす未来:ASR/TTSと対話技術の新たな可能性 / LY Corporation's Speech AI Vision: Towards Realtime Spoken Dialogue through Advanced ASR and TTS
lycorptech_jp
PRO
0
18
「Yahoo!検索」におけるWebパフォーマンス改善の取り組み / Efforts to Improve Web Performance in "Yahoo! JAPAN Search"
lycorptech_jp
PRO
0
23
アクセシビリティ改善の実践:プロダクトにおける具体的な取り組みと課題 / Practices for Accessibility Improvement: Specific Efforts and Challenges in Products
lycorptech_jp
PRO
0
23
「PayPayゲートウェイ」におけるStorybook活用事例 / Introducing Storybook: Enhancing Development in "PayPay Gateway"
lycorptech_jp
PRO
0
7
数字が導く洞察:Webパフォーマンスとビジネス指標の相関を探る / Insights Driven by Numbers: Exploring the Correlation Between Web Performance and Business Metrics
lycorptech_jp
PRO
0
36
Speculation Rules APIを用いたページ・広告表示の高速化によるメディア・広告KPIの改善への取り組み / Efforts to Improve Media and Advertising KPIs by Speeding Up Page and Ad Display Using Speculation Rules API
lycorptech_jp
PRO
0
35
Other Decks in Technology
See All in Technology
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
Witchcraft for Memory
pocke
1
420
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
280
エンジニア向け技術スタック情報
kauche
1
270
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
180
AIのAIによるAIのための出力評価と改善
chocoyama
2
570
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
170
本が全く読めなかった過去の自分へ
genshun9
0
550
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
Wasm元年
askua
0
150
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Being A Developer After 40
akosma
90
590k
GraphQLとの向き合い方2022年版
quramy
48
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
43
2.6k
Code Review Best Practice
trishagee
68
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Practical Orchestrator
shlominoach
188
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
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