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
LY Corporation Tech
PRO
December 13, 2023
Technology
0
330
社内ツールから生まれたOSS "ts-remove-unused" によるフロントエンド開発の効率化と品質の向上
「UIT × Bonfire Front-end Meetup #1」の発表資料です。
https://uit.connpass.com/event/300284/
LY Corporation Tech
PRO
December 13, 2023
Tweet
Share
More Decks by LY Corporation Tech
See All by LY Corporation Tech
LINEヤフーのウェブアクセシビリティ
lycorptech_jp
PRO
3
220
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
720
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
7
4.1k
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
lycorptech_jp
PRO
7
3.3k
UIコンポーネント Vue3マイグレーション体験記
lycorptech_jp
PRO
0
250
スタンプショップの推薦枠に2-stage制を導入した事例紹介
lycorptech_jp
PRO
1
140
Head toward Java 22 and Java 23
lycorptech_jp
PRO
1
200
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
5
1.3k
年度末の振り返り!テクニカルライターは成果をどうアピールすべきか
lycorptech_jp
PRO
1
79
Other Decks in Technology
See All in Technology
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
230
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
2
690
Google Cloud Next '24 Recap in ZOZO Datastreamを使用したリアルタイムデータストリーミングの紹介 / realtime datastreaming with Datastream
takahitosakuma
0
110
SLOいつ決めましょう?
abnoumaru
3
890
株式会社EventHub・エンジニア採用資料
eventhub
0
2.1k
汎用ポリシー言語Rego + OPAと認可・検証事例の紹介 / Introduction Rego & OPA for authorization and validation
mizutani
1
200
OPENLOGI Company Profile for engineer
hr01
1
2.2k
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
400
Security Hubのセキュリティスコアはどうやって計算されるか
toru_kubota
0
110
【リラン】AIの光と闇?失敗しないために知っておきたいAIリスクとその対応 ①政府の動き編
tkhresk
0
140
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
漠然とOSSにコントリビュートしたいと思っていた昔の自分へ
sansantech
PRO
2
110
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Thoughts on Productivity
jonyablonski
60
3.9k
Web Components: a chance to create the future
zenorocha
306
41k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Designing the Hi-DPI Web
ddemaree
276
33k
Code Review Best Practice
trishagee
56
15k
A Philosophy of Restraint
colly
197
16k
Building Applications with DynamoDB
mza
88
5.7k
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