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
180
その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
460
平成生まれのためのUNIX&IT歴 史講座 ~番外編~
smellman
2
440
掛川城の点群データをiTownsで表示しよう
smellman
0
230
大容量SSDとOpenStreetMap
smellman
0
98
MapLibreとtile.openstretmap.jpで始めるベクトル地図プログラミング
smellman
1
500
国内向けタイルサーバの構築と運用について
smellman
0
1k
Python/Javascriptで読む点群
smellman
1
4.7k
日本のCommunity向け タイルサーバの現状
smellman
0
2.6k
Pythonで点群を読んでみよう
smellman
1
2.3k
Other Decks in Technology
See All in Technology
脆弱性を管理して、ビジネスリスクに備えよう 〜駆け出しエンジニアがCVEとSBOMを可視化してみた〜
ktgrryt
0
160
【ログ分析勉強会】EDR ログで内部不正を検出できるのか、Copilot に聞いてみた
hssh2_bin
1
170
What’s new in Keycloak, the open source IAM?
ahus1
1
120
LLMマルチエージェントのフローエンジニアリングを支えるLLM Ops
pharma_x_tech
4
1k
【虎の穴ラボ Tech Talk #1】Ansible Lintの警告への対処
toranoana
1
110
オープニング / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
120
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
5
1k
Understanding and Optimising INP
akshayysharma
0
130
Kubernetesって何? -大規模なKubernetesを運用するKubernetes as a Serviceチームの話を添えて-
lycorptech_jp
PRO
13
4.3k
クロージング / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
110
Report of JAWS PANKRATION 2024, a global online event using Amazon IVS
yoshimi0227
1
110
mcwithcode プロジェクト概要
takunology
0
7.9k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
48
7.1k
Optimizing for Happiness
mojombo
375
69k
Unsuck your backbone
ammeep
667
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Web Components: a chance to create the future
zenorocha
309
42k
Six Lessons from altMBA
skipperchong
26
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
90
16k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Making Projects Easy
brettharned
114
5.8k
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Λग़͢ͷ͕ॏཁ
͝੩ௌ͋͟·Δਫ࢈