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
そのJavascript、全部TypeScriptにしちゃえ
Search
Taro Matsuzawa aka. btm
October 23, 2021
Technology
1
200
そのJavascript、全部TypeScriptにしちゃえ
Open Source Conference 2021 Online/Fall LT
Taro Matsuzawa aka. btm
October 23, 2021
Tweet
Share
More Decks by Taro Matsuzawa aka. btm
See All by Taro Matsuzawa aka. btm
OpenLayers ext TypeScript declarationの開発
smellman
0
550
平成生まれのためのUNIX&IT歴 史講座 ~番外編~
smellman
2
490
掛川城の点群データをiTownsで表示しよう
smellman
0
280
大容量SSDとOpenStreetMap
smellman
0
130
MapLibreとtile.openstretmap.jpで始めるベクトル地図プログラミング
smellman
1
570
国内向けタイルサーバの構築と運用について
smellman
0
1.2k
Python/Javascriptで読む点群
smellman
1
5k
日本のCommunity向け タイルサーバの現状
smellman
0
2.7k
Pythonで点群を読んでみよう
smellman
1
2.4k
Other Decks in Technology
See All in Technology
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
100
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
150
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
710
Webアプリを Lambdaで動かすまでに考えること / How to implement monolithic Lambda Web Application
_kensh
7
1.3k
食べログが挑む!飲食店ネット予約システムで自動テスト無双して手動テストゼロを実現する戦略
hagevvashi
3
420
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
13
4.7k
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
140
ElixirがHW化され、最新CPU/GPU/NWを過去のものとする数万倍、高速+超省電力化されたWeb/動画配信/AIが動く日
piacerex
0
140
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.3k
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
230
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
230
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
290
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Flexible Design Systems
yeseniaperezcruz
329
38k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Transcript
ͦͷJavascriptɺ શ෦TypeScriptʹͪ͠Ό͑ Taro Matsuzawa(@smellman)
ࣗݾհ ཧۭؒܥΤϯδχΞ ຊUNIXϢʔβձձ/Ұൠࣾஂ๏ਓOSGeoຊࢧ෦ཧࣄ/Ұൠࣾஂ๏ਓΦʔ ϓϯετϦʔτϚοϓϑΝϯσʔγϣϯδϟύϯϝϯόʔ ౦ژిػେֶOB/౦ژిػେֶCySecݱੜ breakcoreΫϥελ ͱݺΕͯ·͢
ʢୀࡁΈʣ
OSSͷ׆ಈ React NativeܥϥΠϒϥϦͷվम react-native-static-server (iOSରԠ), redux-persist (ϥΠϒϥϦΛ·Δ͝ͱ TypeScriptʹॻ͖͑Δ) ͳͲ OpenMapTilesϓϩδΣΫτͷߩݙɺཧؔ։ൃ༁
ckanext-spatial (Python3ରԠ) ͳͲ ͦͷଞɺؾ͕͘··ίʔυυΩϡϝϯτΛॻ͍ͯ·͢
redux-persist ReactͰΑ͘ΘΕΔঢ়ଶͷอ࣋Λ͢Δreduxʹؔ͢ΔϥΠϒϥϦ redux-persistΛ͏ͱঢ়ଶΛLocalStorage(Web)/AsyncStorage(React Native)ͳͲʹอ࣋ͯ͘͠ΕΔ εϚϗΞϓϦͰঢ়ଶΛอଘ͢ΔͷʹศརͳϥΠϒϥϦ
ಋೖΛݕ౼ͨ݁͠Ռ ϝϯςφϯε͕2͙Β͍์ஔ ϝϯςφʔ͕ډͳ͍ͱ͍͏issue͕์ஔ͞Ε͍ͯΔ Pull RequestԿ͔์ஔ ͳΜͱ͔͍ͨ͠
ιʔείʔυΛಡΜͰΈΔ οɺFlowͬͯΔ…
Flow FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT Facebook͕࡞ͬͨJavascriptͷ੩తܕνΣοΧʔ
Javascriptʹແཧཧܕͷ֓೦ΛೖΕΔ ΊͬͪΌಡΈͮΒ͍ʼʻ
ܕೖΕΔͳΒ ͏TypeScriptͰ͍͍͡ΌΜʂ
͍͍͡ΌΜ Flow͕·͡ϝϯςφϯεͷํ͕Θ͔ΒΜ VSCode͕Flowͷόʔδϣϯ͕ҧ͏ͱΤϥʔΛు͖·͘Δ ͦ͜·ͰͪΌΜͱܕ͚͕͞Ε͍ͯΔΘ͚Ͱͳ͍ ໌ࣔతʹanyͬͯॻ͖͍ͨ͡ΌΜ͔͢
ͱ͍͏Θ͚Ͱ
ͬͨ͜ͱ શ෦TypeScriptԽɺFlowΛ໓ Travis CI͔ΒGithub Actions Eslint, rollup, ͦͷଞΖΖશ෦ॻ͖͠
ͱ͍͑ Ϛʔδ͞ΕΔ·Ͱϲ݄͔͔ͬͨ ཧ༝؆୯ɺϝϯςφʔ͕ั·Βͳ͔ͬͨ ઌɺϝϯςφʔͱίϯλΫτΛऔͬͯมΘΓͷϝϯςφʔ͕ग़ ݱͯͬ͠ͱίϝϯτ
ײँ
–ckalika “͜Μʹͪɺ͋ͳͨͷϓϧϦΫΤετʹΛ௨͢ͷʹ͕͔͔࣌ؒͬͯ͠·͍ɺਃ͠༁͋Γ·ͤΜͰͨ͠ɻࠓɺ ѱҙͷ͋Δͷҙຯͷͳ͍ͷؚ͕·Ε͍ͯͳ͍͔֬ೝͨ͠ͱ͜ΖͰ͕͢ɺ͜Ε...ɻຊʹײಈ͠·͠ ͨɻcreateAsyncLocalStorage()ʹkeysྻΛՃͯ͠Ұ؏ੑΛ࣋ͨͤΔͳͲɺࡉ෦ʹ·ͰؾΛͬͨ ྗʹײँ͠·͢ɻ ࠓͷͱ͜Ζςετ͋·Γ͍ͯ͠ͳ͍ͷͰɺ༧֎ͷ݁ՌʹͳΔՄೳੑ͋Γ·͢ɻͦ͠͏ͳͬͨΒɺέʔ εόΠέʔεͰରॲ͠·͕͢ɺࢲؒҧ͍ͳ͋͘ͳͨͷมߋηοτΛਐΊΔ͖ͩͱࢥ͍·͢ɻࡉ͔͍मਖ਼ ʢύοέʔδͷόʔδϣϯɺREADME.mdͷߋ৽ͳͲʣΛՃ͍͑ͨͱࢥ͍·͕͢ɺͦΕΒ͕Ͱ͖ͨΒɺتΜ ͰϚʔδ͠·͢ɻ TypeScriptͷҠߦͱΠϯϑϥͷۙԽɺඇৗʹॏཁͰҙٛਂ͍ࣄۀͰ͢ɻ͜ΕʹΑΓɺΑΓҰ؏ੑͷ͋
ΔɺΑΓଟ͘ͷςετΛߦ͏͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓ·͢ͷͰɺվΊͯײँ͍ͨ͠·͢ɻ”
ۤ࿑ใΘΕΔ TypeScriptԽʹΑͬͯΑΓςετ͘͢͠ͳͬͨ શମతͳݟ௨͠ fl owͰத్ʹܕΛ͚ͭΔΑΓΘ͔Γ͘͢ ͳͬͨ(ओ؍ ͜ΕͰͬͱଞͷਓϝϯςφϯεʹՃΘΕΔΑ͏ʹͳͬͨ ͜͜ॏཁͰ͢Αʂ
·ͱΊ JavascriptͰॻ͔Ε͍ͯΔͷTypeScriptԽͨ͠ํ͕ྑ͍ྫ͋Δ ༐ؾΛͩͯ͠Pull RequestΛग़͢ͷ͕ॏཁ
͝੩ௌ͋͟·Δਫ࢈