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
260
その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
620
平成生まれのためのUNIX&IT歴 史講座 ~番外編~
smellman
2
550
掛川城の点群データをiTownsで表示しよう
smellman
0
350
大容量SSDとOpenStreetMap
smellman
0
170
MapLibreとtile.openstretmap.jpで始めるベクトル地図プログラミング
smellman
1
640
国内向けタイルサーバの構築と運用について
smellman
0
1.7k
Python/Javascriptで読む点群
smellman
1
5.3k
日本のCommunity向け タイルサーバの現状
smellman
0
2.7k
Pythonで点群を読んでみよう
smellman
1
2.8k
Other Decks in Technology
See All in Technology
Tebiki Engineering Team Deck
tebiki
0
27k
スピンアウト講座05_実践活用事例
overflowinc
0
260
バクラク最古参プロダクトで重ねた技術投資を振り返る
ypresto
0
200
「通るまでRe-run」から卒業!落ちないテストを書く勘所
asumikam
2
420
20260321_エンベディングってなに?RAGってなに?エンベディングの説明とGemini Embedding 2 の紹介
tsho
0
130
Phase09_自動化_仕組み化
overflowinc
0
390
Phase12_総括_自走化
overflowinc
0
320
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
aoto
PRO
0
240
欠陥分析(ODC分析)における生成AIの活用プロセスと実践事例 / 20260320 Suguru Ishii & Naoki Yamakoshi & Mayu Yoshizawa
shift_evolve
PRO
0
230
ABEMAのバグバウンティの取り組み
kurochan
1
150
大規模ECサイトのあるバッチのパフォーマンスを改善するために僕たちのチームがしてきたこと
panda_program
1
310
It’s “Time” to use Temporal
sajikix
3
240
Featured
See All Featured
My Coaching Mixtape
mlcsv
0
82
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
260
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
990
Balancing Empowerment & Direction
lara
5
950
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
120
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.9k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
200
First, design no harm
axbom
PRO
2
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
How to Ace a Technical Interview
jacobian
281
24k
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Λग़͢ͷ͕ॏཁ
͝੩ௌ͋͟·Δਫ࢈