PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた

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 - Schema ﬁrstなvalidationライブラリ - 様々なvalidationがある - stringがurlかどうか - stringがemailかどうか
- など

スキーマ APIからのJSONをパース -> zodオブジェクトを返す

ts-node

ts-node - 毎回、TSをコンパイルする必要なし - コマンド１回でTSを実行可能

cheerio

cheerio - スクレイピングするためのライブラリ WEBページから HTMLを取得ライブラリにHTMLを与える、$としてセット $(タグを指定).attr(属性)で中身を取得

苦戦した点

苦戦した点 - 型のエラー - JSONがzodでパースできなかった - Date型かと思ったらString型だった - Promise -
Promise<void>を返す関数でawaitをつけ忘れる - バグる

良かった点

良かった点 - 型があるのでundeﬁnedとかのエラーがなかった - 型で怒られることが多かった - eslint(Linter)を入れていたので、エディタ上で怒られていた - 実行時に怒られない -
JSを触っていたので、楽にTSに入れた

感想

感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく１年後に読んでも読める(多分) - TSもJS辛いこともあった -
NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた

PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた

PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた

uutan1108

More Decks by uutan1108

Other Decks in Technology

Featured

Transcript