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
TypeScript入門 〜型のあるモダンなJavaScript〜
Search
Toshihisa Tomatsu
April 19, 2019
Programming
2
750
TypeScript入門 〜型のあるモダンなJavaScript〜
社内で開催したTypeScript入門の勉強会資料
Toshihisa Tomatsu
April 19, 2019
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
1.9k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.2k
Service Workerとブラウザでの通知について
10shi10ma
3
320
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.8k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.5k
Other Decks in Programming
See All in Programming
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
170
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
AIのメモリー
watany
11
1k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
What's new in Adaptive Android development
fornewid
0
120
Gemini CLI のはじめ方
ttnyt8701
1
110
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
290
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Speed Design
sergeychernyshev
32
1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Making Projects Easy
brettharned
117
6.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.7k
Balancing Empowerment & Direction
lara
1
510
Facilitating Awesome Meetings
lara
54
6.5k
Transcript
ϑ ϩ ϯ τ Τ ϯ υ Τ Ω ε
ύ ʔ τ ν ʔ Ϝ ֎ দ ढ़ ঘ TypeScriptೖ ʙܕͷ͋ΔϞμϯͳJavaScriptʙ FrontendBar#6 2019/4/19ɹ
TypeScriptೖ ʙܕͷ͋ΔϞμϯͳJavaScriptʙ
•ॻ͍ͨ͜ͱ͋ΔΑ •ฉ͍ͨ͜ͱͳΒ •ࠓճॳΊͯͬͨ TypeScript
•TypeScriptͬͯͳʹʁ •ܕͷ͋ΔJavaScript •TypeScriptͷػೳ/ॻ͖ํ •࣮ࡍͷ։ൃڥTypeScriptΛͬͨίʔσΟϯά •͍Ζ͍Ζ໘ͰͷTypeScript ࠓ ͢͜ͱ
•ʮTypeScriptͳΜͱͳ͘Θ͔ͬͨʂʯ •ʮ࣍ɺ৽͘͠JavaScriptΛ͏ϓϩδΣΫτͰ TypeScriptͬͯΈΔͧʯ •ʮ͍·खݩʹ͋ΔJavaScriptͷϓϩδΣΫτΛ TypeScriptʹॻ͖͑ͯΈΑ͏͔ͳ…ʯ ࠓͷΰʔϧ
TypeScriptͬͯͳʹʁ 1
TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτ ɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔ ɹɹΦʔϓϯιʔεͷ੩తܕ͖ϓϩάϥϛϯάݴޠ TypeScript
ͬ͘͟ΓΠϝʔδͰ͍͏ͱ ಉ͡ΧΤϧ͚ͩͲ…
ͬ͘͟ΓΠϝʔδͰ͍͏ͱ JavaScript greeter.js
ͬ͘͟ΓΠϝʔδͰ͍͏ͱ TypeScript greeter.ts
ͬ͘͟ΓΠϝʔδͰ͍͏ͱ TypeScript greeter.ts
TypeScriptJavaScriptʹՃ͑ͯ ܕΛ͍࣋ͬͯΔ ΄ͱΜͲJavaScript ͚ͩͲͶ ܕʹ͍ͭͯ͜ͷ͋ͱઆ໌͢ΔΑ
TypeScriptίϯύΠϧ͢Δͱ JavaScriptʹͳΔ ม (ίϯύΠϧ) ੜ͞ΕͨJavaScript͍ͭ Ͳ͓ΓϒϥβͰಈ͘ greeter.ts greeter.js $ tsc
greeter.ts
TypeScript Playground https://www.typescriptlang.org/play/
•TypeScript͍·ͱͯීٴ͍ͯ͠·͢ •̍͘͜͜Β͍Ͱ৽͘͠࡞ΔϓϩδΣΫτ͍͍ͩͨ TypeScriptͳΠϝʔδ •͜Ε·ͰJavaScriptΛ͍ͬͯͨΑ͏ͳγνϡΤʔγϣϯͰ ͱΓ͋͑ͣTypeScript σϑΝΫτʹͳΓͭͭ͋ΔTypeScript ͱʹ͔͘DX͕ ্͕Δ
npm trends
ʰTypeScriptΛಋೖ͖͔͢ʱ ͰΉ࣌طʹऴΘ͍ͬͯΔ “ ͱ͍͏ҙݟ͋Δ
•JavaScriptΛ͏γνϡΤʔγϣϯͳΒ TypeScript(TS)͕͑Δ Ex: WebͷϑϩϯτΤϯυɺNodejs + TypeScript, React/Vue/Anguler + TS, kintone
customize JavaScript͑ΔͳΒTypeScriptͰ
ܕͷ͋ΔJavaScript 2
TypeScript….ܕΛ࣋ͬͨJavaScriptͷεʔύʔηοτ ɹɹMicrosoftʹΑͬͯ։ൃ͞Εɺϝϯςφϯε͞Ε͍ͯΔ ɹɹΦʔϓϯιʔεͷ੩తܕ͖ϓϩάϥϛϯάݴޠ TypeScript ࠶ܝ
•ܕɺͲ͏͍͏छྨͷσʔλ/͔ʁͱ͍͏ใ •person.firstNameͲ͏͍͏छྨͷσʔλʁ •͜Ε͘Β͍ͩͬͨΒจࣈྻͩͱΘ͔Δ ܕʁ greeter.js
•num, digitʁ •n, m, sͲΜͳσʔλ͕ೖͬͯͦ͏ʁ •৽͘͠ݟͨਓݺͼग़͠ଆΛݟͳ͍ͱ͔Βͳ͍ •ਓ͕͓͔֮͑ͯͳ͍ͱ͍͚ͳ͍ ෳࡶͳ߹ʁ
•࣮ߦ͠ͳͯ͘ɺͲΜͳछྨͷσʔλ͕ೖ͍ͬͯΔ͔͔Δ ܕ͕͋Δͱ greeter.ts
•ؒҧ͍͑ͨํΛͨ͠ΒϦΞϧλΠϜͰΤσΟλ͕ڭ͑ͯ͘ΕΔ ܕ͕͋Δͱ
ܕͷྫ@TypeScript ਅِܕ จࣈྻܕ ྻܕ ܕ ͳΜͰܕ
݁ہܕ͕͋ΔͱԿ͕خ͍͠ʁ ϦϑΝΫλ͕༰қ େن։ൃͰ҆શ ೖྗͷิ ΤϥʔϛεΛΤσΟλ্Ͱݕग़ ࣮ߦ͠ͳ͔ͯ͘Δ DX(։ൃͷੜ࢈ੑ)্͕͢Δʂ TypeScriptΛ͏ͱԿ͕خ͍͠ʁ
Ͱશ෦ʹܕΛॻ͘ͷ໘… •TypeScriptܕਪͱ͍͏ػೳ͕͋Γ·͢ •ܕΛ໌ࣔతʹॻ͔ͳͯ͘TypeScript͕উखʹ ʮ͜Εfalseೖͯ͠Δ͔ΒbooleanܕͶɻʯͱஅͯ͘͠ΕΔ •ͭ·ΓܕΛॻ͔ͳͯ͘ɺͱΓ͋͑ͣTypeScriptʹ͓͚ͯ͠ ܕνΣοΫͷԸܙड͚ΒΕΔ
Α͠ʂTypeScriptಋೖ͠Α͏ •JavaScriptͰॻ͍͍ͯΔϓϩδΣΫτʹTypeScriptΛಋೖ͢Δ ϋʔυϧͱ͍ͯ •JavaScriptTypeScriptͰ͋Δ •ͯ͢ͷJavaScriptɺߏจతʹTypeScriptͱͯ͠ਖ਼͘͠ɺ ίϯύΠϧͯ͠ݩͷJavaScriptͱಉ͡ৼΔ͍Λ͢Δ •ίϯύΠϧΤϥʔ͕͋ͬͯJSੜ͞ΕΔ
TypeScriptͷػೳ/ॻ͖ํ 3
https://stackblitz.com/ ϒϥβ্Ͱ͙͢ʹ ࢼͤΔΑ
ܕͷએݴ •ޙஔλΠϓͷܕΞϊςʔγϣϯ •มؔύϥϝʔλͷ͋ͱʹ : ܕ ͱ͍ͬͨ෩ʹॻ͘ ؔύϥϝʔλ ม ؔͷΓ
ܕͷએݴ Φϓγϣϯύϥϝʔλ ϢχΦϯܕ = จࣈྻܕ·ͨܕ
جຊతͳܕ •جຊతͳσʔλܕ༻ҙ͞Ε͍ͯΔ ਅِܕ จࣈྻܕ ྻܕ ܕ ͳΜͰܕ ฦΓͳ͠ ΦϒδΣΫτܕ
ࣗͰܕΛఆٛ͢Δ •جຊతͳܕ͚ͩͰෆे •ࣗͷϓϩάϥϜʹԠͨ͡ܕ ͕ཉ͍͠ •interface type ΩʔϫʔυΛ ͬͯܕΛఆٛ͢Δ
kintone ΦϒδΣΫτͷܕΛఆٛ͢Δͱ
TypeScriptʹ͍Ζ͍Ζͳػೳ͕͋Δ •࠷ॳෳࡶͳ͜ͱ͠ͳ͍͍ͯ͘ͷͰɺগͣͭ͠ศརͳػೳΛ ͍͚͍͍֮͑ͯɻ •ΤσΟλౖ͕ͬͯ͘ΕΔͷͰɺௐΕͦͷ͏͍֮ͪ͑ͯ͘ ྫʣ TypeGuard, Readonly, Index Signatures, Never
Type, TypeAssertion Enum, Generics, Union Type, Intersection Type, Literal Types
࣮ࡍͷ։ൃڥTypeScript ΛͬͨίʔσΟϯά 4
։ൃڥ(3Step) 1. $ npm i -D typescript 2. $ npx
tsc —init 3. $ npx tsc src/**/*.ts 1. TypeScriptΛΠϯετʔϧ ίϯύΠϥͱͯ͠tsc͕ೖ͍ͬͯΔ 2. ઃఆϑΝΠϧ(tsconfig.json)ͷܗੜ 3. TSϑΝΠϧΛίϯύΠϧɻJS͕ੜ͞ΕΔ Step 02 Step 03 Step 01
tsconfig.json
tsconfig.json ίϯύΠϧͷઃఆtsconfig.jsonʹॻ͘ جຊతʹܗ௨ΓͰOK ੩తܕͷݎ͞ΛॊೈʹઃఆͰ͖Δ ؤுΓͨ͘ͳ͍߹ɺઃఆͰ؇ΊΔ DOMESͷܕใ͕ཉ͍͠ͳΒ libͰࢦఆ͢Δ ex: ”lib”: ["dom",
“es2018”]
ݹ͍ESͷม tsconfig.jsonͷtargetͰͲͷECMAScriptͷJavaScriptΛੜ͢ Δ͔ࢦఆ͢Δ IE11ʹରԠ͢ΔͳΒ”es5” ⾠TypeScript͕໘ΛݟΔͷSyntax͚ͩ⾠ ϨΨγʔϒϥβʹ૬มΘΒͣES6ʙͷػೳແ͍ͷͰ Polyfillผ్ೖΕͳ͍ͱͩΊ(ex:Promise, Array.from) core-jsͳΓɺbabel-polyfillͳΓ
ΤσΟλ VSCodeIntelliJϓϥάΠϯΛೖΕͳͯ͘σϑΥϧτͰ TypeScriptʹରԠ͍ͯ͠Δ ͙͢ิΤϥʔදࣔͷԸܙ͕ड͚ΒΕΔ VimEmacsϓϥάΠϯೖΕΕOK
Lint TSLint͏Θͳ͍ ͜Ε͔ΒTypeScriptͰLintΛೖΕΔͳΒESLintͰOK @typescript-eslint/eslint-pluginΛ͏ @cybozu/eslint-config/presets/typescript͋ΔΑ ৄ͘͠ https://teppeis.hatenablog.com/entry/2019/02/typescript-eslint
ܕఆٛ ࣗͰܕఆٛΛॻ͘ͷେม Reactͱ͔ͷϥΠϒϥϦͲ͏͢Ε͍͍ͷʁʁ ·͔ࣗ͞Ͱॻ͘ͷʁ
@types ࣗͰෳࡶͳܕఆٛΛ͢Δඞཁ͋Γ·ͤΜ ͍͍ͩͨͷϥΠϒϥϦܕఆٛϑΝΠϧΛ༻ҙͯ͘͠Εͯ· ͢(Definitely Typed) ͦͷϑΝΠϧΛΠϯετʔϧ͢Δ͚ͩ ྫ͑ Reactͷ߹ $ npm
install -D @types/react kintone CustomizeͳΒ@kintone/dts-gen https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
͍Ζ͍Ζ໘ͰͷTypeScript 5
ʓʓ+TypeScript React + TypeScript Nodejs + TypeScript webpack + Babel
+ TypeScript jquery + TypeScript ReactNative + TypeScript Vue.js + TypeScript Anguler + TypeScript ɹɹɹɹɹɹɹɹɹɹɹɹetc جຊతʹͲ͜Ͱ͑ΔΠϝʔδ
React + TypeScript React+TypeScriptΛࢼ͢ͳΒɺcreate-react-appͰڥΛ؆୯ ʹ࡞ΕΔ $ npx create-react-app my-app --typescript
QuickStart https://www.typescriptlang.org/samples/index.html ͦΕͧΕΠϯετʔϧ͢ΔϥΠϒϥϦઃఆํ๏ͪ͜ΒΛࢀߟʹ
·ͱΊ TypeScriptΛศརʹ͍ͬͯ͘ڥ͍ͬͯΔ TypeScript ͕ͲΜͳͷ͔հ͠·ͨ͠ TypeScriptͷಋೖϋʔυϧͱ͍ͯɻͳͷʹԸܙେ͖͍ ੋඇɺ࣍ʹJavaScriptΛॻ͘Α͏ͳϓϩδΣΫτͰɺ TypeScriptΛೖΕͯΈ͍ͯͩ͘͞
͓·͚
•TypeScript Deep Dive ຊޠ൛ https://typescript-jp.gitbook.io/deep-dive/ •ຊޠͰTypeScirptΛҰ௨ΓֶΔ •TypeScriptͰkintoneΧελϚΠζ։ൃΛͯ͠ΈΑ͏ https://developer.cybozu.io/hc/ja/articles/360023293091 •TypeScript࠶ೖ ―
ʮ͕ΜΒͳ͍TypeScriptʯͰɺ JavaScriptΛ“ॊΒ͔͍”੩తܕ͖ݴޠʹ https://employment.en-japan.com/engineerhub/entry/2019/04/16/103000 •࣮ࡍͷϓϩδΣΫτͰ͏લʹಡΜͰ͓͘ͱྑ͍ TypeScriptͬͯ࣌͘ͷ͓͢͢Ί