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
PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた
Search
uutan1108
November 02, 2022
Technology
0
160
PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた
ゆるWeb勉強会@札幌 OnLine #21
https://mild-web-sap.connpass.com/event/262287/
uutan1108
November 02, 2022
Tweet
Share
More Decks by uutan1108
See All by uutan1108
社外向け勉強会とプライベートの勉強会を開催してみて
ohmori_yusuke
1
17
勉強会に楽しさワクワクは重要
ohmori_yusuke
2
50
OpenAPI を守るのは難しい
ohmori_yusuke
2
970
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
150
Laravel を学ぶ前に書いていた require と Laravel 使い始めてから躓いた use 宣言と namespace
ohmori_yusuke
1
300
未来を拓く若手エンジニアの興味関心と目指すキャリア
ohmori_yusuke
1
260
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
470
技書博に参加したら執筆できた
ohmori_yusuke
1
430
PHPを勉強してからプログラミングが好きになった話
ohmori_yusuke
1
630
Other Decks in Technology
See All in Technology
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.2k
技術力の伸ばし方を考える
khirata
0
150
Real World Type Puzzle and Code Generation
yukukotani
4
640
My road to OSEE Part1
yunolay
0
120
【SORACOM UG 四国】今だからこそ学ぶ!IoTの全体像と最新事例、生成AIの基礎
soracom
PRO
2
190
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
790
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
430
Trade-offs all the way down
_aitor
1
110
CloudflareとHonoを使って飲食店のレビューができるLINEアプリを作った
shinaps
1
510
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
2
210
RubyKaigi 2024 - Make Your Own Regex Engine!
makenowjust
1
180
Featured
See All Featured
Web development in the modern age
philhawksworth
203
10k
Into the Great Unknown - MozCon
thekraken
15
1.1k
Gamification - CAS2011
davidbonilla
77
4.6k
A Philosophy of Restraint
colly
197
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
The Cost Of JavaScript in 2023
addyosmani
21
4k
The Language of Interfaces
destraynor
151
23k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
Clear Off the Table
cherdarchuk
86
310k
Transcript
PythonとJavaScriptで作成したアプリを TypeScriptでリプレースしてみた ゆるWeb勉強会@札幌 OnLine #21 うーたん
自己紹介 うーたん 所属 : 公立千歳科学技術大学 twitter : @uutan1108 github :
OHMORIYUSUKE 趣味 : アニメを見ること 今期は、 ぼっち・ざ・ろっく チェーンソーマン
目次 1. 作ったもの 2. 進化の過程 a. PHPバージョン b. Pythonバージョン c.
TypeScriptバージョン 3. 工夫した点 a. zod b. ts-node c. cheerio 4. 苦戦した点 5. 良かった点 6. 感想
作ったもの
作ったもの Anime Library
進化の過程
PHPバージョン
PHPバージョン(2年前) - リクエストごとにスクレイピング - 30秒かかる - 素のPHP - ペライチコード -
UI - Bootstrap
Pythonバージョン
Pythonバージョン(1年前) - github actionsで定期実行 - ユーザーの画面の表示速度は改善 - ペライチコード - エラーハンドリングなし
- data classもなし - 型ヒントなし - 読めない - UI - Chakra UI - React(JavaScript)
今回、作ったもの TypeScriptバージョン
作ったもの Anime Library
使った技術 - バックエンド - TypeScript(Node.js) - GitHub Actions - フロントエンド
- React(TypeScript) - Chakra UI
構成図 定期実行 スクレイピング、 JSONを保存
工夫した点
Zod
Zod - Schema firstなvalidationライブラリ - 様々なvalidationがある - stringがurlかどうか - stringがemailかどうか
- など
スキーマ APIからのJSONを パース -> zodオブジェクト を返す
ts-node
ts-node - 毎回、TSをコンパイルする必要なし - コマンド1回でTSを実行可能
cheerio
cheerio - スクレイピングするためのライブラリ WEBページから HTMLを取得 ライブラリにHTMLを与える、$としてセット $(タグを指定).attr(属性)で中身を取 得
苦戦した点
苦戦した点 - 型のエラー - JSONがzodでパースできなかった - Date型かと思ったらString型だった - Promise -
Promise<void>を返す関数でawaitをつけ忘れる - バグる
良かった点
良かった点 - 型があるのでundefinedとかのエラーがなかった - 型で怒られることが多かった - eslint(Linter)を入れていたので、エディタ上で怒られていた - 実行時に怒られない -
JSを触っていたので、楽にTSに入れた
感想
感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく1年後に読んでも読める(多分) - TSもJS辛いこともあった -
NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた