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
630
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.8k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3k
Service Workerとブラウザでの通知について
10shi10ma
3
260
意外に知らないnpmと便利なCLI
10shi10ma
8
2.2k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.6k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
2.9k
React+Storybook ことはじめ
10shi10ma
8
2.4k
Other Decks in Programming
See All in Programming
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
380
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
Quine, Polyglot, 良いコード
qnighy
4
520
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
240
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
Synchronizationを支える技術
s_shimotori
1
150
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
150
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
Server Driven Compose With Firebase
skydoves
0
420
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
230
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
370
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
500
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Teambox: Starting and Learning
jrom
132
8.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Bash Introduction
62gerente
608
210k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Faster Mobile Websites
deanohume
304
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
It's Worth the Effort
3n
183
27k
Building Your Own Lightsaber
phodgson
102
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
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ͬͯ࣌͘ͷ͓͢͢Ί